Mind-Spa NG is currently carrying an in-house training assessment for its development team. This repository will be used to test the growth of our frontend team members.
Take a close look at this UI: https://www.lapa.ninja/post/cosmos-network/ and replicate its design in your web-app alongside a few modifications you decide to make with the following technologies: HTML5, SCSS, Bootstrap4 and JavaScript. It is important that you make use of VScode during this process. Pictures and icons can be sourced from the following places: Unsplash, Pexels, Bootstrap Icons etc. (Website flow can be viewed using: https://cosmos.network/?ref=lapaninja).
While designing your web app, you are to follow the user journey with the following user stories:
- the web app to have a Poppins font specifically imported from Google fonts so that the entire site will read better
- the code to have SCSS variables, mixins and other functionalities that will reduce redundant CSS code
- bootstrap 4's css to be linked to the html page as well as the SCSS link to make development
- well labelled Github descriptions with every new push or pull.
- test out the web app from its hosted space on GitHub.
- see proper documentation that documents your process through development through your README.md on Github
- see commits made to GitHub so that I can follow through with the entire building phase of this project
- a nav-bar containing the logo and a learn, build, explore, sign in and sign up sections on my landing page so that customers coming to my web application can navigate easily.
- the landing page to be responsive across all screen types so that customers can easily access the web app from different screen sizes
- the sign up section to have a pop-up sign up sequence that authenticates the user
- the sign in section to have a pop-up sign in sequence that authenticates the user
- images selected to be of reduced quality so that the web app loads faster
- The sign in and sign-up functionality will not authenticate if the user does not input all required details into the necessary text fields and an error will be received instead
- The error received when the sign in or sign up functionality fails to authenticate will be in form of a pop-up and will clearly indicate the error in terms customers can easily understand
- The message received when the sign in or sign up functionality authenticates will be in form of a pop-up which will clearly indicate the success message to the customers in ways they can easily understand
- I copied the url of the repository created for my challenge on Github and pasted in my code editor (VS Code)
- I added folders for the HTML, CSS and Javascript files
- I downloaded Bootstrap 4 and added the folder to my working environment
- I included the file paths for Bootstrap 4's CSS, JS, JQuery and Popper files in the body of my HTML file
- I included the link to my Font Awesome kit in the head of the HTML file to be able to access the Font Awesome icons
- I used variables for colors and mixins for other CSS styles in the SCSS file to avoid repetition of code
- Images were gotten from iStock and Pexels
- Icons were gotten from Flaticon and Font awesome