I recently happened across a Udemy course from Brad Traversy that offers the opportunity to build 50 projects across 50 days using only HTML, CSS and JS. It sounded like an excellent way to keep my skills up pre-bootcamp and pick up some portfolio fodder along the way.
This series of blog posts will not repeat the course material; the lectures are excellent and well worth the investment. Rather, I want to use these (short) articles to jot down my thoughts about each project and how I went about making each 'my own.'
The first day project is called Expanding Cards, and, in short, presents a series of <div> s which have background-image s that expand when clicked on by the user. The example in the course uses a series of stock photos of different landscapes. After some consideration I decided to use my version to showcase my four-legged family members.
The end result is a very cool effect, especially considering it is about 90% pure CSS that drives the site. The JavaScript mainly handles the event listener on each <div> (which triggers a CSS transition) and then adds a class of 'active' to the selected image to expand it to full size.