Design
Building Websites: Design from Sparkbox on YouTube.
Exercises
Describe Your Mood (1:30)
- 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)
- Using your descriptive, words find 2-3 colors that reflect your website’s mood.
- Visit our collection of Named Colors for some color values to get started.
- 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)
- Using your descriptive words, find 2-3 fonts that reflect your website’s mood.
- Visit our collection of Web Fonts for some font families to get started.
- 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
- Visit our collection of Starter Templates to see the available page layout templates to get you started building your website.
- 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.
- 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.