Design

Building Websites: Design from Sparkbox on YouTube.

Exercises

Describe Your Mood (1:30)

  1. Using your topic and goal, write down some words you would use to describe the “mood” or feel you would like your site to have.

Choose Your Colors (3:00)

  1. Using your descriptive, words find 2-3 colors that reflect your website’s mood.
  2. Visit our collection of Named Colors for some color values to get started.
  3. Make a note of the color names in your color palette and we will use those names in the next section when we style your website.

Choose Your Fonts (5:40)

  1. Using your descriptive words, find 2-3 fonts that reflect your website’s mood.
  2. Visit our collection of Web Fonts for some font families to get started.
  3. Make a note of the font family names you like and we will use them in the next section when we style your website.

Choose Your Layout

  1. Visit our collection of Starter Templates to see the available page layout templates to get you started building your website.
  2. Once you find a layout you like, you can save a copy of the template to your own CodePen account by clicking the “Fork” button at the top of the page. Click the “Settings” button to give your pen a title and a description.
  3. Now you can start to copy and paste your own content into the template.

Homework

Finish moving your content into the forked template and make sure you have selected a color palette and the fonts you would like to use to style your site.

Bonus: Research websites similar to your topic and make note of the colors and fonts that they use. Draw inspiration from that.

← Back to Home