An online library of meditation and yoga classes that focus on stress and anxiety relief.
Goal of this website: give information about an application that helps people be more wholesome.
Users need: more available online platforms that help to relax and relieve everyday stress.
Importance: to be able to live healthy and fulfilled lives with healthy minds.
This website presents a starting business, tells what the library would be about, and gives an opportunity to sign up. The log-in details would be sent by email - after log-in we would be able to see the videos.
Specific stand-out:
-
All the videos would be made by certified and professional yoga masters.
-
People can use the app anywhere anytime.
How they can get access to the information: short paragraphs, only relevant information, with a menu that helps them to find what they are looking for.
I. Logo & menu - on the top - for easy navigation.
II. The name and short description of what the page is about.
III. Giving reasons for using the website - users concider why they need the app, and what can it help with.
IV. Specifying why to choose this app over others, and what are the advantages.
V. Sign up form, where the users can register to be a member.
VI. Contact details - for the users who have questions and social media links to find out more information about the business.
Summary: The users see what the website is about, then think about if they need it, see the advantages, why this website is a good option over other platforms, get the option to sign up and try it out, and then also the option to read more or get in contact.
- Adding basic files and folders.
- Adding meta tags - keywords, description and CSS link - make the background-color red to test it.
- Deploying my site, to see if everything works.
- Taking notes and print screens.
- Considering UX principles planning the main sections with text.
- Writing text first in a text document - to check the text for correct spelling, grammar and semantics.
- Writing the HTML document with background color, to see if the structure is fine and also it is easier to visualize the design how big space the paragraphs take.
Starting to write HTML:
-
Design layout on wireframe
The bigger the screen the more columns can have.
Wireframe for mobile:
Wireframe for tablet:
Wireframe for desktop:
For bigger screens I changed the layout during coding, so it looks and functions better.
-
Completing HTML text with links, form details, sign up button, icons and classes to be able to apply the layout and design.
-
Creating toggle menu.
-
Finding background images, color palette and font family that fits to the project.
Image: related to the topic, so when the users look at it, they instantly know what the page is about.
Color palette: I chose calming colors from the main photo with a color picker.
Choosing the main color with color picker:
Font family: I chose two types, one is pretty for the titles and logos, the other is simple and easy to read.
I was working on sections one by one, making them also responsive:
- Changing the layout of Menu (checkbox toggle is not working) and making header responsive.
- Adding pseudo classes.
- Making background image responsive and adding aria labels to that. Adding color under the image in case it doesn't load.
- Positioning h1 and h2 - check in developer tools.
- Styling About section, making it responsive.
- Styling Sign up section and making it responsive.
- Styling footer, making it responsive.
-
Changing images to smaller format for faster loading.
-
CSS validator - mistake: font-style: bold - corrected to font-weight: bold.
-
HTML validator - a meta element was missing the closing tag - corrected.
-
Lighthouse check - laptop 100%, mobile 75% - compressed image one more time.
-
Optimizing font-size as a general CSS rule.
If the users use the menu instead of scrolling, they should be able to see the Sign up section in one piece.
- Working with the live server - to see immediately the changes.
- Using prettier for an easier, more smooth coding process and to note mistakes easier.
- Testing continuously and paying attention of problems on the terminal.
- Using keyboard shortcuts and Emmet for the faster process.
- Continuously checking and trying out things in developer tools.
- Commiting and pushing all changes.
Programs:
Planning:
Font family:
Images and icons:
Color palette:
Validating:
-
Checkbox toggle was not working on the one-page website, because the menu jumps back only when the page is refreshed.
-> Removed toggling, made the menu smaller on the top of the page. I divided the logo and the menu links to two rows, so there is enough space for them, they are readable and easy to click/tap on.
-
Header covered the sections when they were open from the menu links.
-> Added padding top - at least the size of the header.
-
There was a LOCK file in the repository so I couldn't commit.
-> Deleted it manually.
-
Menu covered the logo.
-> Added z-index.
-
Prettier ruined the consistency of HTML format.
-> In settings > user > extensions > prettier I marked the Prettier: Bracket Same Line checkbox. It didn't work. So I disabled the extension in the end, and used HTML Format extention instead.
- Log in to my GitHub account
- Go to Your repositories in my menu, and select Yoga-project
- Choose Settings from the project's menu
- On the left side under Code and automation select Pages
- Under Source select Deploy from a branch
- Under Branch select Main, /(root) and click on Save
- Go back to Code in the project's menu on the top
- On the right side in Deployments section click on Github-pages
- On the left side under Deployments click on Enviroments
- Under Active deployments and Github-pages I can click on the project's deployed link and open it
-
Open the Github repository https://github.com/saroltah/yoga-project
-
Select the green Code dropdown, under Clone copy the HTTPS link
-
Open your IDE, and your chosen directory in it
-
Open your terminal and type git clone and paste the link
-
Now the clone is ready to be used.
Tried on mobile, tablet, laptop and desktop screen view.
| What to do | How to do | Expected outcome | Actual Outcome |
|---|---|---|---|
| Header, menu and logo always visible | Scrolling the page, clicking on menu links | Header, menu and logo always visible | Header, menu and logo always visible |
| Home link leads back to Home section | Click on Home link | Goes back to homepage, where h1 and h2 is visible | Goes back to homepage, where h1 and h2 is visible |
| About leads to About section | Click on About link | Goes to About section, the Who are we? paragraph is visible | Goes to About section, the Who are we? paragraph is visible |
| Sign up leads to Sign-up section | Click on Sign up link | Goes to Sign-up section, where the sign up form is visible, with all questions and button | Goes to Sign-up section, where the sign up form is visible, with all questions and button |
| Contact leads to Contact section | Click on Contact link | Goes down to the bottom of the page so the whole Contact section is visible | Goes down to the bottom of the page so the whole Contact section is visible |
| The menu links change color when clicking on them | Click on the links one by one | They all change color (from black to brown until clicking somewhere else) | They all change color (from black to brown until clicking somewhere else) |
| The header layout is different for laptop (or bigger) screens | Resize the page in developer tools | Logo and menu is in the same line | Logo and menu is in the same line |
| The About section image has background on tablet size and bigger | Resize the page in developer tools | The About section image has two rectangles behind it | The About section image has two rectangles behind it line |
| The text and email type of input hover is working | Pointing the cursor on them, then click on them one by one | They all change color - from brown to light blue when we are hovering. Also the borders change color when clicking on them (browser default) | They all change color - from brown to light blue when we are hovering. On mobile I can not hover, but I can tap it long for the effect. The borders change color when clicking on them (browser default - I didn't change default, because I think it looks good.) |
| The submit input hover is working | Pointing the cursor on it, then click on it | It gets a light blue box shadow instead of brown, and the border disappears. | It gets a light blue box shadow instead of brown, and the border disappears |
| The text input fields are required | Trying to submit them empty one by one | It doesn't let submit, it writes out that the field needs to be filled | It doesn't let submit, it writes out that the field needs to be filled |
| The email input field is required | Trying to submit it empty, then without the @, then without anything in front of @, then without anything after @ | It doesn't let submit, it writes out that the field needs to be filled with the right email format | It doesn't let submit, it writes out that the field needs to be filled with the right email format |
| The submit button is working, and the form attributes are correct | Click on Sign up button | It shows the written data on Code Institute's form-dump page | It shows the written data on Code Institute's form-dump page |
| The input name and value is added correctly | Submit the data (click on Sign up button) | On Code Institute's form-dump page the Input name and Value table is correct | On Code Institute's form-dump page the Input name and Value table is correct |
| The Footer has different layout on tablet size or bigger | Resize the page in developer tools | The contact icons have no longer border, and the logo icon appears on both side | The contact icons have no longer border, and the logo icon appears on both side |
| The contact icons change color, and cursor turns to pointer when hovering on them | Hover on a contact icon | They change color to brown from black, the cursor turns to pointer | They change color to brown from black, the cursor turns to pointer |
| The Facebook icon / link is correct and opens in a new tab | Click on Facebook icon | It opens Facebook page in a new tab | It opens Facebook page in a new tab |
| The Instagram icon / link is correct and opens in a new tab | Click on Instagram icon | It opens Instagram page in a new tab | It opens Instagram page in a new tab |
| The Twitter icon / link is correct and opens in a new tab | Click on Twitter icon | It opens Twitter page in a new tab | It opens Twitter page in a new tab |
| The Email icon / link is correct and opens in a new tab | Click on Email icon | It opens my email server with the receiver's email address:[email protected] in a new tab | It opens my email server with the receiver's email address:[email protected] in a new tab |
| Responsive on all screen sizes | Open developer tools and check, use Am I responsive? website | It looks good and all the functions are working properly in all sizes | It looks good and all the functions are working properly in all sizes |
| Correct CSS file | Copy the code to W3C CSS validator website. | There are no errors | There are no errors |
| Correct HTML file | Copy the code to The W3C HTML validator website | There are no errors | There are no errors |
Checking email input:
Checking submit button and form details:
Checking twitter icon:
Am I responsive?
HTML validator:
CSS validator:
Lighthouse check for desktop devices:
Desktop:
- Performance: 100%
- Accessibility: 100%
- Best Practices: 100%
- SEO: 100%
Mobile:
- Performance: 96%
- Accessibility: 100%
- Best Practices: 100%
- SEO: 100%
Font family:
- Inspired by my own Bob Ross project
Images and icons:
Special thanks to Code Institute and my mentor Ronan McClelland for reviewing, helping and answering all my questions.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent