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!
Before you start, you should learn
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
Code
<!DOCTYPE html>
<head>
<title> The Bosses' Academy </title>
</head>
<body>
<p> Welcome to The Bosses’ Academy </p>
</body>
Output
The <DOCTYPE html!> indicates that your HTML code is HTML5.
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.
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.
It embodies everything you can see on the webpage, like the “Welcome to The Bosses’ Academy” text above.
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.
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.
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>
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
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 \ **
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.
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 \
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.
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
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
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
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.
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
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.
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
<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.
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
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 <pre> element
</pre>
Welcome to the sectioning tags in HTML.
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
\
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
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.
Write a code to produce the output below, and it’s a wrap!\
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.
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.
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!\
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.
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.
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.