About Lesson
For this step, we will add homepage content.
Step 1: Create Asset Folders
First, let’s create a folder to store all our assets. Inside your project folder:
1. Create a folder named `assets`.
2. Inside the `assets` folder, create another folder named `images`.
3. Place the two provided images (`man.webp` and `woman.webp`) into the `assets/images` folder.
Step 2: Add a Horizontal Rule
Before we link to the images, add a horizontal rule to separate the content:
<hr>
Step 3: Create a Content Container
Wrap your content in a `<div>` to keep it organized:
<div>
<!-- Your content here -->
</div>
Step 4: Add an Image
<div>
<img src="assets/images/man.webp">
</div>
Step 5: Add a Paragraph
Next, add a paragraph (`<p>`) for text content. You can generate placeholder text by typing `lorem` and pressing the tab key in some code editors.
<div>
<img src="assets/images/man.webp">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci veniam atque suscipit commodi fugit consequatur sint reiciendis, optio quibusdam, veritatis, aperiam dicta cumque voluptatem natus unde! Sed rerum laudantium blanditiis.</p>
</div>
Step 6: About Page Content
For the sake of this tutorial, the about page will be similar to the home page but with additional content. You can include more paragraphs to describe yourself, your services, and your experience—essentially creating a résumé-like section. Check that out next!
The final homepage html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>Home</h1>
<div>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="portfolio.html">Portfolio</a> |
<a href="contact.html">Contact</a>
</div>
<hr>
<div>
<img width="200" src="assets/images/man.webp">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit repellendus aliquam quia perferendis nulla ea hic doloribus rem repellat beatae quam minima porro, modi, quos harum rerum impedit velit laudantium?</p>
</div>
</body>
</html>
Images for use as profile images:
