Group session July 1st


We’ll write some things… and mark the chapters /  but here’s the video now


In the previous lessons (we’re somewhere around day 110 in the course) – we built out the HTML and CSS armature. Now, we’re working on the style tile.

Style tile

Derek made this style tile based on some JavaScript books laying around the office.

What is the content that will be needed? How might they be treated visually?

What types of fonts? Size? Weight? What colors? Textures? Borders? Line quality?

Basic example

You can get a lot fancier… if you have time – and you push the boundary and ask lots of questions.

One way to think about it

  1. Pick 3 pages – from your research —-
  2. Look at their fonts and colors. Are there 1 font? 2 fonts? Serif, Sans serif — ??
  3. OK. Good. Pick out some fonts. Set a timer.
  4. How are the links in the header treated? Sentence case, Uppercase? Decorations – underline?
  5. How is the welcome/hero area treated? What should you do there? Background image? Illustration? What about the contrast between heading and body copy?
  6. How are the CTAs going? Heading size? anything tricky? CTA buttons? Background texture… or what? How do you make it fun?
  7. How to deal with the articles section? Images? buttons? Corners? Straight? Background image? — hovers?
  8. Another CTA / can mostly be the same? Or totally different?
  9. Footer — can mostly be the same link styles as the header — / add some headings to the link list
  10. Logo? You don’t need one. Don’t get lost! If you have time… Keep it simple. Get someone else to make it for you. That’s easier!

First one

Second one

Group session July 1st