This is a solution to the Huddle landing page with single introductory section 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 page depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: https://www.frontendmentor.io/solutions/mobile-first-single-section-huddle-landing-using-sass-and-css-grid-mAPG8kb1D
- Live Site URL: https://ameyadeokule.github.io/huddle-singlepage/
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
- SASS
- Basics of SASS workflow.
- Grids in SASS.
- Creating multiple helper classes for reusability.
Convert the Landing page into NEXT JS application
-
CSS Tricks for Grid - Helped to understand CSS grid fragments
-
CSS Tricks Pseudo classes selector - Helped me to understand ::before and ::after sudo classes and how to style them.
-
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.
-
Mastering Advanced Sass & Workflow - This article helped me understanding the advance SASS features and workflow along with best practices to be used while coding with SASS.
- Name - [Ameya Deokule]
- Frontend Mentor - @ameyadeokule
I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.