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
You checked it in the HTML Validator and it’s 100% perfect!
“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
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
Full-bleed background color
She likes that. But now – she thinks it’s kinda “boring”
“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.