Fit to `<p>`rint 🗞️

We’re each going to take a piece of writing and turn it into a nice webpage that tells its story through our newly learnt layout-ing and styling skills. Pick one of two tracks:

Fairy tales: one of Hans Christian Andersen’s stories from the Andersen collection.
Newspapers: a page or article from a historical South Asian newspaper in the South Asia Open Archives. Here the challenge is editorial because you have columns, headlines, decks, bylines, dense text made readable and beautiful. Think of it as reviving one printed page for the web.

Whichever you pick, I encourage you to think of this as your first real web design portfolio piece, something you’d actually want to show someone. Spend time on it to refine your ideas and visual language, typography and colors and images you’re working on.

Expectations

This project needs to demonstrate that you can handle the fundamentals we’ve covered, plus push yourself to try some new things. Here’s what I would say needs to be in there:

You need to use both flexbox and the other tools you learnt over the last few days somewhere in your design.
Your font choices should match the mood of your tale. Use web fonts, play with sizes and spacing, make text feel intentional.
At least three images that aren’t just thrown in randomly. Process them properly - crop them, resize them for web, make them part of the storytelling. NO AI IMAGERY. Refer to the image pools or assemble your own images (either by drawing your own or using publicly available material).
Find idea from CSS Zen Garden that inspires you and figure out how to steal… I mean, be inspired by their approach and adapt that concept to your story.
Pick one technique from Jen Simmons’ labs. Maybe it’s just making the first letter nice and big like a dropcap, maybe a float layout, maybe text wrapping around an image. Here’s some of her cool stuff that you can just use browser tools to see the CSS for.

Initial Letter Explorations by Jen Simmons

Multicolumn Explorations by Jen Simmons

CSS Shapes Explorations by Jen Simmons

Overlap Explorations by Jen Simmons

Timelines

Day 1 - Planning and Prep

Start by choosing your source material and reading it closely. On the fairy tale track, pick your story from the Andersen collection; on the newspaper track, browse the South Asia Open Archives newspapers and pick a page or article that grabs you. Don’t just skim because you need to understand the mood, the key moments, the characters (or, for a newspaper, the story it’s telling and how it was laid out). Then sketch out your design. I don’t care if you use paper or Figma, but you need a plan before you start coding. Think about what should grab attention first, how the story flows down the page, what mood you want to create.

While you’re sketching, start collecting your assets. What fonts feel right? What images do you need? What’s your color palette going to be? Get this stuff ready so you’re not hunting for images when you should be coding.

Before moving forward with coding, you need to get it reviewed by me at least once.

Day 2 - Building and Polishing

Write your HTML first. Get the content structured logically with proper headings and elements. Then start styling, but do it methodically. Typography first, then layout, then the fancy stuff. Don’t try to do everything at once. Get one section looking great, then move to the next. And search as you go - when you want to achieve something specific, take a moment to research the best way to do it.

You will get stuck. That’s part of learning. When it happens, first try to be more specific about what you’re searching for. Instead of “how to make text look good,” search for “CSS drop cap first letter” or “CSS pull quote styling.”

If you’re stuck for more than 15 minutes, ask for help. Don’t suffer in silence - part of being a web-design-person is knowing when to ask for help and how to ask good questions.

Also, remember that simple and well-executed beats complex and broken every time. If something isn’t working, try a simpler approach first. Even whitespace can look good.

Make it something that you think is worth looking at.

Checkpoints

Ensure that Aman has seen your design and general direction at least once. No coding before that has been discussed a little bit.

At the end of Thursday (Jul 23), you should have at least finalized your page’s basic design and art direction. You will be expected to write about what progress you’ve made in your dev notes for the day.

For today’s dev notes, mention any thing that you absolutely could not understand how to do and would want more help with. This will help me help you tomorrow and compile an FAQ for your reference.

We’ll be continuing working on these tomorrow (Friday, Jul 25).

Fit to <p>rint 🗞️

Expectations

Timelines

Checkpoints

Image Pools

Fit to `<p>`rint 🗞️