Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Structuring the HTML Document | Building the Blog Website
Web Development with ChatGPT

bookStructuring the HTML Document

Goal

First, let's create the basic document structure of our website. We would like to have three articles. In each article, we would like to specify the article heading, some article content, and an image.

Note
Note

You can use the prompts that we provide or modify them as needed. There isn't just one way to achieve the goal. ChatGPT is flexible and can assist in various ways.

Possible Prompt

Create an HTML document structure for a blog website that allows for the publication of 3 articles. Each article should consist of:

  • A title (heading);
  • Several paragraphs of text;
  • An image;
  • A topic or category.

The HTML structure should be organized clearly and logically, using HTML tags and semantic meaning properly.

Result

index.html

index.html

copy

If you are interested in delving deep into the code and understanding its functionality, please use the Code Description button below. If you are okay with it, skip this step and move on to the next chapter.

Website State

Video Tutorial

question mark

Why is it a good idea to structure each article inside an <article> element when building a blog page?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Awesome!

Completion rate improved to 5

bookStructuring the HTML Document

Swipe to show menu

Goal

First, let's create the basic document structure of our website. We would like to have three articles. In each article, we would like to specify the article heading, some article content, and an image.

Note
Note

You can use the prompts that we provide or modify them as needed. There isn't just one way to achieve the goal. ChatGPT is flexible and can assist in various ways.

Possible Prompt

Create an HTML document structure for a blog website that allows for the publication of 3 articles. Each article should consist of:

  • A title (heading);
  • Several paragraphs of text;
  • An image;
  • A topic or category.

The HTML structure should be organized clearly and logically, using HTML tags and semantic meaning properly.

Result

index.html

index.html

copy

If you are interested in delving deep into the code and understanding its functionality, please use the Code Description button below. If you are okay with it, skip this step and move on to the next chapter.

Website State

Video Tutorial

question mark

Why is it a good idea to structure each article inside an <article> element when building a blog page?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 2
some-alt