Bad Website Club Week 4 Recap, Extra Resources + Week 5 Sneak Peek (Hello, 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 4 Recap:
This week we've finished the HTML section! (Pat pat everyone 🎉)
We also welcomed our guest Sara Joy to talk about accessibility and whimsy on the web! (If you've missed our livestream, you can watch it on YouTube here.)
Here's a list of what we did this week:
- HTML - Accessibility Part 1, covering the lessons:
- Importance of Accessibility and Good HTML Structure: What Is Accessibility?
- Importance of Accessibility and Good HTML Structure: What Are Screen Readers, and Who Uses Them?
- Importance of Accessibility and Good HTML Structure: What Are Large Text or Braille Keyboards, and Who Uses Them?
- Importance of Accessibility and Good HTML Structure: What Are Alternative Pointing Devices Such as Trackballs, Joysticks, and Touchpads Used For?
- Importance of Accessibility and Good HTML Structure: What Are Screen Magnifiers Used For?
- Importance of Accessibility and Good HTML Structure: What Is Voice Recognition Software Used For?
- Importance of Accessibility and Good HTML Structure: What Are Some Common Accessibility Auditing Tools to Use?
- Importance of Accessibility and Good HTML Structure: How Does Proper Heading Level Structure Affect Accessibility?
- Debug a Coding Journey Blog Page
- HTML - Accessibility Part 2, covering the lessons:
- HTML - Accessibility Part 3, covering the lessons:
- Introduction to ARIA: What Is the Purpose of WAI-ARIA, and How Does It Work?
- Introduction to ARIA: What Are ARIA Roles?
- Introduction to ARIA: What Are the Roles of the aria-label and aria-labelledby Attributes?
- Introduction to ARIA: What Is the aria-hidden Attribute, and How Does It Work?
- Introduction to ARIA: What Is the aria-describedby Attribute, and How Does It Work?
- Build an Accessible Audio Controller
- Guest session with Sara Joy: Whimsica11y: bringing the joy and whimsy to everyone
- HTML - Accessibility Part 4, covering the lessons:
- Working with Accessible Media Elements: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
- Working with Accessible Media Elements: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
- Working with Accessible Media Elements: What Are Good Ways to Make Audio and Video Content Accessible?
- Working with Accessible Media Elements: What Are Some Ways to Make Web Applications Keyboard Accessible?
- Build a Checkout Page
- Design a Movie Review Page
- HTML - Accessibility Part 5, covering the lessons:
Extra resources
We might be done with HTML for now, but learning is an ongoing process! Here are some additional resources on HTML and the web:
This is a beautiful (free and online) book by Blake Watson that teaches how to make a website with HTML from scratch. It also includes bonus chapters on CSS and a little bit on PHP!
A book about the history of the web? Yes, please! (Also free and online). This book goes all the way from the birth of the World Wide Web to the Browser Wars and the Dot-com era in the late 90s and early 2000s. You can also check out The History of the Web blog by the same author!
When it's time to look up something, it's most likely that the MDN docs will be your first choice. You can check out their HTML guides, HTML reference, as well as the resource on learning web development they provide.
This is a general course that offers an overview of HTML. It goes beyond what we've learned in the bootcamp so far, so you might want to check it out if you want to dive more into HTML and the web!
Last week we spent a lot of time on accessibility, and there are a lot of helpful pages about it on MDN. There's also a wonderful Understanding WCAG page if you want a more thorough explanation and examples.
We've mentioned web standards many times, especially for the first time in Bruce Lawson's talk during our Launch Party! This is the living HTML standard for the curious and the brave.
This might be a bit out of scope, but this interactive page is intended to give you an intuition of how browsers work. It also includes an example of how browsers parse HTML to build the DOM tree (this question came up during one of our livestreams!).
What's coming for Week 5?
- May 25: CSS - Basic CSS Part 1, we'll start learning about CSS, and cover the topic What Is CSS
- May 26: Design a Business Card, we'll talk through this lab and experiment with some of the CSS concepts we covered in our previous session
- May 27: CSS - Basic CSS Part 2, we'll cover the topic CSS Specificity, the Cascade Algorithm, and Inheritance
- May 28: CSS - Basic CSS Part 3, we'll cover the topic Styling Lists and Links
- May 29: CSS - Basic CSS Part 4, we'll cover the topic Working with Backgrounds and Borders and finish the Basic CSS unit 🎉
You can find the links to individual lessons and solo tasks for each day on our website.
Before the session on Monday, May 25, please:
- Read What Is CSS: What Is CSS, and What Is Its Role on the Web? and take notes
- Read What Is CSS: What Is the Basic Anatomy of a CSS Rule? and take notes
- Read What Is CSS: What Is the Meta Viewport Element Used For? and take notes
- Read What Is CSS: What Are Some Default Browser Styles Applied to HTML? and take notes
- Read What Is CSS: What Are Inline, Internal, and External CSS, and When Should You Use Each One? and take notes
- Read What Is CSS: How Do Width and Height Work? and take notes
- Read What Is CSS: What Are the Different Types of CSS Combinators? and take notes
- Read What Is CSS: What Is the Difference Between Inline and Block-Level Elements in CSS? and take notes
- Read What Is CSS: How Does Inline-Block Work, and How Does It Differ from Inline and Block Elements? and take notes
- Read What Is CSS: What Are Margins and Padding, and How Do They Work? and take notes
- Complete all steps from Design a Cafe Menu solo, recording questions and new concepts introduced
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