Code-Along: Build a Simple Web Page

Code-Along: Build a Simple Web Page

Welcome to your first coding project! In this lesson, we’ll build a simple web page step by step. Follow along to see how the pieces of HTML, CSS, and basic design come together.

Goal: Create a personal profile page.

Step 1: Setting Up Your File

First, let’s create a folder for your project and add an HTML file:

1. Create a new folder on your computer called MyWebPage.
2. Inside the folder, create a file named index.html.
3. Open the file in your code editor (e.g., Visual Studio Code).

Tip: The file name index.html is commonly used for the main page of a website.

Step 2: Adding the Basic Structure

Now, add the basic HTML structure to your file. This includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Profile Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is my personal profile page.</p>
  </body>
</html>

Step 3: Adding a Profile Section

Let’s add a section to display your name and a brief description.

Example:

<body>
  <h1>Welcome to My Page</h1>
  <p>This is my personal profile page.</p>

  <!-- Profile Section -->
  <h2>About Me</h2>
  <p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>

Step 4: Adding an Image

Next, let’s add a profile picture using the <img> tag. Save an image in the project folder and link it to your HTML file.

Example:

<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />

Step 5: Adding a List of Hobbies

Create an unordered list of your hobbies using the <ul> and <li> tags.

Example:

<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
  <li>Reading books</li>
  <li>Playing video games</li>
  <li>Coding projects</li>
</ul>

Step 6: Adding a Link

Add a link to your favorite website using the <a> tag.

Example:

<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>

Step 7: Adding Inline Styles

Let’s add some basic styles directly to your HTML using the style attribute.

Example:

<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>

Great Job!

Congratulations! You’ve built your first web page step by step. In this project, you learned how to structure your HTML, add content, and style it with inline styles. Keep experimenting and adding new sections to your page!

Tip: Try hosting your page on GitHub Pages to share it with friends!