Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Images | Building the Blog Website
AI Powered Coding

ImagesImages

Goal

Let's add some images to the website to make it more attractive for users. How can we do this? We can find pictures on sources such as Unsplash. There, we can search for the desired topic, select the image, copy its address, and use it on the website.

Steps

1. Look for the desired topic

Let's visit the https://unsplash.com/. Feel free to type any topic that interests you here.

2. Select the image

Find the image that you like the most and click on it.

3. Copy image address

To copy the image address, right-click on the image and select "Copy Image Address" from the contextual menu.

4. Image usage

We can paste the copied address into the image src attribute to add the selected image to our website. We should also specify the image width to ensure it fits the website well. Additionally, we can provide descriptive content for the alt attribute or use the article title for the image alt.

Example:

html

index.html

css

index.css

js

index.js

Result

html

index.html

css

index.css

js

index.js

Website State

Video Tutorial

Everything was clear?

Section 4. Chapter 5
course content

Course Content

AI Powered Coding

ImagesImages

Goal

Let's add some images to the website to make it more attractive for users. How can we do this? We can find pictures on sources such as Unsplash. There, we can search for the desired topic, select the image, copy its address, and use it on the website.

Steps

1. Look for the desired topic

Let's visit the https://unsplash.com/. Feel free to type any topic that interests you here.

2. Select the image

Find the image that you like the most and click on it.

3. Copy image address

To copy the image address, right-click on the image and select "Copy Image Address" from the contextual menu.

4. Image usage

We can paste the copied address into the image src attribute to add the selected image to our website. We should also specify the image width to ensure it fits the website well. Additionally, we can provide descriptive content for the alt attribute or use the article title for the image alt.

Example:

html

index.html

css

index.css

js

index.js

Result

html

index.html

css

index.css

js

index.js

Website State

Video Tutorial

Everything was clear?

Section 4. Chapter 5
some-alt