Frontend Mentor - Project tracking intro component solution

This is a solution to the Project tracking intro component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• Create the background shape using code

Screenshot

screenshot.png

Links

• Solution URL: Github
• Live Site URL: Live Github

My process

Built with

• Semantic HTML5 markup
• Bootstrap custom overrides
• Bootstrap
• Sass/SCSS
• Jquery
• Mobile-first workflow

What I learned

• How to use a single clickable element that toggles between on/off and changes image between each click using Jquery
• I also was able to create a menu from the navigation element in mobile view
• The background shape was relatively easy. The hardest part was moving it to the correct location in the different views.

Continued development

• Daily tutorials and projects in HTML5, CSS3, Javascript, Bootstrap, Sass/SCSS. For now, in time I will go re-learn React ect.

Useful resources

• Jquery api documentation
• Geeks for geeks

Author

• Website - One of my latest codepens
• Frontend Mentor - @cmb347827