Frontend Mentor challenges help you improve your coding skills by building realistic projects.
-
Solution URL: https://github.com/gauravgorane/Frontend_Mentor
-
Live Site URL:
Index No. Challenge Title Preview Site View Code 1 QR code component Link Link 2 Social links profile Link Link 3 Blog preview card Link Link 4 Profile card component Link Link 5 Product preview card component Link Link 6 Order summary component Link Link 7 NFT preview card component Link Link 8 3-column preview card component Link Link 9 Results summary component Link Link 10 Stats preview card component Link Link 11 Recipe page Link Link 12 Huddle landing page with a single introductory section Link Link 13 Single price grid component Link Link 14 Four card feature section Link Link 15 Social proof section Link Link 16 Testimonials grid section Link Link 17 Huddle landing page with alternating feature blocks Link Link 18 Huddle landing page with curved sections Link Link 19 Clipboard landing page Link Link 20 Fylo landing page with two column layout Link Link 21 Chat app CSS illustration Link Link 22 Fylo data storage component Link Link
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Perfect Pixel - This is an very useful browser extension that allow you compare with the design image and thus see the exact dimensions.
- Modern CSS Reset - This is an amazing article which helped me to understand CSS Reset.
- Use rem instead of px - Why font-size must NEVER be in pixels.
- Boxicons - High Quality Web Icons.
- CSS-Tricks - A Complete Guide to Flexbox
- Frontend Mentor - @gauravgorane