Hello! We’re so excited to be learning with you. You’re getting this email because you signed up to get weekly updates from the Bad Website Club during our upcoming Responsive Web Design bootcamp.

We're continuing our journey on learning the core skills you need to make websites. This bootcamp is completely free, the only thing we ask from learners is that you bring your curiosity and abide by the Code of Conduct when you interact with our instructors or other learners.

Where we're learning:

We are teaching live sessions at 15:00 UTC Monday to Friday on Youtube and Twitch, to let learners pick which service they prefer to watch from. All stream videos will be available afterwards for learners unable to join us live.

We have a dedicated channel in the freeCodeCamp Discord. All information will be posted to the Bad Website Club website, and all your lesson units can be found on the freeCodeCamp Responsive Web Design course.

How we're learning:

We're using a flipped classroom approach, asking you to work through the lesson material on your own before we review together during our streamed sessions. We are talking through some (not all!) of the workshop steps and offer space for Q&A in our live streams.

We're also huge fans of taking notes as we learn! The lesson pages on our website include Instructor Notes, and we encourage you to take your own notes. You can even share your notes in our bootcamp-discussion channel on our dedicated space in the freeCodeCamp Discord server.

Week 9 Recap:

This week we've completed the CSS section! 🎉

Here's a list of what we did this week:

• CSS - Variables, covering the lessons:
  • Working with CSS Variables: What Are CSS Custom Properties, and How Do They Work?
  • Working with CSS Variables: What Is the @property Rule, and How Does It Work with Fallbacks?
  • Build a City Skyline
  • Build an Availability Table
  • CSS Variables Review
• CSS - Grid Part 1, covering the lessons:
  • Working with CSS Grid: What Is CSS Grid, and How Does It Differ from Flexbox?
  • Working with CSS Grid: How Can You Create Flexible Grids with the fr Unit?
  • Working with CSS Grid: How Can You Create Gaps Between Tracks in a Grid?
  • Working with CSS Grid: How Can You Repeat Track Listings in a Grid Layout?
  • Working with CSS Grid: What Is the Difference Between an Implicit and Explicit Grid?
  • Working with CSS Grid: What Is the minmax() Function and How Does It Work?
  • Working with CSS Grid: How Do the grid-column and grid-row Properties Work?
  • Working with CSS Grid: How Can You Position Items on the Grid Using the grid-template-areas Property?
  • Build a Magazine
• CSS - Grid Part 2, covering the lessons:
  • Design a Newspaper Layout
  • Debugging CSS: How Can You Use the DevTools Inspection Tool and CSS Validators to Debug Your CSS?
  • CSS Grid Review
  • Build a Product Landing Page
• CSS - Animations Part 1, covering the lessons:
  • Animations and Accessibility: What Are CSS Animations, and How Do They Work?
  • Animations and Accessibility: What Are Accessibility Concerns Around Using Animations, and How Can prefers-reduced-motion Help?
  • Build an Animated Ferris Wheel
  • Build a Moon Orbit
• CSS - Animations Part 2, covering the lessons:
  • Build a Flappy Penguin
  • Build a Personal Portfolio
  • CSS Animations Review

Extra resources

CSS is a vast topic, and there's always something new to learn! Here are some additional resources on CSS:

• The CSS Cascade by Amelia Wattenberger

This fantastic interactive blog post goes through how the CSS cascade actually works.

• CSS on MDN

MDN is the documentation that you're most likely to reach out for when making websites. You can check out their CSS guides, CSS reference, as well as the resource on learning web development they provide.

• CSS Tricks

An amazing website for all things CSS.

• CSS Diner

A fun game to learn and practice CSS selectors.

• Flexbox Froggy

Another fun game to learn and practice Flexbox.

• CSS Grid Garden

Yet another fun game to learn and practice CSS Grid.

• Josh Comeau's website

Beautiful interactive blog posts on CSS, animations, and more.

• modern.css

Side-by-side comparisons of old CSS hacks and the native modern replacements.

• W3C CSS specs

CSS standards by W3C.

What's coming for Week 10?

For the last week of the bootcamp, we'll review all that we've learned so far and have Mixed Topics sessions for general Q&A, so bring your questions!

• Jun 29: CSS Review
• Jun 30: Mixed Topics Part 1
• Jul 1: Mixed Topics Part 2
• Jul 2: Mixed Topics Part 3
• Jul 3: Mixed Topics Part 4

Before the session on Monday, Jun 29, please:

• Read CSS Review and take notes

Optional/stretch activities:

• Join the #bootcamp-discussion and #bwc-announcements channels in the freeCodeCamp Discord if you haven't
• Bookmark the Bad Website Club website, to be able to quickly find information about your sessions
• Follow on YouTube or Twitch to be notified of livestreamed courses and guest sessions
• Download the session calendar

See you there!

Jess, Eda and Carmen