Week 1: Gradients, SVGs, and the Art of Consistency (#100DaysOfCode)

Obasi Lilian U — Sun, 10 May 2026 10:45:47 +0000

Status: ✅ Complete

Focus: CSS Backgrounds, Borders, SVG Basics, Iframes

Project Highlight: The Digital Art Frame.

🛠 What I Built

Savannah Brew Menu (Live Demo)

A fully responsive café menu page.

Key Tech: Semantic HTML, CSS Grid/Inline-block, Warm Color Palette (#F3EDE6, #E8DDD0).
Win: Successfully embedded live via GitHub Pages and added icons using HTML entities.
Link: Savannah Brew Menu

The Digital Art Frame

A compositional experiment to test layering.

Key Tech: Linear Gradients, SVG Shapes (<rect>, <circle>), Iframes.
Challenge: Positioning an iframe under an SVG frame without Flexbox (solved with negative margins for now).
Lesson: SVG is just a coordinate system, not magic.

Portfolio Refinement

Spent time tweaking spacing on existing projects.

Focus: Margins, padding, and border consistency.
Decision: Identified layout issues I’ll fix once I learn Flexbox (managing technical debt).

🧠 Key Takeaways

SVG Coordinates: Learned that cx, cy, and r are just math instructions for position and size. Experimenting with numbers made it click faster than theory.
Layering Context: Understanding how z-index and negative margins interact to create overlapping effects.
Consistency > Intensity: Posting daily on X, even with small updates, keeps the momentum going without burnout.
Technical Debt: It’s okay to leave a “good enough” fix in place if you know why it’s not perfect and have a plan to refactor later.

🚧 Challenges & Solutions
At first, SVG shapes appeared as text, then I realized I saved the file as .txt instead of .html.

When my text was not centering vertically in a div, I used padding-top for moment; flagged Flexbox as the future fix.

I actually felt overwhelmed by new concepts but then broke them down into tiny experiments (e.g., changing one coordinate at a time).

🏪Next Week’s Plan

Learning: Diving into Design Principles in CSS course.
Building: Continue refining portfolio spacing and typography.
Habit: Maintain daily X posts + Sunday Dev.to wrap-ups.

💬 Final Thought
"You don’t have to see the whole staircase. Just take the first step."

This week proved that small, consistent experiments build confidence faster than waiting for perfection.
See you in Week 2! 👋

From Negative Margins to Clean Layouts: How I Stopped Fighting CSS

Obasi Lilian U — Mon, 04 May 2026 20:10:15 +0000

Hi everyone! 👋

I'm Lilian, a frontend developer transitioning from Agricultural Science. This week, I launched my first professional portfolio hub, and I want to share a specific lesson I learned about CSS spacing that changed how I approach layouts.

The Problem: Forcing Things to Fit

When I was styling my portfolio, I noticed some elements felt too far apart. My quick fix? Negative margins.

I wrote code like this:

blockquote {
    margin-top: -40px; /* Pulling it up by force */
}

On my desktop screen, it looked perfect. But when I checked it on mobile, things started overlapping unpredictably. I was essentially "pulling elements upward by force" instead of letting them flow naturally.

The Realization

I realized that negative margins are often a shortcut that fights the document flow. They might solve a visual problem in one specific view, but they break easily when the screen size changes.

The Solution: Working With the Flow

Instead of forcing elements to move, I learned to adjust the natural spacing of the elements around them.

The "pro move" I discovered:

Reduce the margin-bottom of the element above.
Or reduce the margin-top of the element below.

So instead of this:

/* ❌ The old way */
blockquote {
    margin-top: -40px;
}

I did this:

/* ✅ The new way */
.intro-section {
    margin-bottom: 10px; /* Gentle spacing */
}


blockquote {
    margin-top: 10px; /* Natural flow */
}

The Result

My layout is now:

✅ Stable on all screen sizes.
✅ Easier to maintain.
✅ Predictable when I add new content.

The Takeaway

If you find yourself using negative margins to fix spacing, pause. Ask yourself: Am I fighting the flow?

Often, the solution isn't to pull harder, but to adjust the space around the elements gently.

You can see the final result of this lesson in my live portfolio here:
🔗 Web Development Portfolio Hub

I'm still learning, but sharing these small wins helps me remember them. Thanks for reading!

Forem: Obasi Lilian U

Week 1: Gradients, SVGs, and the Art of Consistency (#100DaysOfCode)

From Negative Margins to Clean Layouts: How I Stopped Fighting CSS