Brief

In this project, we're creating a toaster pop-up.


You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this might be a great way to push yourself.

Users should be able to:

  • See a toaster pop-up in the bottom left corner of the screen

  • There should be a title, paragraph of text, and form for signing up for the newsletter.

  • There should be a close button at the top

  • The Compressed.fm album artwork should be on the edge of the toaster pop-up


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 JavaScript.

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. It has additional information on how the project is structured.

  4. Customize your project/file architecture to your liking.

  5. Happy coding!

  6. Once you're finished, share your work using #adventofjs


Taking your Project to the Next Level

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

  • Hide the toaster pop-up by clicking on the close button. (HINT: This can be accomplished in CSS with a checkbox.)

  • Try adding interactivity by participating in the Advent of JavaScript


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