Article layout exercise

It’s an “article”  – so, naturally, it’ll use the article element / and all of the appropriate content elements like h1, h2, p, li etc.

You checked it in the HTML Validator and it’s 100% perfect!

She says…

“Great! But – it feels hard to read. The lines are so long!”

So, you think… hmmm I’ll put a max-width on the article!

Then she says…

“Well – OK. This is better. But it’s really tight to the edges.. and still pretty hard to read.”

(You feel a little silly. You were so proud of your HTML… but now it’s kinda clear that it wasn’t that readable!)

So – you put some padding on the article element – and some line-height on the paragraphs and list items / and a max-width based on their character size (using max-width and the ch unit).

That looks pretty good!

But she says…

“why is it all to the left like that?

You can sense that she’s wondering why you didn’t think of this already. But surely – this is good enough… and she won’t have too many more requests, right?

So you use the ol’ margin-auto trick to center the article.

Tada! It’s centered!

She likes that. It matches the other stuff. It looks “normal” now. (even though… some might say it looked pretty cool on the left like that…)

“But it’s sooo white!”

She exclaims! She suggests a little bit of background color.

So you head off to put the background-color on the article.

But she doesn’t like that. She says she wants it on the whole page. So, you put it on the body element instead of the article element.

She likes that. But now – she thinks it’s kinda “boring”

She says:

“What if each section of the article (each heading and its associated content) could have its own background-color and color? so that the page felt broken up and more digestible? Can you do that please? And have the background color – go all the way across the page.”

and……

That’s where I’ll leave you