Objective
Construct a simple HTML page giving a quick and brief intro of yours.
Description
After having learnt the basics of HTML, one of the best exercises that you could do is to write a quick intro of yours. This exercise is all about that.
In this exercise, you have to write your introduction very briefly using HTML.
Here's the structure to follow:
- Include a title in your HTML document that reads 'My Brief Intro'.
- Start off with a heading in your body that reads your name.
- Follow that with a paragraph describing yourself in brief and concise words.
- End with another paragraph, reading "Here's my social media profile." where the text 'social media profile' is a hyperlink pointing to any of your social media profile pages (e.g. Facebook, Instagram, etc.).
In general, your HTML page should look as follows:
Make sure that you're code is clean and readable.
New file
Inside the directory you created for this course on HTML, create a new folder called Exercise-1-Brief-Intro and put the .html solution files for this exercise within it.
Solution
The exercise is extremely elementary and superbly simple to solve.
We'll be using a dummy persona, created with the help of ChatGPT, described as follows:
- Name: Alice Bob
- Description: "15 years old, I'm diving into the exciting world of web development for the first time. I'm absolutely eager to learn and explore the magic of coding. Webpages and HTML are still a bit of a mystery to me, but I'm excited to take my first steps in creating something on the web."
- Dummy social media link: https://example.com/alice-bob
You'll obviously be using your own name, description and social media link.
With the following boilerplate HTML set up,
<!DOCTYPE html>
<html>
<head>
<!--Head content-->
</head>
<body>
<!--Body content-->
</body>
</html>we just now need to put in the desired elements.
First off, let's add the given title 'My Brief Intro':
<!DOCTYPE html>
<html>
<head>
<title>My Brief Intro</title>
</head>
<body>
<!--Body content-->
</body>
</html>Next up, let's add the heading:
<!DOCTYPE html>
<html>
<head>
<title>My Brief Intro</title>
</head>
<body>
<h1>Alice Bob</h1>
</body>
</html>Now over to the description paragraph:
<!DOCTYPE html>
<html>
<head>
<title>My Brief Intro</title>
</head>
<body>
<h1>Alice Bob</h1>
<p>15 years old, I'm diving into the exciting world of web development for the first time. I'm absolutely eager to learn and explore the magic of coding. Webpages and HTML are still a bit of a mystery to me, but I'm excited to take my first steps in creating something on the web.</p>
</body>
</html>We've added a blank line after the <h1> just to improve the readability of the code, as the paragraph following it is pretty text-heavy.
Finally, let's add the paragraph containing the social media link:
<!DOCTYPE html>
<html>
<head>
<title>My Brief Intro</title>
</head>
<body>
<h1>Alice Bob</h1>
<p>15 years old, I'm diving into the exciting world of web development for the first time. I'm absolutely eager to learn and explore the magic of coding. Webpages and HTML are still a bit of a mystery to me, but I'm excited to take my first steps in creating something on the web.</p>
<p>Here's my <a href="https://example.com/alice-bob">social media profile</a>.</p>
</body>
</html>And this is it!
Time now to see this HTML page:
Perfect!
