✓ CAC REGISTEREDRC - 9900489View certificate
Blessed Records Exclusive Ent.
Promote your music

Technology & Software · Written by the Blessed Records editorial team · Published 21 October 2026

Every website you have ever visited is built on the same two foundations. HTML gives a page its structure and content, and CSS controls how it looks. In this tutorial you will build a small, mobile-friendly personal page from scratch. You do not need to install anything beyond a text editor and a web browser, and by the end you will understand each line you wrote.

What you need

  • A computer or laptop (a phone can work, but a computer is easier).
  • A plain text editor such as Notepad, TextEdit in plain-text mode or Visual Studio Code.
  • Any web browser, such as Chrome, Safari or Firefox.

Step 1: Create a folder and a file

Make a new folder called my-first-page. Inside it, create a file named index.html. The name index matters: web servers show a file called index.html automatically when someone visits the folder.

Step 2: Write the HTML

Paste the following into index.html and save it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <p>Virtual assistant and aspiring web developer</p>
  </header>
  <main>
    <h2>About me</h2>
    <p>I help busy people stay organised and get more done.</p>
    <a class="button" href="mailto:you@example.com">Contact me</a>
  </main>
</body>
</html>

Here is what the important parts do. The <!DOCTYPE html> line tells the browser this is a modern HTML page. The <head> holds information about the page, including its title and a link to your stylesheet. The viewport line makes the page scale properly on a phone. Everything inside <body> is what visitors actually see: a header with your name and a short line about you, then a main area with a heading, a paragraph and a link styled as a button.

Step 3: Add the CSS

Create a second file in the same folder called style.css and paste this in.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  line-height: 1.6;
  color: #1a1a2e;
}
header {
  background: #0B1150;
  color: #ffffff;
  padding: 32px 20px;
  text-align: center;
}
main {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px 20px;
}
.button {
  display: inline-block;
  background: #d4af37;
  color: #0B1150;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}

Each block is a rule: a selector such as body or .button says what to style, and the lines inside the braces say how. The max-width on the main area stops the text from stretching across a wide screen, while the padding keeps it away from the edges of a small phone.

Step 4: Open it in your browser

Double-click index.html and it will open in your browser. If you change something in either file, save it and refresh the page to see the result. Try changing the colours, the text and the font to get a feel for how the pieces fit together.

Step 5: Make sure it works on a phone

  • Keep the viewport line in your head section. Without it, phones show a tiny zoomed-out version of the page.
  • Use relative widths and max-width instead of fixed pixel widths for big sections.
  • Keep text at a comfortable size and make sure buttons are large enough to tap.
  • Test on a real phone as well as your computer.

Step 6: Put it online

To share your page, you need a domain name and web hosting. Most hosting companies provide a control panel called cPanel with a File Manager. Upload index.html and style.css to the public_html folder, and your page will appear at your domain. Always keep a copy of your files on your own computer before you upload, so you can never lose your work.

Common mistakes

  • Forgetting to save the file before refreshing the browser.
  • Spelling the stylesheet filename differently in the link and on the computer. File names must match exactly.
  • Missing a closing tag such as </div>, which can scramble the layout.
  • Putting images in without text descriptions. Add an alt attribute so the page is accessible and search engines understand it.

Where to go next

Once this feels comfortable, learn how to add images, build a navigation menu, use CSS flexbox to arrange sections side by side, and add a small contact form. Each step builds on what you have just done. Web development rewards patience and practice far more than natural talent, and a simple page you built yourself teaches more than a hundred videos you only watched.

Keep reading

This article is for general information and education. It is not legal, financial or professional advice.

    Share