Let's take a refresher quiz before we proceed to today's lesson.

Refresher quiz

Phew!!! That was a lot.

Let's proceed to the subject of today.

HTML Buttons

Buttons are used in HTML to link users to other pages or sections on your page or to add some other interactivity to our page.

To fully demonstrate Buttons in HTML, we will create a new HTML page in our project, and name it contact.html. Create this file inside our assets directory.

• Create a boilerplate code for the HTML document and title the page Contact Me.

• Back in your index page, in your contacts section, after the YouTube contact, create a button tag and let the button say 'Reach me'.

<button>Reach Me</button>

• We need to nest this button element inside of an anchor tag with the value of the href attribute pointing to the relative path of the newly created contact.html file, as follows:

<a href="./assets/contact.html"><button>Reach Me</button></a>

• Make the page load in a different tab by adding the target="_blank" attribute to the anchor tag.

HTML Forms

Now, we will create a form on the contact page to demonstrate the concept of forms:

• To create a form, you use the form tag and nest the input and label tags in it. Forms typically also have an element for submission. This can either be a button or an anchor tag.

• Inside our contact page, create an h1 heading with content: Contact me.

• Create a paragraph element with the following content: Kindly fill in the form below to get in touch with me

• Create a form element using the form tag, and just delete the action attribute for now.

<h1>Contact Me</h1>
<p>Kindly fill in the form below to get in touch with me</p>
<form>

</form>

Radio Button Field

Radio buttons only give users a single option to select from a list of options. We will give the user an option of titles to select from: Mr, Ms and Dr

• Nested inside the form element, create a label tag that says Title and add a for attribute of title.

• Next, create 3 pairs of label and input tags for Mr, Ms and Dr and add for attributes of mr, ms and dr to their label tags.

• In their input tags, add a type attributes of radio and match their id to their respective for attributes.

• Add a value attribute in their input tags as follows: mrms and dr respectively. The value attribute is necessary for form submission.

• It is important to group radio buttons so that only one is selected at a time, to do this, we add a name attribute to their input tags, giving them the same value of title. This adds them all in the same group named title.

<!-- form element wrapper -->
<form>
<!-- Title field -->
  <label for="title">Title</label>

  <!-- Mr label & input-->
  <label for="mr">Mr</label>
  <input type="radio" id="mr" value="mr" name="title">

  <!-- Ms label & input-->
  <label for="ms">Ms</label>
  <input type="radio" id="ms" value="ms" name="title">

  <!-- Dr label & input-->
  <label for="dr">Dr</label>
  <input type="radio" id="dr" value="dr" name="title">
</form>

Name Field

• Inside this form tag, nest the first set of input and label tags to collect users' Names

• The label tag tells the user what to do within the input area.

• The type attribute for the input label is set to text by default, and the for attribute for the label is set to name for screen readers to be able to read it, and also, to move your cursor to the text box if the label is clicked on.

• The id attribute for the input is set to match the for attribute of the label, to link them

• We need a submit button, we will create this using an input tag of type="submit" right now the submit button doesn't work as expected as we have not set any backend code to receive the form.

• Add a required attribute to the input tag to make that field a must fill field for submission.

• Add minlength and maxlength attributes for 5 to 10 characters

• Add a reset button by creating an input tag and setting the type to reset, for the user to be able to reset the form.

• Add a placeholder to give the input field a sample text, by adding a placeholder attribute to the input tag.

• Add a line break to move the submit and reset buttons to the next line.

<!-- Name Field -->
  <label for="name">Name:</label>
  <input type="text" id="name" minlength="5" maxlength="10" required placeholder="Loche">
  <br>

Password Field

• Within the form tag, create another pair of label and input tags for our password.

• Again, set the for attribute of the label tag to password while matching this with the id attribute of the input tag.

• Set the content for the label tag to Password

• In the input tag, add attributes for the minlength, maxlength, placeholder, and required, as desired.

<!-- Password field -->
    <label for="password">Password</label>
    <input type="password" id="password" placeholder="********" minlength="6" maxlength="12" required>
    <br>

Email Field

• Add another pair of label and input tags inside the form element, just above the submit and reset buttons.

• Set the for attribute of the label to email and add an Email content to the label tag.

• Add a type attribute of email to the input tag, also add a required attribute, and set the id attribute to email, to match the for attribute of the label. Don't forget to add a placeholder text of akkre@email.com.

<!-- Email field -->
    <label for="email">Email</label>
    <input type="email" required placeholder="akkre@email.com" id="email">

Phone Number Field

• Add another pair of label and input tags for the phone number field.

• To the label tag, set the content to Phone Number and add a for attribute of number.

• To the input label, set the type attribute to tel or telephone, the id to number, the placeholder to 012-3456-7890, and also set the required attribute.

• Also, set the pattern attribute to match the pattern on the placeholder, as follows: [0-9]{3}-[0-9]{4}-[0-9]{4}. This means the first 3 digits are numbers from 0-9, then a dash, then the next 4 digits are numbers from 0-9, then a dash, then the last 4 digits are numbers from 0-9.

<!-- Phone Number field -->
    <label for="number">Phone Number</label>
    <input type="tel" required placeholder="012-3456-7890" id="number" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"
    <br>

Calender Field

This is just for demonstration purposes only.

• Create a label tag and set the content to Birthday and the for attribute to birthday

• Create an input tag, set the type attribute to date and id to birthday. This brings the user a calendar object. Then add a page break after.

<!-- Birthday field -->
    <label for="birthday">Birthday</label>
    <input type="date" id="birthday">
    <br>

Quantity Field

We assume that the user is going to enter a quantity, as though they are making an order, again this is only for demonstration.

• Add a label tag and set the content to Number, also set the for attribute to number.

• Add an input tag and set the type attribute to number and id to number.

• Set the min and max attributes to 0 and 99 respectively because we don't want the user selecting a negative number.

• Set the default value to 1, like so: value="1"

<!-- Quantity field -->
    <label for="number">Quantity</label>
    <input type="number" id="number" min="0" max="9" value="1">
    <br>

Drop-Down Field

We will create a drop-down menu for card payment. Again we will assume we are paying for a service just for demonstrative purposes.

• Create a label tag and set the for attribute to payment and content Payment

• Instead of an input tag, we use a select tag with id attribute set to payment, and nest 3 option tags

• For the 3 option tags, set their value attributes and content to verve, visa and giftcard, and we have just created 3 drop-down menus.

 <!-- Drop-Down menu Field -->
      <label for="payment">Payment</label>
      <select id="payment">
        <option value="verve">Verve</option>
        <option value="visa">Visa</option>
        <option value="giftcard">Giftcard</option>
      </select>
        <br>

CheckBox Field

We will create a checkbox field for users to subscribe to imaginary newsletters

• Create a label tag and set the for atribute to subscribe, and the content to Subscribe to my Newsletters

• Create an input tag, set the type attribute to checkbox and the id attribute to match the for attribute of its label tag: subscribe

<label for="subscribe">Subscribe to my Newsletters</label>
<input type="checkbox" id="subscribe">

Textarea Field

We will create a textarea for users to be able to type in their comments

• Create a label tag and set the for attribute to comment, and set the content to Type in your Comments.

• Create a textarea tag and set the id to comment, cols to 30 and rows to 10. cols and rows control the columns and rows. Set a placeholder as desired.

<label for="comment">Type in your Comments</label>
<textarea id="comment" col="30" rows="10" placeholder="i like coding"></textarea>

File Attachment Field

Again, Users will be able to attach files on this page, as follows:

• Create a label tag with a for attribute of file, and content of Attach a File.

• Create an input tag with a type attribute of file and an id of file

• We can limit or specify the type of file that users can send by adding an accept attribute and specifying multiple file type/extension in the input tag, seperated by commas.

• Also, if you are expecting large sizes of file exchange on the page, it is probably important to set one more attribute to the form tag to be able to process larger files: enctype="multipart/form-data". When we send a large data, this data is first broken down into smaller parts, sent, and the reassembled again.

<label for="file">Attach a File</label>
<input type="file" id="file" >

You can set the file to which the form data is sent as attributes in the form tag, but this is beyond the scope of this article.

This was a lot, but we have covered so much with forms, we can do with some styling but we will do this using CSS, soon.

Thank you for your time.

Refresher Quiz

Tables in HTML

Tables are used to analyze data for display in a structured format for users to easily view them. Here is how tables are created in HTML:

• We will create a summary of your profile at the top of the index.html page.

• At the highest level, tables are wrapped in the table tag, with tr table rows nested into it. The first tr wraps a th or table heading, then the next sets of tr rows wrap table data or td, as many as required.

• In your index.html file, edit your name and type 'Profile Summary' inside the h1 tags.

• Create the basic skeleton of the table structure as follows:

<table>
    <tr>
        <th>
        </th>
        <th>
        </th>
    </tr>

    <tr>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

These are the basic rules for creating tables:

• You define rows to contain the various categories. The first row would hold the table headings, so in our case, we intend to have 2 headings, so we create 2 th elements under the first tr element

• The table data is also defined inside rows, each row would contain 2 td elements to define the data corresponding to the 2 heading categories.

• Add more rows as desired to add more information to your table, as follows:

<table>
      <tr>
        <th>Category</th>
        <th>Details</th>
      </tr>
      <tr>
        <td>Name</td>
        <td>Oloche Aboje</td>
      </tr>
      <tr>
        <td>Location</td>
        <td>United Kingdom</td>
      </tr>  
      <tr>
        <td>Occupation</td>
        <td>Front-End Developer</td>
      </tr>
      <tr>
        <td>Background</td>
        <td>Architecture, Web Development</td>
      </tr>
      <tr>
        <td>Skills</td>
        <td>Javascript, React</td>
      </tr>
    </table>

Here is a preview of the new table:

But we can format it a little more:

• In the opening table tag, add a border attribute of value 1 to create cells for the table.

• Next, in the opening tag of the table row tr for the heading, add an align attribute of value left.

• In the opening tag of the table heading th, add an attribute of width and set it to a value of 100 for the first category heading and 200 for Details.

check out the preview:

I am not quite flowing with the cells, so I will just delete that attribute, and add a width attribute to the passport, and set the value to 200px to reduce it:

Refresher Quiz

Ordered Lists

Ordered lists, ol are lists that are ordered just as the name implies. They follow a certain numerical order and they are used to itemize things when it is important to follow a certain order.

• When making an ordered list, you use the ol tag and then nest the li tags for each item. You can also create a sub-list for sub-categories.

• To demonstrate this, in our index.html file, let's turn our skills section into an ordered list.

• First, convert the u tags for the underlines into ol ordered list tags.

• Then wrap li list item tags around each skill as follows:

 <ol><li>HTML</li><li>CSS</li><li>Javacsript</li><li>React</li></ol>

Unordered Lists

Unordered lists, ul are used when itemizing things without following any particular order. They appear as bullet points: Here is how they are created in HTML:

• Start by wrapping our hobbies section with an ul tag, replacing the p tags, and deleting the div tags as well.

• Next, wrap each hobby item inside a li list item and see how it gets rendered on the live server preview page as bullet points as follows:

    <ul>
      <li>football</li><li>basketball</li><li>
      <a href="./assets/music.html" target="_blank">listening to music</a></li>
    </ul>

Nested Lists

Lists can be nested into a list as sub-categories. Let's take an example of the following, just for demonstration purposes:

• In the hobbies section let's create a sub-category under each section by nesting an unordered list item under each hobby

• Under the football hobby, after the 'football' text, nest an ul tag, and inside this ul tag, nest two li list items: 'watching football games', and 'playing football', as follows:

<li>football
      <ul>
          <li>watching football games</li>
          <li>playing football</li>
      </ul>
 </li>

• under the basketball hobby, in like manner, right after the basketball text, nest a ul tag with two li list items inside the ul tag. the List items should have the following content: 'watching basketball games', and 'playing basketball video games', as follows:

<li>basketball
      <ul>
          <li>watching basketball games</li>
          <li>playing basketball video games</li>
      </ul>
 </li>

This is how you make ordered lists and unordered lists and nest other lists into them. Next we will discuss how to make description lists.

Description Lists

Description lists are used to provide definitions or descriptions of terms. You can create a dictionary website using this.

The basic structure is the dl 'description list' tags wrapping the dt 'description terms' tag and the dd 'description definition' tags, in pairs. To demonstrate this, we will turn our contact section into a description list, just for demonstrative purposes:

• First, create a dl opening tag just below the Contact Me element and close the tag just below the U2B closing anchor tag. This wraps the entire contacts elements in a 'description list' tag, like this:

<dl>
    <a
      href="https://www.linkedin.com/in/ao111"
      target="_blank"
      title="my linkedin"
      >Linkedin
    </a>

    <a href="https://github.com/accdev1694" target="_blank" title="my github"
      >GitHub
    </a>

    <a
      href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
      target="_blank"
      title="my youtube"
      >U<sup>2</sup>B
    </a>
  </dl>

• Next, wrap the anchor tags of each contact item with a dt 'description term' tag to turn each item into a description term, like this:

<dl>
     <dt>
       <a
          href="https://www.linkedin.com/in/ao111"
          target="_blank"
          title="my linkedin"
          >Linkedin
        </a>
      </dt>

      <dt>
        <a href="https://github.com/accdev1694" target="_blank" title="my github"
            >GitHub
        </a>
      </dt>

      <dt>
        <a
          href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
          target="_blank"
          title="my youtube"
          >U<sup>2</sup>B
        </a>
    </dt>
  </dl>

• lastly, add a dd 'description definition' opening and closing tags, with a definition right under each dt description term element as follows:

<dl>
      <dt>
        <a
        href="https://www.linkedin.com/in/ao111"
        target="_blank"
        title="my linkedin"
        >Linkedin
        </a>
      </dt>
      <dd>Linkedin in as online platform for your professional profile</dd>

      <dt>
        <a href="https://github.com/accdev1694" target="_blank" title="my github"
        >GitHub
        </a>
      </dt>
      <dd>GitHub is an online platform for your codes and all things tech collaboration</dd>

    <dt>
      <a
      href="https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow"
      target="_blank"
      title="my youtube"
      >U<sup>2</sup>B
      </a>
    </dt>
    <dd>Youtube is an online video streaming platform</dd>
  </dl>

In summary, 'description lists' use dl tags at the highest level, then two tags for each item: the dt 'description term' and dd 'description definition', in the following structure:

<dl>
    <dt>
    </dt>
    <dd>
    </dd>
</dl>

Here is the live server preview of the Description List:

That is all about lists in HTML. Don't forget to like, subscribe, and comment on this blog. Thank you.

Refresher Quiz

Now that we have refreshed our memory from the previous article, let us proceed to formatting text in HTML.

Inline and Block-level Elements

Inline Elements take up just the space of their content while Block elements take up the entire line of code. In other words, Inline elements can share the same line with other elements, whereas, block-level elements are very 'selfish', as they don't share.

Spans and Divs

We will illustrate this concept using a span, which is an inline element, and a div, which is a block element. a div is like a container for separating sections of the HTML document for styling purposes, it is a block-level element. A span is also a container for sectioning contents in an HTML document, it is an inline element. Now let's code:

• In our index.html file, scroll to the hobbies section and wrap the first two hobbies with a div, like so:

<p>
<div>football, basketball,</div>
<a href="./assets/music.html" target="_blank">listening to music</a>
</p>

Notice how the div has forced the listening to music hobby out of its line, and into the next line. This clearly demonstrates how a div is a block-level element, as they don't share the same line with other elements. Let's demonstrate the inline concept:

• In the same file, scroll down to the my projects section and replace the h3 tag that surrounds it, with a span. See how that section gets smooched up into the section before it.

• Next, surround the entire section with a div to isolate it inside a container, as follows:

 <div><span>My Projects:</span>
      <a href="./assets/projects.html" target="_blank">Go to Projects</a></div>

Notice how that section has now moved to a new line. You can now add line breaks to separate them, thus:

<br>
<br> 
<div><span>My Projects:</span>
      <a href="./assets/projects.html" target="_blank">Go to Projects</a></div>

You can easily style these changes using CSS but we will get to that.

Text Appearance Formatting

We can use special tags to alter the appearance of some text to add emphasis to them.

Still inside our index.html document, we will demonstrate these concepts:

• The mark tag: In the About Me section, give the word Architecture a special background to emphasize it, using the mark tag:

<mark>Architecture</mark>

• The monospaced tag: In the About Me section, wrap the words Frontend Web Development with a monospaced tag using the tt tags. This would appear to not be visible because of the pre tags currently wrapping that paragraph, change it from pre to p tags and notice the changes:

<tt>Frontend Web Development</tt>

• The deleted tag: Here we will make a word we consider unpleasant appear deleted. Find the word intimidating in the same section and wrap it with the del tag:

<del>intimidating</del>

• The subscript tag: Let's create a reference to the University of Birmingham website using a subscript tag. Locate the text University of Birmingham, type 1 immediately after it, no spaces, then wrap the number '1' you just typed with the sub tags. Secondly, nest an anchor tag inside this sub tag and set its href attribute to the following URL: (https://www.birmingham.ac.uk/), without the brackets. I went ahead and added a tooltip using the title tag, I hope you still remember how to do this.
  Typically, subscripts are used to refer users to a footnote, we will learn how to link elements to other sections of the same document in a later article:

<sub><a href="https://www.birmingham.ac.uk/" title="University of Birmingham Website">1</a></sub>

• The superscript tag: Used typically in mathematical expressions to raise numbers to the power of something, but we will demonstrate how it is done here. Let's create a funky way of writing 'YouTube' in the contacts section like U2B, and then making '2' a superscript, really cool right?

U<sup>2</sup>B

• The underline tag: Let's underline HTML, CSS, Javascript, and React in the skills section:

<u>HTML, CSS, Javacsript and React</u>

• The bold tag: Sure, we can make the Coventry text bold in the About Me section:

<b>Coventry</b>

• The italic tag: Go ahead and make the UK text italicized:

<i>UK</i>

• The big tag: We can also make texts big. This is rarely used because CSS can be used to manipulate text sizes really easily. We will make the UK text big by nesting a big tag inside the italic tag:

<i><big>UK</big></i>

• The small tag: We can also make texts small. we will go ahead and make the Architecture text small, by nesting a small tag inside the mark tag, thus:

<mark><small>Architecture</small></mark>

Please note that all these can be done easily with CSS and we will move into CSS soon.

Let us see how well we remember the concepts from our previous article:

Adding Favicons

A favicon or Favourite Icon is an image that appears as the icon of your website or webpage, displayed on the browser tab. Usually, a logo is used as the favicon of your webpage.

• First, get an image you wish to use and add it to your images folder. We will use the passport as our favicon.

• within the head section of our index.html document, create a pair of link tags just above the title tags.

• Notice that this is a self-closing tag, add an href attribute, and set its value to the relative path to the passport.

• Add a type attribute and set its value to image/jpg since the passport is an image file with a .jpg extension.

• Finally, add rel attribute and set its value to icon. Your code should look like this:

<link href="./assets/images/passport.jpg" type="image/jpg" rel="icon">

notice the favicon next to the web page’s title.

Working with Video Files

You can add videos directly to your web page as follows:

• Create a videos folder inside your assets folder in vs code

• Find a video, representing a project you have done. You can get a free one from canva.com.

• In your projects.html file, create a new projects section right under your project 1 and call it project 2, using a h2 tag.

• Next, use a video tag the same way you used the img tag in project 1 above. add a src attribute and set it to the relative path to the the video file.

• Change the width as desired by adding a width attribute and set the width to 400px.

• Add a controls attribute for the video to be able to be played.

• Add an autoplay attribute for the video to play automatically

• Add a muted attribute for the video to be muted by default to avoid distractions to users.

• Add a loop attribute for the video to loop back to beginning when finished.

• Give it a short description using a paragraph tag.

• You should know that you can turn any image or video file into a hyperlink by wrapping it in anchor tags and setting the href attribute to a url of choice. we will set our url to the source file in canva.

• Finally, have the link open in a new tab by setting the target attribute to _blank

<h2>Project 2</h2>
<a href="<https://www.canva.com/design/DAGA8YG9y_w/7Ks8QYsEn-z3X8OTXu0LWA/edit>"><video src="../assets/videos/project 2.mp4" width="400px" controls autoplay muted loop target="_blank"></video></a>
<p>A very short video demo</p>

Here is the code as well as the live preview

Activity h05:

Adding Audio Files

We are going to add a few audio files to our profile:

• In our index.html file, add a new hobby to the hobbies section: “listening to music”

• Wrap this new hobby inside anchor tags and set the relative path to ./assets/music.html. Remember to add a target attribute and set it to _blank to open in a new tab.

• to create this music.html file, inside your assets folder, create a music.html file.

• open this music.html file and create a boilerplate code.

• Title it My Favourite Music

• Using an h2 tag, add a heading titled My Favourite Music

• I am pretty sure you have some audio files of music you listen to regularly, grab those files, create a folder called music inside your assets folder, and paste those songs in there.

• Right under the h2 tag. create an audio tag and specify a source attribute to a relative path to the first song, then do the same for all the other songs, in separate audio tags.

• next create attributes for controls, muted, autoplay and loop.

Try this activity before checking the code on my project repo. check out the mock-up below.

You will realize that as we move on, I expect that you are getting better at this as I will no longer openly post code solutions to activities here. I will only place mock-ups and then push the codes to the repo. Click here for access to the repository.

There you have it, You have Learned how to add Audio, Video, and a Favicon to your HTML Page.

Before we proceed with our lesson for the day, let's take a quick refresher. Try to answer the questions yourself first before toggling for answers.

• What does HTML stand for?

  HTML stands for HyperText Markup Language.

• What is the purpose of the <h1> tag in an HTML document?

  The <h1> tag is used to display the main heading of a webpage.

• Which tag is used to insert images into an HTML page?

  The <img> tag is used to insert images into an HTML page.

• How do you create a link to another webpage using HTML?

  Use the <a> tag with the href attribute to create a link to another webpage.

• What is the correct HTML element for inserting a line break?

  The <br> tag is the correct element for inserting a line break.

• What is the purpose of the <!DOCTYPE html> declaration?

  The <!DOCTYPE html> declaration defines the document type and HTML version, indicating it's an HTML5 document.

• Which HTML tag is used to define the body of the HTML document?

  The <body> tag is used to define the body of the HTML document.

• Describe the basic structure of an HTML document.

  The basic structure includes the <!DOCTYPE html> declaration, followed by <html> tag with nested <head> and <body> tags.

• What is the function of the <meta charset="UTF-8"> tag?

  The <meta charset="UTF-8"> tag specifies the character encoding for the HTML document.

• What did you notice about the font sizes of headings from <h1> to <h6>?

  The font sizes gradually reduce from <h1> to <h6>.

• What is the difference between an element and a tag in HTML?

  In HTML, a "tag" refers to the syntax used to denote the start or end of an element, typically enclosed in angle brackets (e.g., <tag> for starting and </tag> for ending). An "element" encompasses the opening tag, the content, and the closing tag combined. For example, in <p>Hello World</p>, <p> and </p> are tags, while the entire snippet including Hello World is an element.

Now that our memory is refreshed from the previous class, let's dive into today’s lesson.

Other HTML Elements

We will continue our learning journey through a project-based approach, picking up from where we left off in the previous class. We will replace the placeholder text with actual text and create a nice Personal profile.

Pre-formatted Tags

Paragraph tags don’t respect line breaks except when the line break tag is used. Let’s demonstrate this:

• In our “index.html” file in VS Code, try creating a line break in the first paragraph element under the “About Me” section.

  

• Now, change the tag names in the first paragraph to “pre”, and notice the difference:

The "pre" tags allow you to add line breaks inside paragraphs without using the line break tags.

Comments

Comments are used to add notes, explaining the codes you have written. They are essentially “notes to self” or to others reading your codes. They make your codes more readable and understandable. They don't get displayed to the user. Here’s how they are written:

<!-- My Name -->
<h1>Oloche Aboje</h1>

Ensure to type them on a separate line, above the element or code you are trying to describe.

• Now, let's add comments to our entire code.

• Update the text of the various sections of your page to reflect your actual profile.

Notice that the comments are not displayed in the live review.

Hyperlinks

Hyperlinks are elements that are used to create digital links, taking the user to other pages or data. They could be links or buttons. Let's demonstrate this directly on our Profile page.

• Add another “h3” tag just before the closing “body” tag, that says “Contact Me”.

<h3>Contact Me</h3>

• To add hyperlinks, we use anchor “a” tags that display the content we want the user to interact with:

<h3>Contact Me</h3>
<a>Linkedin</a>
<a>GitHub</a>
<a>Youtube</a>

• We'll use a hypertext reference attribute “href” inside the opening tags to turn these simple text into links or hypertext, by adding the corresponding URLs to the href values:

<h3>Contact Me</h3>
<a href="<https://www.linkedin.com/in/ao111>">Linkedin</a>
<a href="<https://github.com/accdev1694>">GitHub</a>
<a href="<https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow>">Youtube</a>

• The “href” attribute is not displayed but what is displayed is the content nested between the opening and closing anchor tags.

Here is the result:

• Experiment by clicking on the links to see how they take you to the respective pages.

• We can add other attributes to our links. Let’s add the “target” and “title” attributes.

• The “target” attribute set to “_blank” tells the link to open on a new window or tab.

• The "title" attribute adds a tooltip when hovering over the links:

<h3>Contact Me</h3>

<a href="<https://www.linkedin.com/in/ao111>"
    target="_blank" title="my linkedin">Linkedin</a>

<a href="<https://github.com/accdev1694>"
    target="_blank" title="my github">GitHub</a>

<a href="<https://www.youtube.com/channel/UC0jfRtsD1j_Auo52vqkmbow>"
    target="_blank" title="my youtube">Youtube</a>

• Experiment further by hovering over the links to see the titles on the tooltip, and clicking to open a new tab.

The above demonstration uses absolute links. We will demonstrate relative links next, using an exercise:

Activity h04:

1. Inside the assets directory of our project, create an HTML file “projects.html”.

2. Open this file and create a boiler-plate code. Title this code “My Projects”.

3. In the body of this project, use an “h1” to create a heading “My Projects”.

4. Using “h2” elements, create headings “Project 1:”, “Project 2:”, and “Project 3:”, in that order.

5. Under each of the projects, create an image tag that links to an absolute path, go to unsplash.com and find a placeholder image of choice, right-click and copy image address, then paste in the source attribute of the image tag.

6. Add a width attribute to each image and set it to 400px.

7. Add a target_blank attribute to the images.

8. Give the images an alt value as appropriate.

9. Under each image, add a paragraph describing each project.

10. Back in our “index.html” file, create a new section using another h3 tag titled “My Projects”.

11. Under this new “h3” tag, add an anchor tag that links to a relative path to the new “projects.html” file:

<a href="./assets/projects.html">Go to Projects</a>

12. Click the link to see how the pages link.

13. Attempt this exercise on your own, google for clarification when you get stuck, then check your live preview and codes against the mock-up below.

14. Check the repo to this series for all the codes to all the exercises: accdev1694

15. Check out the preview below:

In our next article, we will dive deeper into HTML, touching on images, favicons, and media files such as audio and video. Stay tuned, and don't forget to subscribe to this series.

Thank you.

HTML, or HyperText Markup Language, is used to instruct the browser on how to display content. In the popular house analogy, HTML defines the structure of a webpage, much like the foundation and structural elements of a building. However, let's take this explanation a step further.

I regularly take the bus with my 3-year-old son to pick up his brothers from school. On Mondays and Fridays, we visit the library before collecting the others. His favourite books include the Peppa Pig series, a tactile book with textures to feel, and another with flaps hiding characters. These books are engaging and enjoyable, even for me.

Let's dissect HTML: HyperText: 'Hyper' means beyond, so 'HyperText' refers to content that goes beyond just text. Markup: This implies adding a degree of interactivity and engagement.

HTML is a scripting language that uses HyperText to add interactivity to a webpage, exceeding the capabilities of simple text. In the storybook example, the basic text page is enhanced with interactive elements like textures, stickers, images, and hidden content.

HTML, like the storybook, uses elements and tags to structure a page and make it engaging. There are elements to enlarge or reduce headings, create paragraphs, link to other pages, add images and videos, and so forth.

Basic HTML Page

HTML uses tags with some content nested between them, to display content.

HTML Tags and ElementsBASIC HTML PAGE

• HTML displays content using nested tags, with the format: opening tag→content→closing tag.

• They are written as: <tag name>*content*</tag name>. For example, a heading tag:

<h1>Heading One</h1>

In this example, h1 is the tag name for displaying headings on a webpage. The text "Heading One" is the content that will display as the heading.

• The opening heading tag is enclosed by angle brackets (<>), while the closing heading tag is enclosed by angle brackets and a forward slash (</>).

• The content enclosed within an opening and closing tag is called an HTML element.

• There are self-closing tags, which do not have content nested between. Examples include an image tag, a line break tag, and a horizontal rule.

<!-- image tag for inserting images -->
<img>

<!-- line break for creating horizontal spaces between elements -->
<br>

<!-- horizontal rule for creating horizontal lines between elements -->
<hr>

Such self-closing tags may have attributes just before the closing angle bracket. For instance, an image tag could have a source attribute pointing to the image location:

<img src="./assets/images/passport.jpg">

Types of Tags

• h tags are Heading tags, used to display document Headings.

• p tags are Paragraph tags, used to display text in paragraph formats.

• a tags are anchor tags, used for creating reference links.

There are many more tags that we will explore soon.

Basic Structure of the HTML Document

To create a web page, you start by writing HTML code in a coding environment like VsCode. You can preview your work using the built-in Live-server plugin.

The HTML document is laid out as follows:

<!DOCTYPE html>
<html>

</html>

There are two basic elements at the highest point of the document tree:

• The DocType Element, which tells the browser that this is an HTML 5 document.

• The HTML document, which contains all the elements that make up the web page. These are nested within the opening and closing HTML tags. This represents the root element of the html page.

You can also set the language of the webpage as an attribute in the opening html tag:

<!DOCTYPE html>
<html lang="en">

    <head>
    </head>

    <body>
    </body>

</html>

The HTML document has two child elements:

• The 'head' element: This contains information about your web page, including other metadata elements.

• The 'body' element: This contains everything visible on the webpage. For example:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Website Title<title/>
    </head>

    <body>
        <h1>My Passport</h1>
        <img src="./assets/images/passport.jpg">
    </body>

</html>

The head element has two nested children:

• meta charset="UTF-8": This declares that the document character format is UTF-8.

• <meta name="viewport" content="width=device-width, initial-scale=1.0">: This provides information for device responsiveness.

• The title element: This contains the web page title for SEO ranking.

The body element contains our previous image element, as well as a heading showing 'my passport'.

Activity h01:

Structure the HTML document in your "index.html" file in VsCode, following the provided instructions:

• Paste your passport photograph into the previously created images folder and ensure it's named 'passport.jpg'.

• Change the document's title to 'My Profile'.

• Right-click in any space on the HTML document and select 'open with live server' to preview your first web page.

Notice the title of the page 'My Profile' as well as the page heading.

Congratulations! You have created your first web page!

Activity H02:

There are other types of headings 'h-tags'. We will learn about them using the following exercise:

• In your index.html file, change the document's title to 'Heading Types'.

• Delete the h1 and img elements.

• Create h1 to h6 elements, each with their respective content.

• Preview your live-server.

What did you notice? Write it in the comment section. It should be pretty obvious.

Your code should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heading Types</title>
</head>
<body>
    <h1>Heading One</h1>
    <h2>Heading Two</h2>
    <h3>Heading Three</h3>
    <h4>Heading Four</h4>
    <h5>Heading Five</h5>
    <h6>Heading Six</h6>
</body>
</html>

And your live server preview should look like this:

You can see that the font sizes have gradually reduced from h1 to h6. It's best practice to have only one h1 on your web page, then use all the others in order of importance.

Another important tag is the paragraph (p) tag, used to add bodies of text in paragraph form to your page.

Activity H03:

We will recreate our initial profile page by combining everything we just learned. Here are the steps:

• On your "index.html" page, delete everything including the doctype tag and head section.

• Type an exclamation tag "!" and hit enter to generate the page structure, called a "boilerplate".

• Change the page title to 'My Profile'.

• Create a new h1 heading and type your name in uppercase characters as the content.

• Create an image element and set the relative path to your passport. Make sure to add an alt attribute to the image tag with the description "my passport".

• Add a horizontal rule.

• Add an h2 heading with the content "About Me".

• Add a paragraph tag and insert text between the tags. Between the opening and closing tags, type "lorem" and hit tab to generate some placeholder text.

• Create a line break.

• Add more placeholder text.

• Add a horizontal rule.

• Create another h2 tag that says "My Skills".

• Add some sample text.

• Add a horizontal rule.

• Create a h3 tag that says "Hobbies".

• Add some hobbies.

The live server preview should look like this:

If you go to the HTML resources page on the W3Schools website, you will see all the tags and how they work. Bookmark this page for future reference, so you don't have to memorize everything; you can always go back there.

Click here to go to the next article as we dive deeper into HTML tags and elements such as the "pre" tag, comments and hyperlinks

I know you must be eager by now, with the tension building to jump right into coding, but these preliminary lessons would help set you up for success.

From our previous lesson https://abojeonline.com/installation-of-vscode-extensions-github-and-ssh-keys, we touched briefly on the terminal/Bash. They both mean the same thing. Today, we will be learning how to manipulate files and folders (or directories) using the command line.

You may be wondering, why use the terminal instead of the finder to manipulate files and folders. You can control files and folders in an instant using the terminal, such as filtering them, changing their cases to upper or lower case, etc. So as a programmer, you want to get comfortable with manipulating the terminal.

Below is a list of common commands you will be using regularly:

Common Terminal Commands

Cmd + (in Mac)
Cmd - (in Mac) | Increases or Reduces the terminal size and text size. | | clear | Clears the terminal display. This command is useful for decluttering your terminal window by removing all previous commands and outputs. | | pwd | Displays the Present Working Directory (PWD). This command outputs the full path to the current directory you're in, helping you to easily identify your location within the filesystem. | | cd | Means “change directory”. It takes you to the very top of your user directory, represented by the squiggly line (~) called “tilde”. | | Up arrow key (↑) | Brings back recent commands | | ls | Lists the entire contents of the current directory | | cd Desktop | Assuming that the desktop directory is inside the current directory, this command takes you to the desktop. In general, you can only cd into a directory that is inside your current directory. | | cd .. | Takes you back, up one directory. | | mkdir loch_learn | "mkdir" means “make directory”. It creates a new folder or a directory called “loch_learn” inside your folder or current directory. Always use dashes or underscores to separate words while naming files and folders and not spaces because it will create each word as a directory. Spaces are used to create multiple directories. | | touch admin_learn.html | Creates a file called “admin_learn.html” inside the current directory.
“.html” is the file extension | | explorer . (in Windows)

open . (in Mac) | Opens up the current directory in Windows Explorer | | rm then file name | “Remove” deletes files in the terminal | | rm -r then folder name | Deletes folders in the terminal | | history | displays a list of all commands used in the current session |

Practice Activity:

1. Open Vscode

   

2. Type "cntr + j" to open the in-built terminal in vscode:

   

   Don’t bother typing the $ symbol before typing in terminal commands, it’s just there by default, telling you it is ready for you to start typing.

3. Type "cd" and hit "enter" to take you to the top of your user directory. You will see the tilde (~) symbol, meaning you are at the top.

4. 

   Type "pwd" and hit "enter" to view your present working directory, notice the directory tree displayed below. I am currently inside the Asus directory.

   

5. Navigate from here to where your repository was created in our previous lesson, by learning how I navigate to mine.

   type "ls" and hit "enter" to first see the content of your current directory

6. Type "cd documents" and then navigate using "cd" to where your repo is

7. Once you are inside your repo, you will it marked as "main".

   

8. From here, let us create some new files and folders to organize things for our class.

   Type "touch index.html" to create our first HTML file.

   Type "mkdir assets/images" to create an assets directory and images directory inside the assets directory.

9. The index file must be in the root directory of your project. The root directory is the parent folder of your repo or project.

10. Click on the explorer icon which is the topmost on the left side bar of vscode and see the file created.

    

11. Remember not to type the "" quotation marks in these steps 🤣

12. Practice the commands above just to get used to them, they are simple. Now,
    type "clear" to clear the terminal. "history" to see all your commands in this session.

    NICE JOB!

Click here to proceed to the next article to learn the basic structure of HTML.

In construction, proper formwork installation is very important to both the success, speed, and efficiency as well as safety of any project. I like to think of this stage as our scaffolding stage, setting us up for success on this exciting journey.

VsCode

VsCode is an Integrated Development Environment. This is basically where you write all your code, and it is free software, make sure you select the version for your operating system. Download it here: https://code.visualstudio.com/download.

It has got a built-in terminal. A terminal is the interface where you type in command lines.

For MacOs users, you must add VsCode to your applications folder by following the instructions here: https://code.visualstudio.com/docs/setup/mac

Prettier Extension for VsCode

Prettier is a code formatter that helps to order the presentation of your codes by adding indentations and spacings, making it more readable. Follow the steps below to install and set it up.

• Navigate to the extension icon on the left side-bar in VsCode. It is a series of 4 squares, and click on it.

• Type-search "Pritter - code formatter" in the search bar that shows up and install it.

LiveServer Extension for VsCode

This is a powerful extension that helps you preview your code on the browser. It sets up a local server on the browser. Follow these instructions to install it:

• Type search "Liveserver" in the extensions search bar

• Install the one by 'Ritwick Dey'.

Git

Git is a version control tool. This is a tool for streamlining your workflows and saving to GitHub.

To check if you already have git installed, for both Mac and Windows, open your command line terminal and type:

git -v

If it returns a version then you are good, however, if it returns “command not found”, then you need to install git.

Installing git: https://git-scm.com/downloads

Git is for Windows, and the terminal is for Mac, it comes built-in for Mac, no need to install it for Mac.

Google Chrome Browser

There are a lot of browsers out there, but just for consistency and the developer tools on Chrome, we will be using Chrome for this series.

GitHub Account

GitHub is where you store your code using Git. It is like a technical community where developers have accounts and store their codes for contribution, collaboration, version control, sharing of codes, and lots more. Go to the github website and create an account if you do not already have one.

The process is quite simple, on GitHub, select the 'sign up' button and follow the prompts.

GitHub SSH Keys

SSH keys mean Secure Shell Keys. This is a secure network used in communicating with servers such as GitHub Servers. It is a quick way of linking your local computer to a network through your terminal or shell without having to manually type in your username and password every time.

As a way of not having to authenticate every time you link with GitHub through the terminal, you put a code into your GitHub account, which is called the Public key, and another code is created in your local computer, which is called the private key. So whenever you communicate with GitHub, it makes sure that these two codes match and you get authenticated, else, you don’t. This is another time-saving technique.

Advantages:

• Automate workflows since you don’t have to type username and password manually

• Results in better security since your communication is encrypted.

Creating an SSH Key and adding it to GitHub

• On your command line, add the following prompt:

ssh-keygen -o -t rsa -C "yourEmail@email.com"

• Replace "yourEmail@email.com" with your email and hit enter

• You get a prompt to “Enter file in which to save the key …”, Hit enter to accept the default location because this is where git will look when searching for your private keys to match it with your public keys and establish a handshake with Git Hub.

• You get another prompt to “Enter passphrase (empty for no passphrase)”, I didn’t use one, so enter, and enter again.

• You get a prompt that your public and private keys have been generated and saved in the location specified above, and a ‘.ssh’ directory is created automatically. You also see your fingerprint.

• Navigate to that directory and right-click on the public key: “id_rsa.pub” and open with Notepad.

• Copy the entire generated key in Notepad.

• Go to your GitHub account and locate the profile picture at the top-right corner, click on it, and select settings.

• Find the SSH and GPG keys link on the left side-bar and select it.

• Give any title to the ssh keys and paste your keys in the lower text area. Then click “Add SSH Key”.

• Done! Now, sign into your account again and you will see “You have successfully added the key...”

• Go ahead and create a repository, head to the dashboard, and on the right side where you see “top repositories”, select “new”.

• You will see a text area next to your account name (owner), and type in the name of your repo (repository name).

• Always select the “add a readme file” button to create a readme file, add a 'mit license' where you see 'license', then scroll to the bottom of the page and select 'create repository'.

• To clone your new repo to the desktop, locate the 'code' green button and click on it to select the SSH title, then copy it to clipboard.

• Now proceed to your terminal navigate to a location of choice and type: 'git clone (paste)' and hit enter.

git clone git@github.com:accountname/repositoryname.git

• next, open your repo in vs code:

cd repositoryname
code .

In our next article, we will learn simple command line prompts as we get ready to commence our HTML classes.

Click here to go to the next article about common terminal commands.

Thank you for your time

In this Series, I will take you through my learning journey, simplifying the learning process by using stories, quizzes, and exercises to make the entire journey fun and engaging.

If you are new to programming, or you are a returnee who wants to refresh your skill, or you are just intending to start off programming, you are in the right place. I will literally hold you by the hand and lead you through this challenging journey. You will never walk alone.

My singular goal is to help you understand every step of the way, so forgive me when I try to dumb things down, it's only because people have different levels of understanding and all must be carried along.

Also, follow my accDevTrivia channel on YouTube to access more learning resources and quizzes related to Web Development.

Click here to go to the next article where we start by installing all necessary software and extensions.

So, I had just relocated with my family to the UK. Freezing temperatures immediately welcomed us, I shivered from the airport to the house. The culture shock was another thing. We felt like aliens on a strange planet. I immediately realized I talked funny and dressed differently. But, ‘different’ is fine.

I was desperate to work and start earning ‘my precious’ (in Smiggle’s voice) pounds, however, my previous job in my country did not quite fit immediately into my new life in the UK, so I decided to transition to Tech.

I wanted to become a UX Designer so I quickly enrolled in the Google UX design course, and only a few weeks into the program, I saw a targeted ad for a boot camp in front-end web development/UX, (I think these ad guys are just some weird wizards though) and somehow, my mind completely ignored part A and focused completely on the ‘UX’ part, so I enrolled and got selected.

Once I saw ‘UX’, I assumed it was about UX design. but to my utter shock, it was mostly about my most dreaded subject: PROGRAMMING! To be more specific, CODING.

Come with me on this amazing experience and find out how I squiggled my way through this boot camp while learning to code in the process, only more fun this time. FYI, I completed the Bootcamp, with good grades even.

If you plan on enrolling in a coding boot camp, and you are new to coding, chances are, you will struggle like me, but, you don’t have to. You can learn a thing or two from my struggle and stay afloat through this rigorous process.

In my last publication at https://abojeonline.com/what-will-happen-if-you-code-everyday-for-1-hour, I detailed some of the great things that happened to me once I started coding. I actually spent, and still spend a lot more than an hour coding every day. The thing is, you get drawn in by the 'curse' of the code. This is why I always get my wife's food burnt whenever she asks me to keep watch over the kitchen while I am coding, lol.

GET A MENTOR; FIND TWO MORE

I went through HTML and CSS like a breeze and then came JavaScript. I was so confused at some point that I even shed a tear. The pain stemmed from the fact that I felt worthless like I was frustrated about not being able to make reasonable progress.

My quest drove me to YouTube to search for tutorial videos to try and learn from other tutors, and My Word! Did that pay off? Oh Yes, it did, so well that I stood up from my chair one time, and let out a loud "What"!!! in the middle of the night.

You see, this is how to find a mentor. Don't go out searching for who only knows how to program, not even just a great teacher, but find someone possessing the above qualities, and whose teaching style resonates beautifully with your learning style. You will know when you meet them as they Immediately strike a Chord on your inside.

After you find a mentor, proceed to find two other tutors who both know their game and are great teachers. Why? I discovered from experience that at certain times, you are not able to comprehend certain concepts from even your mentor and you need to get the view of one or two other tutors and this always came in handy for me.

KEEP A LEARNING JOURNAL: Don't Try and Memorize Syntax

I heard from my Boot Camp Instructors "Don't memorize code, just know when you need them and where to get them whenever you need them" more times than I can actually count, but I didn't quite understand the value of this statement until we started to drive deeper into JavaScript.

You see, the syntax to learn is just too much to try and cram all at once, so I decided to keep a journal in Notion. The good thing is that Notion is optimized for developers as it incorporates markdown formatting and also allows for writing code directly. So instead of trying to keep the syntax in my head all at once, I kept them in Notion, also, don't be ashamed to consult Google, and, as I've heard, even senior devs do a bit of Google-foo-ing every once in a while.

This was the principal reason for most of my Frustration because I initially thought I needed to remember all the syntax I was being taught all at once. I learned where to keep them when I needed them, and how to get and apply them.

Once you start using IDEs to code, you will soon find out that keeping only a handwritten hard journal for writing code snippets isn't a very smart idea. lol

Also, documenting your progress in a blog is a good idea, as employers find this attractive.

I also found out that, in time, from continuous use, these syntaxes begin to stick and get committed to long-term memory.

GOOGLE-FOO

There are numerous valuable resources on the internet for programmers to consult whenever they feel lost or in need of fresh ideas such as Stack Overflow, MDN, W3Schools and always remember, google is your friend.

There are also numerous AI platforms out there now, but knowing how to leverage them is very important. I will write about this in a later publication.

FOCUSED LEARNING

Find a quiet place at a quiet time, keep away from your phone, and clear your schedule. I can't stress this enough, while programming, keeping out distractions not only helps you think deeply but saves you time and helps you commit concepts to long-term memory faster.

Focused Learning involves setting aside a time of the day, to focus solely on a single subject, and this is the right approach to programming. Always have a goal of what you want to achieve, a very specific goal such as: 'I want to master Javascript Conditional statements between 4 am and 8 am'.

TOPICAL STUDY

It is important to stay organized while learning to program. Programming is hard enough on its own, the best you can do is to lighten this enormous burden by focusing on a single concept at a time with laser-sharp precision. Once you have gotten a grasp of it, quickly proceed to take related exercises to help gain mastery. LeetCode is a great resource for this.

LEARN PSEUDO-CODING

It is not always a good idea to jump right into coding when you have a coding task or exercise to do. Pseudo-coding is the process of using simple human language to lay out the entire road map of what you want to build into simpler, more manageable steps. A simple clue is to explain what your program does, in simple step-by-step progress, from the top to bottom. You then take these steps and turn them into comments before writing the code under each comment.

Doing this takes effort but makes you a better programmer and ensures you don't miss any steps in your code that might result in a broken program.

FIND MEMORY CLUES FOR DIFFICULT SUBJECTS

Memory clues in learning is not a very popular subject in programming but this is something that has worked quite well for me because of my learning style. Whenever I am faced with a concept that is not semantic, meaning that, what it does is not obvious from its name, I try to link that concept to any related thing or event in real life, no matter how silly.

For example, drawing from my background in construction, I used blocks to differentiate between block-level and inline elements in HTML and it worked out well for me. Blocks in construction are laid in stretcher bond, horizontally, taking up the entire length of the building or space, just as block-level elements such as a 'div' or headings, being block elements, take up the entire line.

FOCUS ON THE WORKFLOW AND NOT ON THE SYNTAX

Just like we discussed earlier about not trying to memorize syntax, the Syntax will eventually stick to your memory as you keep using it. Your focus should be on understanding what the syntax does and the workflow of combining various concepts to arrive at the desired end-point. This problem-solving approach to programming is exactly how to think as a developer.

JUST KEEP PRESSING ON

As I progressed with my learning journey, I was learning so many things back to back and seemed to be forgetting the older ones I thought I had mastered before. This discouraged me a bit at first and made me go back several times to re-learn older concepts.

Today, I have realized that I only needed to keep pressing on, because, building projects, apps and exercises is the easiest way to commit learned topics to long-term memory. Learn and build, learn and build!

WATCH THE CODING PROCESS AND TRY IMITATION

In my mind, coding is like math. As a math student, imagine your math teacher coming to class every time, having solved all the math problems, displaying the solutions on the screen, and then using a talking stick to explain them step by step. Your understanding would not be the same as watching him start on a blank screen, right?

You see, this is even worse with programming. We all know that lines of code are not written serially. Programmers jump from line to line as the workflow is never a straight line. This is why watching someone code from a blank screen while talking through the code teaches problem-solving, syntax application, and coding workflow.

While the approach of imitating the tutor line by line might appear to be more convenient for a complete beginner, you must learn to wait and watch, understand the entire process, return to the beginning, and try out milestones on your own. This helps to ensure that you are actually learning something and not just copying code.

KEEP A CLEAN REPO

It is good practice to get familiar and comfortable with the git workflow early in your programming journey. Create a GitHub account and commit your projects using best practices. This serves as a great backup for your projects, making you visible to employers as well as open to contributors.

GET MULTIPLE MONITOR SCREENS

Switching between screens is a common practice while coding. A screen that streams the tutorial video or Bootcamp Video, one for your Live preview server, and another for your IDE where you write your code. Two screens are fine, to begin with, and they don't have to be anything too pricey or fancy. If you However cannot afford this, using your single laptop computer or desktop also works.

A BALL AND A DUCK

One of the most thoughtful investments I made during my Boot Camp was to buy a bouncy ball. During my Boot Camp, I noticed one of my TAs constantly bouncing a ball and he looked so cool and 'techy' doing this, lol. So I went and got one for myself. The sound of it bouncing drove my neighbor crazy though but she learned to live, lol. Aside from helping me stay awake while coding for long hours, I will share the second benefit of the bouncy ball three sections from this one.

The talking duck becomes a weird, but helpful partner who listens patiently as you talk through your code. She is a patient co-pilot who stands with you through thick and thin, and even when you mess up your code, she won't yell at you, she just watches, believing you will eventually find your way, most importantly, she won't judge, scold or make fun of your spaghetti code. So, totally get you one!

WALK AWAY FROM THE CODE

Watch a movie, go on a date, hang out with friends and family, play a game or sport, write a poem, just don't binge-code!!!

Imagine what it would be like if all you did was eat and eat and eat, allowing no time for your stomach to digest all you have eaten. Physical activity, Sleep, and rest help with digestion and metabolism in the same way they help with the assimilation of code. Pace yourself, and have a life.

Research proves that having short but focused and consistent regimented sessions of coding is so much better than having long sessions of crammed coding. So every once in a while, walk away from the IDE, unplug yourself from the terminal, and do other things. This helps to reinforce learning.

GET THE RIGHT WORKSTATION AND CHAIR

Invest in the right gear. If you are going to be spending a lot of time learning to code, then you shouldn't have to worry about the discomfort of using the wrong gear. Nice lights, an ergonomic chair, nice music for passive work, a scent diffuser, and a cup of coffee, just anything to bring a sense of warmth and comfort from the herculean task of coding. Aside from bringing some drama to your coding space, the right seat and table can save you from back problems, and stress and help you stay active for longer.

