DEV Community: Anjelica_MF

[Boost]

Anjelica_MF — Sun, 07 Sep 2025 13:50:50 +0000

Weekly Code Reviews: How a 15-Minute Friday Habit Can 3x Your Development Speed

Pratham naik for Teamcamp ・ Sep 5

SimWeek: Navigating from the Valley of Despair to Code Enlightenment

Anjelica_MF — Fri, 11 Jul 2025 15:58:16 +0000

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.

SimWeek: I Didn't Spiral. I Just Worked

Anjelica_MF — Fri, 11 Jul 2025 01:29:37 +0000

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 brutal honesty. Because if I want to thrive in this industry, I need to stress both my technical skills and my workflow

TL;DR- July 9 - Day 1

It's 11:00 a.m. My phone and laptop are on DND. Amanati is playing in the background. There was no spiraling today. No structured schedule either, but it is a deep dive day. I briefly experienced a bittersweet realization. My pet project will have to live in the margins…for now. And I grapple with a new technical concept–retina images.

Skillcrush - 11:00 a.m. - 12:00 p.m.

I’m restarting the JavaScript Fundamentals. I passed it before, but the cracks started to show when I began the JavaScript React module, and the water started spewing out of the holes.

I emailed my instructor to reset the module. Why? Now that I have grasped the basics, I want to go deeper. The easy stuff? I flew through. But the moments where I copied the teacher's solution just to finish without understanding—that’s where I need to dig.

Data Types & Arithmetic Operators ✅
Comparisons & Conditionals ✅
Manipulating the DOM ✅.
Event and Event Listeners⚠️
I struggled with writing the classList and mixing up innerHTML vs innerText. But that's okay, right? No! Not if it shows up again when the stakes are higher
Functions🛑
Oh, look! Higher stakes!! Functions tripped me up. Not writing them, but using them as building blocks. I couldn’t tell when to abstract something out. I kept nesting anonymous functions until my code looked like a tangle of spaghetti. React only made it worse: suddenly, every prop seemed to depend on a function I barely understood. **Found it! The weak foundation, time to dig deeper!**

Through some digging, I learned that MDN Web Docs has a Core JavaScript Learning track, which has seven mini-modules and a comprehension check. So, I am adding it to my supplemental learning stack. Now, when I am stuck on Skillcrush, I jump to MDN Web Docs, but I am not staying there. My goal is to obtain my Front-End Certification before September 2025.

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

Front End Mentor - 1:30 p.m. - 3:30 p.m.

After finishing the bare-bones HTML, I moved on to images. Usually, I add them last so I can focus on the layout. But that’s…well, dumb. Padding doesn’t mean much if your images destroy the flow.

As I started adding the image syntax:

      <img src="image.jpg" alt="A description of the image">

I noticed something new in the assets:

image-grid-3.jpg
image-grid-3. @2x.jpg

I understood the first one, but what the heck was @2x.jpg?

Retina Display: Why Your Images Look Blurry

The first explanation I found? Gibberish:

Basically an @2x image is twice the size in pixels as an @1x image and an @3x image is three times the size of an @1x image, e.g.
@1x – 50x50px normal size.
@2x – 100x100px; 2x the size of @1x.
@3x –150x150px; 3x the size of @1x.

Okay.

I keep digging, which leads me to this fantastic flowchart for choosing image formats. But still not quite what I was looking for, but eventually I found these three resources:

Retina Displays: Why This Matters

Retina Displays cram more pixels into the same physical space. When Apple introduced the Retina Display around 2012, they weren’t just showing off. They were raising the bar for what “sharp” actually looks like.

Remember when HD TVs came out and suddenly you could see lace fronts and caked-on makeup? That’s what high pixel density does: it exposes everything. Retina screens are brutally honest. If your UI graphics aren’t optimized, they won’t just look “fine”. They’ll look shoddy.

So what do you do? You give the screen more pixels to work with. If your image is supposed to appear 750px wide on the screen, serve up a version that’s 1500px wide (that’s 2x) and style it to display at 750px. That way, Retina Displays use the extra pixels to render a crisp, magazine-cover-level sharpness.

But here’s the catch: you can’t just throw high-res images everywhere. Too big, and your load times tank. Large images increase load times, delay content, and can leave users staring at “skeleton” loaders. That’s where the element or comes in. It lets the browser choose the right image for the screen, balancing sharpness and performance.

Here is how I implemented the element with in this build:

<picture>

<source  media="(min-width: 650px)"  srcset="image-grid-1.jpg 1x, image-grid-1@2x.jpg 2x">

<source  media="(min-width: 465px)"  srcset="image-grid-1.jpg 1x, image-grid-1@2x.jpg 2x">

<img  src="mobile/image-grid-1.jpg"  alt="">

</picture>

I am using this pattern in the art gallery build, which is finally making the images responsive and retina-ready. I have done other FEM projects without retina support. And I understand why. It isn't always necessary. But for this project? An art gallery? It matters.

High-resolution visuals reinforce the design integrity. They are part of the user experience, especially when the subject matter is visual art. Retina images aren't just a design flex. They are a UX investment. That realization made this day feel worth it.

DevLog Reflection - 3:30 p.m. - 4:45 p.m.

Tomorrow, I'll split my time between Skillcrush and FEM:

Skillcrush: functions, keydown, and change events.
FEM: layout responsiveness, media queries, and possible mobile-first styling.

After hours? Writing. Because when I love the material, I dont mind rewriting it endlessly. That's part of the build, too.

SimWeek: Debugging My Life

Anjelica_MF — Tue, 08 Jul 2025 15:28:35 +0000

Five Days. One Dev. Zero Chill.

Welcome to SimWeek.I'm using my vacation to simulate being a junior developer because stress testing my systems counts as rest now. It is complete with fake deadlines, AI curveballs, and interruptions from imaginary coworkers.

This is a real-time, daily Devlog of everything I’m learning, breaking, Googling, crying about, and fumbling through as I try to build both a website and a working routine. Follow along for chaos, code, and occasional cameos by my dogs.

TL;DR - July 8 - Day 0

Day 0 hit hard. Between barking dogs, phone calls, and a fake Slack message from “Taylor” asking for placeholder imagery by EOD, my scheduled hour was gone before it started.

In today's entry: I learn about boundaries (for dogs and myself), spiral over the lack of Black folks in stock photography, and try to resize 7000px images without losing my mind or skin tones.

On Sunday, I penciled in my "office hours" for the week. Each day, I dedicated five hours to four key areas: my Skillcrush coursework, Front End Mentor (FEM), personal project, and tech writing (e.g. dev articles, takeaways, notes, etc). After I gave ChatGPT all the deliverables I wished to accomplish, I asked it to optimize and create a checklist for me. Yes, like Michelle Obama, I'm a box checker. Turns out, the “margin of error” isn’t just a CSS thing. It’s how much chaos you can withstand before breaking.

Skillcrush - 11:00 a.m. - 12:00 p.m

So, I didn't need to simulate stress--Life delivered. I was 45 minutes in and had already taken two stressful calls—dentist and bank. Not the kind of debugging I had in mind. Puppy dog eyes persuaded me to let them sit in the office with me while I code. I usually listen to the Memoirs of a Geisha soundtrack and deep dive. Not today. Because of the open window, the dogs barked at every. Single. Noise. They had to leave. Once it was quiet again, I asked ChatGPT to create a realistic stressor given to a junior developer. I had 15 minutes left, so I didn't want to waste the FEM hour. But I was determined to accomplish something from Skillcrush hour, so I completed two practice quizzes. With five minutes left, I jotted down my takeaways.

Front End Mentor - 12:00 p.m. - 1:00 p.m

Still wanting to salvage this hour while VSCode was updating, I reviewed the curveball. Here is Taylor” message:

)

Cool. I’d grab some images, create a folder, spin up a new GitHub branch, and drop them in. Easy peasy.

For stock images, my go-to is Pexels. It is free with high-quality photos. However, I became increasingly frustrated with the site. I struggled to find stock photos of black people, other people of color, or people with disabilities. It was primarily white, able-bodied people. And when I did find an image that checked all the boxes, it was behind a paywall. Look, I graduated with a Bachelor's in Costume Design and Technology and an Associate in World Literature and Art History. ALWAYS Pay and Cite artists for their work(looking at you scraping-AI 👀). However, it was a struggle to find stock photos that weren't cheesy, contrived, or behind a paywall. It's funny because right now I'm reading “Unmasking AI” by Joy Buolamwini, and she speaks about coded bias in technology. Yes, it is just stock photos--but it matters. You can't become what you don't see.

Tangent Thought 1: I possess a Canon camera, so maybe I need to start taking and posting stock photos? Be the change I want to see.

Tangent Thought 2: If anyone knows a site that has actual diversity & inclusion imagery, comment below!!

I spent longer than I should have. But this hit close to home: I’m often either the only Black person or one in a handful in these artsy spaces. So finding and adding Black patrons and artists wasn’t a delay—it was a small act of defiance.

Front End Mentor - 1:00 p.m. - 2:00 p.m

Once I found some images, I created a SimWeek folder, a Github branch, and added the images. Before moving on to placeholder text, I double-checked to make sure the photos would fit for mobile-first design. Y'all, why did no one warn about image optimization? The dimensions for the hero image were 7360 x 4912. It was already 1 pm, so my options were: download a plugin to resize the images, visit compression websites, or use Canva. Initially, I went to compression websites. However, the quality dropped, and the compression made the images look worse--especially on dark skin. And I didn’t have time to download a plugin, so I watched a YouTube video on how to compress images using Canva. Check out this great tutorial from WPLearningLab on how to compress images:

How To Compress Images For Website For Free WITHOUT A PLUGIN

Placeholder imagery. ✅

Front End Mentor - 2:00 p.m. - 3:00 p.m

This was supposed to be time for my personal project and dev writing. But neither happened. Accepting defeat, I focused on creating realistic, placeholder text. Again, in hindsight, I should have just kept the FEM text. But it was too late, I already had a narrative in my head. This website would turn into a black-owned, contemporary art gallery in New York. After some back and forth with Copilot—honestly, who is better at titles than OpenAI or Gemini—I had placeholder text that felt believable. All I had to do was submit my work to ChatGPT, but I couldn't. The layout and font styling were wrong. I had to fix it.

Front End Mentor - 3:00 p.m. - 3:55 p.m

I know ‘Taylor’ said EOD, but what did that even mean?

Did EOD mean I had until 4:00 pm? Or 2:00? Or 3:00?
_Ugh, should have asked for a more precise deadline. _
Did they care about the margins and padding, or just the imagery and text?

Dang, ChatGPT told me to ask those questions, but...hubris. Well, it is too late now. I worked until 3:30. I sent a response to “Taylor”. “Taylor” gave me some notes, but overall, I did okay. “Taylor” didn't say anything about timing, so I guess I'm in the clear. Curious what the design team will say. 🤔

Here was my original answer to the prompt:

Here was ChatGPT's better response to the prompt:

DevLog Reflection

Today was chaotic, but I am giving myself grace. I know what you are wondering, "Why stress myself unnecessarily"? After all, I'm still in the Skillcrush Front-End Certification course and have a full-time job. Because the goals of this week are two-pronged: 1) build and set systems in place to work from home, and 2) get time management under control.

As Front End Mentor puts it: ‘Project estimations are a skill that is often overlooked but essential for professional developers.’ I need to rein that skill in. Another takeaway: schedule breaks. I hadn’t moved from my seat until 3:55 p.m., when my partner begged me to eat. During dinner, I promised to schedule breaks this week.

Today wasn’t hard because of the code. It was hard because I didn’t have systems.

Tomorrow will be better.

My First Dev Case Study: Refactoring for Accessibility, Scalability, and Sanity

Anjelica_MF — Mon, 23 Jun 2025 19:20:06 +0000

I thought I finished. I'd shipped the Meet Landing Page challenge and taken my victory bow. Then Frontend Mentor rolled out a new feature: automated audits for accessibility, HTML, CSS, and JavaScript. Suddenly, the project wasn't over. It was calling me back for a rematch.

I compiled all the feedback, opened ChatGPT, and asked it to help me design a focused five-day refactor: 30 minutes a day, real improvements.

Going back in the ring meant two things:

I'd have to get over my GitHub fears. I’ve treated Git like a minefield. Every time I messed up a branch, I’d nuke the repo and start over. That ends here.
I'd also have to work with my ADHD, not against it. My hyperfocus gives me an edge, but it also gives me burnout. And after two weeks, I was running on fumes.

Did I want to work on this refactor? No. I wanted to dive into the new Art Gallery challenge. But this refactor could become my first dev case study. And that is new.

Let's go.

Day 1: Git Confidence & Semantic HTML

What did you tackle?

Created a new branch inside VS Code
Fixed low-contrast text (accessibility)
Rewrote <div>s with semantic HTML
Fixed a layout bug: the missing logo

Why did it matter (tech-wise)?

Starting with Git felt risky. I'd always feared breaking things. But I realized the irony: a branch is how you protect your main project. This time, I used git status, git add, and git commit with confidence. That clarity helped.

Using Chrome DevTools and the WebAIM Contrast Checker, I tracked down all the low-contrast text. Those little "!" icons in DevTools? Lifesavers.

I also replaced non-semantic elements with proper headings. Screen readers—and humans—deserved better than creative-but-cryptic names.

Then, the missing logo bug: I'd trapped it inside an over-dived, over-padded container. So I created a structure rule: use <header>, <main>, and <section> first, then <div>—but only when necessary. Cleaner code = better accessibility.

What did you learn or change for the future?

Figma "padding" doesn’t map 1:1 to CSS. Sometimes it’s margin. Sometimes it’s container padding. That explained my missing logo.
Semantic tags aren’t just "nice"—they’re critical for accessibility.
Git is a versioning system, not a punishment system. Here's how I created a new branch:

git branch <new-branch-name>
git branch -a # check all branches
git status # see current branch and file changes
git add . # stage all changes
git commit -m "Refactor: example"

Commit types I’m learning to use:

fix: bug fixes

refactor: cleanups, improvements

feat: new features

style: non-functional style tweaks

docs: readme, comments

Deep Dive Sources

Day 2: Cleaning Up Broken CSS Habits

What did you tackle?

Unnecessary and/or broken rules

Why did it matter (tech-wise)?

I removed position: relative. When writing the footer, I was layering multiple items, so I thought I needed it everywhere.

Wrong. That led to cluttered, over-styled code.

The CSS report flagged lots of recurring selectors. It suggested I create custom properties (CSS variables). I didn’t implement them yet—it was out of scope—but I took note. Next time: build a base stylesheet before diving into layout.

What did you learn or change for the future?

I’ve always built desktop-first. It felt natural. But accessibility experts and reports nudged me toward a blended approach. Mobile-first CSS isn’t just about phones. It’s about starting lean and layering complexity.

Deep Dive Source

https://www.boia.org/blog/accessibility-tips-avoiding-a-desktop-first-or-mobile-only-mindset

Day 3: Scalable Units & Style Strategy

What did you tackle?

Fixed units

Why did it matter (tech-wise)?

I had been mixing px, em, and rem without strategy.

Responsive design adapts to devices. Scalability ensures future growth. A Discord dev recommended the “px-to-rem” extension by Marco N—huge time-saver.

)

What did you learn or change for the future?

TL;DR for when to use px, em, and rem:

rem → for font sizes, margins, padding, media queries
px → for precise values like borders, shadows, icons
em → for component-specific spacing inside elements like buttons

Deep Dive Sources

Day 4: Grid Systems & RTL Support

What did you tackle?

Excessive columns in my grid layout
A layout bug at 820px
Learned about logical properties

Why did it matter (tech-wise)?

I learned grid systems from TheNetNinja (highly recommend). But I copied repeat(12, 1fr) everywhere—even when I only needed 3 columns. That clutter caused layout bugs, especially at medium breakpoints.

By reducing column count, I fixed the 820px skewing bug.

The numbered sections looked weird because they were squeezed into excessive grid columns.

A Discord dev introduced me to logical properties like margin-inline-start and margin-inline-end. They’re not just cleaner. They support right-to-left languages and boost global accessibility.

Deep Dive Source

https://medium.com/@nnveux/embracing-margin-inline-start-for-better-rtl-support-in-web-design-e8a66b2c3e19

Day 5: Final Clean-Up & Long-Term Habits

What did you tackle?

No major bugs—just polish and validation checks:

