Bad Website Club Week 8 Recap + Week 9 Sneak Peek (The Last Week of CSS!)
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 8 Recap:
This week, we've learned even more CSS!
Here's a list of what we did this week:
- CSS - Typography, covering the lessons:
- Working with CSS Fonts: What Are the Fundamentals of Typography?
- Working with CSS Fonts: What Are Some Best Practices for Working with Typography in Your Designs?
- Working with CSS Fonts: What Are Font Families and How Do They Work?
- Working with CSS Fonts: What Are Web Safe Fonts?
- Working with CSS Fonts: What Is the @font-face At-Rule, and How Does It Work?
- Working with CSS Fonts: How Do You Work with External Fonts Like Font Squirrel and Google Fonts?
- Working with CSS Fonts: What Is the text-shadow Property, and How Does It Work?
- Build a Nutritional Label
- Build a Newspaper Article
- CSS Typography Review
- CSS - Accessibility, covering the lessons:
- CSS - Positioning, covering the lessons:
- Understanding How to Work with Floats and Positioning in CSS: What Are Common Use Cases for Using Floats, and How Do They Work?
- Understanding How to Work with Floats and Positioning in CSS: What Is Relative Positioning, and How Does This Differ from the Default Static Positioning?
- Understanding How to Work with Floats and Positioning in CSS: What Is Absolute Positioning, and How Does It Work?
- Understanding How to Work with Floats and Positioning in CSS: What Is Fixed and Sticky Positioning, and How Does It Differ from Absolute Positioning?
- Understanding How to Work with Floats and Positioning in CSS: What Is the Z-Index Property, and How Does It Work to Control the Stacking of Positioned Elements?
- Build a Cat Painting
- Build a House Painting
- CSS Positioning Review
- CSS - Attribute Selectors, covering the lessons:
- Working with Attribute Selectors: What Is the Attribute Selector, and How Can It Be Used to Target Links with the href and title Attributes?
- Working with Attribute Selectors: How to Use the Attribute Selector to Target Elements with the lang and data-lang Attributes?
- Working with Attribute Selectors: How to Use the Attribute Selector to Target Ordered List Elements with the type Attribute?
- Build a Balance Sheet
- CSS Attribute Selectors Review
- Build a Book Inventory App
- CSS - Responsive Design, covering the lessons:
- Best Practices for Responsive Design: What Is Responsive Web Design, and What Is Its Relationship to Tools Like CSS Grid and Flexbox?
- Best Practices for Responsive Design: How Do Media Queries Work, and What Are Some Common Media Types and Features?
- Best Practices for Responsive Design: What Are Media Breakpoints, and What Are Common Breakpoints in Modern Design?
- Best Practices for Responsive Design: What Is the Mobile First Approach in Responsive Web Design?
- Design a Piano
- Responsive Web Design Review
- Build a Technical Documentation Page
What's coming for Week 9?
- Jun 22: CSS - Variables, we'll cover the topic Working with CSS Variables, completing the CSS Variables unit 🎉
- Jun 23: CSS - Grid Part 1, we'll cover the topic Working with CSS Grid
- Jun 24: CSS - Grid Part 2, we'll cover Design a Newspaper Layout and Debugging CSS, completing the CSS Grid unit 🎉
- Jun 25: CSS - Animations Part 1, we'll cover the topic Animations and Accessibility
- Jun 26: CSS - Animations Part 2, we'll cover Build a Flappy Penguin and Build a Personal Portfolio, completing the CSS Animations unit 🎉
You can find the links to individual lessons and solo tasks for each day on our website.
Before the session on Monday, Jun 22, please:
- Read Working with CSS Variables: What Are CSS Custom Properties, and How Do They Work? and take notes
- Read Working with CSS Variables: What Is the @property Rule, and How Does It Work with Fallbacks? and take notes
- Try to complete as many steps from Build a City Skyline before class. This workshop is big and you may need to complete this over the next few days
- Complete Build an Availability Table solo over the next few days. Make sure you don’t just copy the example, think before using green.
- Read CSS Variables Review and take notes
- Complete CSS Variables Quiz solo to test your knowledge of CSS Variables
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