Beginner

CSS: Creating Layouts

css · layouts · html · web · fundamentals · frontend · development · layout · page · responsive · components · grid · clean · flexbox · pies · designing · home · study · visit · accessibi...

Creating a layout is the foundational activity of building a website. A well-made layout displays properly across a wide variety of devices and forms the structure of the entire web development project — a project can succeed or fail based on how the layout is implemented. This course presents a framework for approaching layout: starting with the firmest possible foundation and ending with a complete, responsive website. Major topics include planning a web layout before writing any code, implementing that layout in a modular and responsive way, and implementing each component so that it responds gracefully to a wide variety of shapes and sizes.

Throughout the course, a running case study is used: Bethany's Pie Shop, a small business website with four pages (Home, About, Pies, Visit Us) that is built from nothing to a complete, responsive site.

Familiarity with basic HTML and CSS is assumed. The course does not define fundamental terms for Flexbox or Grid — instead, it deepens and reinforces existing knowledge of them.

Sign in to read this course

A free account unlocks all 514 courses. 20 are readable without one.

What's inside

11 sections
  1. 1 Table of Contents
  2. 2 Module 1: Course Overview
  3. 3 Module 2: The Responsive Layout Process
  4. 4 Module 3: Designers and Front-End Developers
  5. 5 Module 4: Layout Principles and Patterns
  6. 6 Module 5: Clean Code and Accessibility
  7. 7 Module 6: Flexbox and Grid Revisited
  8. 8 Module 7: Building a Responsive Layout
  9. 9 Module 8: Building Responsive Components
  10. 10 Module 9: Summary and Next Steps
  11. 11 Summary

Interested in this course?

Contact us to book it or get a custom training plan for your team.