The Two Languages Behind Every Page
Every website you have ever visited is built on the same foundation. HTML gives a page its structure — headings, paragraphs, images, links. CSS gives it style — colors, spacing, fonts, layout. Nothing else is required to publish your first real page on the internet.
If you are starting from zero, HTML and CSS are the friendliest possible entry point: they are forgiving, instantly visible in the browser, and free to practice anywhere. This guide walks through building one complete page, line by line. When you are done, follow the Kenya web developer roadmap to see where this fits in your broader path, or pair it with the JavaScript for beginners guide to add interactivity next.
The Tools You Actually Need
Ignore the myth that you need expensive software. For the first few weeks of learning, you need exactly three things:
F12).Create a folder called my-first-site, open your editor, and save a new file as index.html. That filename matters — web servers look for index.html by default, so it becomes the "home page" of your site.
The Skeleton of Every HTML Page
Type (or paste) this into index.html:
My First Page
Hello, Kenya
This is my first web page.
Double-click the file and it opens in your browser. You just built a web page. Each piece has a job: holds invisible settings (like the tab title), and holds everything visible. The lang="en" and charset lines tell browsers and search engines how to read your content — small details that matter later for SEO.
Common Tags: Your Starter Vocabulary
You will use the same handful of tags in almost every page you build:
alt text describes it for screen readers and SEO)
Semantic tags matter more than beginners expect: they are what search engines use to understand which parts of your page are the main content, the navigation, and the footer. Our Web Foundations course drills this in daily projects so it becomes automatic.
Making It Beautiful With CSS
Now create a second file, style.css, in the same folder, and link it from the :
Then write some CSS:
body {
font-family: system-ui, sans-serif;
max-width: 720px;
margin: 0 auto;
padding: 2rem;
line-height: 1.6;
color: #1a1a1a;
background: #fafafa;
}
h1 {
color: #0b6e4f;
}
a {
color: #0b6e4f;
}Refresh the browser. Your page now has breathing room, a readable line height, and an accent color. That single concept — an external stylesheet — is the same mechanism the largest sites in the world use to keep design separate from content.
The 80/20 of Layout
The one CSS idea beginners struggle with most is layout. You do not need to master everything at once. Start with these two:
.flex-row {
display: flex;
gap: 1rem;
}
.grid-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}display: flex lines items up in a row; display: grid gives you a responsive card layout that reflows automatically on phones. Those two tools, plus padding and margin, cover most of the layout you will need as a beginner.
Your First Practice Plan
Build one page a day for a week. Day one: a personal profile with a photo and an about section. Day two: a recipe page with an ingredient list. Day three: a links page for your favorite Kenyan resources. Each page should use header/main/footer, an image with alt text, and a small stylesheet. That repetition is what turns "I read about HTML" into "I can build pages."
From here, the natural next step is JavaScript — the language that makes your pages respond to clicks and data. Read how to learn to code in 2026 for the full ordered path, or jump straight into free coding resources to keep momentum without spending money. If you would rather learn with structure and reviews, the Web Foundations course turns this exact material into graded daily projects.