Frontend Mentor - Html & Css Challenges

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview

Links

• 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

My process

Built with

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

Useful resources

• 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

Author

• Frontend Mentor - @gauravgorane