Frontend Mentor - Project Tracking Intro Component Solution

This is a solution to the Project Tracking Intro Component Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • 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

Links

• Live Site URL: https://kens-visuals.github.io/project-tracking-intro-component/
• Solution URL: https://www.frontendmentor.io/solutions/project-tracking-intro-component-with-scss-css-animations-and-bem-pdiPZBEWn

My process

Built with

• Semantic HTML5 markup
• SCSS custom properties
• CSS Flexbox
• CSS Grid
• CSS Animations
• Vanilla JS
• Mobile-first workflow

What I learned

In the Blogr Landing Page, there were sections similar to this project. The image was slightly out of the screen and when I was first implementing it, the part was a bit frustrating for me. However, that experience helped me to build this project a lot faster and a lot cleaner. This was the last small project of this level, the rest are whole landing pages. And I've got only 5 projects left to finish this level completely. I'm going to finish them by the end of the year.

Useful resources

• animista - In case if you were wondering, I got the blink animation from here. Yes, I was pretty lazy to make one by myself.
• CSS Box Shadows - My go to place for some cool CSS box-shadows.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals