DEV Community: Awwal Bankole

HyperText Markup Language - HTML

Awwal Bankole — Mon, 16 May 2022 22:24:28 +0000

What is HTML?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

According to MDN,

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

Take this analogy for example

HTML serves as the structural base for any website, just like how human beings have no form without a skeletal structure, websites are formless as well without HTML.

Examples of HTML only websites include

HTML Tags

Doctype

<!DOCTYPE html> is a tag that declares the type of the document.

Html

<html> is the container for all the HTML elements on a webpage(except the Doctype).

Head

<head> is a container for information about the document.

Title

<title> defines the title for the document.

Body

<body> contains the body content of the document.

HTML Semantics

Semantic HTML is a way meaning is introduced to the webpage with the elements used rather than just presentation. A webpage that is semantically correct in better understood by the browser. Examples of semantic HTML elements are

<header>- declares the header of the document or section.
<nav> - houses the navigation links.
<main>- contains the main content of the document.
<section>- a section of the main content.
<aside>- content that is outside the main content.
<footer>- the content at the foot/end of the document.

Other HTML Tags/elements include

<h1> to <h6>- defines the HTML headings.
<p>- declares a paragraph
<div>- is a container tag that defines a section.
<link>- it links to an external resource.
<br>- defines a single line break.
<hr>- defines an horizontal line.
<input>- is used for an input control.
<button>- a ...button😲
<img>- enables an image to display on the document.
<iframe>- is used to frame an external webpage onto the webpage.
<blockquote>- defines a quoted text.
<cite>- used for citations.
<canvas>- used for drawing on the webpage.
<audio>- to declare an audio file.
<video>- to declare a video file.
<table>- defines a table.
<textarea>- defines a multiline input box.
<time>- defines a specific time.
<script>- used for client-side javascript or link to an external script.
<span>- defines a section in a document.
<meta>- defines the metadata/information about an HTML document.
<area>- defines an area inside an image map.
<base>- specifies the base URL targets in a document.
<col>- specifies the column properties for a column within a <colgroup>.
<embed>- defines a container for an external application.
<param>- defines the parameters of an object.
<source>- declares the source for a media element.
<track>- defines text track for a media element.
<wbr>- defines a possible line-break.
<template>- defines a container for content that should be hidden when the page loads.
<summary>- defines a visible heading for a <details> element.
<style>- defines style information for a document.

HNGi8 x14G internship

Awwal Bankole — Mon, 16 Aug 2021 15:09:20 +0000

Hi, I'm awwal and I am a fledgling full stack developer. I started coding a few years ago as I was struggling with finishing my final year project in unilag. I came across a program called code Lagos and decided to enroll since it was free and I had a laptop. Since then I have been fascinated about what you could do with a computer. To me coding is a really fun way to bring life to ideas and the loads of bugs that come with it is all part of the fun.
After the end of the program I delved into the vast resources of YouTube and aimed at making myself a self taught developer 😓...., man was that a lot headache. Nonetheless I'm proud to say that I'm a full stack developer having learnt technologies like React, Express and Nodejs.
However, what I'll admit I lack is indeed experience building apps and providing solutions in a work environment, which is why I hope my time at this year's installment of the HNG internship helps on that regard
Here is the link to register for the internship if you're interested : https://internship.zuri.team
If you're a beginner at coding and you want to learn the basics and be a self taught developer, there are a lot of resources out there that can help you pursue that, both free and paid. Platforms like Udemy provide premium quality resources for a price while there are tons of free content available on YouTube.

If you're are interested in starting out with web development, the basic knowledge you'll need are
HTML: HTML is the standard markup language for documents designed to be displayed in a web browser. Click here to learn HTML

Figma: Figma is a web-based graphics editing and user interface design app. You can use it to do all kinds of graphic design work from wire framing websites, designing mobile app interfaces, prototyping designs, crafting social media posts, and everything in between. Click here to learn Figma

GIT: Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Click here to learn Git

JavaScript: JavaScript is a scripting or programming language that allows you to implement complex features on web pages. Click here to learn Javascript

My HNG Chronicles- Debugging Timbu.com

Awwal Bankole — Tue, 02 Apr 2019 12:04:20 +0000

https://timbu.com/

Today we were instructed to look for bugs on the Timbu website as the first part of this week’s challenge to get promoted to stage two. I found the following

While on the Flights page, https://timbu.com/flights I discovered that under the “Explore the World” Category that the “See More” links that where supposed to link to a page with more detailed information about the categories were non-functioning.

Also, just below this category there was a random, out-of-place letter “n”..

The About Us links at the footer of the same page were non-functioning