STAND A LOT

During my Boot Camp, I suddenly noticed that this same TA was absent for a few weeks and I wondered why. I later found out that he had been diagnosed with back problems from sitting down for too long and coding, and that explained the bouncy ball! I would watch him stand for most of our classes, bouncing the ball on the wall and squeezing it tight from time to time. Using a table with an adjustable height encourages you to stand while you code.

Standing helps with blood flow, prevents back problems, and helps you stay awake for longer hours, so, don't sit for too long.

PASSIVE VS ACTIVE LEARNING

Active learning has to do with the focused learning we spoke about earlier, while passive learning involves learning while multitasking. This can come in handy when you are trying to get a general insight into a specific theory in programming.

I listen to programming-related stuff on YouTube, things that do not require active attention. I listen to topics like: "coding best practices", "necessary javascript for react", and "Flutter vs React Native". You should however keep it related to the specific concept you are learning at that moment.

YOUR WORKSTATION LOCATION

My workstation is located in my dining, my dining is the central space in the house, as I step into the house I step into the dining first, the dining connects to every portion of the house. The location of my workstation is intentional as it helps me see my computer every time, reminding me to write some code.

ALWAYS PREPARE AHEAD OF CLASS

"The punch that knocks down a boxer is the one they didn't see coming". This statement proved true for me during my Boot Camp as every day was a surprise for me. I learned that teachers are not the only ones that need to prepare for classes but students should as well. I should have gone back to my pre-work materials to spy on the topics for each day before that day, this would have helped me research a bit on those topics so I don't feel lost during each class.

If you are enrolled in a boot camp, ask your TAs to share with you the course content by dates, then go on and do some research before each class. Thank me later, lol.

ATTEND TECH EXPOS AND CONFERENCES

Be on the lookout for tech expos, seminars, and hang-outs as these present great opportunities for exposure, building connections, community engagement, and meetings with potential employers.

Lastly, follow the roadmap for the particular stack you are training for, learn and master the fundamentals, and then follow the technology trends. Google Trends is a great resource for keeping up with the latest technology. My next post is going to be the first of the Front-End Web Development Series, following a current and modern roadmap.

Click here to begin the Front End Web Development Series.

Thank you for staying with me on this one.

On a beautiful Wednesday afternoon, I left the house earlier than usual to pick up the children from school. I planned to stop by the library to get at least two hours of work done. However, after stepping onto the bus, I realized I'd left my bus card at home. So, I had to return home, retrieve it, and walk another 12 minutes to catch the next bus.

After an eight-minute wait at the bus station, I finally boarded the bus, only to discover upon arrival that the library was closed. Feeling frustrated and unsure of how to salvage the two hours, I decided to turn this disappointment into an opportunity.

I found a charming café nearby and settled in with a cup of coffee. The soft instrumental music playing in the background, the hanging flowers, the furniture, and the beautiful wallpaper all combined to create an inspiring ambiance. As I gazed through the café's beautiful front glazing, I was reminded that I'm not just a coder, but a writer as well. The café staff were friendly, and the manager even allowed me to take pictures.

Sitting in that café, ideas began to flow and I decided to work on a new, exciting concept.

Enriched by this experience, I then put pen to paper as I recanted the 10 things that have happened to me since I started coding.

I started to ponder the notion of coding every day for an hour. How would that impact you, not just as a coder, but as an individual?

Steve Jobs once said:

"Everybody in this country should learn how to program a computer... because it teaches you how to think." -Steve Jobs

Truthfully, the urge to give up may surface early on, particularly as you face tough problems that need debugging or start to experience the weight of information overload. However, the secret lies in persevering. In a subsequent post, I'll reveal various strategies I employed to make sure I didn't throw in the towel.

10 Things That Will Happen Once You Start Coding Daily

BUILDING CHARACTER

Consistent coding, based on a regimen and routine, not only instils discipline, perseverance, and a growth mindset but also boosts personal effectiveness. It encourages a structured approach to problem-solving and achieving goals in daily life.

• The early riser ...

For a significant part of my life, I struggled to wake up early or in the middle of the night if needed. As a result, I decided to shift towards being a night owl, working late instead of sleeping early and waking up early. Today, even if I go to bed late, the mere thought of myself coding at my computer table motivates me to get out of bed early. I find this transformation amazing as I've realized that I am fresher and sharper in the early hours of the morning.

TRANSFORMING YOUR BRAIN

Isn't it fascinating how our brains can adapt to pretty much anything? It's like it is always ready for a challenge. Whenever you learn something new, it is not because your brain got any smarter, but because the brain is plastic in function as it responds to whatever demand is placed upon it. When we're faced with something as intimidating as learning to code, it's like our brain muscles start flexing in ways we didn't know they could. It's tough at first, sure. But the one thing I've learned since I started coding is that feeling overwhelmed is just a part of the process. It doesn't mean you should give up. On the contrary, it's your brain gearing up, getting ready to level up its game.

• Mixing up Names ...

Speaking of brain quirks, let me share a little story about my family. I have three amazing sons. For the longest time, my middle one was the youngest, and somehow, that idea got stuck in my brain. I found myself mixing up their names, a mix-up that was funny at first but then started happening more often than I'd like to admit. And it wasn't just names. I'd pick up my phone to do something and instantly forget what I wanted to do on my phone, the moment the screen lit up. But here's the kicker: I can't remember the last time I got their names wrong or stared blankly at my phone screen. It's as if diving into programming has done some sort of magic trick on my memory.

ALLEVIATING DEPRESSIVE SYMPTOMS

Learning programming not only equips you with a valuable skill set but also serves as a potent tool in combating depressive symptoms through various mechanisms. At its core, coding requires problem-solving, logical thinking, and creativity, engaging the brain in ways that can significantly shift mental patterns and moods.

• Progression and Accomplishment ...

Firstly, programming offers a clear sense of progression and accomplishment. As you learn to write code and see your projects come to life, it naturally boosts your self-esteem and confidence. Each bug fixed or feature implemented acts as a tangible measure of your growth, directly countering feelings of inadequacy or self-doubt that often accompany depression.

• Distraction from Negative Thought ...

Moreover, coding demands focus and concentration, drawing your attention away from negative thought cycles. This immersive experience acts as a form of mindfulness, where the act of coding becomes a meditation in itself. By engaging deeply with the logic and structure of code, you momentarily step away from stressors, providing mental relief and fostering a sense of peace.

• The Social Aspect ...

The social aspect of coding cannot be understated. The tech community is vast and welcoming, offering endless opportunities for collaboration and connection. Whether through online forums, coding boot camps, or local meetups, interacting with fellow coders can alleviate feelings of isolation by building a support network of individuals who share similar interests and challenges.

• The Growth Mindset ...

Furthermore, the act of learning and mastering a new skill like programming can significantly impact your mental health by fostering a growth mindset. This outlook encourages resilience, adaptability, and a positive perspective on challenges as opportunities for development. Embracing this mindset can reduce feelings of helplessness and promote a proactive approach to life and its obstacles.

• Self-Expression ...

Lastly, the potential for creativity in programming provides a unique outlet for self-expression. By building projects or solving problems in new ways, you can channel your emotions and ideas into something constructive, offering both a sense of purpose and an escape from negative thoughts.

FOSTERING A LOVE FOR CODING

You know, there's something magical about getting into coding. At first, it's like trying to navigate a maze in the dark. You're not sure where you're going, and every step feels uncertain. But then, something clicks. You solve a problem here, create a little function there, and suddenly, you're not just making progress; you're actually having fun. That feeling of getting something right, it's like a little victory party in your brain. Before you know it, an hour of coding just isn't enough anymore. You're hooked, and you can't wait to see what you can build next.

• Coding Delight ...

I'll be honest, when I first started coding, the mere thought of opening my Integrated Development Environment (IDE) filled me with dread. It seemed so dull and intimidating, like a blank canvas that I didn't know how to fill. But now? It's a whole different story. I can't believe I'm saying this, but I actually love coding. I look forward to tackling new challenges and bringing my ideas to life. It's turned from a nightmare into a dream I don't want to wake up from.

The journey from coding dread to delight has been unexpected, to say the least. It's all about those little moments of understanding that slowly build up, transforming how you see coding. And let me tell you, once you start enjoying it, there's no going back. It's not just about writing code; it's about creating something out of nothing, and there's a real joy in that.

ENCOURAGING PACED LEARNING

