DEV Community: Mosope (Deborah) Oduwole

A Comprehensive Introduction to CI/CD Pipelines

Mosope (Deborah) Oduwole — Thu, 31 Oct 2024 21:03:00 +0000

Introduction
CI/CD Definition
Concepts of CI/CD
CI/CD Pipelines Explained
The CI/CD Workflow
Benefits of CI/CD Implementation
CI/CD and DevOps
Conclusion

Introduction

Pipelines for continuous integration, delivery, and deployment are extremely useful when producing high-quality software promptly. Basically, the automation of CI/CD helps you create better code more quickly and securely. In this article, I’ll describe what CI/CD means, the CI/CD pipeline workflow, the benefits, how to implement a good CI/CD pipeline, and how CI/CD fits into the DevOps universe.

CI/CD Definition

CI/CD is the acronym for the words Continuous Integration, Continuous Delivery, and Continuous Deployment which are modern development techniques that help optimize software development processes. The CI/CD process involves automatically integrating code updates from several developers into a single codebase.

Using CI/CD, teams can provide updates to their code more frequently and coherently, and errors are found earlier. Thus the coding, testing, and development procedures have been streamlined thanks to CI/CD.

Concepts of CI/CD

Continuous Integration: In this practice, developers will regularly commit their code changes to a common/shared repository as part of the CI development methodology. With every commit, an automatic build procedure gets triggered, and then the code gets compiled and executed in a series of automated tests to find any errors early.

Each commit creates an automated workflow on a CI server and the CI server notifies developers of any issues in their code.

A benefit to continuous integration is that since developers get input right away, they can fix any problems that come up immediately which helps to reduce the likelihood of code conflict.

When validating your code quality in the CI process, a static code analysis helps confirm your code’s quality, and when the static tests are passed, automated CI procedures help compile the code for additional testing.

Once a build passes the early static testing, it is prepared to go to more thorough testing, and the continuous integration (CI) comes to an end. If the build fails testing, the build/test cycle can be repeated until a successful build is achieved. Therefore, a continuous integration pipeline may perform code reviews, run unit tests, run builds automatically, and configure the CI pipeline to be activated whenever there is a commit/merge in your codebase.

Also, CI procedures typically have a version control system that helps monitor changes. So popular CI tools like Jenkins and GitlabCI can be integrated with version control systems like Git to automate the CI process.

The Continuous Integration Process:

Continuous Delivery: In the continuous delivery process, your code release is automated to a pre-production environment where you can personally test your code and validate it before it is officially deployed. During this process, code from the repository is compiled and the build is created and tested out. The software is then prepped to be ready for release automatically when it’s ready.

This process helps to prevent post-production surprises by running a series of tests like load testing, UI testing, and so on which is useful in resolving defects beforehand.

Continuous delivery works together with continuous integration to automate the release process of your application.

The Continuous Delivery Process:

Continuous Deployment: Here, your code changes that pass automated testing are automatically pushed to production without the need for human/manual interaction.

At this stage, after the DevOps teams establish the requirements for code releases, the code is then released into the production environment once those requirements have been satisfied.

The continuous deployment process is entirely automated.

The entire process of continuous integration, delivery, and deployment helps businesses provide new services rapidly. For example, Amazon is constantly deploying and deploys more than 125k times daily, and according to the 2024 State of DevOps Report, powerful companies with high-performing teams have the capacity to deploy multiple times daily.

The continuous deployment process:

CI/CD Pipelines Explained

The automated process of moving your software from code commit to final production deployment is known as a CI/CD pipeline. These pipelines are the foundation of the CI/CD process and help to automatically coordinate software development, testing, and deployment processes.

It is the automated DevOps workflow of continuous integration, continuous delivery, and continuous deployment as described above.

The CI/CD Workflow

A CI/CD pipeline contains a series of steps/stages that make up a CI/CD workflow. These stages include:

Source: This is the first stage of a CI/CD pipeline process and it involves the creation of your source code. Here, source code changes can be managed using version control systems like Git, Bitbucket, and so on. When change is made into your code and pushed into your repository, a CI/CD pipeline will be triggered to go into the ‘build’ stage.
Build: Here the source code is drawn from your repository and compiled and executable/runnable artifacts (EXE files) are created. Depending on the stage of your project, the build frequency may be daily or even multiple times each day. The code is combined with dependencies and libraries to create a build that can be deployed.
Test: A series of automated tests like integrated tests, functional tests, regression tests, and unit tests are run to validate your code, resolve any issues, and ensure your application behaves like it’s supposed to. This is one of the longer stages in your pipeline because running a series of tests can take a good amount of time.

The form of testing depends on the particular project requirements.

If mistakes are found during testing, the developers are notified so they can examine the results and fix them in later releases.
Deployment: After your code passes all required tests, it can be deployed. The tested code can be deployed to a staging or production environment/server. In continuous delivery, the code is uploaded to repositories and, after human approval, is either deployed or put into production. However, in continuous deployment, this stage is automated.

Tool Options:

Benefits of CI/CD Implementation

CI/CD helps you automate things that will otherwise have been done manually by developers.
CI/CD ensures consistency by making sure all your configurations are utilized in all environments and lowers the possibility of differences between testing and production settings.
They help shorten the code commit to production time by enabling developer teams to release new features consistently. This helps promote efficient software development. This also helps free up developers’ time since it’s an automated process.
CI/CD lowers the possibility of human error by eliminating the need for human interaction in repetitive processes. In this way, it detects small problems before they can grow into major disasters leading to higher code quality.
CI/CD pipelines allow developers to experiment with creative or unconventional coding techniques with significantly lower risk as opposed to the original/manual software development process.
It helps developers collaborate more effectively than if it were to be done manually.
They also help increase a company’s competitive edge due to fast delivery speed. As was mentioned earlier, Amazon is one of the biggest companies in the world making constant deployments multiple times daily.

CI/CD and DevOps

DevOps short for Development Operations is a combination of two practices ‘Development’ and ‘Operations’, and what it is essentially is a set of practices to build, test, and release your code in small frequent steps or iterations.

‘Development’ has to do with preparing your source code while ‘Operations’ has to do with deploying the source code to a specific environment. The foundation for the DevOps pipeline is CI/CD which offers the automation and dependability required for ongoing development, integration, testing, and delivery of your application.

One of the core practices of DevOps is CI/CD.

The typical steps of a DevOps pipeline begin with planning your application by defining the features and content of your app, then actually writing the code for the app, and then comes CI/CD through continuous integration, delivery, and deployment. After that, you can monitor your application and receive user feedback that would help in future releases.

CI/CD is one of the fundamental practices of the DevOps framework.

Therefore, CI/CD fits well within DevOp's objectives of enhancing teamwork, product productivity, and quality by helping close the gap between development(Dev) and operations(Ops) through the automation of dependable software releases.

Conclusion

The lifecycle of your application can be transformed by a well-implemented CI/CD pipeline. So if you want to produce high-quality software more quickly, you should utilize the tips given in this article. Adhering to CI/CD best practices and selecting the best tools for you will help you to improve your pipeline and optimize performance.

NO PLAGIARISM

Mosope (Deborah) Oduwole — Tue, 29 Oct 2024 13:32:37 +0000

