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.🤗
Top comments (13)
Totally relate to this! CSS specificity has tripped me up so many times too — those DevTools strikeouts are brutal. Thanks for sharing your journey so honestly. Also, if it helps, I made a little CSS Formatter tool that I use to clean up my stylesheets. Keep going — you're doing great!
I just bookmarked it. Thank you for sharing your tool!
Specificity is one of the hardest parts of CSS. That is why Tailwind is so popular. By using utility classes you avoid specificity problems.
So when you learned about it, you are a step further than the Tailwind users. No need for a bruised ego, you are ahead of the herd.
Are you ready for javascript, I wonder why you think of it as a question. You are willing to learn, so you can learn anything you want. Everybody struggles during learning, don't let that stop you.
Thanks for this thoughtful comment! You're absolutely right about specificity being a tough part of CSS, and it's interesting to think about how Tailwind addresses that. I hadn't considered it that way, but feeling like I'm "ahead of the herd" certainly helps with the ego!
I think I question my readiness because I want to make sure my foundations are solid before tackling a new mental model, but you're right, willingness to learn is key. I appreciate the push!
man, respect for sharing the rough parts too - keeps me showing up even when i flop. you think grit comes from sticking through pain or more from building small wins over time?
For me, I think it's a bit of both. The "sticking through pain" moments definitely build resilience and character, showing that you are capable of. But it's the "small wins over time" that provide the consistent motivation to keep going.
You captured the emotional rollercoaster of CSS and code reviews perfectly. That “sea of strikeouts” in DevTools has haunted me too. Major respect for turning that moment into growth instead of giving up. Also love the idea of reinforcing fundamentals before jumping to JavaScript — that self-awareness is rare. Keep going — your honesty and grit are part of what make a great dev.
Vulnerability wins the day! Look at how much you grew from this one challenge! I definitely feel inspired to go back to Frontend Mentor and dive back into the challenges. You help me see that letting people comment on your work is the key way to understanding how to accept feedback in a team setting. And I loved watching the CSS Battle! I appreciate you sharing resources so much.
keep up the good work
Good work!
Thank you. I wish I could link to the project so yall could see it.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.