Anjelica_MF

Posted on Jul 11

SimWeek: Navigating from the Valley of Despair to Code Enlightenment

#webdev #beginners #learning #coding

Five Days. One Dev. Zero Chill.

Welcome to SimWeek. I’m using my vacation to simulate being a junior developer with daily builds, real constraints, and raw honesty. If I want to thrive in this industry, I need to stress not just my emotional resilience, but my technical precision. The kind that shows up in clean HTML scaffolding, bug-free paths, and JavaScript that responds to user behavior.

TL;DR - July 10 - Day 2

It’s 10:24 a.m. My phone and laptop are on DND. Amanati is playing in the background. Today was another technical turning point. I refactored shoddy HTML, debugged a missing SVG caused by a rogue slash, and deepened my JavaScript fundamentals, especially DOM manipulation and event listeners. I am starting to catch structural missteps (like poor layout logic) before they ship. This is the first time I've prevented bugs instead of just reacting to them. Thanks to re-reading my HTML with layout intent, not just markup habits.

Skillcrush 10:30 a.m. - 12:00 p.m.

Building on yesterday's post, I'm continuing to deepen my understanding of JavaScript Fundamentals.

Data Types & Arithmetic Operators✅
Comparisons & Conditionals✅
Manipulating the DOM✅
Event Listeners✅
Functions✅
Keydown & Change Events⚠️

💥 Breakthrough of the Day: Event Listeners
Skillcrush introduced the syntax for keydown and change, but it wasn't until I read the MDN docs that the real difference clicked.

keydown fires on every key press, which is perfect for live validation like checking password strength.
change waits until the user is done and moves away, which is ideal for forms where you don't want to interrupt typing.

Errands & Lunch 12:00 p.m. - 1:30 p.m.

Front-End Mentor - 1:35 p.m. - 5:30 p.m.

Skillcrush - 1:35 p.m. - 3:35 p.m.

💭Dev Frustration: The Curse of the Advanced Beginner

Reviewing Skillcrush code made one thing painfully clear: I'm in that awkward middle stage of the Dunning-Kruger curve where I know just enough to spot flaws but not always how to fix them. For instance, after looking at Skillcrush's clean code, I realized my HTML is written poorly.

Here is where I live on the Dunning-Kruger curve: somewhere between “😵‍💫” and “🔥”

🧠 Technical Insight: HTML Scaffolding Mistakes

So, I realized my hero section has insufficient reinforcement, aka bad coding. When I was a "newborn dev", it took a minute for me to comprehend writing HTML semantically. It wasn't until I made the connection that divs are just rooms in a house that it clicked. Walk with me.

Can you see the bugs beginning to infest this scaffolding? This code is from 2 days ago, I didn't get a clean screenshot of yesterday's version, but going forward I'll commit to daily snapshots for better before/after clarity.

So, let's walk through this screenshot together and debug the logic:

Why is the hero image not in the ? That’s like buying a flat-screen TV and bolting it to a tree outside, facing the living room. Present, but misplaced.
Why does have a class like .header? It’s like hanging a label that says “this is a door” on a perfectly functional door.
BONUS: There is an initial accessibility and semantic red flag in this image as well. (If you spotted it, I owe you coffee--black coffee, not a Starbucks order, I'm not made of money.) I didn't notice it until I wrote this article. Pro-tip: Step away from your code. It helps!

I used to think finishing HTML meant "I'm done". Now I know it means, "Let's audit this for structure, purpose, and readability before moving on to CSS, or decorating the house."

SVG, or Seriously Vanishing Graphic

SVG, commonly known as Scalable Vector Graphics, greatest asset is being scalable without losing quality. The Dunning-Kruger curve illustration from earlier is an SVG created by ChatGPT. So why is my SVG not rendering?

After some furious Googling (and mild swearing), I realized I was asking the wrong question. I didn’t need “how to draw an SVG”_I needed _“how SVGs file paths break when writing the HTML.” It was 3:30 and past time to work on the simWeek branch.

simWeek branch 3:35 p.m. to 5:30 p.m.

Thanks to what I learned from debugging this morning's HTML and SVG, I approached the simWeek branch with more clarity. I simplified my structure when suddenly...

I saw the answer to the SVG conundrum. The issue was a missing rogue forward slash in my image path. I’d written:


<!-- WRONG -->
<img src="svg/icon-facebook.svg" alt="Facebook logo">

<!-- RIGHT -->
<img src="/svg/icon-facebook.svg" alt="Facebook logo">

That tiny slash broke the rendering.🫠 When I copied and pasted it between branches, I missed it. So, junior devs, before you spin out, just check to see if the file path is written correctly.

🧩 Unexpected Challenge: Founder Section Breaks the Flow

So, I am supposed to have curveballs, but honestly, both branches have taken care of that for me. For instance, I found a photo on Pexels that I had to add to the SimWeek branch. That small content change? It broke the mobile layout.

Now I’m rethinking layout strategy:

Should this section stack?
Should it live on page two?
How do I maintain design consistency between both builds?

Real galleries lead with mood and artwork; the people come second. That rhythm feels more natural to users than cramming everything upfront. So, the founder image and placeholder text will be placed on the second page.

DevLog Reflection

Today I have fewer lines of code but more decisions and that’s the real growth.

I spent less time typing and more time debugging, refactoring, and understanding file structure, layout patterns, and JavaScript behavior. Ironically, this FEM project had the least HTML I've ever worked with, and yet, I've never thought harder about structure.

DEV Community