Health = Wealth
Health = Wealth is a webpage that hopes to teach people self improvement techniques. The site will be targeted towards people who are interested in learning self development methods. Health = Wealth will be useful for people who want to take a holistic approach to improve their physical and mental health
Features
-
Navigation
- In the top left corner of the page is the website name which links to the top of the page.
- To the right of the name is an interactive navigation bar, allowing users to navigate to different sections of the site with ease.
- The navigation links are displayed in a colour which contrasts with the background.
- The navigation clearly tells the user the name of the site and what the different sections are.
-
Main image + Cover text
- The main image is there to catch the users eye.
- the cover text displayed along-side the main image clearly explains to the user what the site is for.
-
Content Sections
- Each section is clearly labled with the headings and text content displayed in a colour that contrasts with the background
- Each section features a brief explination to familiarise users with the self improvement technique focused on in the section.
- Each section features an instructional video for users to follow along with.
- Users can pause, play and adjust the audio level on each video.
-
Sign up section
- The sign up section features a form to collect user details so they can recieve self-improvement tips through email.
- The form collects a users first name, last name and email address.
- This section is valuable as it allows users to sign up to recieve information on self improvement methods through their email.
-
Contact section
- The contact section encourages users to get in contact through social media.
- It features clickable social media icons that can be used to find Health = Wealth on Facebook, Twitter and Instagram.
- This is valuable as it allows users to find and interact with Health = Wealth if they wish to.
Testing
- I tested that the site works in different browsers: chrome, Internet explorer, DuckDuckGo.
- I confimed that the site is responsive and functions on all standard screen sizes using Dev. tools.
- I confirmed that all sections of the site are readable and easy to understand.
- I confirmed that the form works as intended: Can't submit a blank form and will only accept email in email field.
Bugs
- Initially HTML would not validate because of spaces in my video filenames. Removing the spaces fixed the issue.
Validator testing
- HTML: No errors were returned when passed through the official W3C validator.
- CSS: No errors were returned when passed through the official (jigsaw) validator.
- Accessibility: Confirmed that colours and fonts chosen are easy to read and accessible by running it through lighthouse in Dev. tools.
Deployment
- The site was deployed to GitHub pages. The live link can be found here -https://lilsliceofpie.github.io/Thesauce/
Credits
- Some of the code at the top of style.css was taken from the CI Love Running Project.
- Meta tags in HTML Header and Part of the code to make social media links in Footer was taken from the CI Love Running Project.
- The image in the header was taken from Pexels
- The video in the Meditation section was taken from the Youtube channel "Goodful"
- The video in the Breathwork section was taken from the Youtube channel "Wim Hof"
- The video in the Calesthenics section was taken from the Youtube channel "THENX"