The prinCSS and the p (tag) đź«›
We’re each going to take one of Hans Christian Andersen’s fairy tales and turn it into a nice webpage that tells the story through our newly learnt layout-ing and styling skills. 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 floats 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 from yesterday 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 that you haven’t tried before. 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 story from the Andersen collection and reading it. Don’t just skim because you need to understand the mood, the key moments, the characters. 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, you need to get it reviewed by me at least once.
Day 2-3 - 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.
We will review everyone’s sites tomorrow afternoon.
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 24), you should have at least started on coding some of your page. At the bare minimum, I would want you to have your index.html and some styles written. Feel free to copy the starter index.html we used from yesterday. 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 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).