Learn to transform a design into functional HTML and CSS code in this comprehensive tutorial video. Start by writing the HTML structure, then apply CSS techniques including resets, custom properties, and @font-face. Progress through general styling, list formatting, and form design. Master advanced concepts like creating gradient shadows and implementing CSS-only error states. Explore responsive design by changing image sources and updating layouts for larger screens. Perfect for frontend developers looking to enhance their skills in translating designs into polished, responsive web pages.
Overview
Syllabus
- Introduction
- What we are starting with
- Writing the HTML
- CSS Reset + custom properties
- @font-face
- General styling
- Styling the list
- CSS organization
- Styling the form
- Making a gradient shadow
- The error state with CSS-only
- Changing the picture source for large screens
- Updating the layout for large screens
Taught by
Kevin Powell
