Skip to main content

HTML/CSS - 4

What will we learn today?​

Learning Objectives​

Learning objectives for this lesson can be found here

Coursework review (90 minutes)​

We open our class with live coding and group debugging using trainees' work as material. This session is an opportunity to work through common problems with coursework and also to demonstrate productive code review and debugging strategies. Use Devtools and live code.

Ship It (90 minutes)​

We are going to build a site and deploy it to the internet, or 'Ship It', just like we did in Fundamentals.

Many developers struggle with perfectionism. At CYF we challenge you to ship your code quickly and often, as this is the best way to improve your quality and your quantity.

We will also use Devtools to run tests (Lighthouse Audit) on our websites and examine our code critically. Developers must test their work.

Exercise

Using the Deploying to Netlify Guide, deploy your:

  1. Bikes For Refugees project
  2. Karma clone project

PD (Presentations)​

Session objective: It's time to reflect on what you have learned and share it with each other.

Exercise (20 min)

Exercise objective: To work on a task as a team

In small groups. Prepare a 3-min presentation. Your presentation must cover the following points:

  • Why it is important to build accessible websites? You must cover who browses the web, and the different types of users
  • What form controls we use when we want the user to choose multiple options from a list
  • The difference between the DOM API and the Accessibility API
  • Why it's important to be transparent as a developer
  • Why developers use pull requests
  • Why we do a retro
Exercise (30 min)

Exercise objective: To practice public speaking skills

Volunteer to present back to the class.

Exercise (10 min)

Exercise objective: To reflect on learnings and processes, to come up with suggestions

Let's spend some time on a class retrospective for the this module. Discuss the following points:

  • What we covered over the past weeks
  • What parts we enjoyed
  • What we will do differently in the next module
  • What tips and tricks we can share with each other
  • What advice we would give to the next class

Coursework​

The coursework for this lesson.

Further learning​

There's much more we haven't covered in this module. Once you're comfortable with CSS, you can read up on the following topics which are used by a variety of software teams.

  • BEM — this is a set of rules to improve the naming and structure of a project's CSS
  • CSS transitions — this is used to create an animation from one state to another
  • CSS animations — this is used to create looping animations
  • CSS custom properties — these are variables within CSS

Feedback​

Please spend two minutes reviewing this lesson to help us improve it for the future. This feedback will be shared with volunteers.