Learn a straightforward approach to translating static design files into code layouts in this 23-minute video tutorial. Discover how to break down complex designs by drawing boxes around elements, organizing those boxes, and converting the layout into HTML. Explore techniques for handling smaller design components and understand the importance of considering desktop designs even when coding mobile-first. Practice breaking down layouts using existing websites and gain insights on choosing between flexbox and grid for optimal layout implementation. Master the art of transforming design concepts into functional code with practical tips and strategies.
Overview
Syllabus
- Introduction
- Draw boxes around EVERYTHING
- Then see how those boxes are organized
- Turning the layout into HTML
- Doing the same thing for the smaller pieces
- Why I look at the desktop design even if I code mobile-first
- Using existing websites to practice breaking down layouts
- Picking between flexbox and grid
Taught by
Kevin Powell
