135 reads

Your First 10 Days In Frontend Development: With 30 HTML tags and Practice Exercises

by Zainab OwolabiJuly 31st, 2023

Too Long; Didn't Read

HTML stands for Hyper Text Markup Language, implying it is not a programming language. With HTML, you can build the structure of your webpage. Better put, HTML is skeleton, CSS is flesh, and javascript is blood. Firstly, you should download the VS code because we will use it all through the 100 days challenge.

featured image - Your First 10 Days In Frontend Development: With 30 HTML tags and Practice Exercises

Dearest bosses,

Welcome to the first ten days of the ultimate front-end challenge with me. This article details what to expect in your first ten days of front-end development. It will also expose you to a few things you should know about HTML before moving to CSS. Have fun!

Day 1: Learn How The Web works And Intro to basic HTML tags

Before you start, you should learn how the web works and this front-end development roadmap. Once you are done with them, you can come back here and get started with HTML.

Firstly, you should download the VS code because we will use it all through the 100 days challenge. However, you can download any other Interactive Development Environmnent (IDE) you are comfortable with. Next, we will discuss tags and the basic structure of an HTML code.

Code

<!DOCTYPE html>

<head>

<title> The Bosses' Academy </title>

</head>

<body>

<p> Welcome to The Bosses’ Academy </p>

</body>

Output

Doctype Tag <DOCTYPE html!>

The <DOCTYPE html!> indicates that your HTML code is HTML5.

Head tag <head>

The head tag contains information that will not show directly on the webpage. It is also used for CSS styling — you will see more of this later on our journey.

Title Tag <title>

Did you notice the title tag in the head tag? The title tag contains the page's label as it shows in the browser. See the image below.

Body Tag <body>

It embodies everything you can see on the webpage, like the “Welcome to The Bosses’ Academy” text above.

Day 2: Text-focused Tags

Today we will discuss how to display texts on a webpage, all the necessary tags you need to know about, and where you will need them.

Note: Henceforth, every code you see should be placed in the body section of your HTML code. Once you open VS code, create a new file, name it, place .html at the end of its name, and click enter — that’s how to create an HTML file. Next, type html:5 and click enter.

Heading Tags

There are 6 heading tags in HTML which are: <h1>,<h2>, <h3>, <h4>, <h5>, and <h6>. They are used to structure the content of your webpage. When ranking webpages, search engines use headings, especially h1 and h2 tags, to rank content based on the relevant keywords in the headings. See how to use them below:

Code

<h1>Heading 1</h1> 

<h2>Heading 2</h2> 

<h3>Heading 3</h3> 

<h4>Heading 4</h4> 

<h5>Heading 5</h5> 

<h6>Heading 6</h6>

Output

The article image below shows how h1 and h2 are used in web content. ‘Solana NFT Sales Is On The Rise’ uses the h1 tag, while ‘Solana Trading Grows Amidst NFT Market Depression’ uses the h2 tag.

Hgroup Element <hgroup>

The hgroup element is used when grouping heading tags. For example, the heading of this article: Your First 10 Days In Frontend Development, and the subhead: Day 1, belong to the same hgroup. Here is how it looks on my Google doc.

The code looks like this:

<hgroup> 

<h1> Your First 10 Days In Frontend Development </h1> 

<h2> Day 1: Learn How The Web works And Intro to Basic HTML tags: </h2> 

</hgroup>

Header Tag <header>

I find header and hgroup confusing because what’s the purpose of <hgroup> if you already have a header tag? But I try to remember how the webpage is structured, and there is the header, footer, aside, and navigation pane. The header tag precedes other webpage content and usually contains a search bar, website icon, hamburger menu, author name, and navigation elements.

Example of a header and footer: The part in the pink box is the header, while the part in the blue box is the footer.

Code

Here is an HTML code example of how to use the header tag:

<header>
<a src="https:thebossesacademy.com" id="logo"> The Bosses Academy</a>
<nav>
<ul>
<li> <a href="thebossesacademy.com/home"> Home </a> </li>
<li><a href="thebossesacademy.com/contact"> Contact us</a></li>
</ul>
</nav>
</header>

Output

List Tag

If you noticed, I introduced three new tags in the above code: nav, <ul>, and <li> tags. We will discuss the <nav> tag later but let’s talk about <ul> and <li> tags now. <ul> stands for an unordered list tag, while the other list tag <ol> stands for an ordered list.

The navigation menu in the earlier code lists an unordered list using bullet points (in disc format). But you can create an unordered list with squares, discs, and circles using the type attribute. On the other hand, <li> tags are block-level elements used to list items in ordered and unordered lists.

Code An example of code for an unordered list:

<!-- unordered list with attribute type -->
<h3> Wears </h3>
<ul type="disc">
<li> pants </li>
<li> t-shirt </li>
<li> scarves </li>
</ul>