I'm not sure what's happening, but it seems my work has been plagiarized. I don't consent to my work being shared on any other platform, either translated or not.
This person (https://www.php.cn/faq/1796622875.html) plagiarized my recent article word for word, and it seems they also publish other writers' plagiarized content.

Just a heads up to my fellow writers.

Asynchronous Operations in JavaScript: The Event Loop

Mosope (Deborah) Oduwole — Fri, 04 Oct 2024 23:43:35 +0000

Introduction
JavaScript is Synchronous by Default
Synchronous vs Asynchronous Operations
The Event Loop
How it Works
Importance of the Event Loop
Conclusion

Introduction

Picture this: you just developed a web application that has to fetch data from a server, update the user interface, and respond to all of the user actions in real-time, but you’re worried about whether your code will be able to juggle these tasks efficiently. Well, no need to worry, this is where the event loop comes in.

In this article, I’ll go over how the event loop works, the differences between synchronous and asynchronous operations in JavaScript, and the importance of the event loop as a necessary non-blocking architecture.

Javascript is Synchronous by Default

By default, Javascript is synchronous and code is read sequentially in order from top to bottom. Since JS is single-threaded, each task must wait for the completion of the previous one, before proceeding to the next. What this means is that each line of code is processed, one at a time, and only one operation/function is executed at any given moment.

In JavaScript, there is no way to run multiple pieces of code in parallel and any attempt to do parallelism in a language that is synchronous and single-threaded at its core is ambitious. Understanding the synchronous nature of JavaScript will help you realize how web applications respond to user interactions and handle tasks.

function greet(name) {
    return `Hello, ${name}!`;
}

const greeting = greet("Deb");
console.log(greeting);

In this example, Javascript executes the code in the order it’s written. The ‘greet’ function is called with the argument ‘Deb’. The function then returns a greeting string which is then logged to the console.

Output:

Hello, Deb!

Each line waits for the previous line to finish before executing. Therefore, the function must be completed before the result can be assigned to ‘greeting’.

Synchronous vs Asynchronous Operations

Before getting into what the event loop is, I’ll touch a little bit on what asynchronous operations are and the differences between synchronous and asynchronous operations in JavaScript. Asynchronous operations are the activities that run independently of a program flow.

As stated earlier, Javascript is synchronous by default and synchronous code creates a blocking behavior where each task/function must finish before the next one starts.

On the other hand, asynchronous operations do not block the execution of subsequent operations and allows javascript to attend to other tasks while waiting for the completion of that particular asynchronous task. Simply put, if you declare a function as asynchronous (async), it means the function has code that will require time to complete, and such a function will be deferred while the synchronous code runs first.

Since there’s no blocking, the next synchronous code can be executed without finishing the previous async one and any async code that is ready to execute will be queued in the event queue.

// Synchronous code
console.log("Step 1");
console.log("Step 2");

Remember synchronous code is executed line-by-line. Here, JavaScript executes the statements in the order they are written.

Output:

Step 1
Step 2

On the other hand, asynchronous code allows JavaScript to continue executing while waiting for an operation to complete.

// Asynchronous code
console.log("1st Function");

setTimeout{function(){ // WEB API
  console.log("2nd Function");
},2000);

console.log("3rd Function");

Output:

1st Function
3rd Function
2nd Function

since the first and third functions are synchronous, they get executed first while the second function gets removed from the call stack and is handled by the web API. The web API asynchronously orders it to wait for 2000ms before being put into the event queue, which will thereafter be placed back into the empty call stack by the event loop and finally executed.

The Event Loop

In its simplest definition, the event loop is a way of synchronously processing asynchronous events.

In a more elaborate definition, the event loop is a continually running code loop in the Javascript runtime that allows for asynchronous operations to be executed when needed. This means it allows for JavaScript’s limiting design to handle many tasks efficiently.

It spins and stays in your code background until it has specific JavaScript tasks to run. For example, clicking a button that has code associated with it from a click event handler, or when you load an external file, in cases like these, the event loop remains in the insides of the javascript runtime to execute any javascript code when needed.

What all this means is that although JavaScript is single-threaded, the event loop enables JavaScript to appear to be able to run things asynchronously by offloading things to APIs and processing those events coming in when it can.

Before I explain how the event loop works, there are a few specific concepts within the JavaScript runtime you need to understand:

Call Stack: A call stack keeps track of what functions are called and in what order to execute them. It executes synchronous code in sequential order.
Web APIs: These are the tools that handle asynchronous tasks.
Callback: This is a function that is passed into another function as an argument. It helps execute code in response to an event.
Event/Callback Queue: This holds tasks waiting to be executed once the call stack is clear.

How it Works

The call stack runs synchronous code until it’s empty. When an asynchronous code is added to the call stack, it gets transferred to the API which then processes the task before it gets sent to the event queue.

Callbacks/functions that have been completed by the API get added to the event queue and the event loop is constantly looking within the event queue to see if there is any new event/task that javascript needs to act on.

Note that JavaScript can’t act on the events until the call stack is empty. Therefore, once the call stack is empty, the event loop will grab the event from the queue and place that into the call stack to be executed like other regular functions.

Importance of the Event Loop

It keeps your code responsive while performing tasks in the background.
It helps manage your tasks effectively by monitoring the call stacks and the callback queue.
It provides a workaround for JavaScript to perform non-blocking operations where multiple tasks can be handled concurrently.
It prevents your program from going into callback hell. Callback hell happens when multiple callbacks are nested within each other making the code difficult to read or maintain.

Conclusion

The behavior of the event loop determines when code in your application is run. The more knowledge you have surrounding the use and need for the event loop, the more you can understand why your code runs when it does.

Happy coding besties!

How to Center a DIV

Mosope (Deborah) Oduwole — Tue, 21 May 2024 10:28:59 +0000

Introduction
Prerequisites
The Box Model
How to Center a Div in CSS
How to Center a Div Horizontally
How to Center a Div Vertically
Centering both Horizontally and Vertically
Comparing the Techniques
Conclusion

Introduction

The difficulty of centering divs has to be one of the most "memeable" topics in programming. Fear not, however, gone are the days of IE5, CSS isn't tables and floats anymore, today with techniques using innovations like Flexbox, or even CSS Grid, centering DIVs has never been easier.

Div, short for content division element, defines a division in an HTML document. It is a generic block-level element that serves as a container for HTML elements, which can then be styled and manipulated with CSS and Javascript.

So, how the heck do you center a div?

In this article, I'll take you through the different techniques used in centering divs, from horizontal centering to vertical, centering texts, and even centering both ways simultaneously.

Prerequisites

Preliminary knowledge of HTML
Basic CSS knowledge

The Box Model

Before I get into centering techniques, I must first make sure you understand the CSS box model.

Every HTML element is its own box, with its spacing and border, this is called the box model. It contains four properties, margin, border, padding and your content, which can then be styled or manipulated however you see fit.

The margin property creates a margin around your selected content, and the padding property, which is a close relative of the margin creates spaces inside the edges of your div container. This means that it adds spaces between the content and the edges of the container.

Therefore, whereas margin creates space on the outside, padding creates space on the inside of your selected element.

Finally, the border property controls the border between the margin and the padding.

What you should remember is this:

Margin (Spacing on the outside)
Border (The in-between)
Padding (Spacing on the inside)
Content (The content itself)

How to Center a Div in CSS

Understanding how to center divs and text within divs is a valuable skill for beginners and seasoned developers alike.

To create visually stunning layouts, knowing how to center divs will help in arranging and styling elements on your page.

Although I mentioned earlier that centering divs today has never been easier, I must admit that this task might prove surprisingly intricate and confusing due to the nuances of CSS and the various scenarios in which centering may be required.

In this guide, I'll cover the various methods to center a div depending on the specific requirement of your project, and the context of your design.

How to Center a Div Horizontally

To center a div horizontally on a page, you can try the following:

1.Margin: auto
Here you can leverage the margin:auto; property by setting the left/right margins to auto. When centering elements horizontally using the margin property, three things must be considered:

(A). Display should be set to block: This allows for no other elements besides the current one. It takes ownership of the horizontal space of the element. However, since divs are block-level elements, this step can be omitted if your content is within a div.

(B). Must have a width: An item cannot be centered within a browser if it is wider than the browser itself. Therefore, your element must have a set width.

(C). Margin left/right set to auto: 'Auto' means 'take up all the space', and since this is a display: block; element, the space would be what's left after your content has taken up the required pixels in width. The margin left/right being set to auto centers the div since they are being pushed against each other.

You can also use the shorthand margin property with the value 0 auto to center divs.

<div class="center">
  <img src="cat.jpg" alt="cat sleeping on rug">
</div>

<!--This is a simple code snippet showing an image of cat contained
within a div element-->
<!--This div can now be styled using css -->

To center the cat image in CSS, you'll code:

.center {
width: 50%;
margin: 0 auto;
}

/*Here, display:block; isn't used because the div is already a
block-level element*/

Setting the margin-top to 0, and the horizontal margin to auto using the shorthand property removes the margin-top and horizontally centers the image. Therefore, the output will be:

2.Flexbox centering
Introduced in CSS3, Flexbox has revolutionized how we design layouts by providing a better way to arrange, align, and distribute space among items within a container.

It is the most modern method to center elements on a page. To ensure that Flexbox creates the appropriate row/column you want, wrap your desired row/column in a <div> element.

A Flexbox layout always contains a container and its direct children. To use Flexbox, you need to give an element a 'display' property of 'flex'. This will make the element a 'flex container', and any direct children of a flex container are called 'flex items'.

To begin create a div and give it a class of container, using the above cat example create an img element with src and alt attributes.

<div class="container">
    <img src="cat.jpg" alt="cat sleeping on rug">
 </div>

.container{
 display: flex;
 justify-content: center;
 }
 /* justify-content set to center centers the cat image */

Output:

At its core, Flexbox takes every single item and turns it into a row or column depending on its flex-direction. Note that Flexbox only turns into rows/columns "direct children" elements.

3.Text Align set to Center
To center texts properly, use the text-align property in CSS and give it a value of center.

 <div class="center-text">
 Centered Text
 </div>

 .center-text {
             text-align: center;
             background-color: lightblue;
             padding: 20px;
         }

The output looks like this, you can see the words 'centered text' have been effectively centered on our page.

4.CSS Grid
This is a layout grid system in CSS that allows us to create web layouts easily. Using CSS Grid you can define a grid structure and place items within the grid. This gives us total control over the alignment and positioning of our elements.

Although CSS Grid is primarily used for grid-based designs, it can also be used to center elements easily.

<div class="container">
   <div class="center-grid">Grid Layout Horizontal Centering.</div>
 </div>

.container {
             display: grid;
             place-items: center; /* centers the child horizontally */
             background-color: pink;
             height: 100vh; /* just for this example */
         }
         .center-grid {
             background-color: lightseagreen;
             width: 50%;
             text-align: center;

Output:

How to Center a Div Vertically

To center a div vertically on a page, you can try the following:

1.Using CSS Position and Transform Properties
The position property in CSS specifies the kind of positioning method used for an element on your page. It changes an element's position in your document flow, which can affect the layout of other elements on your page.

On the other hand, CSS translate is a transform function that can move an element without affecting the layout of other elements on your page.

Combining these two properties can help you center a div. The position property will affect the element's position on your page while the translate function will move the element from that particular position.

In this case, we're going to set our position property to relative. An element with position: relative; is positioned relative to its normal/default position. Then shift the element 50% from the top and 50% from the left to align it at the center. Now add the transform property and set it to translate with the value -50% to effectively center it.

 <div class="container">
   <div class="position-transform">
   Vertical Centering
 </div>
 </div>

.container{
   position: relative;
             height: 100vh;
             background-color: black;
 }
 .position-transform {
             position: relative;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background-color: pink;
 }

The output looks like this:

2.CSS Grid
CSS Grid can also be used for vertical centering. All you need to do is give your element a display of grid, then align the item to the center.

 <div class="container">
   <div class="vertical-grid">
   Vertical Centering
 </div>
 </div>

.container{
             display: grid;
             align-items: center;
             background-color: coral;
             height: 100vh; 
          }
 .vertical-grid {
             background-color: lightseagreen;
             width: 100%;
             }

Output:

3.Flexbox centering
As I mentioned above, Flexbox is a one-dimensional CSS layout that controls how items are aligned or spaced within a container. This means you can also center elements vertically using Flexbox.

To begin create a container div and an additional div nested inside setting its class to 'vertical-flex'. Then in CSS, give your element a display of flex and align it to the center.

.container{
     display: flex;
             align-items: center;
             background-color: grey;
             height: 100vh; 
 }
 .vertical-flex {    
   background-color: lightcoral;
             width: 50%;
 }

Output:

Centering both Horizontally and Vertically

1.CSS Grid
To center an element both ways using CSS Grid, establish grid by giving your container a display property of grid, then place your content to the center by using the place-item property.

.container{
          display: grid;
             place-items: center;
             background-color: lightgray;
             height: 100vh; 
 }
 /* place-item centers your content both ways while 
 align-item only vertically centers your content*/

 .horizontal-vertical-grid {
        text-align: center;
   background-color: rgb(127,255,127);
             width: 50%;
 }

Output:

2.Flexbox
Flexbox is versatile and can also handle both horizontal and vertical centering easily. Establish Flexbox by giving your container element a display of flex, justify your content by setting it to center, and align your content to the center to vertically center it.

.container{
             display: flex;
            justify-content: center;
             align-items: center;
             background-color: grey;
             height: 100vh; 
 }
 .horizontal-vertical-flex {
        text-align: center;
   background-color: orange;
             width: 50%;
 }

Output:

3.Using Positioning
Combine absolute positioning with the transform function to center both ways.

.container{
        position: relative;
             height: 100vh;
             background-color: lightgray; 
 }
 .center-absolute {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             background-color: lightpink;
             width: 50%;
             text-align: center;
         }

Output:

Comparing the Techniques

Each centering technique has its pros and cons, depending on the specific requirements of your design and your personal preference.

Margin: auto; requires less code and is simple to implement, it is perfect for horizontally centering elements with a fixed width. Flexbox gives you control over the alignment of your elements with properties like align-items and justify-content.

CSS Grid being two-dimensional takes things a step further by providing control over both rows and columns at the same time. Positioning is flexible and can be used to center elements regardless of their dimensions or the container's dimensions.

Flexbox and CSS Grid are probably the most versatile methods for centering, as they are modern and suitable for most responsive design needs. A good understanding of the strengths and limitations of each approach will help you make informed decisions when centering.

Coding is a skill, and like all skills, centering divs require some practice. As renowned author Norman Vincent Peale stated:

Nobody ever mastered any skill except through intensive persistent and intelligent practice.

Remember, keep practising and soon you'll be centering divs like a master developer!

Conclusion

From basic CSS properties to more advanced methods, I have covered various ways you can center a div. Understanding the box model principle and exploring the various centering techniques will help you create visually appealing layouts and user-friendly interfaces.

Happy coding besties!

Exploring Some Features of HTML5

Mosope (Deborah) Oduwole — Sun, 12 May 2024 18:21:11 +0000

Table of contents
Introduction
What is HTML5?
Some Features of HTML5
HTML vs HTML5
How to Create HTML5 Files
HTML5 Looking Forward

Introduction

HTML has come a long way since its establishment in 1989 and has since served as the core language of the World Wide Web. From static and simple webpages to dynamic web applications, the web is constantly changing and the introduction of HTML5 represents a significant leap in the world of web development.

This article aims to explore the key features of HTML5, from the semantic elements to its multimedia features, HTML5 has helped restructure how the internet is accessed.

The primary focus of this article is on the 5th version of HTML, so if you want to learn more about the concept of HTML itself, go here.

What is HTML5?

Introduced on the 22nd of January 2008 with goals such as improving the language by adding the latest multimedia support, and keeping the language(HTML) readable and consistently understood by both humans and devices, it aimed to solve the problems of a new era.

A sequel to HTML4, HTML5 is the latest specification of the HTML language. It is a markup language used for structuring and presenting hypertext documents on the web.

It was finally released as a World Wide Web Consortium (W3C) recommendation in 2014.

HTML5 created a shift in web development and offers features that enable developers to create interactive and dynamic web applications and the ultimate user experience for visitors.

Some Features of HTML5

Features introduced to HTML by HTML5 include:

1.Semantic Elements: This is the foundation of modern web development. Semantic elements like <header>, <footer>, <section> tags and more were introduced by HTML5. These elements help to provide structure and clarity to an HTML document and help in code readability.

Using certain elements helps the browser know how to display your code. For example, the <header> element tells the browser that the content in <header> should be loaded first.

On the other hand, a <footer> element tells the browser that the content in <footer> should be loaded last.

<header>
   <h1>My first header element</h1>
 </header>
 <section>
   <h2>My first section element</h2>
   <p>your content</p>
 <!--Before adding any new content, the section element can be
 used to separate existing content from future content -->
 </section>
 <footer>
   <p>All rights reserved</p>
   <!--The footer element can contain copyright information,
 back-to-top links, and so on -->
   <!--It is a structural element used to identify the footer
 of a page, document, article or section -->
 </footer>

The above code block depicts some semantic elements with content they may contain.

What should be remembered is that semantic elements are those elements that accurately reflect the content they contain and are helpful for code readability and leveraging search engine optimization (SEO).

2.Figure and Figcaption: HTML5 allows you to use <figure> and <figcaption> elements to mark up and define photos. The <figure> element represents "self-contained" content and allows you to associate an image with a caption.

As for <figcaption>, it allows you to add a caption to a particular content nested within a <figure> element. For image elements, the <figcaption> is placed just above the closing tag of the <figure>, after the image<img> element.

Thus to add a caption to an image of a cat, you can code:

 <figure>
   <img src="cat.jpg" alt="cat sleeping on tree">
   <figcaption> What breed of cat do you have?</figcaption>
 </figure>

The output looks like this:

3.Form Enhancements: HTML5 introduces new input types for the existing <form> element in HTML. For example (<input type="email">,<input type="password">), and validation attributes like ('required', 'minlength', 'maxlength') which help to streamline form development for the best user experience.

Validation attributes are special attributes that can be added to form elements to provide validation rules and constraints for user input. These attributes improve user experience by providing instant feedback on input errors.

This means that if the data entered by the user/visitor does not meet specific criteria, it will not be submitted to the server.

 <input type="password" minlength="8">

 <!--By adding a 'minlength' validation attribute with a value of '8',
  it tells the browser that the user must type
  in not less than 8 characters when setting their password-->

 <input type="password" pattern="[a-z0-5]{8,}">

 <!--The pattern attribute defines an expression that the
 password must match to be considered valid-->
 <!-- This particular value means that the user can input 8 
 or more lowercase alphabets, or the digits 0-5 -->

These enhancements simplify data input and facilitate user input validation, without relying on javascript.

4.Multimedia Additions: Multimedia support with the use of <audio>, <video> and <canvas> elements allow the integration of audio and video files on your website, and the dynamic rendering of graphics directly within your browser using a scripting language(Javascript, PHP, and so on).

Unlike the former iterations, HTML5 does away with the reliance on third-party plugins like Adobe Flash for multimedia content, improving performance and simplifying multimedia integration.

5.Application Programming Interfaces(API): HTML5 introduced a range of APIs that help developers create more interactive web applications.

The Geolocation API allows websites to access the user's/visitor's geographical location, and in turn, enables location-based services. Here, the user sends their longitude and latitude and this data is sent to the backend server.

The data can then be used to create fancy applications like fitness tracking apps, transportation apps, and so on. However, the geographical position of a user is not accessed unless they approve of it.

The Drag and Drop API simplifies the implementation of the drag-and-drop functionality. In HTML, any element can be dragged and dropped. It allows you to drag any element in the DOM and drop it to another location.

In HTML, apart from the default behaviour for images, links, and selections, no other elements are draggable by default. To make other HTML elements draggable, provide a "draggable" attribute for the element you wish to make draggable and set its value to "true", then add a listener for the 'dragstart' event.

<div id="dragElement" draggable="true">Drag me!</div>
    <div id="dropzone">Drop here!</div>

    <script>
      const dragElement = document.getElementById('dragElement');
      const dropzone = document.getElementById('dropzone');

      dragElement.addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text/plain', 'Dragged text');
      });

      dropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
      });

      dropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        const data = e.dataTransfer.getData('text/plain');
        dropzone.innerHTML = `Dropped text: ${data}`;
      });
    </script>

This code creates a simple drop zone area where you can drag and drop files.

The WebStorage API provides for easy storage of data on the client's device. This feature helps to reduce transactions between the application and the backend server, to create a fast application.
The WebSocket API facilitates real-time communication between clients and servers, unlike the previous versions where the server responds after the client sends a request.

The introduction of these features among many others enables developers to unlock the full potential of the web, providing usefulness to HTML pages and contributing to more dynamic web applications.

HTML vs HTML5

The latest iteration of HTML, HTML5, builds upon HTML while introducing several new features, as listed above.

Other than the fact that HTML5 is simply the current version of the markup language, reasons such as it being easier to write, and maintain, better for accessibility and SEO, makes it superior.

You should note that HTML5 is not a replacement for HTML but rather an improvement. However, using outdated HTML versions is not preferred.

How to Create HTML5 Files

If you're reading this, I assume you already know how to create HTML documents as the language basics are the same. However, if you don't know how to create a standard HTML5 document, refer to my previous article here.

You can find it under the subheading "Creating Your First HTML File".

HTML5 Looking Forward

Certain features of HTML5 have been covered in this article, from utilising semantic elements to making responsive web images using HTML5. In addition to modernizing web development, these features give HTML pages more strength and dynamism.

By adhering to best practices for writing clean and maintainable code, developers can leverage the full potential of the web.

