Amena
HTML for Beginners Part 5 (Last Part) With Certificate⚡

HTML for Beginners Part 5 (Last Part) With Certificate⚡

Amena 💫's photo
Amena 💫
·

4 min read

Table of contents

Heyy Devs! 🔥

Today is the last part of this HTML course and if you do all 5 parts then you are the Master of HTML basics and you will be provided a CERTIFICATE! 🌟

Today we are gonna make our Personal WEB Page with just HTML...

Get Started! 💎

this 👆 is the page that we will make for your practice.

Steps to make this!

Image tag! 🔥

  • Firstly we're having Image so We'll use <img> tag for it!

      <img src="https://pbs.twimg.com/profile_images/1493870669561483264/orRE78cy_400x400.jpg" width="20%">

This is the link to my Profile pic and I have set the width to 20%...Easy Pizzy!

OUTPUT:

Heading! 👑

  • After that, We have the Heading tag so we'll use <h1> tag!
<img
  src="https://pbs.twimg.com/profile_images/1493870669561483264/orRE78cy_400x400.jpg"
  width="20%"
>

<h1>Amena here!</h1>

OUTPUT:

Hopefully, you understood!

Heading 2! 🏈

  • After this, we're having Heading 2 so we'll use <h2> tag...
    <img src="https://pbs.twimg.com/profile_images/1493870669561483264/orRE78cy_400x400.jpg" width="20%">

<h1>Amena here!</h1>

<h2>My Hobbies: </h2>

OUTPUT:

We're perfectly done!

Lists! 📃

  • After that, we're having LISTS so we'll use <ul> + <li> tag :
    <img src="https://pbs.twimg.com/profile_images/1493870669561483264/orRE78cy_400x400.jpg" width="20%">

<h1>Amena here!</h1>

<h2>My Hobbies: </h2>

<ul>
    <li>Coding 👩‍💻</li>
    <li>Blogging ✍</li>
    <li>Painting 🎨</li> 
</ul>

OUTPUT:

Boom!! 💥

Link! 🔗

  • Now we have LINK ... Let's do it!
    <img src="https://pbs.twimg.com/profile_images/1493870669561483264/orRE78cy_400x400.jpg" width="20%">

<h1>Amena here!</h1>

<h2>My Hobbies: </h2>

<ul>
    <li>Coding 👩‍💻</li>
    <li>Blogging ✍</li>
    <li>Painting 🎨</li> 
</ul>

<p> Connect With me on <a href="https://twitter.com/AmenaiSabuwala" target="_blank">Twitter</a> 
</p>

OUTPUT:

Input tag! 💯

  • Now we have the INPUT TAG!

    Code here! 👇🏻

    <h1>Amena Here!</h1>

    <h2>My Hobbies:</h2>

    <ul>
      <li>Coding 👩‍💻</li>
      <li>Painting 🎨</li>
      <li>Blogging! ✍</li>
      <li>Teaching!</li>
    </ul>

    <p>
      <i>Connect with me on</i>
      <a href="https://twitter.com/AmenaiSabuwala" target="_blank"
        ><i>Twitter</i></a
      >
    </p>

<input type="text" placeholder="Enter Email..." />

OUTPUT: 👇🏻

H3 tag! 🪩

Now we have H3 tag!

Code here: 👇🏻

    <h1>Amena Here!</h1>

    <h2>My Hobbies:</h2>

    <ul>
      <li>Coding 👩‍💻</li>
      <li>Painting 🎨</li>
      <li>Blogging! ✍</li>
      <li>Teaching!</li>
    </ul>

    <p>
      <i>Connect with me on</i>
      <a href="https://twitter.com/AmenaiSabuwala" target="_blank"
        ><i>Twitter</i></a
      >
    </p>
    <input type="text" placeholder="Enter Email..." />

    <h3>Learned HTML basics from Code arena YouTube Channel...❤</h3>

P tag + Checkbox ⏹️

Now we need to make the Checkboxes as shown in the picture!

Code here: 👇🏻

    <p>Day 1 <input type="checkbox" /></p>
    <p>Day 2 <input type="checkbox" /></p>
    <p>Day 3 <input type="checkbox" /></p>
    <p>Day 4 <input type="checkbox" /></p>
    <p>Day 5 <input type="checkbox" /></p>

This is the code of Checkboxes! 👆🏻

OUTPUT:

Web page OUTPUT: 👇🏻

Now in the picture, we have some different FONTS and COLORS

We are going to add a PINCH of CSS...

Add a Pinch of CSS 🎨

So if you haven't learned CSS yet so you just need to IGNORE THESE LINES...✨

Changing Font and Background color! 🖌️

CSS Code here! 👇🏻

Write in ur HTML file only! So Simple code! 👑

   <!-- Ignore this line.. -->

    <style>
      body {
        font-family: sans-serif;
        background-color: thistle;
      }
    </style>

You can set any Background color u want! Your Choice! 👑✨

And I have chosen THISTLE color! 💜

OUTPUT: 👇🏻

And we are completely DONE...🥳🥳

FINAL CODE 🧑🏻‍💻

Now, I have written all the code without the Boilerplate coz it's an article but in the real world, you need to write it in the Boilerplate...

Lemme show you the FINAL CODE...

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Personal Page!</title>
  </head>
  <body>
    <div>
      <img src="avatar.png" width="15%" />
    </div>

    <h1>Amena Here!</h1>

    <h2>My Hobbies:</h2>

    <ul>
      <li>Coding 👩‍💻</li>
      <li>Painting 🎨</li>
      <li>Blogging! ✍</li>
      <li>Teaching!</li>
    </ul>

    <p>
      <i>Connect with me on</i>
      <a href="https://twitter.com/AmenaiSabuwala" target="_blank"
        ><i>Twitter</i></a
      >
    </p>
    <input type="text" placeholder="Enter Email..." />

    <h3>Learned HTML basics from Code arena YouTube Channel...❤</h3>

    <p>Day 1 <input type="checkbox" /></p>
    <p>Day 2 <input type="checkbox" /></p>
    <p>Day 3 <input type="checkbox" /></p>
    <p>Day 4 <input type="checkbox" /></p>
    <p>Day 5 <input type="checkbox" /></p>

    <!-- Ignore this line.. -->

    <style>
      body {
        font-family: sans-serif;
        background-color: thistle;
      }
    </style>
  </body>
</html>

Okay, Then we're perfectly done with our Project!! 🥳

I CHALLENGE you to make yours...And post it on Twitter! 💙

My Twitter Account: Twitter

My YouTube Channel: Code Arena

Thank you so much for reading this article! And this was your practice in HTML...Now I am coming with the CSS Course Soon...❤

If you have any doubts please mention them in the comments below!

And also IIf u complete this Personal Web Page with HTML and a Pinch of CSS then u will be provided a CERTIFICATE...🥳

This kind of Certificate will be provided! 👇🏻

Rules are:

JUST DM ME ON MY TWITTER ACCOUNT AND SEND ME THE SOURCE CODE OF IT...

  • I will teach you personally for free in my Twitter DM...If you have any doubts regarding these questions or any questions!

  • JUST DM ME ON TWITTER AND I'll 100% reply to you and solve your doubt!

For now, Take care and Goodbye!

HTML5HTMLBeginner Developersbasicsfrontend