Skip to main content
Practice

Loading a Template → Adding a Profile Picture

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

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: This attribute specifies the location where the image file is stored using a URL. This URL can point to another image on the same website or an image hosted on an external website.

  • alt: This stands for "alternative text" and is used in case the image fails to load or for screen readers used by visually impaired individuals. While not required, this attribute is important for web accessibility and can greatly contribute to 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.

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>

You can now see your profile picture displayed on the website :)