Why did it matter (tech-wise)?

These sites are part of my growing "build-good" developer checklist.

What did you learn or change for the future?

I explored modern CSS functions like clamp() and min().

Haven’t implemented them yet—I’m choosing depth over speed.

For now, I want to master layout, semantics, and responsive thinking. Fluid scaling is next.

Final Thoughts

Five days. Five focused sprints.

One sharper junior dev.

This refactoring taught me more than the original build. I learned how to:

✅ Read automated audit reports

✅ Fix accessibility bugs

✅ Navigate Git without fear

✅ Think structurally about HTML and CSS

Even better? I carried this into my next challenge.

While starting the Art Gallery build, I wrote a global stylesheet up front. I view Figma critically now. For example, the mobile and desktop layouts diverge subtly. So I'm structuring the HTML with those breakpoints in mind.

Refactoring didn’t slow me down. It made me deliberate.

I want to go faster, but going slow and right will get me further than fast and wrong.

🔗 Project Links

🗂 GitHub Repo (Refactor Branch)
🖥️ Live Site

Just simply amazing!!!

Anjelica_MF — Wed, 11 Jun 2025 16:31:56 +0000

Tombri Bowei

Jun 10 '25

Juneteenth Freedom Clock - A CSS Art Celebration

#frontendchallenge #devchallenge #css

Comments 16

2 min read

CSS Specificity, Code Review, and the Bug That Broke My Brain

Anjelica_MF — Mon, 09 Jun 2025 19:59:45 +0000

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.🤗

I Used AI for Coding—But Not the Way You Think

Anjelica_MF — Tue, 27 May 2025 18:28:51 +0000

AI helps me code. The real question is how much of a coder am I? I don't copy and paste (anymore), but I understand why senior developers say not to use AI-generated code. My experience with the "Four Card Feature Section" from Front End Mentor highlighted this. Ten months ago, AI suggested using grid-template-areas. It is a valid property and solved my immediate problem. What AI could not provide was the self-awareness of my foundational gaps. Having recently gained access to the premium membership of Front End Mentor, I revisited this project two weeks ago. When I hit a wall, realizing AI's limitations, I decided to reach out to my community on LinkedIn. This outreach led me to an invaluable, now-bookmarked source. I understand why senior developers caution against excessive reliance on AI.

However, AI is not a future job taker, but a great mentor. As a lifelong night owl, the 9-5 learning model does not align with my peak productivity. And this is where AI truly shines for me. Instead of emailing my teacher questions at 2 am, I ask AI. Over the years, I have learned how to write prompts that elicit responses similar to a remarkably patient human mentor. Even when I get super frustrated and demand an answer, I have trained it to guide me to questions to search for on Google. Like humans, AI can mess up. I have seen it hallucinate when asking for highly specific solutions to complex problems. At that point, it usually means I have a knowledge gap, prompting me to return to deep learning. I have sharpened my ability to discern when AI isn't useful in my development process. Learning this limitation is a boon. In a future role, when working with a company's proprietary codebase, I know I will have to find the answer using documentation and insights from my fellow senior developers. As the years progressed, my prompting skills have improved. As a result, AI has become my companion for deep learning. AI guides my question which prompts me to do deep research on my frequent bookmarks MDN Web Docs, Stack Overflow, Google, and FEM Discord. I then return to explain my findings, and AI clears up misconceptions or fine-tunes my thoughts, which I log in my notebook.

I wrote this post in response to a podcast episode from 'HTML All The Things' discussing getting hired in 2025. And I realized I am in a unique position. I am on the ground floor of this technological shift, and AI and I will grow together. Currently, in the tech zeitgeist, vibe coding is all the rage. For the uninitiated, Vibe Coding is a relatively new approach to software development where programmers use natural language prompts to guide AI tools in generating code. And honestly, the concept is fascinating. My new goal is to develop a strong foundation, allowing me to analyze "vibe code" and make it truly robust. So, I see a future with AI. I don't want to fight AI. I want to be its ally. And if you are wondering, yes, I did edit this post with the help of AI. I can send you the prompt I used.

Senior developers, I'm genuinely curious: How are you seeing the role of AI evolve in fostering deep understanding among junior developers? What's your advice on navigating this partnership?