Chapter 4

Creating the Page Layout

IN THIS CHAPTER

Bullet Understanding page layout basics

Bullet Learning the fundamentals of Flexbox layouts

Bullet Getting a grip on Grid layouts

Flexbox is essentially for laying out items in a single dimension — in a row OR a column. Grid is for layout of items in two dimensions — rows AND columns.

— RACHEL ANDREWS

Why are some web pages immediately appealing, while others put the “Ugh” in “ugly”? There are lots of possible reasons: colors, typography, image quality, the density of exclamation points. For my money, however, the number one reason why some pages soar while others are eyesores is the overall look and feel of the page. We’ve all visited enough websites to have developed a kind of sixth sense that tells us immediately whether a page is worth checking out. Sure, colors and fonts play a part in that intuition, but we all respond viscerally to the big picture that a page presents.

That big picture refers to the overall layout of the page, and that’s the subject you explore in this chapter. Here you discover what page layout is all about, and you investigate two CSS-based methods for making your web pages behave the way you want them to. By the time you’re ...

Get Web Coding & Development All-in-One For Dummies, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.