Rituals
This website can be accessed by this link
Here is a link to preview the website on all screens Responsive Preview
- As a visitor, I want to know main goal of the site, so I can know how to function it.
- As a visitor, I want to be able to change the theme of the site, so I can adjust it to the time of the day for better vision.
- As a visitor, I want to simply add rituals, so I can track them.
- As a visitor, I want to simply name the rituals so I know what I'm tracking
- As a visitor, I want to be able to track the completed rituals, so i can see what rituals i completed and what i need to complete
- As a visitor, I want to be able to remove rituals, incase i added one accidently.
- Lightmode
This colour pallete has been used as it is very calming and easy on the eye. Green and the shades of green have many psychological benefits. I used it specifically as it goes incredibly well with the purpose of the website. Green is a symbolical colour for GO and Passing and accomplishment that's why. I used it here as the whole purpose is to realign users lifes. By getting them to show up everyday to achieve small habits and improve drastically over time. 1% improvement a day is a 365% improvement by the end of the year.
This google font was used as it is very aesthetic and extremely readable.
- HTML was used as the foundation of the site.
- CSS - was used to add the styles and layout of the site.
- CSS Flexbox - was used to arrange items on the pages.
- CSS Grid - was used to make the hero section responsive.
- CSS Grid-Template-columns - was used in hero section.
- CSS roots was used to declaring global CSS variables and apply them throughout the project.
- Balsamiq was used to make wireframes for the website.
- VSCode was used as the main tool to write and edit code.
- Git was used for the version control of the website.
- GitHub was used to host the website.
- remove background was used to remove backgrounds from images.
- FontAwesome used for icons in the pricing cards.
- UI Amiresponsive Preview responsiveness of website.
- Javascript Functionality of the website.
- iconsax.io all the icons on the website
Html validation passed with no warnings.
CSS validation passed with no warnings.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
In order to make a local copy of this project, you can clone it. In your IDE Terminal, type the following command to clone my repository:
-
git clone https://github.com/Omar-Alme/rituals-tracker
-
- Flexbox used this to but elements into two a row.
- Lightmode toggle helped with the functionality of the toggle
- Darkmode toggle helped me build the lightmode toggle.
- Udemy javascript course helped me with all the javascript functionalities.
All my media and icons have been retrieved from iconsax.io as well as iconscout.
- I would like to acknowledge Chris Pennington for the design idea for the website.
- I would also like to acknowledge the authot of Atomic habit James clear, as i was reading he's book when i decided to make a habit tracking application.