Anyone Can Build a Website!

Let’s get straight to the point: You don’t need any programming experience. If you can use Notepad and a web browser, you can build a website!

Think of it this way:

• It’s as simple as writing a Word document
• No expensive software needed - just your computer
• No need to memorize code - copy and paste will do
• See results in under 10 minutes

What will we build?

A simple but complete personal website that includes:

• Your name and introduction
• Photos or portfolio pieces
• Contact information
• Looks great on both mobile and desktop

You only need 3 things:

1. Notepad (already on your computer)
2. A web browser (Chrome, Edge, Safari, etc.)
3. 10 minutes of your time

Step 1: Open Notepad and Start Writing

What is HTML?

Think of it like writing a document:

• Regular document: You write “Title” and it looks like plain text
• HTML document: You write “<h1>Title</h1>” and the browser knows to make it big and bold

HTML is simply instructions that tell the browser: “This part is a title, that part is content, put a photo here.”

Let’s Start Building

Step 1: Open Notepad

• Windows: Start Menu → Search “Notepad”
• Mac: Launchpad → Search “TextEdit”
• Linux: Any text editor

Step 2: Copy the code below Don’t worry if this looks complex - just copy and paste:

Step 2: Customize with Your Information

Now you have a basic website! But it still has example content. Let’s change it to your own information.

What should you change?

Find these text parts and replace with your own:

1. “Your Name” → Change to your real name or nickname
2. “About Me” content → Write your own introduction
3. “My Interests” → Replace with your actual interests
4. “[email protected]” → Use your real email address

Simple editing example

Original: Hi! I'm <strong>Your Name</strong>
Change to: Hi! I'm <strong>Sarah</strong>

Original: [email protected]
Change to: [email protected]

Want to add a photo?

If you want to add a photo, find this line:

<p>This is my first website, thanks for visiting!</p>

Add this below it:

<img src="https://picsum.photos/300/200" alt="My photo" style="width:300px; border-radius:10px; display:block; margin: 20px auto;">

Explanation:

• https://picsum.photos/300/200 is a random beautiful image
• You can replace it with your own photo URL
• width:300px controls the photo size
• border-radius:10px gives the photo rounded corners
• display:block; margin: 20px auto centers the image

Step 3: Check Your Results

Save the file

Super important steps:

1. In Notepad, click “File” → “Save As”
2. File name: Type index.html (must be .html)
3. File type: Select “All Files (.)”
4. Encoding: Choose “UTF-8”
5. Save to Desktop or somewhere you’ll remember

Open your website

Double-click your saved index.html file

If everything works correctly, your browser will open and display your website!

Troubleshooting common problems

Common issues and solutions:

Problem 1: Double-clicking file does nothing

• Check if filename ends with .html
• Try right-click → Open with → Choose browser

Problem 2: Website looks broken

• You might have missed part of the code when copying
• Copy the complete code again

Problem 3: Text shows as gibberish

• Save the file again, choosing “UTF-8” encoding

Problem 4: Changes don’t show up

• Make sure to save the file
• Refresh your browser (press F5)

Step 4: Make It Look Good on Mobile Too

Your website looks great on desktop, but it might be too small or have layout issues on mobile. Let’s fix that with a simple adjustment.

What is responsive design?

Simply put:

• On large screens (desktop), the website looks one way
• On small screens (mobile), the website automatically adjusts to be readable

Super simple fix

Good news! The code I gave you already includes mobile optimization. Look for this part in your code:

/* Mobile responsive */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 20px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    .intro {
        font-size: 16px;
    }
}

What this code means:

• When screen width is less than 600px (mobile size)
• Automatically reduce padding and text sizes
• Makes content more suitable for small screens

Test the mobile version

Test on desktop:

1. In your browser, press F12 (opens developer tools)
2. Click the mobile icon (responsive design mode)
3. Select different phone models to see the effect

Test on actual mobile:

1. Send index.html to your phone (via cloud storage or messaging app)
2. Open the file on your phone
3. Check if it displays properly

Step 5: Put Your Website Online for Everyone to See

Right now your website can only be seen on your computer. Let’s put it on the internet!

Free Website Hosting - GitHub Pages

What is GitHub Pages?

• Free website hosting service
• Anyone in the world can see your website
• No cost, no complex setup required

Super Simple Upload Steps

Step 1: Sign up for GitHub

1. Go to github.com
2. Click “Sign up” to create an account
3. Follow the instructions to complete registration

Step 2: Create a new repository

1. After logging in, click the ”+” in the top right → “New repository”
2. Repository name: Type yourusername.github.io (replace with your actual username)
3. Check “Public” and “Add a README file”
4. Click “Create repository”

Step 3: Upload your website

1. Click “uploading an existing file”
2. Drag your index.html file into the webpage
3. Write “Add my first website” at the bottom
4. Click “Commit changes”

Step 4: View your website

• Wait 1-2 minutes
• In your browser, type: https://yourusername.github.io
• Your website is now live!

Other Simple Options

If GitHub seems too complicated, here are super simple alternatives:

Netlify Drop

1. Go to netlify.com/drop
2. Directly drag your index.html file into the page
3. Get a URL instantly

CodePen

1. Go to codepen.io
2. Sign up for a free account
3. Copy and paste your code
4. Share with friends immediately

Congratulations! You're Now a Web Designer

What you’ve learned

Through this tutorial, you have:

• ✅ Built your first website - With complete content and design
• ✅ Learned basic HTML - You understand how tags work
• ✅ Created responsive design - Your website looks good on mobile
• ✅ Put your website online - The whole world can see it
• ✅ Gained confidence - You actually built a website!

What you can do next

Immediate experiments:

1. Change colors - Replace #4285f4 with #e74c3c (red) or #2ecc71 (green)
2. Add more pages - Copy index.html, rename it to about.html, write different content
3. Add photos - Upload photos to free image hosting and add them to your website
4. Learn more - Search for “HTML CSS tutorials” to continue learning

Advanced learning directions:

1. CSS styling - Learn more styles and animation effects
2. JavaScript interaction - Add buttons, forms, and interactive features
3. Design tools - Learn Figma to design website layouts
4. More features - Add shopping carts, user systems, etc.

Encouragement for beginners

Remember these key points:

• 🎯 Every expert started as a beginner - Don’t feel frustrated if you don’t understand everything
• 💪 Learning by doing is fastest - More effective than reading a hundred books
• 🔥 Making mistakes is normal - Websites can be fixed, so be brave and experiment
• 🌟 Enjoy the creative process - You’re creating your own digital work

Next time a friend says “I can’t build websites,” you can proudly say: “I can! And I can teach you!”

More beginner-friendly tutorials

If you enjoyed this simple and clear teaching style, you can continue with:

• CSS Animation Basics - Make your website come alive
• Web Design Trends 2025 - Color and design inspiration
• Complete Figma guides - Free design tools

Start taking action! Every web design master started by copying and pasting their first line of code 😊