Bad Website Club Week 7 Recap + Week 8 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 7 Recap:
This week, we've explored color theory, looked at how to style forms, and learned about the box model and flexbox!
Here's a list of what we did this week:
- CSS - Colors, covering the lessons:
- Working with Colors in CSS: What Is Color Theory in Design?
- Working with Colors in CSS: What Are Named Colors in CSS, and When to Use Them?
- Working with Colors in CSS: What Is the HSL Color Model, and How Does the HSL Function Work in CSS?
- Working with Colors in CSS: What Are Hex Codes, and How Do They Work in CSS?
- Working with Colors in CSS: What Are Linear and Radial Gradients, and How Do They Work in CSS?
- Build a Set of Colored Markers
- Design a Set of Colored Boxes
- CSS Colors Review
- CSS - Styling Forms Part 1, covering the lessons:
- Best Practices for Styling Forms: What Are Some Best Practices for Styling Text Inputs?
- Best Practices for Styling Forms: When Should You Use appearance: none to Deal with Issues Styling Search Inputs and Checkboxes?
- Best Practices for Styling Forms: What Are Common Issues When Styling Special Input Elements?
- Design a Registration Form
- Design a Contact Form
- CSS - Styling Forms Part 2, covering the lessons:
- CSS - The Box Model, covering the lessons:
- Working with CSS Transforms, Overflow, and Filters: What Is Overflow in CSS, and How Does It Work?
- Working with CSS Transforms, Overflow, and Filters: What Is the CSS Transform Property, and How Does It Work?
- Working with CSS Transforms, Overflow, and Filters: What Is the CSS Box Model, and How Does It Work?
- Working with CSS Transforms, Overflow, and Filters: What Is Margin Collapsing, and How Does It Work?
- Working with CSS Transforms, Overflow, and Filters: What Is the Difference Between content-box and border-box?
- Working with CSS Transforms, Overflow, and Filters: What Is a CSS Reset, and What Are Some Common Examples?
- Working with CSS Transforms, Overflow, and Filters: What Is the CSS Filter Property, and What Are Common Examples?
- Design a Rothko Painting
- Build a Confidential Email Page
- CSS Layouts and Effects Review
- CSS - Flexbox, covering the lessons:
What's coming for Week 8?
- Jun 15: CSS - Typography, we'll cover the topic Working with CSS Fonts
- Jun 16: CSS - Accessibility, we'll cover the topic Best Practices for Accessibility and CSS
- Jun 17: CSS - Positioning, we'll cover the topic Understanding How to Work with Floats and Positioning in CSS
- Jun 18: CSS - Attribute Selectors, we'll cover the topic Working with Attribute Selectors
- Jun 19: CSS - Responsive Design, we'll cover the topic Best Practices for Responsive Design
You can find the links to individual lessons and solo tasks for each day on our website.
Before the session on Monday, Jun 15, please:
- Read Working with CSS Fonts: What Are the Fundamentals of Typography? and take notes
- Read Working with CSS Fonts: What Are Some Best Practices for Working with Typography in Your Designs? and take notes
- Read Working with CSS Fonts: What Are Font Families and How Do They Work? and take notes
- Read Working with CSS Fonts: What Are Web Safe Fonts? and take notes
- Read Working with CSS Fonts: What Is the @font-face At-Rule, and How Does It Work? and take notes
- Read Working with CSS Fonts: How Do You Work with External Fonts Like Font Squirrel and Google Fonts? and take notes
- Read Working with CSS Fonts: What Is the text-shadow Property, and How Does It Work? and take notes
- Try to complete as many steps from Build a Nutritional Label as you can before class, you may need to finish this over the next few days
- Complete Build a Newspaper Article solo over the next few days
- Read CSS Typography Review and take notes
- Complete CSS Typography Quiz solo to test your knowledge of typography and CSS
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