Lesson 1: Basic HTML & HTML 5



Today's article is all about the few things I learnt from the Basic HTML & HTML 5 module of FreeCode Camp which I just completed. If you are new to my blog and wondering what this series is all about, check it out here. With no further ado, let's dive right into it.

The challenge was all about building a simple cat photo web page piece by piece (see final page below). This was an easy and very straightforward one for me. Here are my top 5 lessons & 5 fun facts from the challenge

My Top 5 Lessons

1. I started out by learning different HTML elements (e.g, <h1>) , their uses and how they are placed when coding. I also learnt about commenting in HTML (Comments in HTML starts with <!--and ends with a -->). 

2. Nesting links within other test elements and definitions of terminologies such as (target - an anchor tag attribute that specifies where to open a link and the value & href - another anchor tag attribute that contains the URL address of a link) was another interesting one for me. I did a couple of nestings to be able to achieve the app

3. Creating web form with the form element and adding a submit button was one of my best tasks
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">Submit</button>
</form>

4. I also created a bullet list of ordered and unordered elements


                     For unordered lists, 
                        <ul>
             <li>coding</li>

          </ul>



                     For ordered lists, 
                      </ol>
         <li>coding</li>
         </ol>


5. Lastly, I created text fields and added placeholders to a field ( e.g  <input type ="text"
placeholder="cat photo URL">) & guess what? Creating radio buttons and check boxes was my favourite task of all. 

Below is a screenshot of the completed task:



5 Fun Facts: 

- Do you know that HTML stands for "Hyper Text Markup Language"

-  Do you know that the main tag helps search engines and other developers find the main content of your page

-  Do you know that you can turn an image into a link, using a element

- Do you know that you can create a dead link with an hashtag. For example: href="#"

-  Do you know that the div element is one of the most commonly used HTML elements. It is like a container for other elements

No comments