/mindspang_frontendtraining_uyoyo-1

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.

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

mindspang_frontendtraining_uyoyo

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.

Description

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).

Guidelines

While designing your web app, you are to follow the user journey with the following user stories:

As the team lead of the dev team I want:

  • 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.

As the product manager, I should be able to:

  • 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

As a client, I want:

  • 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

Deployment

  • 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

Media