Technical Blog — CSS Concepts
The Big Idea
Writing about a technical topic forces you to understand it deeply enough to explain it. This blog post is also practice for writing HTML directly — you will create and publish it as part of your blog.
⚑ This task is assessed
Your blog post is assessed. It must be linked from your index.html and visible in your blog.
Your Roadmap
| Section | Time | Required? |
|---|---|---|
| Choose your topic | 5 min | ⚑ Required |
| Research | 1 hour | ⚑ Required |
| Write and publish | 1 hour | ⚑ Required |
| Share with your cohort | 10 min | ⚑ Required |
Choose your topic
Pick one of these:
- What is the difference between Margin, Border, and Padding?
- What are the best practices for using classes vs IDs?
- What are the differences between relative, absolute, and fixed positioning?
- What does it mean to display inline vs inline-block?
Research
Research your topic. Use documentation, articles, or your chatbot.
Check your understanding with a chatbot:
Step 1 — Set the scene:
"I'm researching [your topic] in CSS. I want you to check my understanding by asking me questions — don't explain anything yet, just ask."
Step 2 — Answer in your own words. It's fine to say "I'm not sure."
Step 3 — Fill the gaps:
"Based on my answers, what's the one thing I'm most unclear on? Explain just that one thing with a code example."
Step 4 — Check your analogy:
"I think [concept] works like [your analogy]. Is that accurate? What am I missing?"
Write and publish
Step 1: Create your blog file
In the blog-posts directory of your blog repo, create a new file:
touch blog-posts/html-css.htmlcode .
Step 2: Write your post
Write for a non-technical reader. Explain the topic step by step, as if teaching a friend who does not code. Include:
- An explanation of the concept in plain language
- Code examples showing the difference or how to use it
- Screenshots or visual examples where they help
There is no minimum length — focus on clarity over quantity.
Step 3: Link it from your homepage
Open index.html and add a link to your new post. Commit and push.
How to know you've nailed it
| Level | You can... | ||
|---|---|---|---|
| 🪨 | Intro Climb | Write a post that explains the chosen topic in plain language | ⚑ Required |
| 🧗 | Core Ascent | Include code examples and link the post from your index.html | ⚑ Required |
| 🏔️ | Summit | A non-technical reader could follow your explanation and understand when to use each option | ◎ Optional |
Share with your cohort
Post in #foundations on Discord:
- Share the link to your live post (if deployed) or a screenshot
- Read two other posts from your cohort
- Reply to one — what do you agree with? What did you learn?
The Big Idea (revisited)
Teaching something is the fastest way to find out what you do not yet understand. Your blog post shows both your HTML skills and your understanding of CSS — write it as if someone else's learning depends on it.