MACRO NEPAL
Your First HTML and CSS Web Page
awiskar acharya
March 12, 2026
10:55 am

A Complete Step-by-Step Guide for Beginners

This tutorial will walk you through creating your first web page using HTML and CSS. No prior experience needed!

Part 1: Setting Up Your Environment

What You'll Need

  • A text editor (VS Code, Sublime Text, Notepad++, or even Notepad)
  • A web browser (Chrome, Firefox, Safari, or Edge)
  • A folder to organize your files

Creating Your Project Folder

# Create a new folder for your project
mkdir my-first-website
cd my-first-website
# Inside this folder, we'll create two files:
# - index.html (the main HTML file)
# - style.css (the CSS file)

Part 2: Creating Your First HTML File

Step 1: Create index.html

Open your text editor and create a new file called index.html. Type or copy the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<!-- Link to our CSS file (we'll create this next) -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- All visible content goes here -->
<h1>Welcome to My First Web Page!</h1>
<p>This is my first paragraph. I'm learning HTML and CSS!</p>
<h2>About Me</h2>
<p>I'm a beginner web developer learning to create amazing websites.</p>
<h2>My Hobbies</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Learning new things</li>
</ul>
<h2>My Favorite Website</h2>
<p>Check out <a href="https://www.google.com">Google</a> - it's my favorite search engine!</p>
<img src="https://via.placeholder.com/400x200" alt="Placeholder image">
<p class="note">This is my first web page. It's basic, but I'm proud of it!</p>
</body>
</html>

Understanding Your First HTML

Let's break down what each part does:

ElementPurpose
<!DOCTYPE html>Tells the browser this is HTML5
<html>The root element of the page
<head>Contains meta information about the page
<title>The title shown in the browser tab
<body>Contains all visible content
<h1>, <h2>Headings (h1 is most important, h2 is less important)
<p>Paragraph text
<ul>Unordered (bulleted) list
<li>List item
<a>Link (anchor tag)
<img>Image
class="note"A class for styling (we'll use this in CSS)

Step 2: View Your Page

  1. Save the file as index.html
  2. Double-click the file or open it in your web browser
  3. You should see a basic, unstyled web page

Part 3: Adding CSS Styles

Step 1: Create style.css

Create a new file called style.css in the same folder as your index.html. Add the following code:

/* style.css - My first stylesheet */
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styles */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
/* Heading styles */
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #3498db;
}
h2 {
color: #34495e;
margin: 20px 0 10px 0;
}
/* Paragraph styles */
p {
margin-bottom: 15px;
}
/* Link styles */
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #2980b9;
}
/* List styles */
ul {
margin-left: 30px;
margin-bottom: 20px;
}
li {
margin-bottom: 5px;
}
/* Image styles */
img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Class styles */
.note {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 10px 15px;
font-style: italic;
border-radius: 4px;
}

Step 2: Refresh Your Page

  1. Save the CSS file
  2. Refresh your browser (F5 or Ctrl+R)
  3. You'll see your styled page!

Part 4: Making It Better - Adding More Features

Adding a Navigation Menu

Update your index.html with a navigation section. Add this right after the <body> tag:

<body>
<!-- Navigation -->
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Rest of your content... -->
</body>

And add these styles to your style.css:

/* Navigation styles */
.navbar {
background-color: #2c3e50;
padding: 15px 0;
border-radius: 8px;
margin-bottom: 30px;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
gap: 30px;
margin: 0;
}
.navbar a {
color: white;
font-weight: bold;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}
.navbar a:hover {
background-color: #34495e;
text-decoration: none;
}

Adding a Footer

Add a footer section at the end of your index.html, just before the closing </body> tag:

    <!-- Footer -->
<footer class="footer">
<p>&copy; 2024 My First Web Page. All rights reserved.</p>
<p>Made with ❤️ while learning HTML and CSS</p>
</footer>
</body>

Add footer styles to your style.css:

/* Footer styles */
.footer {
margin-top: 40px;
padding: 20px;
background-color: #2c3e50;
color: white;
text-align: center;
border-radius: 8px;
}
.footer p {
margin: 5px 0;
}
.footer p:last-child {
color: #ecf0f1;
font-size: 0.9em;
}

Complete Updated Code

Here's your complete index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#hobbies">Hobbies</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<h1>Welcome to My First Web Page!</h1>
<section id="about">
<h2>About Me</h2>
<p>I'm a beginner web developer learning to create amazing websites. This is my very first web page, and I'm excited to share it with you!</p>
<p>I started learning HTML and CSS because I want to build beautiful and functional websites. It's been an amazing journey so far!</p>
</section>
<section id="hobbies">
<h2>My Hobbies</h2>
<ul>
<li><strong>Coding:</strong> I love writing code and solving problems</li>
<li><strong>Reading:</strong> Especially books about technology and self-improvement</li>
<li><strong>Learning:</strong> There's always something new to discover</li>
</ul>
</section>
<section id="contact">
<h2>My Favorite Website</h2>
<p>Check out <a href="https://www.google.com">Google</a> - it's my favorite search engine for finding information and learning new things!</p>
</section>
<img src="https://via.placeholder.com/600x300/3498db/ffffff?text=Welcome+to+My+Website" alt="Welcome image">
<p class="note">🌟 This is my first web page. It might be simple, but it's all mine! I'm proud of what I've created so far.</p>
<footer class="footer">
<p>&copy; 2024 My First Web Page. All rights reserved.</p>
<p>Made with ❤️ while learning HTML and CSS</p>
</footer>
</body>
</html>

And your complete style.css:

/* Reset default browser styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styles */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
/* Navigation styles */
.navbar {
background-color: #2c3e50;
padding: 15px 0;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
gap: 30px;
margin: 0;
}
.navbar a {
color: white;
font-weight: bold;
padding: 5px 10px;
border-radius: 4px;
transition: background-color 0.3s;
text-decoration: none;
}
.navbar a:hover {
background-color: #34495e;
}
/* Heading styles */
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 4px solid #3498db;
font-size: 2.5em;
}
h2 {
color: #34495e;
margin: 25px 0 15px 0;
font-size: 1.8em;
}
/* Section styles */
section {
margin-bottom: 30px;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* Paragraph styles */
p {
margin-bottom: 15px;
}
/* Link styles */
a {
color: #3498db;
text-decoration: none;
font-weight: 500;
}
a:hover {
text-decoration: underline;
color: #2980b9;
}
/* List styles */
ul {
margin-left: 30px;
margin-bottom: 20px;
}
li {
margin-bottom: 10px;
line-height: 1.6;
}
/* Image styles */
img {
max-width: 100%;
height: auto;
display: block;
margin: 30px auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Class styles */
.note {
background-color: #fff3cd;
border-left: 6px solid #ffc107;
padding: 15px 20px;
font-style: italic;
border-radius: 4px;
margin: 25px 0;
font-size: 1.1em;
}
/* Footer styles */
.footer {
margin-top: 40px;
padding: 25px;
background-color: #2c3e50;
color: white;
text-align: center;
border-radius: 8px;
}
.footer p {
margin: 8px 0;
}
.footer p:first-child {
font-size: 1.1em;
}
.footer p:last-child {
color: #ecf0f1;
font-size: 0.95em;
}

Part 5: Understanding What You've Built

Your Web Page Structure

index.html
├── DOCTYPE declaration
├── html (root)
│   ├── head
│   │   ├── meta (character set)
│   │   ├── meta (viewport)
│   │   ├── title
│   │   └── link (CSS)
│   └── body
│       ├── nav (navigation)
│       ├── h1 (main heading)
│       ├── section (about)
│       ├── section (hobbies)
│       ├── section (contact)
│       ├── img (image)
│       ├── p.note (special note)
│       └── footer

CSS Selectors You Used

SelectorWhat it selects
*Everything (universal selector)
bodyThe entire page body
h1, h2All heading elements
.navbarAny element with class="navbar"
.navbar aLinks inside navbar
a:hoverLinks when mouse hovers over them
#aboutElement with id="about"

Part 6: Next Steps - What to Try Next

Challenge 1: Add a New Section

Try adding a new section about your favorite books, movies, or food:

<section id="favorites">
<h2>My Favorite Books</h2>
<ul>
<li>Book 1</li>
<li>Book 2</li>
<li>Book 3</li>
</ul>
</section>

Challenge 2: Change Colors

Experiment with different colors in your CSS:

/* Try changing these values */
h1 {
color: #ff6b6b;  /* Change to coral */
border-bottom-color: #4ecdc4;  /* Change to mint */
}
.navbar {
background-color: #2c3e50;  /* Change to dark blue */
/* Try: #ff6b6b, #4ecdc4, #45b7d1, #96ceb4 */
}

Challenge 3: Add a Button

Add a button to your page:

<div style="text-align: center; margin: 30px 0;">
<a href="#" class="button">Click Me!</a>
</div>

And the CSS:

.button {
display: inline-block;
padding: 12px 24px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: background-color 0.3s;
}
.button:hover {
background-color: #2980b9;
transform: scale(1.05);
}

Challenge 4: Make It Responsive

Add media queries to make your page look good on mobile:

/* Add at the end of your CSS file */
@media (max-width: 768px) {
body {
padding: 10px;
}
h1 {
font-size: 2em;
}
.navbar ul {
flex-direction: column;
align-items: center;
gap: 10px;
}
section {
padding: 15px;
}
}

Challenge 5: Add a Simple Animation

Add a subtle animation to your headings:

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
h1 {
animation: fadeIn 1s ease-out;
}
section {
animation: fadeIn 1s ease-out;
animation-fill-mode: both;
}
section:nth-child(2) { animation-delay: 0.2s; }
section:nth-child(3) { animation-delay: 0.4s; }
section:nth-child(4) { animation-delay: 0.6s; }

Part 7: Common Beginner Mistakes to Avoid

HTML Mistakes

❌ Wrong:

<H1>This is a heading</H1>  <!-- Uppercase tags -->
<img src="image.jpg">  <!-- Missing alt attribute -->
<p>This is a paragraph  <!-- Missing closing tag -->
<div class="container">  <!-- Not indented properly -->

✅ Correct:

<h1>This is a heading</h1>
<img src="image.jpg" alt="Description of image">
<p>This is a paragraph</p>
<div class="container">
<!-- Properly indented content -->
</div>

CSS Mistakes

❌ Wrong:

p {
color: red;
font-size: 16px
margin: 10px;  /* Missing semicolon above */
}
.H1 { }  /* Should be h1, not .H1 */

✅ Correct:

p {
color: red;
font-size: 16px;
margin: 10px;
}
h1 { }  /* Element selector, not class */

Part 8: Your First Web Page - Summary

What You've Learned

✅ How to create an HTML file
✅ Basic HTML structure and tags
✅ How to link CSS to HTML
✅ CSS selectors and properties
✅ Styling text, colors, and backgrounds
✅ Creating navigation menus
✅ Adding images and links
✅ Making lists
✅ Creating footers
✅ Basic responsive design concepts

Your First Web Page Checklist

  • [ ] HTML file created (index.html)
  • [ ] CSS file created (style.css)
  • [ ] Basic structure is correct
  • [ ] Navigation menu works
  • [ ] Links are clickable
  • [ ] Images display properly
  • [ ] Styling looks good
  • [ ] Page is readable on mobile
  • [ ] No errors in browser console

Conclusion

Congratulations! 🎉 You've just created your first web page with HTML and CSS. This is the beginning of your journey into web development.

What You've Accomplished:

  • Written real HTML and CSS code
  • Created a structured web page
  • Styled elements with CSS
  • Added navigation and footer
  • Made your first responsive design

Where to Go Next:

  1. Practice by modifying your page with new content
  2. Experiment with different colors and layouts
  3. Learn JavaScript to make your page interactive
  4. Build more complex projects
  5. Share your page with others

Remember: Every expert was once a beginner. Keep coding, keep learning, and most importantly, have fun! 🚀

Category : C

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper