Breaking the Loop: How I Finally Stopped Restarting Web Development

Afiya Siddiqui — Thu, 01 Jan 2026 09:43:31 +0000

If you looked at my laptop's file history, you'd see a tragedy in three parts.
There's a folder from 2023 named "Learn to Code." There's another from early 2024 named "Web Dev Authentic." And there's a third one, created just a few months ago, named "Final Attempt."
Inside every single one of them is the same file: index.html. And inside that file is the same line of code:

Hello World

.
For the longest time, I was stuck in the "Tutorial Hell" loop. I would start learning with high motivation, watch three hours of videos, and feel like a hacker. Then, reality would hit. Midterms would arrive, university assignments would pile up, or I'd just get tired. I'd take a two-week break.
When I came back, I would feel like I had forgotten everything. Panic would set in. "I can't remember the difference between a div and a span. I better start over to make sure I get the basics right."
So, I would delete the folder. I would restart the course. I would type "Hello World" again.
This is the confession of a serial restarter. But this post is different because, for the first time in two years, I didn't hit delete. I finished HTML
Being a university student learning to code on the side is a specific kind of difficult. We aren't just battling laziness; we are battling cognitive load.
When you spend all day studying for a Calculus or Literature exam, your brain is fried. The idea of sitting down to learn the syntax of an ordered list feels impossible.
My mistake was trying to treat coding like a university cram session. I would try to study it for four hours on a Saturday. Then, when exams hit, I did zero hours for a month. That gap is what killed my progress. It created the "amnesia" that made me want to restart.
How I Finally Finished HTML
I stopped trying to memorize every tag. In my previous attempts, I thought I was a "fake" developer if I had to Google how to make a table. This time, I accepted that even seniors Google things.
I focused on the structure, not the syntax. I learned that HTML is just a skeleton. It's the bones of the house. Once I understood the parent-child relationship of elements, I stopped worrying about memorizing the specific spelling of every attribute.
I built a messy, ugly, unstyled webpage. It had no colors. The font was Times New Roman. But it was done. And I didn't delete it.
My Advice to Fellow Students
If you are a student stuck in the same restart loop, here is what I've learned:
Don't "Clean Slate": If you take a break for exams, don't start over when you come back. Pick up exactly where you left off, even if you feel lost. The confusion will clear up in 20 minutes.
Build, Don't Watch: You can't learn to ride a bike by watching YouTube videos of people riding bikes. You have to type the code.
20 Minutes is Enough: You don't need 4 hours. 20 minutes of coding between classes keeps the memory fresh.

My journey isn't over. In fact, the hard part is just starting. But the folder on my desktop isn't called "Final Attempt" anymore. It's just called "My Projects."
And that's enough for me.

Unboxing CSS: Four Surprising Truths About How Web Layouts Really Work

Afiya Siddiqui — Thu, 01 Jan 2026 09:13:03 +0000

If you've ever tried designing a web page and wondered why elements don't align perfectly, chances are the CSS Box Model is behind it. Understanding this fundamental concept is crucial for any front-end developer or designer seeking precise control over layouts and visual structure.
What is the CSS Box Model?
The CSS Box Model is the blueprint of how every HTML element is rendered on a web page. No matter if it's text, images, or interactive graphics, every element is treated as a rectangular box. Learning how this box is structured enables developers to accurately manipulate spacing, borders, and alignment, ensuring your designs appear exactly as intended.
The Four Layers of the Box Model
Every element in CSS has four layers, each wrapping around the previous:
Content: The innermost part, containing text, images, or other media.
Padding: The space between the content and the border - think of it as the element's internal cushion.
Border: Surrounds the padding and content; it can be visible or invisible.
Margin: The outermost layer, controlling the space between this element and its neighbours.

Understanding these layers is key to creating layouts that don't feel cramped or misaligned.
Borders: Adding Structure and Style
Borders define the edges of an element and can be fully customised:
Style, Width, and Color: From solid to dotted or dashed, you can define the appearance and thickness of borders.
Shorthand Notation: Write less code with syntax like border: solid brown 5px; which sets style, color, and width in one line.
Directional Borders: Apply borders to specific sides using border-top, border-left, etc.
Border Radius: Round the corners of your boxes with border-radius, either uniformly or individually (border-top-left-radius)

Borders aren't just decorative - they help define hierarchy, separation, and focus on your page.
Padding vs. Margin: Controlling Space
Many beginners confuse padding and margin, but they serve distinct purposes:
Padding: Adds space inside the border, between the content and its frame.
Margin: Adds space outside the border, separating the element from others.

Both properties accept multiple formats:
Single value: Applies the same spacing to all sides.
Two values: First value → top/bottom, second → left/right.
Four values: Control each side individually in the order: Top, Right, Bottom, Left.

Mastering these can prevent overlapping elements and messy layouts.
Height, Width, and Element Behavior
While you can set a box's dimensions using height and width, not all elements behave the same. For example, tags are inline by default, so applying height and width may not visually affect them. Knowing the difference between inline, block, and inline-block elements is crucial for effective layout design.
Modern Development Best Practices
Reset Default Styles: Browsers add default padding and margins to elements, which can break layouts. Using the universal selector (* { margin: 0; padding: 0; }) gives you consistent control.
Use Developer Tools: Inspect Element allows you to visualise the box model in real-time. You can see exactly how content, padding, border, and margin interact - making debugging and design adjustments faster and more precise.

Conclusion:
The CSS Box Model is the cornerstone of web layout architecture. By mastering its four layers, understanding padding vs. margin, and leveraging borders and dimension properties, designers and developers gain full control over the appearance and spacing of their elements. Whether you're creating a minimalist landing page or a complex dashboard, the box model ensures your designs are clean, precise, and visually appealing.

DEV Community: Afiya Siddiqui

Breaking the Loop: How I Finally Stopped Restarting Web Development

Hello World

Unboxing CSS: Four Surprising Truths About How Web Layouts Really Work