<!-- square type>
<h3> Wears </h3>
<ul type="square">
<li> pants </li>
<li> t-shirt </li>
<li> scarves </li>
</ul>

An example of code for an ordered list:

 <!-- ordered list with attribute type -->
<h3> Positions in Class </h3>0
<ol type="1" start="5">
<li> First position </li>
<li> Second position </li>
<li> Third position </li>
<li> Fourth position </li>
<li> Fifth position </li>
</ol>

<h3> Positions in Class </h3>
 <ol type="I">
    <li> First position </li>
    <li> Second position </li>
    <li> Third position </li>
    <li> Fourth position </li>
    <li> Fifth position </li>
 </ol>

**Output \ **

Paragraph Tag

We can’t mention texts in HTML without discussing the most basic HTML tag for text. The <p> is a block tag used to write paragraph text. Paragraphs in HTML are block-level elements that start a new line.

Code <p> Welcome to The Bosses’ Academy </p> <p> The number 1 platform for learning web3 </p>

Output As you can see, the first and second phrases are on different lines.

Footer Tag

Every web page has a header and footer. We have already discussed the header; now, let's discuss the <footer> tag. Just like the header contains certain elements, the footer of a webpage is no different. It consists of copyright, navigation, video views, and contact details.

Code

<footer class="Views">
<p> Viewed: 1,200,000</p>
</footer>

**Output \

Day 3: Links and Images

The web would not be what it is today without links, so here are a few things you should know about the hyperlink tag in HTML.

Hyperlink Tag <a>

The <a> tag is the most common for linking web pages. Without it, you won’t be able to move from one webpage to another. Imagine what will happen when you search for a term on Google and can’t click links to read articles. The <a> tag possesses a primary attribute (link) href, which indicates the link address.

Code

<a href=“https://thebossesacademy.com”> The Bosses’ Academy </a>

Output

When you add target=”_blank” to your <a> tag, it will open the link on another page. Lastly, the <a> tag uses two different types of URLs (absolute and relative links); you can see more about that here and its attributes here.

Image Tag <img>

Today’s web pages contain images to better structure content and make it more digestible. We need the image tag to embed images into web pages. Here is how

Code

<img src="https:healthguide.ng/wp-content/uploads/2022/09/images-23.jpeg?ezimgfmt=ng:webp/ngcb1" alt="Test image">

As you can see, the image tag has the src attribute, which can either link to an image on another website (absolute URL), on the same website (relative URL), or on your computer. Read more on that here. The image tag also has attributes like height and width measured in pixels that you can resize the image with.\

Output

Day 4: Tables

I spent most of my time learning tables because my frontend course on Educative highlighted it countlessly. So I wondered why tables were so crucial in HTML.

It’s because they help with structured data and make it easy to look up values. For example, it would be tedious to read 1000 student results if they were in list form.

Code

Here is a sample code on a simple table.

<table>
  <thead>
    <tr>
      <th>Region</th><th>Code</th>
      <th>Result</th>
    </tr>
</thead>

      <tr>
        <td>North</td><td>N</td>
        <td>12%</td>
      </tr>
      <tr>
        <td>East</td><td>E</td>
        <td>42%</td>
      </tr>
      <tr>
        <td>South</td><td>S</td>
        <td>27%</td>
      </tr>
      <tr>
        <td>West</td><td>W</td>
        <td>19%</td>
      </tr>
</table>

Output

Here is the output

Tags used

Table Tag <table>

It defines the HTML table. Without the table tag in the code above, the result in the browser looks like this:
Table Header and Table Footer Tags (<thead>, <tfooter>) Similar to a webpage, a table also has a header, body, and footer; although they are not compulsory tags, it is ideal to use them to show the table heading and footer. They are helpful in CSS for styling the tale.
Table Row Tag (<tr>)

It defines data in a row of an HTML table through the <th> tag (for header cell) or <td> tags (for standard data cell). See more on the <th> and <td> tags below.

I. <th> tag defines the header cell in a table. You can see attributes of <thead> tag here.

II <td> tag defines a standard data cell in HTML. You will notice that data within the th tag aren't in bold form.

Day 5: Form

You have seen that a table cannot work without the table tag; the same applies to forms in HTML. The <form> tag defines a form in HTML. See an example of a form below, every website has at least one, so it is crucial to understand how it works and its attributes.

Code

    <form>
<h3> Writer's Bio</h3>
<label for="username">
Username:
<input type="text" id="username" name="username">
</label>

<label for="password">
        Password:
        <input type="password" id="password" name="password">
    </label>


    <br>
    <label for="email">
        Email Address:
        <input type="email" id="email" name="email">
    </label>


    <label for="url">
        Portfolio:
        <input type="url" id="url" name="url">
    </label>


</form>

Output

Tags used

Label Tag With For Attribute The label tag is an inline-level element used to describe a caption for a field in a form. For example, the below code labels the field as Username.

<label for="username">
Username:
<input type="text" id="username" name="username">
</label>

Input Tag

It asks users for input and provides information about what kind of input users should give through the type, id, and name attributes. For example, the username has a text type, i.e., thebossesacademy, but its id value has to be the same as the for attribute's value.
Button Tag <button type="submit"> Login </button> A form without a button serves no purpose, so a button tag is essential. The button tag has an attribute ‘type’ that decides what will happen when a user clicks on a form.

Day 6: Select Element and Radio Buttons

I. Select Tag <Select>

Several web pages use the select tag to allow users to create a drop-down list, such as the hamburger menu, and MCQ exams use a drop-down list.

Code

The code below shows 17 before clicking the dropdown menu because 17 has been selected using the “selected” attribute. Also, you will notice the option tags. They are used to list out each time of the dropdown list, while the <optgroup> tag is used to categorize each list.

You also notice that the select tag is wrapped in the label element. That’s because the <label> tag creates a label for a menu or user input on the page. You can read other ways the select tag is used here.

 <label for="selector">

            <p> The <code> select </code> element allows users to select from a list of ages below </p>

            <select id="selector">

                <option> 15 </option>

                <option selected> 17 </option>

                <option> 22 </option>

            </select>

        </label>

Output

See the output below.

II. Radio buttons

A radio button is also another way for users to select an option from a multichoice list. Think of yourself filling out a form where you can choose yes or no but not both. That’s where radio buttons come in.

Code

You can decipher how this works by running the code on your own. As you can see, it uses the label and input tags.

 <form>

            <p> what time do you like to eat best? </p>

            <label for="morning">

                Morning

                <input type="radio" id="morning" name="callTime">

            </label>

            <label for="afternoon">

                Afternoon

                <input type="radio" id="afternoon" name="callTime">

            </label>

            <label for="evening">

                Evening

                <input type="radio" id="evening" name="callTime">

            </label>

        </form>

Output

Day 7: How to Display Tags In HTML and More on Tags

So how do you display <p> on a browser? <p> is an HTML tag, and it will not show on the browser until you use this command: <p>

<** represent (<) and > represent (>). Therefore, displaying that command on your browser will show as <p> in text.

Other HTML Tags

Exercise: try these HTML tags to see the output and learn their use

  <bdo dir="ltr">go in the right direction. </bdo>

        <br>

        <bdo dir="rtl">go in the opposite direction</bdo>

<code style="display: block"> I am not a keyboard input </code>

        <pre>

            this text

            skips to the

            next line and is indented because

            it uses the &lt;pre&gt; element

        </pre>

Day 8: Div and Section Tags

Welcome to the sectioning tags in HTML.

DIv Tag <div>

The div tag, also called the division tag, is a block-level element that doesn't have any special meaning in HTML but is used to group a code block. Take a look at the example below. You won't see any change when you run the code with or without div. So using other tags like section, nav, and aside is recommended.

Code


<div>
         <h2> Ingredients </h2>
         <ul type="square"> 
             <li> omelet </li>
             <li> water </li>
             <li> sugar </li>
         </ul>
         </div>

Output

Section Tag <section>

Unlike the div tag, the section is not generic. It is used to group similar content.

See how it is used below.

Code

  <section>

                    <h1> Ways to tie a shoe</h1>
        
        
                    <section>
        
                        <h2> Number 1 </h2>
        
                        <p> Take the shoe rope </p>
        
                    </section>
        
                    <section>
        
                        <h2> Number 2 </h2>
        
                        <p>  Fit it in the first hole on the left </p>
        
                    </section>
        
                </section>

Output

Day 9: Exercise

I thought it would be boring if you didn’t try things yourself, so you should write the HTML code to produce this output independently.

Day 10: Exercise

Write a code to produce the output below, and it’s a wrap!\

FAQs

How many days does it take to learn front-end development?

There is no definite answer to this. It depends on how fast you learn and your level of commitment. There are frontend developers who grabbed all the basics in 3 months, but that’s not enough time to build complex web pages.

What should I learn first as a front-end developer?

As a front-end developer, you should learn how the web works. First, it will make your journey easier, but it is okay not to get it at once. Then you can proceed to learn HTML before CSS and javascript. You should see this guide on how I plan to become a web3 developer; it will be beneficial to you.

Can I learn web development in 1 week?

Yes, you can learn web development in a week, but what you have learned would be rushed and insufficient to build great web pages. Give yourself time!\

How do I land a front-end developer with no experience?

By practicing and trying out several projects to build your portfolio. Writing about your learning process is another way to build your portfolio but focus more on learning.