Create a Personal Introduction Webpage

Let's start by creating a personal introduction webpage that showcases your unique personality 🙂

To begin, click on Templates in the Tools section at the bottom left corner, and select the personal introduction webpage template to load it.

After loading the template, click the Learning Materials button to review step-by-step coding materials.

Adding a Profile Picture with the img Tag

The HTML <img> tag is used to insert photos or images into a webpage. You can use the <img> tag as follows:

img Tag

<img src="image file path" alt="image description" />

The two most important attributes of the img tag are:

• src: Specifies the image file's location using a URL. This can be an image stored on the same website or an externally hosted image.

• alt: This stands for "alternative text" and provides an alternative text description for the image. This is useful if the image fails to load and is also essential for screen readers used by visually impaired individuals. While optional, it enhances web accessibility and improves SEO (Search Engine Optimization).

For example, the following code displays an image file named "profile.jpg" and provides an alternative text of "Profile Picture".

Image Tag Example

<img src="profile.jpg" alt="Profile Picture" />

Now, let's update the profile section by adding a custom profile picture.

First, locate the following code in the central code editor.

Press Ctrl + F (or Command + F on Mac) to activate the search bar, and search for header-container to easily find the code.

Profile Picture Code

<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
<section>

Next, let's upload the image file using the Upload Tool at the bottom left. Click the upload button, and then click the cloud icon at the top to upload an image file.

Once the file is uploaded, it will appear at the bottom, and you can click the copy icon on the right to copy the image URL.

The image URL should start with https://assets.codefriends.net/.

Paste the copied image URL into the src attribute of the img tag, and add the desired alternative text such as "Profile" into the alt attribute as shown below:

Adding a Profile Picture

<section class="header-container">
  <img
    class="profile-image"
    src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
    alt="hero-image"
  />
<section>

Now, your profile picture should be displayed on your webpage! 🎉