Updated October 2026. I’m Saizul Amin, a digital growth and web systems professional working on websites and SEO since 2017. I have rewritten this guide from scratch with practical steps, tested advice and sources, and I will keep it current. Last reviewed: October 2026.
HTML is the structure of every web page, and CSS is how it looks. You can build a real, fast and free website with only those two, no framework or database required. This walkthrough takes you from an empty folder to a published site, with code you can copy and understand.
I build websites professionally, mostly with WordPress and custom code, and I still recommend that every beginner build one hand-coded page first. It teaches you what page builders hide.
What you need
- A text editor (Visual Studio Code is free and popular).
- A modern browser such as Chrome or Firefox.
- A folder for your project, for example
my-site.
Step 1: Write the HTML structure
Create a file named index.html. The home page of a website is almost always called that. Paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane Doe | Freelance Photographer</title>
<meta name="description" content="Portfolio of Jane Doe, a freelance photographer in Dhaka.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<nav>
<a href="#work">Work</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="work">
<h2>Selected work</h2>
<img src="photo-1.jpg" alt="A street market at sunrise" width="800" height="533">
</section>
<section id="about">
<h2>About</h2>
<p>I photograph people and places across Bangladesh.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: <a href="mailto:hello@example.com">hello@example.com</a></p>
</section>
</main>
<footer><p>© 2026 Jane Doe</p></footer>
</body>
</html>What matters here:
<meta name="viewport">makes the page behave properly on phones. Without it, mobile browsers show a tiny zoomed-out desktop page.- Semantic tags (
header,nav,main,section,footer) tell browsers, screen readers and search engines what each part is. - One
h1per page, thenh2and below in order. - Every image needs
alttext and explicitwidthandheight, which prevents the layout from jumping while it loads. - The
titleand meta description are what search engines show in results.
Step 2: Style it with CSS
Create style.css in the same folder:
:root { --text: #1b1f2a; --accent: #2563eb; --bg: #f7f8fb; }
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.6;
}
header, main, footer { max-width: 920px; margin: 0 auto; padding: 24px; }
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
nav a { margin-left: 16px; color: var(--accent); text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; border-radius: 10px; }
section { margin-bottom: 40px; }Open index.html in your browser (double-click the file). Edit, save and refresh to see changes. That tight loop is the best way to learn.
Step 3: Make it responsive
You already have the viewport tag and flexible images (max-width: 100%). Add a media query for tweaks on small screens:
@media (max-width: 600px) {
nav a { display: inline-block; margin: 8px 12px 0 0; }
header { flex-direction: column; align-items: flex-start; }
}Design for a phone first, then enlarge. Most of your visitors will be on mobile.
Step 4: Check quality before publishing
- Resize the browser window and use Chrome’s device toolbar to preview phones.
- Run the page through the W3C HTML validator and Lighthouse (in Chrome DevTools) for accessibility and performance hints.
- Check contrast, link text and that every image has alt text.
Step 5: Publish your website
- Free static hosting: GitHub Pages, Netlify and Cloudflare Pages host plain HTML/CSS sites for free. With GitHub Pages you push your files to a repository and enable Pages in the settings (see the official docs).
- Your own domain: buy one from a registrar and add the DNS records your host asks for (usually a CNAME or A records). HTTPS is normally provided automatically.
- Traditional hosting: upload the files to the web root (often
public_html) with FTP or the host’s file manager.
When to move beyond hand-coded HTML
Static HTML is perfect for portfolios, landing pages and small brochure sites. If you need frequent updates by non-developers, a blog, a shop or membership, a content management system such as WordPress is usually the better tool. My step-by-step guide to creating a WordPress site picks up where this leaves off, and if you want to earn from a site, read how to make a website that makes money.
Need a second pair of eyes?
If you would like help applying this to your own website, send me a message with your site address and goal. I will tell you honestly what I would do first.
Frequently asked questions
Can I build a professional website with only HTML and CSS?
Yes, for static sites. Many professional portfolios and landing pages are exactly that. Add JavaScript when you need interactivity.
How long does it take to learn HTML and CSS?
You can build a simple page in an afternoon. Becoming comfortable with layouts and responsive design usually takes a few weeks of regular practice.
Is HTML enough for SEO?
Good HTML (titles, headings, alt text, fast loading, mobile-friendly layout) is a solid base. You still need useful content and a way for people to find the site.
What should I learn after HTML and CSS?
JavaScript, Git, and then a framework or a CMS depending on your goal. See the web development roadmap.
Sources and further reading
How this article was written
I wrote this guide from hands-on experience with websites, SEO and automation. Technical and policy details were checked against the official sources above in October 2026. Tools, policies and prices change; if you notice something out of date, email info@saizul.com and I will correct it. Examples reflect my own projects and will vary on yours.
Saizul Amin is a digital growth strategist and SEO consultant specialising in search engine optimisation, web development, AI-powered automation, and online income systems. With 8 years of hands-on experience helping businesses and individual creators grow their online presence, Saizul combines technical expertise with practical, results-driven strategy.
Experience & Background
Saizul started his digital career in 2017, initially working with Bioscope Limited to build and optimise websites for organic search traffic. Over the years, he has worked across industries including DGHS, NAVANA, UNICampus, UNIPathways, UniqueMark, developing a deep understanding of what it takes to rank, convert, and grow sustainably online.
His work spans the full digital stack — from technical SEO audits and content strategy to WordPress development, marketing automation, and AI tool integration for small businesses and startups.
What He Covers on This Blog
Every article on SaizulAmin.com is written from direct experience. Saizul does not publish theoretical content — every guide, tool recommendation, and strategy shared here has been tested and applied in real projects. Topics include:
- Search engine optimisation (on-page, technical, and content SEO)
- Digital marketing strategy and growth systems
- AI tools and automation for business productivity
- Web development, WordPress, and website building
- Making money online through freelancing and affiliate marketing
Why Trust This Content
All recommendations on this site reflect tools and strategies Saizul actively uses or has personally evaluated. Where affiliate relationships exist, they are clearly disclosed. Content is regularly reviewed and updated to reflect current best practices and algorithm changes.