Homework Week 1

Introduction

This week’s homework will give you a bit of practice at using CSS together with HTML to make beautifully styled web pages. We’re not aiming for mastery yet with HTML and CSS - we’re just looking for a rough familiarity, to the degree that we’re able to look things up, and eventually get things done.

If you want to get to the next level with HTML/CSS, then practice, practice, and more practice are the only things that will get you there. With time, you’ll start to pick up the basic muscle memory of how to do certain tasks with CSS, and it will eventually start making sense.

In this homework, we have a few resources to check out to round out your knowledge of CSS. After that, there’s also a nice selection of FCC exercises to put this all into practice.

If you have time this week, I would recommend checking out the “CSS Diner” and “Flexbox Froggy” games in the bonus homework. These are a fun way to bake the CSS and Flexbox rules into memory!

Assignment

1) Read/watch these resources | 32 mins

• [Article] 9 important CSS properties you must know | zellwk | 15 minutes
• [Video] CSS Flexbox in 100 seconds | Fireship | 2 minutes
• [Video] Learn Bootstrap in 5 minutes | blondiebytes | 5 minutes
• [Reference] CSS Selectors Reference | W3Schools | 5 minutes
• [Reference] CSS Properties Reference | W3Schools | 5 minutes

2) freeCodeCamp exercises | 30 mins

Once again, we have some exercises from freeCodeCamp to give you some practice at using CSS yourself.

In these examples, we’re mostly using embedded CSS, rather than external CSS. This makes the UI easier for freeCodeCamp, but in reality, it would be better in practice if you write your CSS in a separate styles.css file.

• Change the color of text
• Use CSS selectors to style elements
• Use a CSS class to style an element
• Style multiple elements with a CSS class
• Change the font size of an element
• Size your images
• Add borders around your elements
• Add rounded corners with border-radius
• Use an id attribute to style an element
• Adjust the padding of an element
• Use clockwise notation to set margins

3) Week 1 Feedback | 2 mins

Fill out the form for this week’s feedback form here. This will include some standard feedback that you’ll be asked every time, as well as some specific questions for this week.

This will be helpful for me to tweak the course as we go along, and will help me to flag any topics which were confusing, which I should revisit in future lectures.