Frontend Mentor - Creative agency single-page site

This is a solution to the Creative agency single-page site 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
• Acknowledgments

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

Screenshot

Links

• Live Site URL: https://ameyadeokule.github.io/creative-dev-landing/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS
• JavaScript

What I learned

• Using BEM naming convention and the reason behind the naming convention, albeit I haven't learned to use it properly.
• Using SASS to make an entire webpage, this is my first complete SASS project.
• Use of mixins
• Understood the method of not scrolling while there is a particulat class active.
• To add a tint on a webpage and toggling it using the visibility property.
• Animating the burger menu in the mobile view.

Continued development

Would like to convert this webpage to a React SPA.

Useful resources

• BEM 101 - This helped me for understand BEM and its advantages. I really liked this naming principle and will use it going forward.
• A Complete Guide to Flexbox - This section helped me in better understanding flexbox and how the arrangements world
• A Complete Guide to CSS Media Queries - This is an amazing article which helped me finally understand breakpoints and how to handle HTML elements on a much smaller screen using CSS media queries.
• CSS Tricks for Grid - Helped to understand CSS grid fragments.
• 4 reasons your z-index isn’t working (and how to fix it) - showed to how to fix my overlay non selection problem while providing an overlay.
• SASS Tutorial #5 - Mixins - Showed me exmaples how to create mixins, their advantages and usage.
• CSS Overlay Techniques - helped to understand methods to add overlay seen in the mobile menu .
• Hambuger menu icon animation - collection of many types of animations to animate the hamburger menu.

Author

• Name - [Ameya Deokule]
• Frontend Mentor - @ameyadeokule

Acknowledgments

I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.