From Perfectionism to Progress: Day 1 of my CSS Challenge with ICodeThis
Black-and-white drawing of a hand holding a pen, appearing to erase HTML-like code on paper.
7 MINUTE READ
In this article: How I overcame my perfectionism to make consistent progress using the perfectly pitched mini-challenges from icodethis.com. My top 5 mistakes and corrections.
🧐 Using the BEM class-naming convention.
🙋♀️ Giving HTML meaning - using semantic HTML.
📏 How to mix responsive and fixed measurements.
🙌 When to use margin vs Padding and on what elements.
🖉 What I reset in my CSS before I began and why.
Frustrated with my slow coding progress and held back by my crushing perfectionism, I decided to take action on a quote from Tiny Experiments by Le Cunff:
“Mastery comes from showing up and doing the work—even when you’re not feeling ready or perfect. It’s through imperfect, repeated effort that progress becomes inevitable.”
After some searching, I decide to choose to complete mini-challenges, following a clear pathway with coding solutions, were the best way to go. Enter icodethis.com and their 30-day CSS challenge.
Here’s what I learned from Challenge One: Build a 404 Error Page, including the top 5 mistakes I made—and how I fixed them:
1. Incorrect BEM Naming
❌ My class names were inconsistent and I forgot how to best use BEM class conventions.
✅ I rewrote them using clear, structured BEM conventions.
2.Lack of Semantic HTML
❌ I used <h3> tags for supporting text.
✅ I considered meaning: brand name in a <header>, descriptive text in <p> tags, used H1 and H2 when appropriate.
3.Unresponsive Container Margins. I wanted a fixed margin but scalable container width and height.
❌ Fixed dimensions weren’t scaling.
✅ Used responsive units and fixed units:
Container -
width: calc(100vw - 60px);
height: calc(100vh - 60px);
Margin-
margin-bottom: 60px;
4. Confusing Padding vs Margin
❌ I used both interchangeably, without being sure as to best practice.
✅ I learned:
Padding = inside spacing
Margin = space between elements, based on which element you want to 'push' the other. The margin-bottom should be set on the original element to the next.
5. No CSS Reset
❌ Default browser styles interfered and I was unsure what to reset.
✅ A simple reset did the trick:
* { margin: 0; padding: 0; box-sizing: border-box; }
Code and an image of a 404 page having completed the icodethis css pathway challenge part one.
💡 Biggest Takeaway:
Step back and consider the meaning of each element. Use semantic tags to improve accessibility and clarity.
I finally made progress without burning out—and got a mini dopamine hit from finishing something. Imperfect effort beats no effort, every time.