Happy coding besties!

A Comprehensive Guide to HTML for Beginners

Mosope (Deborah) Oduwole — Sat, 27 Apr 2024 18:32:51 +0000

Table of contents
Introduction
What Exactly is HTML?
How to Write HTML
. HTML Document Structure
. Anatomy of an HTML Element
Common HTML Tags
Common HTML Attributes
Creating Your First HTML File
Resources for Further Learning
Conclusion

Introduction

As you begin your developer journey, understanding HTML is crucial as it helps you create a website's basic foundation. HTML was created to support linking among online resources and this served as a revolutionary step in building the web as we know it.

In the context of web development, however, HTML has to do with the contents of a website, think of it as a skeleton that provides the backbone and structure to webpages. A solid understanding of HTML helps you build functional websites which can then be styled by CSS and manipulated by JavaScript.

As of 2024, over 95% of websites use HTML.

This article will serve as a comprehensive guide to HTML, walking you through its fundamental concepts, how HTML is written, common tags and attributes, the creation of an HTML file along with common text editors for coding HTML, and finally provide you with further resources for learning HTML.

What Exactly is HTML?

Created by Tim Berners-Lee in 1989, HTML serves as the core language of the World Wide Web. HTML, an acronym for HyperText Markup Language, is the backbone of the web allowing users to navigate using hyperlinks across different websites.

