Sammy John Rawlinson

Where to Start? Build Something you can see- HTML and CSS

2025-04-9

Where to Start? Build Something you can see- HTML and CSS

Where to Start Coding? Build Something you can see - Start with HTML and CSS

Introduction

If, at this point, you know how computers work - beyond the power button. You can explore the operating system, you can utilise system functions, you might be able to write documents or run and modify apps.Now... It's time to build something.

Thats where HTML and CSS come in. These are the tools that turn structure and style into something you can see — something you can share. (We can save the “are they programming languages?” debate for another day. For the record: HTML — yes. CSS — no.)

Why start here? Not because it’s “easy” — but because in a world of short attention spans, HTML and CSS are instantly rewarding. You write a few lines, refresh the browser, and boom — magic. Whether it works perfectly or not, you see your effort. You can change it, tweak it, break it, fix it. It’s a sandbox, and playing in it is a vital first step.

Like toddlers flipping through picture books before reading novels — this is where you begin to understand how code becomes creation.

Why HTML and CSS are the next logical step.

  1. HTML is the Internets Skeleton
    Every page, form, button, article and popup starts with HTML. It gives content structure and purpose.
    Learnng HTML is like learning how to build a house - not the interior design or the fancy lighting, just the walls, floors, and doors. Not glamorous, but absolutely essential.

  2. Instant Feedback (aka Coding Dopamine)
    Type a few lines, refresh the browser - it's live.
    That instant reward is rare in programming, no need for a compiler, server or database. Just a text editor and a browser, the perfect playground when starting out, anytime anywhere.

  3. Structure, Nesting, Thinking in Blocks
    HTML looks simple but it training your brain to think like a developer. Elements inside other elements(parent/child hierarchy), Code needs to be clean, organized and readable - structure matters to users and machine.

  4. CSS adds Personality and -UX Awareness
    CSS is where your inner designer wakes up. You'll learn spacing, color, typography, layout systems like Flexbox and Grid, and how to make your site work across devices. You'll also begin thinking like a user - what looks good, what feels right, and whats actually usable. Its UI(User Interfce)/UX(User Experience) thinking in disguise.

  5. Its the gateway to joining the World Wide Web
    When you learn HTML and CSS, you unlock the door to:

  • Creating your own personal website or portfolio
  • Publishing blog posts (no frameworks required)
  • Styling docs or Readmes
  • Create visual presentations
  • Create your own library of information

This is where you stop reading and start participating.

Web Development Fundamentals

HTML

HTML is the building blocks of a web page.

🧱Structure
If HTML is the skeleton, at the top is the <head> - this houses the brain, it's where the metadata, page title, links to stylesheets, and scripts live. You don't see it on the page but it holds behind-the-scenes information like a command center.
The <body> is what it sounds like - it's the visible body of the page - where the content is found: text, images, buttons,links and forms. Tags like <h1>, <p>, <section>, and div are like bones and joints, they give shape, structure, and hierarchy to the page.

🔤 Semantic Tags
HTML is not just about structure but also meaing. Tags like <header>, <main>, <article>, <footer>, and <nav> tell the browser, screen readers and search engines what each section of the page is for.
Using semantic tags makes code easier to read and better for accesibility.

🧾 Forms & Inputs
Want to collect user info? Interact with your visitors? Forms are where the magic begins. Interactive elements like: <input>, <textarea>, <button>, are the foundation of user interaction.

CSS

CCS is the skin, clothing, and personality it makes the page feel polished, readable and alive.

🎯 Selectors
CSS is all about picking an HTML element and saying "Here's How I want you to look."
Want all your <h1> headings to be bold, blue in a specific font.

h1 {
  color: blue;
  font-family: 'Arial';
}

📦 The Box Model
Every element is a box, even text, even empty space. The box model is getting layouts to behave. Its made of content: whats inside the element.

  • padding space inside the border
  • border the visible edge
  • margin space outside the element.

60% of Webpage development frustration is not understanding the box model layout.

📐 Layout Systems: Flexbox & Grid

  • Flexbox helps you lay things out in a row or column- so navbars, card layouts, or buttons that space themselves evenly.
  • Grid is the go-to when you ned multi-dimensional layout control- think dashboards, galleries or complex UIs.

Both are modern,powerful (and easier to learn than you think) layout systems that make responsive design better.

Recommended Resources

  • W3Schools – Great for quick lookups and is the beginner bible.
  • MDN Web Docs – The gold standard of HTML/CSS documentation for the technically obsessive.
  • Frontend Mentor – Real-world layouts and design mockups.
  • CSS-Tricks – Deep dives and great examples.

Roadmap: Simple Projects to get started

Start building immediately with these mini-projects.

  1. Knowledge Resource - Create your own library of links and documents.
  2. Presentation - Instead of word or powerpoint create your own interactive presentation.
  3. Your Developer Bio Page - Inclued a photo, links and fun facts.
  4. Simple Blog Layout - Header, Posts, Footer. Classic.
  5. Product Landing Page - Great way to learn layout and call-to-action design
  6. Newsletter Signup Form - Practice forms, spacing, and hierarchy.
  7. Portfolio Homepage - Combine it all: Structure, styling, layout, and a bit of personality.

Whats Next? Try Bootstrap.

Once you've played around with vanilla HTML and CSS, Bootstrap is a great next step. Its a popular CSS framework that helps you:

  • Build responsive layouts faster
  • Learn how large-scale design systems are structured
  • Understan spacing, components, and patterns that are common in UI/UX Design.

Using bootstrap also gives you insight what its like to work with a team or design system - a must for modern devs.

Bootstrap

Final Thoughts: Where you go from here

By learning HTML and CSS, you've unlocked the doorway to building things that are visible, shareable, and uniquely yours.
From here, you can further Web Development:

  • Explore website builders like Wordpress, Wix or Shopfiy to understand layout and templating
  • Dive into JavaScript to add interactivity
  • Learn JavaScript libraries(Like React) or server side languages like PHP for backend logic.

If Web Development is not your thing, you have learnt some important fundamentals that will serve you in great stead if you decide to tackle other languages such as:
  • Python: beginner-friendly and great for scripting, data analysis, automation, or AI
  • C#: ideal for building Windows apps, game development(with Unity), and enterprise tools.
  • Java: still a major player in Android development, backend systems, and large-scale enterprise software.
  • Rust or C++: If you want to go deeper into systems programming, performance or embedded development.

But not matter what path you take, you've taken the most important step: you started building. And thats how you grow.
Go make the web your own.