What you'll learn

  1. Quick answer
  2. HTML and CSS: What Each One Does
  3. What You Need to Make a Website Using HTML and CSS
  4. Step 1: Create Your Project Folder and Files
  5. Step 2: Write the HTML Structure
  6. Step 3: Style It With CSS (Colours, Fonts, Layout)
  7. Step 4: Make It a Bit Responsive
  8. Step 5: Open and Preview Your Website
  9. Next Steps: Keep Building
  10. FAQ

Quick Answer

To make a website using HTML and CSS, you need only a text editor and a web browser. Create a file called index.html for your page structure (headings, text, links) and a style.css file for the design (colours, fonts, layout). Link the two files together, open index.html in your browser, and you have a working website. This guide walks you through every step with complete code you can copy and run.

HTML and CSS: What Each One Does

Before you write a single line, it helps to know that a web page is built from two languages that do different jobs.

HTML (HyperText Markup Language) is the structure. It marks up your content — this is a heading, this is a paragraph, this is a link, this is a navigation bar. On its own, HTML looks plain: black text on a white background.

CSS (Cascading Style Sheets) is the styling. It decides colours, fonts, spacing, and where things sit on the screen. CSS is what makes a page look designed instead of like a document.

A simple way to remember it: HTML is the skeleton and walls of a house; CSS is the paint, furniture, and lighting. You will write both in this guide. If you want to learn each one properly afterwards, our free HTML course and CSS course take these ideas step by step.

What You Need to Make a Website Using HTML and CSS

The best part of learning how to make a website using HTML and CSS is that it costs nothing to start. You need only two things, and both are likely already on your computer.

  • A text editor — the app where you write code. Visual Studio Code (VS Code) is free and by far the most popular, but plain Notepad on Windows or TextEdit on Mac works fine for this tutorial.
  • A web browser — Chrome, Firefox, or Edge. This is where you open your finished page to see how it looks.

No paid software, no web hosting, and no internet connection are needed once your files are saved. If you are on a shared or school computer where you cannot install anything, you can type and run the exact same code in your browser using our free online code editor — nothing to download.

Step 1: Create Your Project Folder and Files

A website is simply a folder of files, so let's create one.

  1. Make a new folder anywhere on your computer and name it my-website.
  2. Inside that folder, create two empty files: index.html and style.css.

The name index.html is not random. Browsers and web servers automatically load the file named index first, so it becomes your home page. Keep both files in the same folder — this matters, because your HTML will look for the CSS file sitting right next to it.

Your folder should now look like this:

my-website/
├── index.html
└── style.css

Step 2: Write the HTML Structure

Open index.html in your editor and type the code below. Typing it yourself instead of copy-pasting will help it stick.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Aarav Sharma</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>I'm a student learning to build websites with HTML and CSS.</p>
    </section>

    <section id="projects">
      <h2>Projects</h2>
      <p>A calculator, a to-do list app, and this website.</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Reach me at aarav@example.com</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Aarav Sharma</p>
  </footer>
</body>
</html>

Save the file, then let's break down the important parts:

  • <!DOCTYPE html> on the first line tells the browser this is a modern HTML5 page.
  • <head> holds information visitors do not see directly: the character set, the mobile viewport setting (important for Step 4), the tab title, and the link to your stylesheet.
  • <link rel="stylesheet" href="style.css"> connects your CSS. If this line is missing or the filename is wrong, none of your styling will show up.
  • <body> holds everything people actually see on the page.
  • <header>, <nav>, <main>, and <footer> are semantic tags. They behave like plain boxes, but their names describe their role, which helps search engines and screen readers understand your layout.

Open the file in your browser now (Step 5 shows how) and you will see a working, if plain, page. Next we make it look good.

Step 3: Style It With CSS (Colours, Fonts, Layout)

Now open style.css and add the following. Because we already linked this file in the HTML <head>, the browser applies these rules automatically.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #f4f4f4;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 40px;
  background-color: #1e293b;
  color: #ffffff;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 20px;
}

nav a:hover {
  color: #38bdf8;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

section {
  background-color: #ffffff;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 8px;
}

h2 {
  margin-bottom: 12px;
}

footer {
  text-align: center;
  padding: 20px;
  background-color: #1e293b;
  color: #ffffff;
}

Here is what the key rules are doing:

  • The * rule at the top is a reset. It removes the browser's default margins and padding, and box-sizing: border-box makes width and height easier to reason about. Most sites start with something like this.
  • font-family and color on body set the default text style for the whole page. Colours use hex codes like #1e293b (a dark slate) and #f4f4f4 (a light grey).
  • The header uses flexbox: display: flex lines the name and the menu up in a row, and justify-content: space-between pushes them to opposite ends. Flexbox is the standard way to arrange items in a row or column.
  • max-width: 800px with margin: 0 auto centres the main content and stops lines of text from stretching uncomfortably wide on large screens.
  • nav a:hover changes the link colour when the mouse is over it — a small touch that makes the page feel interactive.

Flexbox does most of the heavy lifting in modern layouts. If you want to go deeper on centring and aligning elements, our guide on how to centre a div is a good next read.

Step 4: Make It a Bit Responsive

Right now the page looks fine on a laptop, but on a narrow phone the header can feel cramped. Responsive design means the layout adjusts to the screen size. Add this block to the bottom of your style.css:

@media (max-width: 600px) {
  header {
    flex-direction: column;
    text-align: center;
  }

  nav a {
    margin: 8px 10px 0;
  }
}

This is a media query. Everything inside @media (max-width: 600px) only applies when the screen is 600 pixels wide or less — roughly phone size. On small screens we switch the header from a row to a column with flex-direction: column, so the name and menu stack neatly instead of squeezing side by side.

One reason this works at all is the line you already added in the <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, phones pretend to be a wide desktop and shrink your whole page. To test it, open the page and slowly drag your browser window narrow — you will see the header switch to a stacked layout as it crosses 600 pixels.

Step 5: Open and Preview Your Website

You do not need anything special to view your site — the browser you already have does the job.

  1. Find your index.html file in your file manager.
  2. Double-click it, or right-click and choose Open with and pick your browser.

Your website opens straight from your computer — notice the address bar starts with file://, which means it is loading locally, not from the internet. Every time you change your HTML or CSS, save the file and refresh the browser (press F5, or Ctrl+R) to see the update.

If you use VS Code, the free "Live Server" extension refreshes the page for you every time you save, which speeds things up. And if you are following along in our online editor, the preview updates the moment you type.

Next Steps: Keep Building

You just built and styled a real website — the same foundation every professional site is built on. Here is where to go from here:

  • Add more content. Try adding an image with <img>, a list of your skills, or a second page and link to it.
  • Learn JavaScript. HTML and CSS build the look; JavaScript adds behaviour — buttons that respond, form validation, and animations.
  • Put it online for free. Services like GitHub Pages and Netlify host static HTML/CSS sites at no cost, so you can share a real link.
  • Keep practising CSS. Layout is where beginners spend the most time, so the more small pages you build, the faster it clicks.

Work through the free HTML and CSS courses in order, rebuild this page from memory once, and you will have the confidence to design your own layouts. The best way to learn is to keep building.

Frequently Asked Questions

Can I make a website with only HTML and no CSS?

Yes, but it will look very plain — black text on a white background with default fonts. HTML on its own is valid and works, but CSS is what makes a page look designed. For any real website you will use both together.

Should I learn HTML or CSS first?

Learn HTML first. It is the structure your CSS will style, so it makes little sense to style elements that do not exist yet. Spend a few days getting comfortable with common HTML tags, then start adding CSS.

Do I need to learn JavaScript to build a website?

Not for a basic informational site — HTML and CSS are enough for pages, portfolios, and blogs. You add JavaScript when you want interactivity, such as image sliders, form checks, or content that updates without reloading.

My CSS isn't working. What's wrong?

The most common cause is the link in your HTML head. Check that the file is named exactly style.css, that it sits in the same folder as index.html, and that your <link rel="stylesheet" href="style.css"> line is spelled correctly. Also remember to save both files and refresh the browser.

How do I put my HTML and CSS website online for free?

Upload your folder to a free static host such as GitHub Pages, Netlify, or Cloudflare Pages. They take your index.html and style.css and give you a public web link at no cost — perfect for a portfolio or first project.