The principle of paced learning, especially in the context of acquiring programming skills, plays a crucial role in optimizing knowledge acquisition and retention. By dedicating a manageable one hour each day to focused learning, individuals can avoid overwhelming themselves with unattainable goals and prevent the common pitfall of information overload. This methodical approach allows the brain sufficient time to rest, process, and integrate new information, which is essential for solidifying learning and strengthening the neural connections associated with programming knowledge and skills.

• Manage Burnout ...

Burnout is a significant risk in the journey of learning programming due to the vast amount of information and the constant evolution of technologies. The desire to quickly master multiple languages, frameworks, and tools can lead to excessive stress and mental fatigue, undermining both learning efficiency and personal well-being. Pacing your learning effectively mitigates this risk by promoting a balanced approach, where consistent, incremental progress is prioritized over sporadic bursts of intense study.

• Fun While Learning

Furthermore, paced learning fosters a sustainable and enjoyable learning journey. It cultivates a sense of accomplishment and progress by setting realistic learning targets and achieving them regularly. This not only enhances motivation but also builds a positive feedback loop, where each success fuels the desire to learn more.

Additionally, focused-paced learning ensures continuous improvement. By committing to learn something new every day, individuals can steadily expand their knowledge base and skill set. This approach aligns with the concept of lifelong learning and adapts well to the dynamic nature of the tech industry, where staying updated with the latest developments is crucial for success.

PROBLEM-SOLVING SKILLS

Spending long minutes, or even hours, staring and debugging a broken code is a hallmark of the programming journey, a sentiment I deeply relate to. My approach to tackling issues doesn't involve immediately jumping to seeking quick fixes or solutions; instead, I prefer to delve into the problem, attempting to unravel it on my own. It's only when the challenge starts to significantly encroach upon my time that I resort to seeking external help. Frustratingly, more often than not, the culprit behind the error is something as trivial as a missed syntax or an unnecessary addition. The resolution, though simple, underscores the meticulous nature of coding.

• Under The Hood

As my days unfold, I'm constantly encountering various workflows, applications, and interfaces, prompting me to think about the underlying code and its potential for improvement. For example, at my current workplace, we use a scanner for organizing product pickups in a specific sequence. Observing the user interface, I couldn't help but envision enhancements that could streamline its efficiency—like an adjacent summary of items to be picked, dynamically updating to reflect progress by removing scanned items, thereby offering a real-time tally of completed tasks.

• Code at Home-Life ...

This journey has also sharpened my strategic and analytical skills beyond professional scenarios, extending into my personal life. I often find myself imagining the creation of apps designed to address daily challenges faced at home, turning each obstacle into an opportunity for innovation. The process of envisioning, diagnosing, and conceiving solutions has not only honed my technical abilities but has also nurtured a mindset oriented towards constant improvement and problem-solving, whether in the context of work or home life.

BECOMING A MORE PROFICIENT PROGRAMMER

Indeed, the mantra "practice makes perfect" holds profound truth, especially in the realm of coding. Repetition not only cements learned concepts but also equips one with the resilience to tackle challenges creatively. This iterative process of confronting obstacles enhances cognitive flexibility, teaching programmers to navigate problems with increased skill and innovation. My journey in coding is a testament to this principle. With each consecutive day of disciplined practice, my approach to coding challenges evolved dramatically. The transition from initial frustration to strategic thinking was not abrupt but a gradual shift, marking a significant transformation in my problem-solving methodology.

• Pseudo-Coding

Learning to use pseudo-code, a technique I once overlooked, became pivotal in my development. It taught me to dissect complex problems into manageable chunks, simplifying what once seemed insurmountable. This skill has been instrumental in refining my thought process, enabling me to approach coding tasks with clarity and precision.

As of now, while I'm not yet a senior programmer, the consistent daily practice has propelled me past the novice stage. I find myself navigating the terrain between a junior and an intermediate programmer with confidence. This journey underscores the immense value of persistence and the transformative power of daily, focused practice in coding.

SECURING YOUR DREAM JOB

Landing your dream job in the tech industry can become a tangible reality through the consistent practice of coding for one hour every day. This disciplined approach not only sharpens your programming skills but also significantly broadens your understanding of complex concepts and technologies, making you a more competitive candidate in the job market. Every hour spent coding accumulates into a vast reservoir of knowledge and experience, enabling you to tackle technical interviews with confidence and showcase a diverse portfolio of projects.

• Continuous Learning

Daily coding practice instills a habit of lifelong learning and adaptability, traits highly valued in the rapidly evolving tech landscape. By staying current with the latest technologies and programming methodologies, you demonstrate to potential employers your commitment to professional growth and your passion for technology. Furthermore, the problem-solving skills honed through regular coding sessions are applicable across a range of roles and industries, underscoring your versatility as a candidate.

• Enhance your Resume

Engaging with coding projects daily also offers the opportunity to contribute to open-source projects or develop your own software applications. Such initiatives can significantly enhance your resume, providing tangible evidence of your skills, initiative, and ability to collaborate on complex projects. Ultimately, the discipline of coding for one hour each day not only prepares you for the technical demands of your dream job but also cultivates the soft skills and innovative mindset that set you apart as a candidate.

EARNING A HIGHER INCOME

Earning a higher income is a significant benefit of honing your programming skills through daily practice. The field of programming offers some of the most competitive salaries in the job market, reflecting the high demand for skilled developers across various industries. According to the U.S. Bureau of Labor Statistics, the median annual wage for software developers, quality assurance analysts, and testers was approximately $110,140 in May 2020, with employment in these fields projected to grow 22% from 2020 to 2030, much faster than the average for all occupations.

• Six-Figure Specialist Professionals

Dedicating an hour each day to coding not only enhances your proficiency in current technologies but also enables you to explore emerging areas such as artificial intelligence, machine learning, and blockchain. Specialists in these high-demand fields can command even higher salaries, with experienced professionals in niche programming areas earning well into six figures annually. For instance, Glassdoor reports that machine learning engineers and data scientists often have median base salaries ranging from $120,000 to $150,000, depending on experience and location.

• Freelance

Furthermore, consistent coding practice opens up freelance and consulting opportunities, which allow for higher income potential based on the ability to take on multiple clients or projects. Freelance developers with strong portfolios and specialized skills can set competitive rates for their services, significantly boosting their earning potential.

EXPLORING A VAST WORLD OF SPECIALIZATIONS

Diving into the realm of programming opens up a vast world of specializations, each offering unique challenges and opportunities. This diversity allows programmers to tailor their career paths according to their interests, strengths, and the market demand, significantly enhancing job satisfaction and income potential. Here are a few key areas of specialization within programming:

1. Web Development: Focuses on building websites and web applications. Specializations within web development include front-end (client-side), back-end (server-side), and full-stack (both front-end and back-end).

2. Mobile Application Development: Involves creating software for mobile devices, with a focus on platforms like Android and iOS. Developers in this area must understand the nuances of mobile UI/UX design and the specific development tools and languages for each platform.

3. Data Science and Machine Learning: Data scientists analyse and interpret complex data to help companies make decisions. Machine learning engineers build algorithms and predictive models that allow computers to perform tasks without being explicitly programmed for each.

4. Cybersecurity: Cybersecurity experts protect systems, networks, and programs from digital attacks. This specialization requires a deep understanding of vulnerabilities, threat mitigation techniques, and compliance regulations.

5. Game Development: Game developers create video games for consoles, PCs, and mobile devices. This field combines programming with creative design to bring interactive experiences to life.

6. Cloud Computing: Specialists in cloud computing develop and manage cloud-based applications and services. Knowledge of platforms like AWS, Microsoft Azure, and Google Cloud is crucial.

7. Blockchain: Blockchain developers work on decentralized applications and systems, primarily focusing on cryptocurrencies, smart contracts, and distributed ledger technologies.

8. DevOps: DevOps practitioners aim to shorten the development lifecycle by adopting a set of practices that integrate development (Dev) and IT operations (Ops), emphasizing automation, collaboration, and continuous delivery.

CONCLUSION

Learning to code can indeed present significant challenges, including navigating complex syntax and absorbing the vast amount of information required. Moreover, the constant updates and new technologies in the field add to the complexity. Such challenges may lead to a sense of overwhelm, fostering a temptation to give up. This reaction, however, stems from the brain's adaptation process as it learns to approach problems in novel ways—essentially, it's rewiring itself. Perseverance in this phase is crucial, and the results of consistent coding practice can be profoundly rewarding. In my upcoming post, I'll share effective, efficient strategies that have supported my learning journey.

To gain early access to these insights, I invite you to subscribe to my newsletter and also add a comment about your own experiences in coding. Stay tuned, and thank you for your support.

Click here to begin the Front End Web Development Series.

Best, Oloche