project1-mindfulness

Main page image

Purpose

-Website on mindfulness techniques and information on mindfulness and yoga.
-This website is useful for if you want to find out more about yoga and mindfulness plus positions and techniques that you can practise.
-I created this website for educational purposes so anyone can have a read and see if they want to implement any of the techniques into their life.

How it was built

This project was created using HTML and CSS. I used HTML for all the information, images, id and class attribues (linking to CSS), tables, forms and buttons. I then used CSS to style and position all the elements. I coloured the website with pink and blue against a white background so it could be clearly read and pleasing to the eye. To target specific elements from the html I used their id or class attribute (e.g. .nav-bar) this is an effective way of targeting specific elements.

Contents:

-Ways in which mindfulness is beneficial.
-Different mindfulness exercises.
-Mindfulness reading.
-How often mindfulness should be practiced.
-A table of mindfulness apps, their rating and prices.
-Yoga exercises.
-Facts about yoga.
-Video on yoga.
-Section where users can ask any questions.

Question page image

Files

To create this website, I created four different files...
1-The first file was the index.html file which is the first page a user will come across when entering the website. This page contains the main information and benefits about mindfulness and the different techniques you can do. Contained is a table of comparisons between different website and apps a user could use for more information (the table compares pricing and rating).
2-The second file questions.html is a page which was created so that the users could provide their name and email so that they can ask any further questions if they wanted to (so that the users feel supported).
3-The third file yoga.html is a page which contains information and fun facts about yoga.
4- The fourth file was the style.css file which contains all the styling and positioning for each element.
Yoga page image

Navigation links

The navigation links I included are as followed Home, Benefits, Exercise, Mindfulness frequency, Questions and Yoga. The home link is there so that if you press another link you can press home and return to the main page. The link Benefits, Exercise and Mindfulness frequncy all link to the main page so you can find a specific section. The questions link takes you to a different page where you have the section about asking questions. The final navigation link is a link to the section on yoga which has information on yoga and fun facts about it. This link takes you to a separate page. There is also a link at the bottom of the page called "back to the top", this is quite self explanitory and once clicked takes you back to the top of the page once you scrolled down.

Navigation bar image

back to the top image

Future

In the future to increase the useability of this website I would include media queries so that my website can be used on different screen types, not just desktop. In future projects I would add media queries as I go along to make it easier to target the correct specific elements. Media queries are a quick and easy way to give specific bounderies and dimensions to your webpage so that your site looks good and can easily be read on different screen sizes.