How to Build Your First Website with HTML and CSS
Every website you visit is built from HTML and CSS. HTML gives the page its structure and CSS controls how it looks. You only need a text editor and a browser to start.
Start with HTML structure
Create a file called index.html. Add a heading, a few paragraphs, an image and a link. Use semantic tags such as header, main, section and footer, because they help both people and search engines understand your page.
Style it with CSS
Add a stylesheet to set fonts, colours and spacing. Learn the box model, flexbox and grid, since these three ideas cover most layouts. Keep your design simple with one font, two or three colours and generous spacing.
Make it mobile friendly
Add the viewport meta tag and use relative units so your page fits every screen. Most visitors use phones, and Google ranks mobile-friendly pages higher. When you are done, upload the files to free hosting and share your link.
Tools you need
You need only three things: a computer, a modern browser and a code editor. Visual Studio Code is free and highlights mistakes as you type. Install the Live Server extension so the page refreshes every time you save. Keep your browser’s developer tools open with the F12 key, because they show which CSS rules apply to each element and help you find errors fast.
A simple page layout
A clear structure helps visitors and search engines. Put your logo and menu inside the header, your main content inside main, each topic in its own section and your contact details in the footer. Use one h1 heading per page for the main title and h2 or h3 headings for smaller parts. Write short paragraphs, and add alt text to every image so that people using screen readers know what the picture shows.
Links connect your pages. Use a clear anchor text such as Read our guide to SQL instead of click here, because it tells both people and Google what the link leads to.
Styling with CSS
Begin by choosing a readable font size, usually between sixteen and eighteen pixels for body text. Give the text enough line height so it does not feel crowded. Pick a small colour palette, for example one dark colour for text, one light colour for the background and one accent colour for buttons and links. Check that the contrast is strong enough to read in sunlight on a phone.
Flexbox places items in a row or column and is perfect for menus and card rows. Grid creates two-dimensional layouts such as galleries. Learn both, because together they replace most old layout tricks.
Common beginner mistakes
Many beginners forget to close tags, which breaks the layout in confusing ways. Others use fixed widths in pixels, so the page looks fine on a laptop but overflows on a phone. Another mistake is using tables for layout, using too many fonts, and writing all styles inside the HTML tags. Keep your CSS in a separate file so the code stays tidy and reusable.
Accessibility and SEO basics
A good website works for everyone. Use real buttons for actions, label every form field, and make sure the page can be used with a keyboard. These habits also help search engines. Add a unique title and meta description to each page, use meaningful headings, compress your images and make the page load quickly. Search engines reward pages that are clear, fast and helpful.
Publishing and next steps
When your page is ready, upload it to a free host such as GitHub Pages or Netlify and test it on a real phone. Ask a friend to open it and tell you what confused them. Then add JavaScript to make the page interactive, for example a menu that opens on small screens or a form that checks input before sending. Each small improvement makes you a stronger developer, so keep building and keep your first site online as proof of your progress.