Brief

In this project, we're creating a keyboard. I love this project because at first glance it seems easy, but there are some more complicated steps involved.



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 would be a great way to push yourself.

Users should be able to:

  • See the keyboard centered on the page

  • Whenever a user hovers over a specific key it will change colors 

    • White keys will change to yellow #ffd200

    • Black keys will change to pink #f40082


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.

Taking your Project to the Next Level

  • Use frameworks or libraries 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 with JavaScript. Each key you tap will play a different audio clip. You can get all the audio clips for free by signing up to the Advent of JavaScript for free. Of course, if you get stuck, you can always purchase the solutions, where James explains how to build it.


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