DEV Community

Khahliso Sekoto
Khahliso Sekoto

Posted on

How I Finished The Odin Project Foundations & What I've Learned So Far

#html #javascript #codenewbie #beginners

Hey everyone! 👋

I'm incredibly excited to share that I have officially crossed a major milestone on my self-taught software engineering journey: I've completed the Foundations path of The Odin Project and officially selected the Full Stack JavaScript track! 🚀

When I first started, the terminal felt like a foreign language and managing files via git version control felt completely overwhelming. Looking back now, it's amazing to see how much has clicked.

The Builds I'm Most Proud Of

During the fundamentals phase, everything is about getting your hands dirty with real code. Two projects stood out to me as the ultimate tests of what I had learned:

  1. Etch-a-Sketch Canvas: This was a massive breakthrough for my JavaScript skills. It forced me to move past static variables and understand dynamic DOM manipulation, nested loops to generate grid squares, and handling live mouse hover event listeners.
  2. Landing Page: My first deep dive into modern responsive layouts. I focused heavily on writing clean, semantic HTML structure and mastering the layout alignment control of CSS Flexbox.

You can check out my progress, repositories, and current focus right here:
👉 My GitHub Profile: [://github.com]

https://github.com/KhahlisoSekoto

📐 What's Next: Diving into Intermediate Assets (SVGs)

To jumpstart the Full Stack JavaScript path, I kicked off my week with the intermediate HTML/CSS module focusing on Scalable Vector Graphics (SVGs).

Coming out of the lesson, a few engineering concepts really stuck with me regarding asset choice and performance:

  • Vector vs. Raster Mechanics: Traditional pixel grids (PNGs/JPEGs) struggle and pixelate when resized. Because SVGs rely on math equations in an HTML-like XML structure, they scale infinitely with zero drop in resolution.
  • The Embedding Trade-off: Learning the choice between embedding an SVG inline (total control for CSS/JS animations, but leaves a heavy DOM footprint that can hurt initial page caching) vs. linked (cleaner markup using standard <img> tags, but acts as a frozen asset).
  • Knowing Limitations: SVGs are incredibly efficient for UI frameworks and icon systems (like Feather Icons), but completely the wrong tool for photorealistic rendering where high textures cause massive code bloat.

💬 Let's Connect!

To the self-taught dev community or anyone currently pushing through The Odin Project: What was the biggest breakthrough concept or project that made frontend programming finally click for you?

Let's discuss workflows below! 👇

Top comments (0)