As a markup language, HTML marks up the page with annotations within the HTML file. These annotations are not rendered on the browser but work behind the scenes in telling the browser how to display content to the general public.

When building a house, a good foundation must be set up to ensure it is structurally sound. In the same way, HTML is the foundation upon which websites are built, providing the structure and semantics for presenting content on the web.

Before we continue, note that HTML is majorly not considered a programming language but rather a markup language. It has been argued that since HTML serves a structural purpose, not a functional one, it cannot be considered a programming language.

How to Write HTML

HTML documents follow a standard structure consisting of elements which tell the browser what to render.

A basic HTML element contains a starting and closing tag, and content, and could contain attributes and values.

Like humans, a proper HTML structure has a <head> and a <body>. The <head> element is where you add the metadata while the <body> contains information that will be displayed on the webpage. You should only place in your <body> tag what will be displayed on the page, then indent everything else inside the <body>.

HTML Document Structure

A basic HTML structure looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- This is where you insert the metadata -->
  <!-- The metadata contains information about your webpage -->
  <title></title>
  </head>
  <body>
   <!-- The body contains visible content within your webpage -->
  </body>
</html>

<!DOCTYPE html>: This is the first line of code in HTML. It specifies the HTML version, is known as a declaration and ensures the browser tries to meet industry-wide specifications.

