Learn to Make a Website
with CodeCademy
Lesson 5: Stylin' with CSS
Instruction Overview
Understand
- What is CSS's role is in web design and why it's required for modern sites
- Basic CSS syntax, especially for font-family and color
- How color complements are important for a visually pleasing website
Apply
- Submit CodeCademy exercises 2.1-2.5
- Use coolors.co to choose colors and CodePen to practice
Create
- Develop color palette for new website
For the instructor's eyes only
Welcome to CSS!
Before we start learning this crucial web language, let's talk about a few things
Why do we need CSS?
Why isn't HTML enough for our site?
With/Without CSS
What does CSS do here?
Source: tutsplus
Class goals
☐Complete CodeCademy CSS exercises 2.1 to 2.5
☐Develop a color palette with Coolors
Let's log onto CodeCademy
Head over to www.codecademy.com
how to log in...
Click Log In
I'll hand out your username and password
Once logged in, click My Courses
next step...
Scroll down to courses and click "Make a Website"
next step...
Click Let's Go!
Task
☐Complete exercises 2.1 (Why Use CSS) and 2.2 (Link to Stylesheet)
5 min
Let's open up CodePen
Head over to www.codepen.io and open the recipe page from last time
Where is the <link> in CodePen?
From CodeCademy
In CodePen
You don't need it in CodePen!
Where is <link>?
This is just the body. The head is hidden!
Task
☐Complete exercises 2.3 (Anatomy of a CSS Rule) to 2.5 (color)
8 min
Class goals
☑Complete CodeCademy CSS exercises 2.1 to 2.5
☐Develop a color palette with Coolors
These are not
the prettiest colors...
How to choose good colors
Use Coolors to choose the right colors
Head to coolors.co and let's pick some colors for our site
Start the generator
coolors.co
If you like a color, lock it
coolors .co
Lock the colors you like and press spacebar to find others
coolors .co
Once you're done, you will have made your color palette
coolors .co
Task
☐Update your recipe site with colors from your palette
5 min
Class goals
☑Complete CodeCademy CSS exercises 2.1 to 2.5
☑Develop a color palette with Coolors