Frontend Development Course 2026: HTML5, CSS3, Bootstrap

What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

HTML Editors

• A simple text editor is all you need to learn HTML.

• Web pages can be created and modified by using professional HTML editors like VS Code.

• For learning HTML we recommend a simple text editor like Notepad, Notepad++, Sublime or TextEdit (Mac).

• We believe in that using a simple text editor is a good way to learn HTML.

HTML Documents

• All HTML documents must start with a document type declaration: <!DOCTYPE html>.

• The HTML document itself begins with <html> and ends with </html>.

• The visible part of the HTML document is between <body> and </body>

  
  

Headings

<!DOCTYPE html>

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

Paragraph

<!DOCTYPE html>

<html>

<body>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

<p>This is a paragraph.</p>

</body>

</html>

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Setting the style of an HTML element, can be done with the style attribute.

<tagname style="property:value">

The property is a CSS property. The value is a CSS value.

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

HTML Quotation and Citation Elements

The HTML <blockquote> element defines a section that is quoted from another source

The HTML <q> tag defines a short quotation.

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

The HTML <address> tag defines the contact information for the author/owner of a document or an article.

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).

The HTML <bdo> tag is used to override the current text direction

BDO stands for Bi-Directional Override.

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

<!-- <p>This is another paragraph </p> -->

<!--

<p>Look at this cool image:</p>

<img border="0" src="girl.jpg" alt="girl">

-->

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

You can set the background color for HTML elements

<h1 style="background-color:DodgerBlue">Hello World</h1>

You can set the color of text

<h1 style="color:Tomato;">Hello World</h1>

You can set the color of borders

<h1 style="border:2px solid Tomato">Hello World</h1>

HTML Links

HTML links are hyperlinks.

You can click on a link and jump to another document.

<a href="https://www.tryonlinefree.com/">Tryonlinefree.com</a>

1. An unvisited link is underlined and blue

2. A visited link is underlined and purple

3. An active link is underlined and red

Links Attributes

_self - Default. Opens the document in the same window/tab as it was clicked

_blank - Opens the document in a new window or tab

_parent - Opens the document in the parent frame

_top - Opens the document in the full body of the window

HTML Images

Images can improve the design and the appearance of a web page.

The HTML <img> tag is used to embed an image in a web page.

<img src="url" alt="alternatetext“>

src - Specifies the path to the image

alt - Specifies an alternate text for the image

<img src="tryonlinefree.png" alt="Tryonlinefree.com">

HTML Favicon

A favicon image is displayed to the left of the page title in the browser tab.

You Link the favicon like that.

<!DOCTYPE html>

<html>

<head>

  <title>My Page Title</title>

  <link rel="icon" type="image/x-icon" href="favicon.ico">

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

<link> Defines the relationship between a document and an external resource.

HTML Tables

HTML tables allow web developers to arrange data into rows and columns

A table in HTML consists of table cells inside rows and columns.

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Table Rows

Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Table Headers

You want your cells to be headers, in those cases use the <th> tag instead of the <td>

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default.

Ordered List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default.

Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

HTML Block and Inline Elements

Block-level Elements

A block-level element always starts on a new line.

A block-level element always takes up the full width.

A block level element has a top and a bottom margin.

The <div> element is a block-level element.

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

<span> element is a Inline Element.

HTML CLASS & ID Attribute

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

The class attribute can be used on any HTML element.

The class name is case sensitive!

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}

HTML elements can belong to more than one class

JavaScript can access elements with a specific class name with the getElementsByClassName() method

HTML id Attribute

The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document

The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

Write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}

The id name is case sensitive!

JavaScript can access an element with a specific id with the getElementById() method

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page.

HTML Iframes

An HTML iframe is used to display a web page within a web page.

The HTML <iframe> tag specifies an inline frame

An inline frame is used to embed another document within the current HTML document

<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

<iframe src=" iframe.html " height="200" width="300" title="Iframe Example"></iframe>

You can add the style attribute and use the CSS height and width properties

<iframe src=" iframe.html " style="height:200px;width:300px;" title="Iframe Example"></iframe>

By default, an iframe has a border around it.

To remove the border, add the style attribute and use the CSS border property

<iframe src=" iframe.html " style="border:none;" title="Iframe Example"></iframe>

Iframe - Target for a Link

<iframe src="iframe.html" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.google.com" target="iframe_a">google.com</a></p>

HTML Layout Elements and Techniques

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

HTML Layout Techniques

CSS framework: Bootstrap

CSS float property: It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work

CSS flexbox: Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

CSS grid: The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices!

A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Setting The Viewport

To create a responsive website, add this <meta> tag to all your web pages.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

If the CSS width property is set to 100%, the image will be responsive and scale up and down.

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size

HTML Computer Code Elements

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

<p>Save the file by pressing <kbd>Ctrl + S</kbd></p>

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

<p><samp>File not found.<br>Press F1 to continue</samp></p>

HTML <code> For Computer Code

The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

<code>

x = 5;

y = 6;

z = x + y;

</code>

<code> element does not preserve extra whitespace and line-breaks

To fix this, you can put the <code> element inside a <pre> element.

<pre>

<code>

x = 5;

y = 6;

z = x + y;

</code>

</pre>

HTML <var> For Variables

The HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>

The <kbd> element defines keyboard input

The <samp> element defines sample output from a computer program

The <code> element defines a piece of computer code

The <var> element defines a variable in programming or in a mathematical expression

The <pre> element defines preformatted text

HTML Semantic Elements

Semantic elements = elements with a meaning.

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Non-semantic elements: <div> and <span> - Tells nothing about its content.

Semantic elements: <form>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>

HTML <section> Element

The <section> element defines a section in a document

<section> element can be used:

Chapters, Introduction, News items, Contact information

HTML <article> Element

The <article> element specifies independent, self-contained content.

<article> element can be used:

Forum posts, Blog posts, User comments, Product cards, Newspaper articles.

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

HTML <footer> Element

The <footer> element defines a footer for a document or section.

A <footer> element contains:

authorship information, copyright information, contact information, sitemap, back to top links, related documents.

HTML <nav> Element

The <nav> element defines a set of navigation links.

The <nav> element is intended only for major block of navigation links.

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

The <aside> content should be indirectly related to the surrounding content.

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.

According to the W3C: "A semantic Web allows data to be shared and reused across applications, enterprises, and communities."

Semantic Elements in HTML

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

<section> Defines a section in a document

<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

HTML Versus XHTML

XHTML is a stricter, more XML-based version of HTML.

What is XHTML?

XHTML stands for Extensible Hypertext Markup Language

XHTML is a stricter, more XML-based version of HTML

XHTML is HTML defined as an XML application

XHTML is supported by all major browsers

Why XHTML?

XML is a markup language where all documents must be marked up correctly.

XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML).

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing

The <form> Element

The HTML <form> element is used to create an HTML form for user input.

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button

<input type="checkbox"> Displays a checkbox

<input type="submit"> Displays a submit button

<input type="button"> Displays a clickable button

HTML Canvas Graphics

The HTML <canvas> element is used to draw graphics on a web page.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

<canvas id="myCanvas" width="200" height="100"></canvas>

Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

To add a border, use the style attribute.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

</canvas>

HTML SVG Graphics

SVG defines vector-based graphics in XML format.

What is SVG?

SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web

SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle, SVG Rectangle, SVG Rounded Rectangle, SVG Star, SVG Logo

HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.