<html lang="en"></html>: These are the opening and closing tags for the HTML document, it contains a 'lang' attribute which is added to the opening tag with the value 'en' to specify that the language of the page is in English.

<head></head>: This contains metadata about the page.

<title></title>: This contains the title of the page that will be displayed in the browser's title bar.

<body></body>: Contains visible content on the webpage.

Anatomy of an HTML Element

Various HTML elements help convey information to a web browser, from the diagram above you can see HTML elements are designated by tags (an opening and a closing tag) *note that some elements do not require a closing tag.

The attribute provides additional information to an element while the value provides additional information to your added attribute. Take an anchor element for example:

<a href="link adress"> your content </a>

<!--The opening <a> depicts the opening tag-->
<!--href is the attribute depicting the hypertext reference for your
anchor tag-->
<!--The link address is the value-->
<!--The closing </a> depicts the end tag-->

Common HTML Tags

In total over 142 HTML tags exist, each serving its purpose at different levels within the HTML document. I have curated the essential elements you will most likely come across when coding HTML.

Most HTML elements have an opening and a closing tag.

The opening tag contains the element enclosed by angle brackets(<>). On the other hand, the closing tag(where applicable) contains the element enclosed by angle brackets along with a forward slash preceding the element name (</>).

Essential HTML tags include:

1.Headings(H1 - H6): Headings define the hierarchy of contents on a webpage and it ranges from <h1> being the most important to <h6> being the least important. Adding a lower-rank heading element to your document implies that you are starting a new subsection.

<h1>Hello World</h1> <!-- Most important heading -->
 <h6>hello world</h6> <!-- sub-heading -->

2.Paragraphs(p): This lets you add a paragraph to your webpage, paragraphs are useful in presenting a structured document.

<p>This is your paragraph content</p>

3.Links(a): As shown earlier, the anchor element creates hyperlinks which help you navigate between web pages, or even within sections on the same page.

To ensure your link opens in a new tab, you can add the keyword (target="_blank").

4.Images(img): Images can be added to an HTML document using the <img> tag. Unlike the tags you have seen so far, the image tag is self-closing, which means it does not require a closing tag.

For image elements, it is essential to have a (src) attribute specifying the image source. It also helps to have an (alt) attribute to improve accessibility for screen readers if your image fails to load.

<img src="blah.jpg" alt="blah doing blah" />
 <!-- alt attributes also help your site rank higher on google search
 pages since it provides important metadata about the image -->

5.Divisions(div): <div> tags are generic block-level container elements used to group and style similar content. This tag does not affect the content of your document unless styled with CSS or manipulated with JavaScript.

It is commonly said that an HTML document is a collection of divs. Other tags can be nested within a <div> element, and even divs can be nested within other divs. This is known as the 'HTML document tree'.

Here is a diagram I created showcasing the HTML document tree and how elements are nested inside each other.

