CSS TutorialLesson 48Free preview

CSS Website Layout

This lesson is part of CSS · All levels

Summary

The layout of a web page generally consists of header, navigation, main content, sidebar, and footer that are made from structural elements and then sorted through CSS. Modern approaches use CSS Grid for the large frame of a page and Flexbox for the parts inside. A responsive layout ensures a neat layout from small to large screens.

Key points

The page's general framework: header, nav, main content and sidebar, then footer.
CSS Grid is suitable for dividing large areas of a page, such as content columns and sidebars.
Flexbox fits to arrange items within a single section, such as a line of buttons or cards.
Responsive is created with media queries as well as relative units such as fr, %, vw, and clamp().
The logical order of content in HTML should remain logical even if the visual layout changes.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.