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 and this . Once you are done with them, you can come back here and get started with HTML. how the web works front-end development roadmap 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. However, you can download any other (IDE) you are comfortable with. Next, we will discuss tags and the basic structure of an HTML code. Interactive Development Environmnent 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 text above. “Welcome to The Bosses’ Academy” 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. 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. Note: — Heading Tags There are 6 heading tags in HTML which are: . 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: <h1>,<h2>, <h3>, <h4>, <h5>, and <h6> 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. uses the h1 tag, while uses the h2 tag. ‘Solana NFT Sales Is On The Rise’ ‘Solana Trading Grows Amidst NFT Market Depression’ Hgroup Element <hgroup> The hgroup element is used when grouping heading tags. For example, the heading of this article: and the belong to the same hgroup. Here is how it looks on my Google doc. Your First 10 Days In Frontend Development, subhead: Day 1, 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: 
<h3> Wears </h3>
<ul type="disc">
<li> pants </li>
<li> t-shirt </li>
<li> scarves </li>
</ul>


<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> As you can see, the first and second phrases are on different lines. Output 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 and its attributes . here 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 . The image tag also has attributes like height and width measured in pixels that you can resize the image with.\ here 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: 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 Header and Table Footer Tags (<thead>, <tfooter>) 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. defines the header cell in a table. You can see attributes of <thead> tag here. I. <th> tag defines a standard data cell in HTML. You will notice that data within the th tag aren't in bold form. II <td> tag 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 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 Tag With For Attribute <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 has to be the same as the 's value. id value for attribute 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. Button Tag <button type="submit"> Login </button> 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 : try these HTML tags to see the output and learn their use Exercise <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 ; it will be beneficial to you. how I plan to become a web3 developer 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. Is HTML, CSS, and JavaScript enough? In the past, HTML, CSS, and JavaScript would have been enough, but if you want an edge, you must learn frameworks like REACT and Angular js. Is front-end coding easy? It depends on who is asking, but generally, frontend isn’t easy, even for pro developers, but hey, you are starting with HTML; it is much easier.

This story contains new, firsthand information uncovered by the writer.

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How I Bought A Laptop With Money Earned Using My Smartphone: My 2022 in Review

8 Reasons Why Inventors Should Try This Free and Open-Source Patent Search Engine

Finance Transformation: The Role Of Technology

Surviving a Skyfall: A Lead Engineer’s True Story

100 Days of AI Day 4: Maximizing Productivity & Creativity with ChatGPT

10 Tips to Take Your ChatGPT Prompts to the Next Level

How I Bought A Laptop With Money Earned Using My Smartphone: My 2022 in Review

8 Reasons Why Inventors Should Try This Free and Open-Source Patent Search Engine

Finance Transformation: The Role Of Technology

Surviving a Skyfall: A Lead Engineer’s True Story

100 Days of AI Day 4: Maximizing Productivity & Creativity with ChatGPT

10 Tips to Take Your ChatGPT Prompts to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps