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 6 Recap:

This week, we've learned a lot about user interface and design, and some CSS!

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

• User Interface Design Fundamentals, covering the lessons:
  • User Interface Design Fundamentals: What Are Common Design Terms to Help You Communicate with Designers?
  • User Interface Design Fundamentals: How Do You Create Good Background and Foreground Contrast in Your Designs?
  • User Interface Design Fundamentals: What Is the Importance of Good Visual Hierarchy in Design?
  • User Interface Design Fundamentals: How Does Scale Work in Design?
  • User Interface Design Fundamentals: How Does Alignment Work in Design?
  • User Interface Design Fundamentals: What Is the Importance of Whitespace in Design?
  • User Interface Design Fundamentals: What Are Best Practices for Working with Images in Your Designs?
  • User Interface Design Fundamentals: What Is Progressive Enhancement?
• CSS - Design, covering the lessons:
  • User-Centered Design: What Is User-Centered Design?
  • User-Centered Design: What Are User Requirements, User Research, and Testing?
  • User-Centered Design: What Are Best Practices for Designing a Dark Mode Feature?
  • User-Centered Design: What Are Best Practices for Designing Breadcrumbs?
  • User-Centered Design: What Are Best Practices for Designing Cards?
  • User-Centered Design: What Are Best Practices for Designing Infinite Scrolls?
  • User-Centered Design: What Are Best Practices for Designing Modal Dialogs?
  • User-Centered Design: What Are Best Practices for Progress Indication on Forms, Registration, and Setup?
  • User-Centered Design: What Are Best Practices for Designing Shopping Carts?
  • User-Centered Design: What Is Progressive Disclosure?
  • User-Centered Design: What Is Deferred and Lazy Registration?
  • Common Design Tools: What Are Design Briefs and How Do Developers Work with Them?
  • Common Design Tools: What Are Some Common Tools Developers Should Know About That Are Used by Designers in the Industry?
  • Design Fundamentals Review
• CSS - Absolute and Relative Units, covering the lessons:
  • Working with Relative and Absolute Units: What Are Absolute Units in CSS, and When Should You Use Them?
  • Working with Relative and Absolute Units: What Are Percentages in CSS, and When Should You Use Them?
  • Working with Relative and Absolute Units: What Are ems and rems in CSS, and When Should You Use Them?
  • Working with Relative and Absolute Units: What Are vh and vw Units, and When Should You Use Them?
  • Working with Relative and Absolute Units: What Is the calc() Function, and How Does It Work?
  • Build an Event Flyer Page
  • CSS Relative and Absolute Units Review
• CSS - Pseudo Classes and Elements Part 1, covering the lessons:
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Pseudo-classes, and How Do They Work?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Element User Action Pseudo-classes?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Input Pseudo-classes?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Location Pseudo-classes?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Tree-structural Pseudo-classes?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Examples of Functional Pseudo-classes?
  • Working with Pseudo-Classes and Pseudo-Elements in CSS: What Are Pseudo-elements, and How Do They Work?
  • Design a Greeting Card
• CSS - Pseudo Classes and Elements Part 2, covering the lessons:
  • Design a Parent Teacher Conference Form
  • Build a Job Application Form
  • CSS Pseudo-classes Review

What's coming for Week 7?

• Jun 8: CSS - Colors, we'll cover the topic Working with Colors in CSS, completing the Colors unit 🎉
• Jun 9: CSS - Styling Forms Part 1, we'll cover the topic Best Practices for Styling Forms
• Jun 10: CSS - Styling Forms Part 2, we'll cover Build a Game Settings Panel and Design a Feature Selection Page, completing the Styling Forms unit 🎉
• Jun 11: CSS - The Box Model, we'll cover the topic Working with CSS Transforms, Overflow, and Filters, completing The Box Model unit 🎉
• Jun 12: CSS - Flexbox, we'll cover the topic Working with CSS Flexbox, completing the CSS Flexbox unit 🎉

You can find the links to individual lessons and solo tasks for each day on our website.

Before the session on Monday, Jun 8, please:

• Read Working with Colors in CSS: What Is Color Theory in Design? and take notes
• Read Working with Colors in CSS: What Are Named Colors in CSS, and When to Use Them? and take notes
• Read Working with Colors in CSS: What Is the RGB Color Model, and How Does the RGB Function Work in CSS? and take notes
• Read Working with Colors in CSS: What Is the HSL Color Model, and How Does the HSL Function Work in CSS? and take notes
• Read Working with Colors in CSS: What Are Hex Codes, and How Do They Work in CSS? and take notes
• Read Working with Colors in CSS: What Are Linear and Radial Gradients, and How Do They Work in CSS? and take notes
• Complete as many steps from Build a Set of Colored Markers as possible before class, complete solo in the next few days if you need more time
• Complete Design a Set of Colored Boxes solo over the next few days
• Read CSS Colors Review and take notes
• Complete CSS Colors Quiz solo to test your understanding of CSS colors

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