From Design to Code - HTML & CSS From Scratch - Frontend Mentor

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore the process of transforming a design into code through a Frontend Mentor challenge in this comprehensive tutorial video. Learn how to analyze a design, write HTML structure, and implement CSS techniques including flexbox, grid, custom properties, and variable fonts. Follow along as the instructor breaks down their thought process, covering topics such as font-face declarations, custom properties, CSS resets, and layout strategies. Gain insights into creating responsive designs, styling different sections, and fine-tuning padding for a polished result. Perfect for frontend developers looking to enhance their skills in HTML and CSS implementation.

Syllabus

- Introduction
- Analysing the design and writing the HTML
- CSS - setting up the font-face declaration
- The custom properties
- A simple reset
- The base styles
- The result-summary layout
- The result section
- The relationship between the two columns
- The summary section
- Fixing the padding