Short Course
Founders and Coders
Week 2: CSS
Recap from last week... 🍎
HTML
freeCodeCamp
DevTools
CodePen
Tribute page parade! 🎊
How do we turn this...
...into this? 🤔
Style sheet language 💡
We can use a style sheet language to change the presentational properties of a structured document
Properties like...
...colour...
...size...
...layout...
...and more!
CSS
CSS stands for: Cascading Style Sheets
It's the style sheet language used to style web pages!
Example
This HTML...
<p>This text needs colour</p>...displays this:
This text needs colour
Example
This HTML + CSS...
<p style="color: red;">This text needs colour</p>...displays this:
This text needs colour
Pair Programming Recap
The Driving Test
The backseat driver
- Verbalise your thinking
- Explain your reasoning
The frontseat driver
- Follow the instructions of your partner
- Ask for clarification
Tips for both
- Discuss things together out loud
- Refer to line numbers
- Be patient!
freeCodeCamp 🏕️
Head to www.freeCodeCamp.org
Let's code together 👩💻👨💻
Head to http://tiny.cc/aydxiz
DevTools Challenge 🔍
Open up your browser (preferably Google chrome) and head to the Google homepage
Give Google a dark theme!
Project 🔨
Let's style our tribute pages!
Using the CSS you've learnt, style your tribute page project.
Work together in pairs, try out some pair programming, and use Codepen.
Feel free to style your page however you like
Before we leave...
Share your Codepens in the Slack channel. Look at what others have made - see what CSS they have used.
Before next week... 🍎
If you have time, try to complete 'Basic CSS' on freeCodeCamp. You can also continue styling your tribute page project!