Group session July 1st


This is a classic milestone for any web developer.

You’ll hit it eventually / so, let’s just force it now!

You can use this article HTML if you’d like.

You type up this amazing essay for your boss at Perdue.

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!

Constrain the width

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!)

A little style

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.

Color added!

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.

Full-bleed background color

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.”


That’s where I’ll leave you

OK! So, figure it out!

In real life… there’s no how-to checklist. If they had one… then they could pay a menial worker a lower wage to do the task.

Someone will want something (unique) – and then they’ll tell you what they want… and you’ll get paid to spend the day doing that.

How long should a task like this take? Well, the first time… it’ll break your brain. So – maybe days. Then – the second time… maybe a lot less.

So – get to it!

Here is a Pen with a long article to play with.

Group session July 1st