I started the Meet Landing Page challenge to flex my CSS Grid muscle and sprinkle in a little Flexbox flair. I expected to walk away with a portfolio-ready layout. Instead, I left with a bruised ego, a newfound respect for CSS specificity, and a crash course in accepting feedback without shutting down (literally and emotionally).

The Bug that Broke My Brain

Writing the initial HTML, easy, and it took less than a day. But the CSS and debugging? That is where things unraveled.

I practically lived in Chrome DevTools. Take this code snippet below: on mobile screens, I expected the component marker to shift to a single column layout (1fr). Instead, it stubbornly stayed locked in column 5. I was in VS Code Live Preview beginning to crash out. In DevTools, I saw a sea of strikeouts.

.component-marker2 {
outline: 3px solid black;
grid-column: 1 / -1; grid-row: 1;
justify-self: center;
}

Why wasn’t is working? I was inside my mobile styles. So, why wasn’t it taking effect?

A Crash Course in Specificity

In a panic, I googled “what does strikeout lines mean in dev tools”. Stack Overflow told me: my rules were being overruled by more specific styles, specifically the tablet CSS.

Okay, so… “how to prevent CSS from being overruled’’? The answer? “Be more specific.”

I was already in a mobile query! But the issue was not where I placed styles, but how I targeted the element. After a deep breath and a W3Schools detour, I began to understand specificity. Here is what worked:

section .component-marker2 { 
outline: 3px solid black;
grid-column: 1 / -1; 
grid-row: 1; 
justify-self: center; 
 } 

Specificity for the win!

How I Learn Best (and Why That Matters)

After the fix, I went to Gemini and asked:

Can you find resources on CSS specificity...but make it gamified?

Why gamified? I work full-time in retail. My breaks are short, so 10 minutes for coding, and 20 minutes for lunch and taking a catnap. Long documentation doesn't always stick. Games, however, do.

I recommend checking out CSSBattle. Here is a fun video to watch to get an overview of the game:

https://www.youtube.com/watch?v=B32NKRKJ_Cc

A site to bookmark is, of course, CSS-Tricks. In DevTools, if you hover over the element, a (e.g., (1,0,0,0) scores) will pop up with the points of that element. This page explains what those numbers mean and possibly hints at why your CSS isn’t working:

https://css-tricks.com/specifics-on-css-specificity/

The Feedback That Shook Me

While I was still wrestling with specificity, I turned to the Frontend Mentor Discord for help. My question? How to layer the component marker on top of the div.

I got my answer, but also got much more:

🥊Glove slap #1: Incorrectly written media queries.
🥊Glove slap #2: A rogue horizontal scrollbar.
🥊Glove Slap #3: Too many unnecessary grid columns

K-O!😵‍💫😵‍💫
My heart sank.

Internal dialogue:_ I worked so hard on this code. I’ve spent days debugging and reworking just for them to tell me it still has fundamental issues. Maybe I'm not cut out for this…_

In full transparency, I commented defensively and slammed my laptop shut.

Earlier in my learning journey, my Skillcrush teacher Lisa sent a video on handling critique. If you’re struggling with receiving feedback, I highly recommend Angie Jones "The 10 Commandments of Navigating Code Reviews", which shifted my perspective. Seriously, every developer needs to watch this:

https://www.youtube.com/watch?v=3b_3-XyDat8

The next day, I reread the feedback, edited my comments (with a lump in my throat), and realized they were right. I asked for feedback… and nearly rejected it. I’m still ashamed of that moment, but also deeply grateful. The FEM Discord community saved me from future headaches.

Takeaway: Don’t be married to your code. Don’t take critiques personally.

What I’m Doing Differently

The Meet Landing Page challenge was meant to show off my layout skills. But it also taught me about resilience, learning under pressure, and how I respond to critiques as both a developer and a human being.

After completing the project, I had to ask myself. Am I ready to move onto the JavaScript Fundamentals learning path?

Honestly? Not yet. I am going to build one, possibly two, more responsive layout projects from scratch before diving deep into JavaScript Fundamentals.

Why? Learning a programming language (JavaScript) is a completely different mental model from CSS. And much of what you do with JavaScript on the frontend involves manipulating the DOM, which means understanding how HTML and CSS behave. If I am still shaky on layout and style, how can I trust my scripts to behave?

Your Turn

I’d love to hear from other developers:
What was your most humbling code review? What stuck with you afterward? Drop them below — I promise I’ll read every one.🤗