Bad Website Club Week 5 Recap + Week 6 Sneak Peek
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 5 Recap:
This week we've started learning some CSS and covered a lot of ground! Here's a list of what we did this week:
- CSS - Basic CSS Part 1, covering the lessons:
- What Is CSS: What Is CSS, and What Is Its Role on the Web?
- What Is CSS: What Is the Basic Anatomy of a CSS Rule?
- What Is CSS: What Is the Meta Viewport Element Used For?
- What Is CSS: What Are Some Default Browser Styles Applied to HTML?
- What Is CSS: What Are Inline, Internal, and External CSS, and When Should You Use Each One?
- What Is CSS: How Do Width and Height Work?
- What Is CSS: What Are the Different Types of CSS Combinators?
- What Is CSS: What Is the Difference Between Inline and Block-Level Elements in CSS?
- What Is CSS: How Does Inline-Block Work, and How Does It Differ from Inline and Block Elements?
- What Is CSS: What Are Margins and Padding, and How Do They Work?
- Design a Cafe Menu
- Design a Business Card
- CSS - Basic CSS Part 2, covering the lessons:
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is CSS Specificity, and the Specificity for Inline, Internal, and External CSS?
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Universal Selector, and What Is Its Specificity?
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for Type Selectors?
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for Class Selectors?
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the Specificity for ID Selectors?
- CSS Specificity, the Cascade Algorithm, and Inheritance: What Is the important Keyword, and What Are the Best Practices for Using It?
- CSS Specificity, the Cascade Algorithm, and Inheritance: How Does the Cascade Algorithm Work at a High Level?
- CSS Specificity, the Cascade Algorithm, and Inheritance: How Does Inheritance Work with CSS at a High Level?
- CSS Fundamentals Review
- CSS - Basic CSS Part 3, covering the lessons:
- Styling Lists and Links: How Do You Space List Items Using margin or line-height?
- Styling Lists and Links: How Do the Different list-style Properties Work?
- Styling Lists and Links: Why Are Default Link Styles Important for Usability on the Web?
- Styling Lists and Links: How Do You Style the Different Link States?
- Build a Stylized To-Do List
- CSS - Basic CSS Part 4, covering the lessons:
- Working with Backgrounds and Borders: How Do Background Image Size, Repeat, Position, and Attachment Work?
- Working with Backgrounds and Borders: What Is a Background Gradient, and How Does It Work?
- Working with Backgrounds and Borders: What Are Some Accessibility Considerations for Backgrounds?
- Working with Backgrounds and Borders: What Are the Different Ways You Can Add Borders Around Images?
- Design a Blog Post Card
- Lists, Links, CSS Background and Borders Review
What's coming for Week 6?
- Jun 1: User Interface Design Fundamentals, we'll cover the topic User Interface Design Fundamentals
- Jun 2: CSS - Design, we'll cover the topics User-Centered Design and Common Design Tools
- Jun 3: CSS - Absolute and Relative Units, we'll cover the topic Working with Relative and Absolute Units
- Jun 4: CSS - Pseudo Classes and Elements Part 1, we'll cover the topic Working with Pseudo-Classes and Pseudo-Elements in CSS
- Jun 5: CSS - Pseudo Classes and Elements Part 2, we'll cover Design a Parent Teacher Conference Form and Build a Job Application Form, completing the Pseudo Classes and Elements unit
You can find the links to individual lessons and solo tasks for each day on our website.
Before the session on Monday, Jun 1, please:
- Read User Interface Design Fundamentals: What Are Common Design Terms to Help You Communicate with Designers? and take notes
- Read User Interface Design Fundamentals: How Do You Create Good Background and Foreground Contrast in Your Designs? and take notes
- Read User Interface Design Fundamentals: What Is the Importance of Good Visual Hierarchy in Design? and take notes
- Read User Interface Design Fundamentals: How Does Scale Work in Design? and take notes
- Read User Interface Design Fundamentals: How Does Alignment Work in Design? and take notes
- Read User Interface Design Fundamentals: What Is the Importance of Whitespace in Design? and take notes
- Read User Interface Design Fundamentals: What Are Best Practices for Working with Images in Your Designs? and take notes
- Read User Interface Design Fundamentals: What Is Progressive Enhancement? 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