Brief

In this project, we're going to create a list of Compressed.fm podcasts with custom checkboxes.



If you participate in the Advent of JavaScript, we're going to set that challenge up for success. As part of that challenge, when they click on an episode and then shift click on another checkbox, it will mark off that item and all the items in between.

Users should be able to:

  • See the list of podcast episodes

  • Checking off an episode will mark the episode as watched and will strike-through the title

Need some support on this challenge? Join the Learn Build Teach Discord community. We have a separate channel set up specifically for the Advent of CSS.

Getting Started

  1. To get started, download the zip file. This includes all the project assets you need to get started: Figma file, images, and a Style Guide

  2. Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.

  3. Open the project's README.md file (that's this!). It has additional information on how the project is structured.

  4. Happy coding!

  5. Once you're finished, share your work using #adventofcss

Content

  1. Traile

  2. James Q Quick Origin Story

  3. Amy Dutton Origin Story

  4. Starting a New Development Project

  5. How do you Start a New Design Project?

  6. Freelancing (Part 1)

Taking your Project to the Next Level

  • Use a framework or library like Tailwind CSS, Styled Components, or CSS Modules. Or, if you're feeling particularly adventurous, try writing everything in Vanilla CSS.

  • Add an animation on load, have the podcast list slide out from under the podcast artwork

FAQs

  • Can I use libraries / frameworks on these projects? 

    • Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.

  • Oh no! I'm stuck! 

  • Can I use this project in my portfolio? 

    • Sure! But, be honest about the work that you did

See you tomorrow!

Amy and James