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!

Thanks for coming!