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.
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
- Live Site URL: https://ameyadeokule.github.io/creative-dev-landing/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- SASS
- JavaScript
- 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.
Would like to convert this webpage to a React SPA.
- 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.
- Name - [Ameya Deokule]
- Frontend Mentor - @ameyadeokule
I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.