DEV Community: zXn

How to Put Your Own Spin on a Tutorial

zXn — Sun, 02 Feb 2025 08:00:18 +0000

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%);}

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/

]]>

From Network Management to Coding Enthusiasm: A Personal Story

zXn — Sun, 26 Jan 2025 15:28:36 +0000

Hello world! I'm a system administrator from Herne, Germany, and I'm excited to share the story of my professional and personal evolution. My life has been a fascinating blend of technology, leadership, creativity, and continuous learning.

Professional Roots: From Sysadmin to Team Leader

After years of navigating the complex world of network infrastructure, I recently took a significant step in my career by being promoted to team leader of our entire infrastructure team. This role has not only challenged me technically but also pushed me to develop leadership skills that go beyond managing networks and servers.

The DJ and the Developer: Balancing Passions

For over two decades, I've been a hobby DJa passion that has taught me as much about rhythm and creativity as my technical work has taught me about precision and problem-solving. Music has always been more than just a hobby; it's been a way to express myself and connect with others.

I like all kinds of music, but as a DJ, I'm really into Deep House and Dub Techno. I love the calm aspect of this music and how it reveals two different characters depending on the volume it's played at.

I have played on several web radio stations, including HouseTime.FM, RauteMusik House, and electrosound.tv. I've also performed at many gigs, most recently at Ruhr in Love.

Returning to Web Development: A Personal Challenge

Now, I'm embarking on an exciting new journey: learning front-end development from the ground up. Unlike my previous experiences with websites where I relied on templates or WordPress, I'm taking a deliberate, structured approach. I'm currently working through comprehensive courses on Scrimba and The Odin Project, determined to understand every line of code I write.

More Than Just Code: A Holistic Blog

This blog won't just be about coding. While I'll share my technical learnings and development progress, I also want to create a space that reflects my broader interests. Expect insights into the tech world, personal reflections on my learning journey, and occasional reviews and thoughts on movies and series that capture my imagination.

Why Share?

My goal is simple: to document my growth, connect with like-minded individuals, and create a platform where technology, creativity, and personal development intersect. Whether you're a fellow developer, a tech enthusiast, a movie buff, or someone curious about career transitions, I hope you'll find something valuable here.

From managing complex network infrastructures to spinning tracks as a DJ, and now diving into web development, my life has been about continuous learning and embracing new challenges. Join me as I navigate this exciting path of personal and professional growth.

Let's code, explore, and learn together!

]]>