Skip to main content

HTML/CSS - 4

What will we learn today?​

  • Putting it all together

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'. You did this in Fundamentals but now we're going to use a more complicated pipeline closer to the way professionals do it.

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.

Professional development (60 minutes)​

In small groups it's time to reflect on what you have learned and share it with each other.

Your presentation must cover the following:

  1. Why it is important to build accessible websites (You must cover who browse the web, and the different types of users.)
  2. What form controls we use when we want the user to choose multiple options from a list
  3. The difference between the DOM API and the Accessibility API
  4. Why it's important to be transparent as a developer
  5. Why developers use pull requests
  6. Why we do a retro

Retrospective (30 minutes)​

What have we covered over the past weeks? What parts did we enjoy? What will we do differently in the next module? What tips and tricks can we share with each other? What advice would you give to the next class? Let's spend some time on a class retrospective for the whole module.

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.