Brief

In this project, we're going to create an image carousel.



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:

  • The featured image is centered horizontally and vertically within the content area.

  • The image's photo credits should appear as a caption, below the featured image. (content within the STYLE-GUIDE.md inside the project starter files)

  • Click on the next button to advance the featured image to the next image, listed in the thumbnails.

  • Click on the previous button to change the featured image to the previous image in the carousel

  • The thumbnails at the bottom should scroll horizontally and highlight the selected image.


Need some support on this challenge?

Upgrade to the Solution Tier. You'll get a video explanation from Amy.

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


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.

  • Create transitions for when the featured image comes on and off the screen.

  • Change the next and previous buttons so they're not always visible. When the user's mouse overs the edge of the screen, then the next and previous buttons appear


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


Merry Coding and we'll see you tomorrow!

James and Amy