Lesson 2: Add Images & Layouts to Your Website

🔧 Skill Level: Beginner–Intermediate

This lesson builds on Lesson 1 and teaches users how to:

Add images to a webpage
Link to other pages or websites
Create a simple 2-column layout using HTML + CSS

🎯 What You’ll Learn

✅ Inserting images (locally & from the web)
✅ Creating clickable links
✅ Building a simple layout with div and flexbox
✅ Keeping HTML organized with sections and classes

📁 Continue from Lesson 1

Open your project folder from Lesson 1.

You’ll be editing the same files:

style.css
index.html

🔹 Step 1: Add an Image

Find a photo of yourself (or any image) and save it in the same folder as your index.html file. Rename it to:

profile.jpg

Now, open index.html and add this image tag inside the <header>:

<img src="profile.jpg" alt="My Photo" class="profile-img" />

🔹 Step 2: Add Some Links

Under the “About Me” section, add a few links like this:

<section>
  <h2>About Me</h2>
  <p>I love building websites and helping others learn how to code.</p>
  <p>Check out my work:</p>
  <ul>
    <li><a href="https://github.com/" target="_blank">My GitHub</a></li>
    <li><a href="https://linkedin.com/" target="_blank">My LinkedIn</a></li>
  </ul>
</section>

🔹 Step 3: Create a Two-Column Layout

Wrap the “About Me” section and image in a container like this:

<div class="about-section">
  <img src="profile.jpg" alt="My Photo" class="profile-img" />
  <div class="about-text">
    <h2>About Me</h2>
    <p>I love building websites and helping others learn how to code.</p>
    <ul>
      <li><a href="https://github.com/" target="_blank">My GitHub</a></li>
      <li><a href="https://linkedin.com/" target="_blank">My LinkedIn</a></li>
    </ul>
  </div>
</div>

Now, add this CSS to style.css:

.profile-img {
  width: 200px;
  border-radius: 100px;
  margin-right: 20px;
}

.about-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.about-text {
  max-width: 500px;
  text-align: left;
}

🔹 Step 4: Save & Refresh

Save both index.html and style.css
Open index.html in your browser
You should now see your profile photo, text, and links side by side!

🌐 Publish or Update Your Site

If you already published your site in Lesson 1, just upload the new files again:

✅ Update your site on Netlify
✅ Push changes to GitHub Pages
✅ Or publish it with us

🎉 That’s a Wrap!

You’ve just added real structure and media content to your personal website.

Next lesson: We’ll add a contact form and make your site mobile-friendly!

❤️ If You Enjoyed This…

👉 Like and follow for more tutorials!
👉 Leave a comment or question below!
👉 Share your finished website with us!

Analytics Bosipha

🧑‍🏫 Lesson 2: Add Images, Links & Layouts to Your Website