🧱 Making website with HTML and CSS (Beginner friendly tutorial)

Want to build your very own website from scratch? No worries! In this tutorial that’s perfect for beginners, we’ll show you how to create a minimalistic and nice-looking website using only HTML and CSS — no need for any libraries, deepen knowledge of CSS or learning some advanced new framework since sometimes all you want is just some basics!

✅ What You'll Learn:

How do you organize a website folder structure
Writing your first HTML page
Styling the page with CSS
Inserting pictures, links, and layout
Making it mobile-friendly
Save and open in a browser

🔧 Step 1: Prepare Your Project Folder

On your desktop, make a new folder. Name it:

MyFirstWebsite

Within that folder, you need to create two files:

index.html
style.css

Your folder structure should now look like the following:

MyFirstWebsite/
├── index.html
└── style.css

🧾 Step 2: Writing Your First HTML Page

Open index.html in a code editor (could be VS Code, Notepad++ or even Notepad).

Paste the following code:

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>

  <h1>Welcome to My First Website</h1>
  <p>Learn HTML & CSS in an easy way!</p>
  <nav>
    Home   About   Contact
  </nav>

  <h2>Hello, I'm Jane! :)</h2>
  <p>Hello friends! learning HTML and CSS step by step!!!</p>
  <p>Hello, I'm Jane! :) Hello, I am Jane! :) Let's learn HTML and CSS from scratch together!</p>

  <footer>
    © 2025 MyFirstWebsite.com
  </footer>

</body>
</html>

🎨 Step 3: Add Style with CSS

Open style.css and paste this:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background: #f4f4f4;
  color: #333;
  line-height: 1.6;
  padding: 20px;
}

header {
  background: #4CAF50;
  color: white;
  padding: 20px 0;
  text-align: center;
}

nav {
  background: #333;
  padding: 10px 0;
  text-align: center;
}

nav a {
  color: white;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

main {
  background: white;
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
}

footer {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
  background: #222;
  color: white;
}

🌐 Step 4: Open in Browser

Right-click on index.html
Click "Open with" > Your Browser (Chrome, etc.)
🎉 Boom! Your first site is alive — locally on your own computer!

📱 Bonus: Make It Responsive

If you want to make sure your website looks fine in mobile too, just add this line in your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And add this to style.css at the bottom:

@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  nav a {
    display: block;
    margin: 10px 0;
  }
}

✅ Final Tips:

You can host this site for free on GitHub Pages
Use free tools like Favicon.io to generate a site icon
You can always add pictures, forms or JavaScript later.

🙌 You Did It!

If you completed each and every step, congratulations — you have built your first website! Keep learning and add more features along the way.

Tech Tutorials

Thursday, May 1, 2025