Learning Web Development: A Love-Hate Relationship

Grëg Häris - Sep 1 - - Dev Community

The thrill of seeing your first line of code come to life – it's a feeling every aspiring developer knows!

Like many beginners, I was hooked the day I built my first webpage with basic HTML and CSS– a simple page with blinking text and an oversized picture, It was a crude creation, but the thrill of seeing my code come to life was undeniable. At that moment it was the most beautiful website on the web and it felt amazing!.

I told myself If I could do something this beautiful with just those guys, what will happen when I add JavaScript? So I couldn't wait to start JS.

Fueled by this initial success, I dove headfirst into The Odin Project, a fantastic platform known for its structured learning approach.

The Odin Project's curriculum made tackling the fundamentals a joyride. So I danced through the basics, every learning section was the best time of the day and every new course section felt like unlocking a new superpower. I'd spend long hours glued to my laptop, couldn't close it and find it difficult to step away - completely engrossed in the learning process.

Starting JavaScript, learning basic syntax, data types, and DOM manipulation was a game-changer. Witnessing the magic of adding interactivity, such as making elements react to clicks or hovers, was truly amazing.

Basic arrays, loops, and objects were relatively straightforward, although they presented some challenges that added to the thrill of figuring them out.

I was so excited and thought, 'This sh*t is incredibly exciting and surprisingly simple. I wonder why people find it so difficult, frustrating and boring'.

When I was done with the Fundamentals, I was so excited and couldn't wait to go more.

But then in a flash, everything changed- the honeymoon phase ended.

Now I've been using px indiscriminately for everything—images, fonts, margins, paddings, and more. Yes, I couldn't wait to start using responsive measurements, so em and rem was great. But then here comes Calc() and Clamp() (how do you figure how to use those? 🤣) - to be honest even up until now, I am still struggling with using those.

Life often mirrors this experience. We yearn for growth and complexity - we can't wait to be old enough, strong enough, capable enough to take on more difficult stuff, but the challenges that accompany it can be unexpected. We most times anticipate a straightforward journey, but reality often presents a more convoluted path filled with obstacles

So up to this point everything had been straight forward and with less complexities.

You see everything was simple. I was creating simple interfaces using just Flexbox. However, when I started learning Grid, it all changed. I couldn't understand it. It was as if my brain had suddenly stopped functioning. I left The Odin Project and ran to Google, then to AI tools like Gemini, ChatGPT, DeepSeek for help and then to Youtube. But with each article and video, my confusion and frustration grew. Yes I see what they are doing, I understood the concepts, yet the more I learned, the more confused I became.

Flexbox was so straightforward to use. Simply declare the display property, choose the direction, and then justify the content or align the items. While Flex shorthands presented a bit of a challenge, they were nothing compared to the complexity of Grid.

In Grid, you see Grid Template rows, columns, areas, you chose the Grid rows and columns (start and end). Then you hear about tracks. You see Grid template auto rows and column. . How about repeat(), MinMax(), fr, complex calc() again, auto-fit and auto-fill (when will you even use auto-fill?), and more. My God! I was so frustrated.

I devoured resources from fantastic YouTubers like Dev Simplified, Kevin Powel, but I hit the holy grail when I took the phenomenal WesBoss CSS Grid course on Youtube that opened the gates of heaven. All of a sudden, my brain started functioning again. It was like a lightbulb moment – everything I had learned previously clicked into place, and I finally understood the power of Grid!"

Imagine using CSS Grid. It's a game-changer! While the initial learning curve might be steep, once you grasp the fundamentals, you'll realize how straightforward and powerful it is- to be honest, I am not yet a master nor pro.

I highly recommend taking Wes Bos's CSS Grid course. I recommend you code along and do the exercises. Even though it's a few years old (about 6years old at the time of writing), it's still incredibly relevant and will provide you with a solid foundation for mastering Grid layouts.

Equipped with a solid understanding of CSS Flex, Grid, and Positioning, along with pseudo-classes and pseudo-elements, I was able to create much more complex and dynamic interfaces. My excitement and motivation were reignited as I saw the possibilities that these tools unlocked. So it was time to head back to JavaScript and get more advanced.

As I ventured into more advanced JavaScript topics like object prototypes, factory functions, and constructors, I hit a significant iceberg. In a flash my excitement and motivation disappeared.

I couldn't understand a bit of anything- Object.prototypeOf blablabla, then factory Functions. When I start making sense of one, I come across another- Constructors, no don't use constructors use Classes, then comes object methods, inheritance, compositions, then comes spaghetti code, SOLID principles, modules, CRUD.

I wast lost, dismayed, shattered. I couldn't graps anything.

Then I went from using my simple VScode lifeserver to using WebPack (development and production) and its server and then Linting and many configurations.

I will sit down for long hours trying to figure out those.

From programming being the best thing that happened to me and even calling my Laptop my girl friend, they became my enemies. I was so damn frustrated that I didn't even want to even see her anymore. Instead of learning, I find myself scrolling through football news (transfer rumours, highlights, match updates), X and Instagram for hours.

To reignite my passion and get back on track, I devoured amazing Youtube videos about the success stories of those who took the self-taught route. They spoke about their challenges with Object Oriented Programming and how they overcame.

One Youtube channel that struck me the most was Travis Media. In this Travis's video: My Unconventional Coding Story | Self-Taught, he openly discussed how he got started, his struggles, his passion, motivation to keep going, persistence and determination, how he got his break and then his Continuous Learning journey.

Beyond YouTube, I actively sought inspiration. Podcasts became my gym companion, and I carved out time to watch motivational talks and read the biographies of great developers.

But inspiration alone wouldn't suffice. I created a study schedule that incorporated short bursts of motivational content and joined online developer communities for peer support.

Yes I am still struggling to learn but it's now getting better.

Here are 6 things that has helped me so far:

  • Embrace Resourcefulness: Be adventurous. Don't rely solely on a single resource. No matter how great a resource is (paid or free), there will be times when you can no longer get your head around what's going on. So make Google, AI tools, YouTube, Reddit, Stack Overflow, and open-source communities your study pals. You'll often find solutions by casting a wider net.

  • Break down complex lessons to chunks and learn it chunk by chunk then fit them back all together.

  • Take breaks but don't give up: When you're stuck, taking a break can be incredibly beneficial. A short nap or walk can often provide fresh perspective.

  • Avoid burnouts: I came across a quote that said, "Choose consistency over intensity" and that has been one of my mantras. Instead of sitting for too long trying to figure things out even with Pomodor, I just close my laptop and take a walk.

  • Minimize Distractions: Avoid using your phone as much as possible. Running to my phone had been the best escape for me. But it's not right. When you feel overwhelmed, you need to quiet your mind. I recommend listening to calm music, taking a walk in nature or napping.

  • Leverage AI Strategically: Use AI tools as great resource to breakdown complex codes to chunks, and gain insight. However, be cautious about relying on them to solve problems, as they can introduce new issues. and most times neither you nor them can fix the bug.

This has been a long journey, but I'm excited to see what the future holds. I'll continue to share my progress and learnings. Stay tuned for more updates!

Woah... This has been a long read. Thanks for reading to the end.

In the meantime, please share your thoughts and experiences in the comments.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . .