What is web design?

Web design is all about what shows up on the page, and how it looks and behaves. All of these parts are connected - what HTML elements you choose is closely tied to how they look!

What an element does is connected to how it feels to use it. For example, it's helpful to the user if a link looks changes color when they click it or hover over it with the cursor.

Learning web design means learning what a good website or feature looks like, and how to actually make it happen in code. It's about both the skills and about judgement.

You won't become a master web designer in just a week. You will learn to use CSS properties that determine the appearance of web pages, and you'll start to develop your best judgement for seeing what makes a design good or bad.

Noticing

Designing a site to look good starts with noticing what doesn’t look right. Then, you can make large or small changes to the design to fix it.

You’ve already visited plenty of websites in your life, and you’ve probably noticed that some sites look good, and others look bad. Now, you’ll need to hone this skill to notice why you feel this way about some sites.

Practice: Noticing

What makes a site look good?

Everyone has different taste in design, so there’s no universal “best” styles. Even so, some sites seem better to more people or are easier to use. Usually, what makes sites look good is a combination of just a few characteristics:

  • Text Styling
  • Spacing
  • Colors
  • Box model
  • Layout

CSS has tools for styling each of these. We’ll focus on some of these in the next few lessons.

Try it: Web Design in 4 Minutes

What you’ll learn this week

Text Styling

  • Font size, line spacing, line length
  • Font families, font weights, and how to use web fonts
  • Styling lists, links, and emphasized text

Colors

  • Contrast and readability
  • Choosing a palette
  • CSS Color values

Box Model

  • The CSS Box Model
  • Margin, padding, and borders

Reflection: Sites with Good Design

Practice: CSS Diner

You're going to be using CSS Selectors a ton this week.

If you skipped it in Week 1 (or if you just want to practice selectors more), CSS Diner is a great place to practice selectors.

There are 30 short exercises to practice selecting the plates, the food, or the table.

Try to get 5 levels beyond where you got last time!

Further Exploration

If you want to read more about visual design, see Clean Up Your Mess: A Guide to Visual Design For Everyone (10 min).

It discusses what makes a design “clean” and how to communicate what’s important. In particular, it focuses on how to use spacing, size, proximity, and alignment to create contrast and a visual hierarchy.