6.Lists(ul)(ol)(li): Lists can either be ordered(ol) or unordered(ul). To create an ordered list, code the opening <ol> tag along with the closing </ol>. Inside this, nest the list item tags <li></li>, then indent everything.

The same goes for creating bullet points, all you have to do is nest your list items (li) in an unordered list element.

Therefore to create a bullet point of grocery items, you should code:

<ul>
   <li>Eggs</li>
   <li>Butter</li>
   <li>Flour</li>
   <li>Sugar</li>
 </ul>

It will look like this:

Now that you have learnt some common HTML tags, let us move on to the common HTML attributes.

Common HTML Attributes

HTML attributes provide extra information about the element that will not appear in the content.

They are always specified in the start/opening tag of the element and are usually assigned a value. name/value are attribute pairs. (name="value"). Note that attribute values must be enclosed in quotation marks.

You should also remember that not all HTML elements require an attribute, and not all attributes require a value(these are called Boolean attributes). Don't stress, as you get further into learning HTML, these concepts become easier to understand.

Common HTML attributes include:

The (src) attribute: The source attribute (src) is useful in an <img> element with the corresponding value being the image link. If a (src) attribute is not added to an <img> element, the browser will not know what image to render.
<img src="image link"/>
The (href) attribute: Defines the destination of hyperlinks on an HTML document and the value specifies the link's destination. If a (href) attribute is not added to an anchor<a> element, the visitor will not be sent anywhere by the browser when the link is clicked.
<a href="your link">link text</a>
The (class) and (id) attributes: These provide extra information and styling to HTML elements by utilising CSS for styling and JavaScript for manipulation.
The (lang) attribute: An essential attribute that must be added to the start tag of your <html> element. It specifies the language of the web page and helps to assist browsers and search engines. Setting your <html lang="en"></html> specifies that the language of the page is in English.
The (alt) attribute: This is not an essential attribute but adding an (alt) to your <img> element is considered good HTML practice. Adding an alternative text makes your site accessible to those who might need it (for example, visitors with low vision) and acts as a fallback if your image fails to render properly (perhaps due to a spelling mistake or something else). It is also considered good SEO practice. <img src="cat.jpg" alt="cat sleeping on rug" />

There are more attributes and learning how to leverage them effectively will help enhance your HTML document. What should be remembered is that HTML attributes are special words used inside an HTML element to control the element's behaviour.

Creating Your First HTML File

To begin using HTML, follow these steps:

Download a Text Editor: A Text Editor is any form of a computer program that helps you change, edit, create and open text files. Basically, it helps you write code. There are several text editors for coding HTML. Some of my favourites are Visual Studio Code, Notepad++(Windows), Sublime Text(Mac), and many others.
After downloading the text editor, you will see an editor window after it is opened. Here, you will code your first line of HTML.
Begin with a <!DOCTYPE html> which acts as a declaration for your page, followed by a <html></html> element setting the (lang) to English. <html lang="en"></html>
Within your <html> element nest a <head></head> and <body></body> elements.
In your <head> element nest a <title></title> element setting the content to 'My first HTML page' to give your page a title.
Nest a <h1></h1> element and a <p></p> element within your <body> setting the contents to "My first Heading" for the former and "My first paragraph" for the latter.

It should look like this:

<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>My first HTML page</title>
   </head>
   <body>
     <h1>My first Heading</h1>
     <p>My first paragraph</p>
   </body>
 </html>

7.Next, save the file you just created on your computer and assign it a (.html) extension.

8.To view your completed file, open it by double-clicking on the saved file. This will make it open in your default browser. You should see your web page displayed according to the HTML files you added.

9.Congratulations bestie! You just created your first HTML file, I'm so proud of you!

10.As you can see, it is a pretty basic page so you are free to play around with it. You can edit the file in your text editor by adding more HTML elements with images, forms, links and other elements for a more dynamic web page. Don't forget to save the changes to see them reflected in your browser.

Resources for Further Learning

To continue your journey in mastering HTML, here are some valuable resources that helped in my developer journey:

freeCodeCamp: The 'Responsive Web Design' course on free code camp helped to jumpstart my developing career. As the name implies it's free and only requires you to create an account.
HTML and CSS by Per Borgen: This is a video I always recommend to absolute beginners. Per did an amazing job simplifying the concepts and engaging the listener.
The Odin Project: A hands-on introduction to computer basics, HTML, CSS, and Flexbox, among others.

Whether you prefer online tutorials or recommended books, there is no shortage of avenues to learn HTML, you should do your research and choose the resource that works best for you!

Conclusion

HTML is the language of the web and as you embark on your developer journey, a good understanding of HTML will prove useful and rewarding in the digital landscape.

You can always build simple websites with HTML alone but note that to build beautiful and functional websites, a good understanding of CSS and JavaScript will be essential in the future. Like humans, HTML can be likened to the skeleton, CSS to the skin and JavaScript to the brains of a website.

Remember that practice and perseverance are key in whatever you wish to learn and HTML is just the beginning of an exciting adventure in creating dynamic and interactive web experiences. I wish you good luck in your developer journey.

Happy coding besties!