Welcome to the Advent of CSS, Day 1!

We're so excited about the next 24 days and the challenges we have in store. Hopefully, you'll enjoy working through these as much as we've enjoyed putting them together.



Brief

In this project, we're creating a Pomodoro timer.


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:

  • Start the timer by clicking on the start link/button.

  • Once the user clicks start, the word start will change to stop. Then, the user can click on the stop button to make the timer stop.

  • Click on the gear icon to change the length (minutes and seconds) of the timer.

  • Once the timer finishes, the ring should change from green to red and an alert message is passed to the browser.


Getting Started

  1. To get started, download the files within the December 1 section in Podia. This includes all the project assets you need to get started: a creative brief, a Figma file with the designs, fonts, and images.

  2. Take a look around. Look at the project's Figma file. If you don't have a Figma account, don't worry, you can set one up for free.

  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 #adventofcss

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 interactivity to this project by writing out the JavaScript yourself. If you get stuck, you can always purchase the Advent of JavaScript solutions, where James explains how to build this.

FAQs

  • Can I use libraries/frameworks on these projects? 

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

  • Oh no! I'm stuck! 

    • Consider purchasing the Solutions (if you haven't already). You'll get access to a video, where James explains how to write all the code.

    • Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.

  • Can I use this project in my portfolio? 

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

Best of luck and we'll see you tomorrow!

Amy and James