DEV Community

GRUUVIN.dev
GRUUVIN.dev

Posted on • Originally published at gruuvin.dev on

How to Put Your Own Spin on a Tutorial

As I progressed through the front-end developer path on Scrimba , I encountered the Hometown Homepage Solo project in module two. I have been enjoying Scrimba for its hands-on approach in their scrims and for allowing students to work on their own projects. While it may not be as extensive as The Odin Project, it is definitely more interactive!

The assignment was to rebuild their predefined structure of a hometown homepage, but with a personal twist, especially tailored for our hometown. We were encouraged to modify the design as much as we wished. I was immediately intrigued, not for my own hometown, as there isn't much to recommend here, but for a travel destination I am eager to visitTokyo.

Destination Tokyo

Scrimba also introduced us to Figma. Fortunately, I had some prior experience with Figma, which made it easier to dive right in, as I have always been a graphics enthusiast. My early days on the Internet were spent exploring photo manipulation software like Paintshop Pronostalgia for the veterans 🤓.

After numerous tutorials, I briefly switched to early Photoshop versions and became quite proficient. However, due to the high cost of their subscription model for occasional graphic creation, I opted for the Affinity suite and even ventured into vector-based graphic creation.

In short, I redesigned the Hometown Homepage from Scrimba to reflect my own style and purpose using Figma.

The Original

The Coding

As you can see from the initial design, I retained the overall layout but added my own color scheme, images, and decorative design elements like an offset underline.

I realized I needed an extra wrapper to center the entire homepage, which wasn't covered in the course or this project, as the projects or tutorials are typically in a mini browser window. I also implemented a hover effect for the three Activity images, complete with an ease-in and ease-out timer for smooth transitions.

.img-round { transition: all 1s ease; filter: saturate(10%);}.img-round:hover { filter: saturate(100%);}
Enter fullscreen mode Exit fullscreen mode

Finally, I added a footer with a friendly link to Scrimba and my site, incorporating some styling as well.

TL;DR

In conclusion, this project was a fun and educational experience that deepened my understanding of Web Dev basics. I encountered some challenges and had to find workarounds, but that's part of the learning process 🤓.

A peculiar issue arose when I uploaded it to GitHub Pagesthe hero cover image wouldn't load, despite being visible on its own URL. I tried different formats, suspecting the .png might be too large, but nothing worked. Ultimately, I used the original file URL from Unsplash and adjusted the CSS to position it correctly.

Here is my revamped project: https://gruuvindotdev.github.io/destination-tokyo/

]]>

Top comments (0)