School of Engineering

@Oluwasetemi
AltSchool School of Engineering

Class notes for the 1st Semester
Are you ready to learn Software Engineering focusing on web technologies? Press space on your keyboard
@Oluwasetemi
Table of contents
1. What is Software Engineering? 15. Link
2. Why Web and Cloud? 16. Navigation
3. Focus of this Class 17. HTML Tables
4. Tools 18. Form
5. Accounts 19. HTML API
6. Installations 20. Focusing
7. Algorithms and FlowCharts 21. Details and Summary
8. Programming Paradigms 22. Dialogs and Popovers
9. HTML 23. What are Web Components?
10. Document Structure 24. Assignments
11. Understanding Semantic HTML 25. Terminal
12. Heading & Sections 26. Git
13. Attributes 27. GitHub
14. Text Basics 28. Open Source
@Oluwasetemi
What is Software Engineering?

Software Engineering is the systematic application of engineering principles to the design, development,
maintenance, testing, and evaluation of software.
It involves a disciplined approach to analyzing user needs, planning and managing projects, creating software
systems, and ensuring their reliability, efficiency, and maintainability.
You will need a blend of technical Skills, engineering methods and project management to produce high-
quality software systems.
Read more about Software Engineering?

@Oluwasetemi
Foundational Requirement
coding
coding
coding
coding
@Oluwasetemi
Why Web and Cloud?

Career Advantages
High Demand and Competitive Salaries
Remote Work
Entrepreneurial Options
Technical Advantages
Scalability, Cost Efficiency, Security and CI/CD
Access to Advanced Tools and Services
Global Reach
Educational and Community Benefits
Extensive Learning Resources
Active Community Support and Open Source
Innovation and Future-Proofing
Cutting-Edge Technologies
Adaptability
@Oluwasetemi
Focus of this Class

HTML
CSS
JavaScript
Git and GitHub | Open Source
@Oluwasetemi
Tools
Visual Studio Code or any equivalent (JetBrains IDE, Zed, Sublime Text)
Git and GitBash for windows, Git only for mac and linux
Nodejs, Python
@Oluwasetemi
Accounts
Some Account You Expected to (Create || Have)
GitHub and any other equivalent in GitLab or BitBucket

LinkedIn
Twitter or X
Stackblitz or CodeSandBox
Codepen
Stackoverflow
ChatGPT
Figma
Dev.to | hashnode | Medium
Slack
Netlify | Vercel | Render
Personal Website. we teach to create your own.
@Oluwasetemi
Installations
Set up your VSCODE for window users-altschool
Share
Watch on
@Oluwasetemi
Algorithms and FlowCharts

Definition: An algorithm is a step-by-step procedure or a set of rules designed to perform a specific task or
solve a particular problem. It is a sequence of instructions that are followed to achieve a desired outcome.
Example: An algorithm for making a cup of tea might include steps like boiling water, adding a tea bag to a
cup, pouring the hot water into the cup, letting it steep for a few minutes, and then removing the tea bag.
@Oluwasetemi
flowchart
Definition: A flowchart is a visual representation of the steps in a process or system using symbols, arrows,
and text. It depicts the sequence of operations or steps, making it easier to understand how a process flows
from start to finish.
Example: A flowchart for logging into a website might start with a "Start" symbol, followed by a decision
symbol asking if the user has entered their username and password, arrows leading to "Enter username" and
"Enter password" steps, and an end symbol once the login process is successful.
@Oluwasetemi
Problem Solving
@Oluwasetemi
Programming Paradigms
Procedural Programming
Object-Oriented Programming (OOP)
Functional Programming
Logic Programming
Declarative Programming
Concurrent Programming
Event-Driven Programming
Each paradigm brings its own way of thinking and problem-solving, making some paradigms more suitable for
certain types of tasks than others. Modern programming often involves a combination of these paradigms to
leverage their respective strengths.
@Oluwasetemi
Programming Concepts
Variables Recursion
Data Types Error Handling
Control Structures Memory Management
Functions (or Methods) Concurrency
Data Structures File I/O
Algorithms
Object-Oriented Concepts
Encapsulation
Polymorphism
Inheritance
Understanding these concepts is fundamental to mastering programming and can significantly improve your
ability to develop complex and efficient software solutions.
@Oluwasetemi
Variables
Storage locations in memory with a name, used to hold data.
let name = 'AltSchool'

let age = 99
console.log({name, age})
{
"name": "AltSchool",
"age": 99
}
1 name = 'AltSchool'
2 age = 99
3
4 print(name, age)
@Oluwasetemi
Data Types
Classification of data items, defining the operations that can be performed on them.
Primitive types: int, char, float, boolean, number, bigint, symbol, string, undefined, null,
Composite types: arrays, structs, classes.
Abstract data types: List, Stack, Queue, etc.
let name = 'AltSchool'

let age = 99
let isStudent = true
const arrayOfScore = [99, 40, 50]

const person = { name: name, age: age, isStudent: isStudent }
console.log(arrayOfScore)
console.log(person)
[99, 40, 50]

{
"name": "AltSchool",
"age": 99,
"isStudent": true
}
@Oluwasetemi
Control Structures
Direct the order of execution of statements in a program.
Conditional statements: if, else, switch.
Loops: for, while, do-while.
Branching: break, continue, return
1 let name = 'AltSchool'

2 let age = 99
3
4 if (condition) {
5 // do something
6 } else if (condition) {
7 // do something else if
8 } else {
9 // finally do something
10 }
@Oluwasetemi
Functions (or Methods)

Blocks of code designed to perform a particular task, reusable throughout the program.
Key Points
Definition and calling.
Parameters and return values.
Scope and lifetime of variables.
@Oluwasetemi
Data Structures
Ways of organizing and storing data to enable
efficient access and modification
Key Points: Linear: Arrays, Linked Lists. Non-linear: Trees, Graphs. Abstract: Stack, Queue, Map, Set
@Oluwasetemi
Data Structures More (Trees)

Binary Search Tree, AVL Tree, Red-Black Tree Segment Tree Fenwick Tree (Binary Indexed Tree)
@Oluwasetemi
Algorithms
Step-by-step procedures or formulas for solving problems.
Key Points
Sorting: Bubble sort, Quick sort, Merge sort. Searching: Linear search, Binary search. Complexity: Big O
notation for time and space.
@Oluwasetemi
Object-Oriented Concepts
Principles used in OOP to create objects that model real-world entities
Key Points
Classes and Objects. Encapsulation, Inheritance, Polymorphism, Abstraction. Constructors and destructors
Encapsulation - Hiding the internal state and requiring all interaction to be

performed through an object’s methods
Polymorphism - The ability of different classes to be treated as instances of the
same class through a common interface
Inheritance - is a mechanism that allows a class to inherit properties and
behaviors from another class
@Oluwasetemi
Recursion
A function calling itself to solve a smaller instance of the same problem.
Notable Key Points

Base case and recursive case.
Stack overflow and efficiency considerations.
Examples: Factorial, Fibonacci sequence
@Oluwasetemi
Error Handling
Mechanisms to handle runtime errors or exceptional conditions.
Key Points
Try, catch, finally blocks.
Throwing exceptions.
Custom exception classes
@Oluwasetemi
Memory Management
Techniques to control the allocation, use, and deallocation of memory
Concurrency and Asynchronous Operations

Running multiple computations simultaneously
File I/O
Reading from and writing to files. File streams, Opening, reading, writing, and closing files, Binary vs text files
@Oluwasetemi
HTML
Getting Up and Running with HTML Document Structure, Metadata (head tag and its related tags), Body
(possible elements that can be in the body)
Getting Up and Running with HTML

HTML(HyperText Markup Language) is the foundation of basically every web page, basically, it is the core
language of the World Wide Web. It’s how we tell browsers to structure content into paragraphs, headings,
images, links, lists, forms, tables, buttons, and more. If you’re interested in building a website, web
development, or just coding in general, learning HTML is a great place to start.
@Oluwasetemi
Let’s break it down a bit

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML
markup includes special "elements" such as <head> , <title> , <body> , <header> , <footer> , <article> , <section> ,
<p> , <div> , <span> , <img> , <aside> , <audio> , <canvas> , <datalist> , <details> , <embed> , <nav> , <search> ,
<output> , <progress> , <video> , <ul> , <ol> , <li> and many others.
“HyperText” is text on a web page that contains references to another web page. You probably know these
as hyperlinks. We use hyperlinks to jump to another section of the same page, a different page on the
current website, or a completely new website. Hyperlinks can also open a PDF, email, or multimedia, like a
video or audio file.
Linking information together in this way was a revolutionary step in building the web. Together, HTML and
the internet make it possible for anyone to access all types of information around the world, in any order
they want.
Finally, “Language” is the simplest part of the acronym to understand. Like any language, HTML has a
unique syntax and alphabet. But what kind of language is it, exactly? It’s a markup language.
@Oluwasetemi
HTML Element
An HTML element is set off from other text in a document by "tags", which consist of the element name
surrounded by < and >. The name of an element inside a tag is case-insensitive. That is, it can be written in
uppercase, lowercase, or a mixture. For example, the <title><title> tag can be written as </Title></Title>,
<TITLE> </TITLE> , or in any other way. However, the convention and recommended practice is to write tags in
lowercase.
@Oluwasetemi
Check this out:
User Browser
<h1>Welcome to the world of HTML</h1>
Breakdown of the HTML element
Opening tag: <h1>
Content: Welcome to the world of HTML
Closing tag: </h1>
User Browser
@Oluwasetemi
Explanation of the Diagram in the previous slide

The closing tag is the same tag as the opening tag, preceded by a slash. Elements and tags aren’t the exact
same thing, though many people use the terms interchangeably. The tag name is the content in the brackets.
The tag includes the brackets. In this case, <h1>. An "element" is the opening and closing tags, and all the
content between those tags, including nested elements.
Note: Browsers do not display the tags. The tags are used to interpret the content of the page.
@Oluwasetemi
Document Structure
HTML documents include a document type declaration and the <html&gt ; root element. Nested in the <html&gt ;
element are the document head and document body. While the head of the document isn’t visible to the
sighted visitor, it is vital to make your site function. It contains all the meta information, including information
for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and
the behavior and presentation of your content.
<DOCTYPE html />

<html>
<head>
<head/>
<body>
<body/>
<html/>
@Oluwasetemi
DOCTYPE
<!DOCTYPE html> The first thing in any HTML document is the preamble. To start an HTML document you need
to type <!DOCTYPE html> at the top of the document, though this may look like an HTML element because it’s
wrapped in tags but it isn’t. It’s a special kind of node called "doctype" which tells the browser to use
standards mode. If this <!DOCTYPE html> is omitted, browser wil use a different rendering mode known as quirks
mode.
HTML
The <html> element is the root element for an HTML document. It is the parent of the <head> and <body>
containing everything in the HTML document other than the doctype. If omitted it will be implied, but it is
important to include it, as this is the element on which the language of the content of the document is
declared.
Note: The lang language attribute added to the html tag to give this <html lang="en"> tag defines the main
language of the document. The value of the lang attribute is a two- or three-letter ISO language code
followed by the region. The region is optional, but recommended, as a language can vary greatly between
regions.
@Oluwasetemi
head
Nested between the opening and closing <html> tags, we find the two children: <head> and <body> :
<DOCTYPE html /> <body>
<html lang="en"> <body/>
<head> <html/>
<head/>
The <head> which can also be referred to as document metadata header, contains all the metadata for a site or
application and some of these meta tags are:
<meta charset="UTF-8"/>
< meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learning HTML</title>
<link href="./style.css"/>
@Oluwasetemi
Character encoding
1 <meta charset="UTF-8"/>;
By declaring UTF-8 (case-insensitive), you can even include emojis in your title (but please don’t).
The character encoding is inherited into everything in the document, even <style> and <scipt> This little
declaration means you can include emojis in class names and the selectorAPI (again, please don’t). If you do
use emojis, make sure to use them in a way that enhances usability without harming accessibility.
Document title
The <title> element is metadata that represents the title of the overall HTML document (not the document’s
content.)
The contents for the document title, the text between the opening and closing <title> tags, are displayed in
the browser tab, the list of open windows, the history, search results, and, unless redefined with <meta> tags,
in social media cards.
@Oluwasetemi
Viewport metadata
The other meta tag that should be considered essential is the viewport meta tag, which helps site
responsiveness, enabling content to render well by default, no matter the viewport width and also enhances
the user experience.
1 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
name="viewport": This specifies that the meta tag is providing information about the viewport. The viewport is
the user's visible area of a web page, which varies with the device used to view the site (desktop, tablet,
mobile phone).
content="width=device-width, initial-scale=1.0": This attribute contains the settings for the viewport. It is a
comma-separated list of properties and values. In this case, it contains two key properties:
width=device-width: This sets the width of the viewport to be equal to the width of the device. It ensures that
the webpage is not scaled down or up but instead uses the full width of the device’s screen. initial-scale=1.0:
This sets the initial zoom level when the page is first loaded. A scale of 1.0 means no zoom, i.e., the page
content appears at 100% of its size.
@Oluwasetemi
Body
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
Inside the <body> tags of an HTML document, you can find a wide variety of elements that are used to
structure and present the content of a webpage. Here are some common HTML tags that are typically found
inside the <body> tag:
1 <body>
2
3 1. Headings:
4 <h1> to <h6>
5
6 2. Paragraph:
7 <p>
8
9 3. Links:
10 <a>
@Oluwasetemi
Contd.
1 4. Lists:
2 Ordered List: <ol>, <li>
3 Unordered List: <ul>, <li>
4 Description List: <dl>, <dt>, <dd>
5
6 5. Tables:
7 <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>
8
9 6. Forms:
10 <form>, <input>, <textarea>, <button>, <select>, <option>, <label>, <fieldset>, <legend>
11
12 7. Images:
13 <img>
14
15 8. Media:
16 <audio>, <video>, <source>
17
18 9. Embedded Content:
19 <iframe>, <embed>, <object>, <param>
20
21 10. Sections and Grouping Content:
22 <div>, <span>, <header>, <footer>, <main>, <section>, <article>, <nav>, <aside>
@Oluwasetemi
Contd.
1 11. Text Formatting:
2 <b>, <i>, <strong>, <em>, <small>, <mark>, <del>, <ins>, <sub>, <sup>
3
4 12. Interactive Elements:
5 <button>, <details>, <summary>
6
7 13. Semantic Elements:
8 <figure>, <figcaption>, <time>, <progress>, <meter>
9
10 14. Script and Styles:
11 <script>, <noscript>, <style>
12
13 </body>
@Oluwasetemi
Let’s put some of the tags in usage

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Responsive Web Page</title>
7 </head>
8 <body>
9 <h1>Welcome to my responsive web page!</h1>
10 <p>This page looks good on both desktop and mobile devices.</p>
11 </body>
12 </html>
@Oluwasetemi
Breakdown of the Code:

1. <DOCTYPE html > This declaration defines the document type and version of HTML being used. <DOCTYPE
html> specifically tells the browser that this document is written in HTML5, which is the latest version of
HTML.
2. <html lang="en">This is the opening tag for the HTML document. The lang="en" attribute specifies the
language of the document, which in this case is English. This helps search engines and browsers understand
the primary language of the content.
3. <head> The <head> element contains meta-information (metadata) about the document that is not displayed
on the page. It includes links to scripts, stylesheets, and other metadata.
Within the <head> : <meta charset="UTF-8"> This tag specifies the character encoding for the HTML document.
UTF-8 is a universal character set that supports many different characters from various languages. It ensures
that the text is properly displayed.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> This tag controls the viewport’s size
and scale on different devices. It ensures the website is responsive and adjusts to different screen sizes:
width=device-width sets the viewport to match the device’s width. initial-scale=1.0 sets the initial zoom level
to 100%.
@Oluwasetemi
Contd
4. <title> Responsive Web Page </title> The <title> tag defines the title of the HTML document, which
appears in the browser’s title bar or tab. It is also used by search engines as the title of the page in search
results.
5. <body> The <body> element contains all the content that is displayed on the web page, such as text, images,
links, etc.
Within the <body> : <h1>Welcome to my responsive web page!</h1> The <h1> tag defines a top-level heading
on the page. This is often the main heading and is typically the most prominent piece of text.
<p>This page looks good on both desktop and mobile devices.</p> The <p> tag defines a paragraph of text. It
contains the main body text and ensures the content is properly formatted and readable.
@Oluwasetemi
Understanding Semantic HTML

Semantic HTML is the practice of using HTML elements to structure your content based on their meaning and
purpose, rather than their appearance. By using semantic markup, you provide context and meaning to the
content, making it easier for both humans and machines (like search engines and assistive technologies) to
understand the structure and purpose of the content.
Meaning Over Appearance

This emphasizes that HTML elements should be chosen based on their semantic meaning, not their visual
appearance. For example, don’t use an <h1> element just because it renders text as large and bold by default;
use it to represent the main heading or title of the content
@Oluwasetemi
Non-semantic vs. Semantic Markup

1 <div>
2 <span>Non-semantic Markup</span>
3 <div>
4 <a>one word</a>
5 <a>one word</a>
6 <a>one word</a>
7 <a>one word</a>
8 </div>
9 </div>
10 
<nav aria-label="Breadcrumbs">

<ol id="top" role="list">
<li><a href="#">Ho<span>me</span></a></li>
<li><a href="/living">Living Room</a></li>
<li><a aria-current="page"
href="/living/couch">Couches</a></li>
<li><a href="/living/couch/sectional">Sectional</a>
</li>
</ol>
</nav>
<main id="main">
Here is the main content
<footer>I'm at the bottom<span><a href="#top">Got to the

Top</a></span></footer>
</main>
Resources 1× 0.5× 0.25× Rerun

@Oluwasetemi
HTML Tables
HTML tables are used for displaying tabular data with rows and columns. They provide a semantic way to
structure and present data that needs to be compared, sorted, calculated, or cross-referenced.
Table Structure
A table is defined using the <table> element, which wraps all the table content. Inside the <table>, you can
have the following elements:
<caption> : Provides a descriptive title for the table.
<thead> : Contains the table header rows.
<tbody> : Contains the table body rows.
<tfoot> : Contains the table footer rows (optional).
Within these sections, you’ll use <tr> for table rows and <th> for table header cells or <td> for table data
cells
@Oluwasetemi
<table>
<caption>Student Grades</caption>
<thead>
<tr>
<th>Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<td>85</td>
</tr>
<tr>
<th>Emily</th>
<td>92</td>
</tr>
</tbody>
</table>
@Oluwasetemi
Accessibility and Semantics

Using proper table structure and semantic elements is crucial for accessibility. Screen readers and assistive
technologies rely on this structure to understand the tabular data and its relationships.
<th> cells have implicit ARIA roles of columnheader or rowheader, depending on the scope attribute. The
scope attribute can be set to col, row, colgroup, or rowgroup to explicitly define the header’s scope. The
headers attribute can be used to associate data cells with their corresponding header cells in complex tables.
Merging cells
Similar to MS Excel, Google Sheets, and Numbers, it is possible to join multiple cells into a single cell. This is
done with HTML! The colspan attribute is used to merge two or more adjacent cells within a single row. The
rowspan attribute is used to merge cells across rows, being placed on the cell in the top row.
Styling and Responsiveness

Tables can be styled using CSS, but it's recommended to avoid using deprecated attributes like cellpadding,
cellspacing, or align. Instead, use modern CSS properties like border-collapse, border-spacing, and caption-
side.
@Oluwasetemi
1 <table>
2 <caption>Alt Alumni</caption>
3 <thead>
4 <tr>
5 <th rowspan="2" id="name" scope="col">Name</th>
6 <th colspan="2" id="path">Career path</th>
7 <th rowspan="2" id="year">Year</th>
8 </tr>
9 <tr>
10 <th id="past" scope="col">Past</th>
11 <th id="future" scope="col">Destiny</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <th id="hal" scope="row">Hal Gibrah</th>
17 <td headers="hal path past">Calculator</td>
18 <td headers="hal path future">Mars rover</td>
19 <td>2020</td>
20 </tr>
21 <tr>
22 <th id="cathy" scope="row">James Bond</th>
23 <td headers="cathy path past">Waste disposal</td>
24 <td headers="cathy path future">Automated teller</td>
@Oluwasetemi
Form
The HTML <form> element identifies a document landmark containing interactive controls for submitting
information. Nested in a <form> you'll find all the interactive (and non-interactive) form controls that make up
that form.
Forms are created using the <form> element, which contains interactive controls for submitting information.
The <form> element has attributes like action (URL for processing the form data) and method (HTTP
method for submission, e.g., GET or POST).
Form controls, such as input fields, radio buttons, checkboxes, and submit buttons, are nested within the
<form> element.
HTML attributes can enforce required fields, define validation criteria, and prevent form submission until the
data matches the required criteria.
Submitting a form is typically done by activating a submit button, which sends the form data as name/value
pairs to the specified URL.
@Oluwasetemi
Form(Radio-Button)
Radio buttons in a group share the same name attribute, which ensures that only one can be selected at a
time.
Each radio button should have a unique value attribute to identify the selected option.
To pre-select a radio button, include the checked attribute.
To make a selection from a group of radio buttons required, add the required attribute to at least one radio
button in the group.
@Oluwasetemi
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
@Oluwasetemi
form(Checkboxes)
Checkboxes with the same name in a group are submitted together, allowing multiple selections.
If no value attribute is provided for a checkbox, the value defaults to "on", which may not be helpful.
To make a checkbox required, add the "required" attribute to that specific checkbox.
Form(Label & fieldsets)

Every form control should have an associated <label> element, either explicitly using the for attribute or
implicitly by nesting the control within the <label> tags.
Labels provide accessible names for form controls and increase the clickable area for better usability.
Groups of related form controls, like radio buttons or checkboxes, should be grouped within a <fieldset>
element, with a <legend> providing the label for the group.
<fieldset> elements can be nested to create hierarchical groupings.
1 <label for="full_name">Your name</label>

2 <input type="text" id="full_name" name="name">
@Oluwasetemi
Input types & dynamic Keyboards

There are 22 different input types in HTML, each optimized for a specific kind of data entry (e.g., text, email,
url, tel, number, date, etc.).
On devices with dynamic keyboards (e.g., smartphones), the input type determines the type of keyboard
displayed, making data entry more efficient and accurate.
@Oluwasetemi
Accessing the Microphone and Camera

The <input type="file"> element allows users to upload files of specific types, defined by the accept
attribute.
The capture attribute, when set to "user" or "environment", allows users to directly capture media from their
device’s camera or microphone.
This feature enables creating new media files within a form, without requiring a separate file upload.
@Oluwasetemi
Built-in Validation
HTML attributes like required, pattern, min, max, minlength, and maxlength enable defining validation
criteria for form controls.
When a user attempts to submit a form, client-side constraint validation checks if the entered values meet
the defined criteria.
If any values are invalid, form submission is blocked, and the browser displays an error message in the first
incorrect form control, giving it focus.
CSS pseudo-classes like , , , and can be used to style form controls based on their validation state.
JavaScript can be used to provide custom error messages during constraint validation or enhance the user
experience with dynamic updates.
@Oluwasetemi
Example
This example includes a nested <form> with input 1 <dialog open aria-labelledby="dialogid">
2 <form action="thankyou.php">
fields (text and number), a <select> dropdown, and 3 <button type="submit" aria-label="close"
two submit buttons. 4 formmethod="dialog" formnovalidate>X</button>
5 <h2 id="dialogid">Application</h2>
One submit button closes the dialog without 6 <p>All fields are required</p>
7 <p>
submitting data (using formmethod="dialog" and 8 <label>Name:
9 <input type="text" name="name" required />
formnovalidate). 10 </label>
The other submit button submits the form data via 11 </p>
12 <p>
POST to a specified URL (thankyou.php), after 13 <label>Warranty:
14 <input type="number" min="0" max="10"
client-side validation. 15 name="warranty" required />
16 </label>
The input fields have the required attribute, and the 17 </p>
18 <p>
number input has a defined step value.
19 <label>Power source:
This example showcases implicit labels, 20 <select name="powersoure">
21 <option>AC/DC</option>
instructions for form controls, and the potential for 22 <option>Battery</option>
23 <option>Solar</option>
customizing error messages using JavaScript. 24 </select>
@Oluwasetemi
How to embed Images in our HTML

HTML <img/> Tag
We have been talking about tags in our previous teachings but this time you’ll be seeing another form of tag
that’s called self closing tags under which the popular image tag fall under.
Self-closing tags, also known as void elements, are a feature in HTML and XML where the tag does not require
a separate closing tag. Instead, the tag is closed within itself. This is useful for elements that do not have any
content between an opening and a closing tag. Here are some examples and details about self-closing tags:
<img /> : Defines an image.

<br /> : Inserts a line break.
<hr /> : Creates a horizontal rule (a line).
<input /> : Defines an input field.
<meta /> : Provides metadata about the HTML document.
<link /> : Defines the relationship between a document and an external resource (most commonly used to
link to stylesheets).
@Oluwasetemi
Syntax:
In HTML, self-closing tags can be written in two ways:
HTML5 Syntax:
<img src="image.jpg" alt="Description">
<br>
This syntax is valid in HTML5 and does not require a closing slash (/).
XHTML Syntax:
<img src="image.jpg" alt="Description" />
<br />
This syntax is required in XHTML, which is a stricter form of HTML based on XML.
@Oluwasetemi
Usage Notes:
HTML5:
In HTML5, the closing slash is optional, and self-closing tags can be written without it. However, for
compatibility with XML parsers, it is sometimes included.
XHTML: XHTML requires the self-closing tags to include the closing slash to comply with XML standards.
Why Use Self-Closing Tags?
Simplicity: They simplify the markup by reducing the number of tags.
Consistency: They make the code easier to read and maintain, especially when dealing with elements that
don’t require content.
@Oluwasetemi
Code Example on Self-Closing Tags

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <title>Self-Closing Tags Example</title>
7 <link rel="stylesheet" href="styles.css" />
8 </head>
9 <body>
10 <h1>Self-Closing Tags Example</h1>
11 <img src="image.jpg" alt="A beautiful view" />
12 <br />
13 <input type="text" name="username" placeholder="Enter your username" />
14 <hr />
15 </body>
16 </html>
@Oluwasetemi
HTML Images Syntax

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.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a
holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image

alt - Specifies an alternate text for the image
1 <img src="url" alt="alternatetext">

@Oluwasetemi
The src Attribute

The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and
inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the
web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if
the browser cannot find the image.
Example:
1 <img src="img_chania.jpg" alt="Flowers in Chania">

@Oluwasetemi
The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
The value of the alt attribute should describe the image:
1 <img src="wrongimagelink.gif" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:
Note: You can use the width and height attributes in the image tag to define the width and heigh of the image
in pixels.
Example:
1 <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

@Oluwasetemi
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example:
1 <a href="default.asp">
2 <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
3 </a>
@Oluwasetemi
HTML <audio> Tag

The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the
first source it supports.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the
<audio> element.
Note: There are three supported audio formats in HTML: MP3, WAV, and OGG.
Example:
1 <audio controls>
2 <source src="horse.ogg" type="audio/ogg">
3 <source src="horse.mp3" type="audio/mpeg">
4 Your browser does not support the audio tag.
5 </audio>
@Oluwasetemi
Audio Tag Attributes

Code Example:
1 <body>
2 <h1>Audio Tag with Various Attributes</h1>
3 <audio controls autoplay loop muted preload="auto" crossorigin="anonymous">
4 <source src="audiofile.mp3" type="audio/mpeg">
5 <source src="audiofile.ogg" type="audio/ogg">
6 Your browser does not support the audio element.
7 </audio>
8 </body>
<audio> : The audio element that includes multiple attributes:
controls: Adds playback controls.

autoplay: The audio will play automatically when ready.
loop: The audio will loop continuously.
muted: The audio will be muted initially.
preload: Specifies that the audio should be preloaded.
@Oluwasetemi
Contd.
crossorigin: Specifies how the element handles cross-origin requests.
<source> Defines multiple sources for the audio file in different formats (MP3 and OGG) for better
compatibility.
Note: In HTML, attributes provide additional information about an element and modify its behavior or
appearance.
@Oluwasetemi
HTML <video> Tag

<video>: The Video Embed element The <video> HTML element embeds a media player which supports video
playback into the document. You can use <video> for audio content as well, but the <audio> element may
provide a more appropriate user experience.
Video Tag Attributes

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 <title>Video Tag Example</title>
7 </head>
8 <body>
9 <h1>Video Tag with Various Attributes</h1>
10 <video controls autoplay loop muted preload="auto" crossorigin="anonymous">
11 <source src="videofile.mp4" type="video/mp4">
12 <source src="videofile.webm" type="video/webm">
13 Your browser does not support the video element.
14 </video>
15 </body>
16 </html>
@Oluwasetemi
Code Explanation:
<!DOCTYPE html> : Declares the document type and version of HTML.
<html lang="en"> : Sets the language of the document to English.
<head> : Contains meta-information about the document, including character set and viewport settings.
<title> : Sets the title of the document, which appears in the browser tab.
<body> : Contains the content of the document.
<h1> : A heading element for the title of the page.
<video> : The video element that includes multiple.
attributes:
controls : Adds playback controls.
autoplay : The video will play automatically when ready.
loop : The video will loop continuously.
muted : The video will be muted initially.

preload : Specifies that the video should be preloaded.
crossorigin : Specifies how the element handles cross-origin requests.

@Oluwasetemi
Cont’d Code Explanation

<source>: Defines multiple sources for the video file in different formats (MP4 and WebM) for better
compatibility.
Fallback text: "Your browser does not support the video element." This text will be displayed if the browser
does not support the <video> element.
@Oluwasetemi
HTML API
For us to access and manipulate documents we need the DOM(Document Object Model) and this is also an
example of API. The DOM is the tree of all the nodes in the document. Some nodes can have children, others
can't. The tree includes elements, along with their attributes, and text nodes.
The browser provides numerous APIs providing natively supported methods, events, and property querying
and updating. Element nodes contain information about all the attributes set on the element. You can use
HTML interfaces to access information about an element’s attributes. For example, we can use
HTMLImageElement.alt get the alt attributes of all the images:
1 let allImages = document.querySelectorAll('img');

2 allImages.forEach((imageInstance) => {
3 console.log(imageInstance.alt);
4 });
The HTML interface APIs is not limited to accessing attribute values. The DOM provides insight into the
current state of the UI. HTML APIs can access all of that information. You can access the length of a video,
where a view is in the current playback, and if the video (or audio) has finished playing with
HTMLMediaElement.duration , HTMLMediaElement.currentTime , and HTMLMediaElement.ended respectively.
@Oluwasetemi
List of HTML API interfaces

HTMLAnchorElement - <a> HTMLEmbedElement - <embed>
HTMLAreaElement - <area> HTMLFieldSetElement - <fieldset>
HTMLAudioElement - <audio> HTMLFormElement - <form>
HTMLBaseElement - <base> HTMLHtmlElement - <html>
HTMLButtonElement - <button> HTMLIFrameElement - <iframe>
HTMLCanvasElement - <canvas> HTMLImageElement - <img>
HTMLDataElement - <data> HTMLInputElement - <input>
HTMLDataListElement - <datalist> HTMLLabelElement - <label>
HTMLDetailsElement - <details> HTMLLegendElement - <legend>
HTMLDialogElement - <dialog> HTMLLIElement - <li>

@Oluwasetemi
HTMLOutputElement - <output>
HTMLLinkElement - <link>
HTMLPictureElement - <picture>
HTMLMapElement - <map> HTMLProgressElement - <progress>
HTMLMediaElement - <audio>, <video> HTMLQuoteElement - <q> , <blockquote> ,

<cite>
HTMLMenuElement - <menu>
HTMLScriptElement - <script>
HTMLMetaElement - <meta> HTMLSelectElement - <select>
HTMLSlotElement - <slot>
HTMLModElement - <ins>, <del>
HTMLSourceElement - <source>
HTMLMeterElement - <meter>
HTMLStyleElement - <style>
HTMLObjectElement - <object> HTMLTableCellElement - <td> , <th>
HTMLOListElement - <ol>
HTMLOptGroupElement- <optgroup>
HTMLOptionElement - <option>
@Oluwasetemi
HTMLTableColElement - <col>, <colgroup>

HTMLTableElement - <table>
HTMLTableRowElement - <tr>
HTMLTableSectionElement - <thead>,
<tbody>, <tfoot>
HTMLTemplateElement - <template>
HTMLTextAreaElement - <textarea>
HTMLTimeElement - <time>
HTMLTitleElement - <title>
HTMLTrackElement - <track>
HTMLVideoElement - <video>
@Oluwasetemi
Focusing
To improve user-accessibility in our code we have to put focus into consideration by ensuring that user knows
which element has focus and this can be achieved by including :focus , :focus-visible or :focus-within styles on
the element.
Interactive elements, including form controls, links, and buttons, are by default focusable and tabbable.
Tabbable elements are part of the document’s sequential focus navigation order. Other elements are inert ,
meaning they are not interactive. With HTML attributes, it is possible to make interactive elements inert and
to make inert elements interactive.
Focus
By default, the navigation focus order in a webpage follows the visual and source code order. Although HTML
attributes and CSS properties can change this order, doing so can negatively impact user experience. Modifying
the tabbing order or visual rendering order can lead to confusion and a poor user experience. Therefore, it's
recommended not to alter the perceived and actual tabbing order with CSS and HTML, as demonstrated by
examples showing the negative effects of such changes.
@Oluwasetemi
Example 1
Click in any input, then hit the tab key.
1. 2. 3. 4.
5. 6. 7. 8.
9. 10. 11. 12.

@Oluwasetemi
Example 2
In this example, CSS has created a divergence between the tabbing order and the visual order of the content:
Put your cursor in the text box, then hit your tab key several times:
This sentenced was written in reverse order then styled with CSS flexbox.
The flex-flow: row-reverse; declaration has reversed the visual order. In addition, the CSS order property was
applied to the sixth word, "This", which visually moved that one word. The tabbing sequence is the order of
the code, which no longer matches the visual order, creating a disconnect for keyboard users.
Note: The contenteditable and tabindex attributes, being global attributes, can be added to any element, making
them focusable in the process. Focusable elements can also be focused with a mouse or pointer, by having the
autofocus attribute set, or by script, such as with element.focus() . A tabindex attribute with a negative
value makes the element focusable but not tabbable.
@Oluwasetemi
Details and Summary

Have you heard of a disclosure widget or come across it in a website before? A disclosure widget, also known
as an expandable or collapsible section, is a UI component that allows users to hide or show contents.
Mostly, developers achieve this accordion trick using CSS or JavaScript but we can easily get this done with
these tags: <details> and <summary>
The <details> and <summary> elements are all you need: they are a built-in way to handle expanding and
collapsing content. When a user clicks or taps a <summary> , or releases the Enter key when the <summary> has
focus, the contents of the parent <details> toggle to visible!
Creating an accordion with just HTML

Workshop reviews:
Blendan Smooth
Hoover Sukhdeep
AltSchool offers these courses
@Oluwasetemi
Grouped Details and Summary or Nested Details and

Summary or Accordion
Workshop reviews:
Blendan Smooth
Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE
could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your
owner’s perceived expectation of you, learn the skills to take over the world. This is the team you want
teaching you!
Hoover Sukhdeep
AltSchool offers these courses
@Oluwasetemi
Toggling visibility: the open attribute

The <details> element is the disclosure widget container. The <summary> is the summary or legend for its parent
<details> . The summary is always displayed, acting as a button that toggles the display of the rest of the
parent’s contents. Interacting with the <summary> toggles the display of the self-labeled summary siblings by
toggling the <details> element’s open attribute.
The open attribute is a boolean attribute. If present, no matter the value or lack thereof, it indicates that all the
<details> contents are shown to the user. If the open attribute is not present, only the contents of the
<summary> are shown.
Because the open attribute is added and removed automatically as the user interacts with the control, it can be
used in CSS to style the element differently based on its state.
@Oluwasetemi
Toggling the summary marker

If we pay attention to the disclosure widget, we will notice that there is an arrow to the inline-start of the
summary. This arrow is a ::marker set on the <summary> element. You can style the disclosure triangle with
CSS, including changing the marker used from a triangle to any other bullet type, including an image with list-
style-image.
1 details summary::before {
2 /* all the styles */
3 }
4 details[open] summary::before {
5 /* changes applied when open only */
6 }
Remember, <details> and <summary> can be heavily styled and can even be used to create tool tips. But, if you’re
going to use these semantic elements for use cases in which the native semantics are a mismatch, always
ensure that you maintain accessibility. HTML for the most part is by default accessible. Our job as developers is
to ensure our content stays accessible.
@Oluwasetemi
Dialogs and Popovers

Have you seen the common dialog box on computers, websites etc? You can achieve that using the <dialog>
element as this makes it easy to create popup dialogs and modals on a web page. Note: A modal which is also
known as modal window or lightbox is a web page element that displays in front of and deactivates all other
pages you have to perform the action requested by the modal or close it if you want to have access to your
main content. Also, we have the non-modal which when pops up on the screen it gives users access to interact
with content outside the box.
Modal Dialogs
Let’s see how modal <dialog> works
Open Modal
@Oluwasetemi
Contd.
Dialogs are mostly used in cases that requires the immediate attention of the site user, it might be to convey
important messages of notifications that requires user acknowledgment just like the alert() but dialogs
provides more accessibility options and flexibility.
Also, we can use dialogs to seek confirmation from a user before proceeding with a particular action that may
have some consequences.
Note: Non-modal dialogs opens a dialog as it name implies but without adding a
backdrop which makes the background active
@Oluwasetemi
Popovers
Before we delve into popovers, I want you to understand that popovers are special because they allow users
to interact with both the popover and the underlying content simultaneously. Though this can be achieved
with non-modal dialogs, popovers are more lightweight and can be used for quick interactions, such as
displaying tooltips, additional information, or menus, without disrupting the user’s workflow. They are context-
sensitive and can be dismissed easily, providing a seamless user experience.
We are going to follow these steps to create a popover
Firstly, we will create a button to trigger the popover and an element(what we want to display) to trigger.
We will set a popover attribute on the element which is going to be the popover(element to display).
Then, we are going to add a unique id on the popover element(element to display).
Lastly, to connect the button to the popover, we will set the buttons’s popovertarget to the value of the
popover element’s id.
@Oluwasetemi
Popover Sample
Let’s see how our <popover> works following the previous algorithm.
Click to know what happened in Nigeria year 1914?

@Oluwasetemi
JS-Free hamburger menu demo

With the Popover API
Click open the hamburger menu to see a demo of
JavaScript-free interaction handling! By using the
popover attribute, you can allow the browser to
handle the keyboard management (including
navigation via esc , spacebar , and enter ),
optional light-dismiss (clicking outside the
boundaries of the popover), and click handlers such
as on the open and close buttons.
@Oluwasetemi
When to use Dialogs and when to use Popovers
Dialogs are used when you need the full Developers should use popovers when they
attention of the user, especially for critical want to provide supplementary information
alerts, confirmation prompts, or scenarios about an activity without disrupting the user’s
where user flow needs to be strictly workflow, because opovers are lightweight,
controlled. allowing users to interact with both the
popover and the underlying content
simultaneously.
@Oluwasetemi
Popover Types
Sometimes, you might want to have more control over your popover, and this is where setting the <popover>
attribute value to manual comes in. Previously we didn’t set any value to the <popover> attribute, we just used
it directly which explicitly means <popover="auto"> and this allows the popover to close when we press the esc
key or click outside the popover box in the UI.
To have control over our <popover> we are going to set the <popover> attribute value to manual just like this
<popover="manual"> , by doing this we will have to add a close button to control the closing of the popover
because clicking away in the UI won’t work any longer.
@Oluwasetemi
Popover with value set to manual

Let’s see how our <popover> works following the previous algorithm.
Click to know what happened in Nigeria in 1914

@Oluwasetemi
Show popover dialog

<dialog id="modal-dialog">
Modal Dialog
<dialog id="popover-dialog" popover="">
<br>
Popover Dialog
<form method="dialog">
<br> <button>Close Dialog</button>
<button">Close Dialog</button> </form>
</dialog>
</dialog>
Show modal dialog

@Oluwasetemi
What are Web Components?

Web components are a set of web standards that allow developers to create reusable, self-contained UI
elements. These components can be seamlessly integrated into existing applications, just like regular HTML
elements. The Web Component standard comprises three main parts:
HTML Templates: The <template> element allows developers to declare fragments of HTML that can be
cloned and inserted into the DOM using JavaScript. The contents of the <template> element are not rendered
by default.
Custom Elements: Custom Elements allow developers to define their own HTML elements with custom
functionality. These elements can be created by extending the HTMLElement class using JavaScript.
Shadow DOM: The Shadow DOM is an encapsulated DOM tree that is attached to a custom element. It
provides a way to scope CSS styles and DOM structures to a specific component, isolating it from the rest
of the document. This prevents naming conflicts and style clashes with the rest of the application.
@Oluwasetemi
The <template> Element

This section introduces the <template> element and demonstrates how to create a template for a star rating
component. It also explains the concept of unnamed and named slots using the <slot> element.
The <template> element is used to declare HTML fragments that can be cloned and inserted into the DOM
using JavaScript. The contents of the <template> element are not rendered by default. In the given example,
a template is created for a star rating component with a <form> element containing radio inputs and buttons.
@Oluwasetemi
Example(template)
1 <template id="star-rating-template">
2 <form>
3 <fieldset>
4 <legend>Rate your experience:</legend>
5 <rating>
6 <input
7 type="radio"
8 name="rating"
9 value="1"
10 aria-label="1 star"
11 required
12 />
13 <input type="radio" name="rating" value="2" aria-label="2 stars" />
17 </rating>
18 </fieldset>
19 <button type="reset">Reset</button>
20 <button type="submit">Submit</button>
21 </form>
22 </template>
@Oluwasetemi
Rate your experience:
★★★★★
ResetSubmit
@Oluwasetemi
Shadow DOM and Styling

This discusses the Shadow DOM and how it encapsulates CSS styles within a web component. It
demonstrates how to apply styles to the shadow DOM and explains the usage of the and ::slotted() pseudo-
classes.
The Shadow DOM provides a way to scope CSS styles to a specific web component, isolating it from the
rest of the document. This means that external CSS does not apply to the component, and component
styles have no effect on the rest of the document, unless intentionally directed.
@Oluwasetemi
Another Example
In the given example, a <style> element is included within the
1 <template id="card-template">
<template> to apply styles to the star rating component. These 2 <style>
styles are encapsulated within the shadow DOM and do not 3 :host {
4 display: block;
affect the rest of the document. 5 margin-bottom: 20px;
The `:host` pseudo-class is used to select the shadow host 6 }
7 .card {
element (the custom element to which the shadow DOM is
8 border: 1px solid #ccc;
attached). The ::slotted() pseudo-element is used to select 9 padding: 10px;
slotted elements (elements inserted into named slots) from 10 background-color: #f5f5f5;
11 }
within the shadow DOM. 12 ::slotted(h2) {
The document also mentions the ::part() pseudo-element, 13 margin-top: 0;
14 }
which allows styling elements within a shadow DOM from the
15 ::slotted(p) {
global CSS scope. By adding a part attribute to elements in the 16 color: #666;
<template> , those elements can be targeted using the 17 }
18 </style>
::part() pseudo-element in the global CSS. 19 <div class="card">
20 <slot name="card-header"></slot>
21 <slot name="card-content"></slot>
22 </div>
23 </template>
@Oluwasetemi
Slot
The <slot> element is used within the <template> to create placeholders for custom content. If a name
attribute is provided, it creates a "named slot" that can be used to insert custom content within the web
component. In the example, a named slot is created for the legend of the star rating component.
1 <template id="star-rating-template">
2 <form>
3 <fieldset>
4 <slot name="star-rating-legend">
5 <legend>Rate your experience:</legend>
6 </slot>
7 </fieldset>
8 </form>
9 </template>
@Oluwasetemi
Undefined Elements and Custom Elements

This explains how browsers handle undefined (unrecognized) elements and demonstrates how to define a
custom element using JavaScript and the customElements.define() method.
Browsers do not fail when encountering unrecognized HTML elements. Instead, they treat these elements
as anonymous inline elements, similar to <span>>. In the given example, the <star-rating> element is
initially treated as an unrecognized element, and its contents are displayed as if they were inside a <span>
element.
To define a custom element, JavaScript is required. The customElements.define() method is used to register
a custom element by extending the HTMLElement class.
@Oluwasetemi
Undefined Elements and Custom Elements

In the example, the star-rating custom element is defined, and a shadow DOM is attached to it using the
attachShadow() method. The contents of the <template> element are cloned and appended to the shadow
DOM, effectively encapsulating the star rating component.
1 customElements.define('star-rating',
2 class extends HTMLElement {
3 constructor() {
4 super(); // Always call super first in constructor
5 const starRating = document.getElementById('star-rating-template').content;
6 const shadowRoot = this.attachShadow({
7 mode: 'open'
8 });
9 shadowRoot.appendChild(starRating.cloneNode(true));
10 }
11 });
@Oluwasetemi
Do you know?
Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste), as well as to
asynchronously read from and write to the system clipboard.
1 navigator.clipboard
2 .readText()
3 .then(
4 (clipText) => (document.querySelector(".editor").innerText += clipText),
5 );
autocomplete attribute provide hints to the browser about the type of data expected in the input field.
e.g. name, honorific-prefix, tel, cc-number etc. <input name="address_firstline"
autocomplete="billing street-address" />
File System Access API provides access files and directories on the user’s local device.
1 const handle = await window.showSaveFilePicker(opts);
Badging API - set a badge on the web application’s icon to notify about updated state in a less intrusive,
persistent way. navigator.setAppBadge(unreadCount)
@Oluwasetemi
Do you know?
<datalist> is used to provide a list of predefined options for an input element. The list attribute of the
input element is used to associate the input with the datalist.
Choose a flavor:
1 <input name="country" list="countries">

2 <datalist id="countries">
3 <option>Afghanistan</option>
4 ...
5 </datalist>
Web Share API exposes a mechanism for sharing content to various user-selected destinations.
navigator.share(shareData)
Launch Handler API allows PWAs to control how they are launched.
1 {
2 "launch_handler": {"client_mode": "navigate-new"}
3 }
@Oluwasetemi
Do you know?
File Handling API allows PWAs to register themselves as handlers for certain file types or protocols.
1 {
2 "file_handlers": [{
3 "action": "/open-file",
4 "accept": {
5 "image/svg+xml": ".svg",
6 "image/png": ".png"
7 }
8 }]
9 }
Window Controls Overlay API allows PWAs to display custom content over the title bar area, whose
controls become an overlay. "display_override": ["window-controls-overlay"]
Isolated Web Apps allow native like packaging, permission and signing updates for PWAs.
@Oluwasetemi
Do you know?
HTML Media Capture allows users to capture media (audio, video, or images) using the device’s camera or
microphone. The capture attribute is used with the input element to specify the type of media to capture.
<input type="file" accept="video/*" capture>
input.showPicker() method is used to display the file picker dialog for the input element.
1 <input type="file" id="fileInput">

2 <button onclick="document.getElementById('fileInput').showPicker()">Select File</button>
FormData API can be used tp easily extract and manipulate form data values via JS.
1 let fd = new FormData(form);

2 let data = JSON.stringify(Object.fromEntries(fd));
Customizable Select allow styling control and customizing dropdown control, previously <selectlist>
and <selectmenu> were used for this purpose.
1 select,
2 ::picker(select) {
3 appearance: base-select;
4 }
@Oluwasetemi
Do you know?
The :user-error pseudo-class is used to style form elements that have invalid input. It is used to
indicate that the user has made an error in the input field.
1 input:user-error {
2 border-color: red;
3 background-color: #ffe6e6;
4 }
plaintext-only value for contenteditable permits editing of the element’s raw text, but not rich text
formatting. <h2 class="title" contenteditable="plaintext-only"></h2>
EditContext: The EditContext interface represents the text edit context of an element that was made
editable by using the EditContext API.
1 const canvas = document.createElement("canvas");

2 const editContext = new EditContext();
3 canvas.editContext = editContext;
Lazy Loading: The loading attribute is used to specify whether an image/iframe should be loaded
immediately or only when it is visible to the user. <img src="picture.jpg" loading="lazy" />
@Oluwasetemi
Do you know?
The caretPositionFromPoint() method returns the caret’s character offset. Check out this examples
form MDN to see how it works.
1 const range = document.caretPositionFromPoint(e.clientX, e.clientY);

2 const textNode = range.offsetNode;
3 const offset = range.offset;
Resource Hints (all) - allows work to begin on certain resources early to improve performance. <link
rel="pre* | dns-prefetch | modulepreload"> .
1 <link rel="preload" href="picture.jpg" />

2 <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
Content-Security Policy (CSP) is an added layer of security that helps to detect and mitigate XSS and other
attacks. <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-
src https://*; child-src 'none';"> Content-Security-Policy: default-src 'self'
fetchpriority attribute is used to specify the priority of the fetch request. <img src="picture.jpg"
fetchpriority="high" />
@Oluwasetemi
blocking="render" attribute is used to specify that the resource should block rendering until it is
loaded. <script blocking="render" async src="async-script.js"></script>
<model> element allows embedding 3D graphical content into a webpage. <model src="3d-
assets/car"></model>
<video src="fun.mp4" controlslist="nodownload"></video> . The controlslist attribute is used to

specify the controls that should be displayed in the video player.
CSS Custom Hightlight API provides a mechanism for styling arbitrary text ranges on a document by using
JavaScript to create the ranges, and CSS to style them.
1 ::highlight(my-custom-highlight) { 1 const parentNode = document.getElementById("foo");

2 background-color: blue; 2 const range1 = new Range();
3 } 3 range1.setStart(parentNode, 10);
4 range1.setEnd(parentNode, 20);
5 const highlight = new Highlight(range1);
6 CSS.highlights.set("my-custom-highlight", highlight);
setHtmlUnsafe() is used to parse a string of HTML into a DocumentFragment, which then replaces the
element’s subtree in the DOM. element.setHTMLUnsafe("<p>Unsafe HTML</p>") ;

@Oluwasetemi
Do you know?
parseHtmlUnsafe() is used to parse a string of HTML, which may contain declarative shadow roots, in order
to create a new Document instance. document.parseHTMLUnsafe("<p>Unsafe HTML</p>")
Intl.Segmenter API is used to break text into segments based on the language-specific rules. const
segmenter = new Intl.Segmenter("en", {granularity: "word"});
HTML Modules allow import HTML files via JS imports and access their elements and JS exports. Support
for JSON modules is also available.
1 <script type="module">
2 import { TabList } from "./tablist.html" with { type: 'html' };
3 customElements.define("tab-list", TabList);
4 </script>
focusgroup facilitate keyboard focus navigation using the keyboard arrow keys among a set of focusable
elements. <div focusgroup="wrap horizontal">
search element is Semantic element for wrapping search UI… <search>...</search>

@Oluwasetemi
Assignments
Assignment 1
Assignment 2
@Oluwasetemi
Assignment 1
Create a web page that should display your basic information, with ALT SCHOOL ID, a biography, relevant
details explaining why you joined the program, and your goals for the School of Engineering program.
Implement a fragment identifier feature to enable scrolling back to the top of the page. Create a folder and
name the file index.html
Create a web page consisting of a form that mirrors the ALT SCHOOL application form
(https://portal.altschoolafrica.com/auth/create-account), name the file form.html, connect the form.html to your
first assignment via global navigation ensuring both files are in the folder of the first assignment, which should
be at the top of both pages. You should create a footer with your address and a copyright. It must also be
accessible, incorporating appropriate semantic HTML tags.
1 index.html
2 form.html
NB: Strictly without CSS. Submission details will be sent to you in due time.
@Oluwasetemi
Assignment 2
Build additional two web pages , the first is going to be a table about all the courses and schools existing at
AltSchool Africa, with School of engineering we have frontend engineering, backend engineering, cloud
engineering and cybersecurity. School of Product - Product Design, Marketing, Management. School of Data -
Data Analysis, Science, Engineering.
School Courses
SOE Frontend Backend Cloud
SOD Design Marketing Marketing
Second page is a page where you use all the media element existing in html to create powerful message about
yourself. Specially use picture element with more that 3 sources with responsiveness for mobile, tablet and
laptop.
1 table.html
2 media.html
@Oluwasetemi
Terminal
File and Directory Management:
ls - List files and directories. cd - Change directory. mkdir - Create a new directory. touch - Create an
empty file. cp - Copy files or directories. mv - Move or rename files or directories. rm - Remove files or
directories (with caution).
Viewing and Editing Files:
cat , less - View file contents. nano , vi , vim - Basic introduction to terminal-based text editors.
Others
echo - Print text to the terminal, man - Display the manual for a command, clear - Clear the terminal
screen, chmod - Change file permissions, chown - Change file ownership.
@Oluwasetemi
Git
Version Control: A system that records changes to files over time, allowing you to recall specific versions
later.
Distributed Version Control System (DVCS): A version control system that allows multiple developers to
work on a project simultaneously.
Git: A popular DVCS that tracks changes to files and directories, allowing you to collaborate with others
and manage your project’s history.
GitHub : A web-based platform that hosts Git repositories and provides collaboration tools for
developers.
Repository (Repo): A directory that contains your project files and a .git directory, which tracks the history
of changes.
@Oluwasetemi
Clone: Creating a copy of an existing Git repository.

Commit: A snapshot of changes in the repository. It represents a point in the history of your project.
Branch: A separate line of development, allowing you to work on different features or fixes without
affecting the main codebase.
Merge: Combining changes from one branch into another.
Remote: A version of your project hosted on the internet or network (e.g., GitHub, GitLab).
Pull: Fetching changes from a remote repository and merging them into your local repository.
Push: Sending your commits to a remote repository.
Pull Request: A request to merge changes from one branch into another.
Fork: Creating a personal copy of a repository on GitHub.
Issue: A task, bug, or feature request associated with a repository on GitHub.
Markdown: A lightweight markup language used to format text on GitHub.
README: A file that provides information about a project, typically written in Markdown.
@Oluwasetemi
Git Commands
git init - Initialize a new Git repository.
git clone - Clone a repository into a new directory.

git add - Add changes to the staging area.
git commit - Record changes to the repository.
git status - Show the working tree status.

git log - Show commit logs.
git branch - List, create, or delete branches.
git checkout - Switch branches or restore working tree files.
git merge - Join two or more development histories together.

@Oluwasetemi
git pull - Fetch from and integrate with another repository or a local branch.
git push - Update remote refs along with associated objects.

git remote - Manage set of tracked repositories.
git fetch - Download objects and refs from another repository.
git reset - Reset current HEAD to the specified state.

git rebase - Reapply commits on top of another base tip.
git revert - Revert some existing commits.
git stash - Stash the changes in a dirty working directory away.
git tag - Create, list, delete or verify a tag object signed with GPG.
@Oluwasetemi
@Oluwasetemi
Git maintains three local storages on our machine and one on a remote server like Github, which means that
our code can be found in four places
Working directory: where we edit files

Staging area: a temporary location where files are kept for the next commit
Local repository: contains the code that has been committed
Remote repository: the remote server that stores the code
@Oluwasetemi
@Oluwasetemi
GitHub
GitHub is a web-based platform that hosts Git repositories and provides collaboration tools for
developers. It allows you to store, manage, and share your code with others.
GitHub provides features such as pull requests, issues, and project boards to help you collaborate with
your team and manage your projects more effectively.
You can use GitHub to host your code, track changes, and work on projects with other developers. It’s a
powerful tool for version control and project management.
Creating a Repository
Either push an existing local repository to GitHub or create a new repository on GitHub and clone it to
your local machine.
1 git clone <repository-url>

2 gh repo create <repository-name>
3 git remote add origin <repository-url>
4 git push
@Oluwasetemi
Pull Requests
A pull request is a way to propose changes to a repository on GitHub. It allows you to submit your changes
for review and merge them into the main branch.
When you create a pull request, you can compare the changes between two branches and request feedback
from other developers. You can also discuss the changes, make additional commits, and address any
feedback before merging the changes.
Creating a Pull Request

To create a pull request, push your changes to a branch on GitHub and then open a pull request from that
branch to the main branch.
1 git push origin <branch-name>

2 gh pr create
3 gh pr list
4 gh pr checkout <pull-request-number>
@Oluwasetemi
Open Source
Open source software is software that is freely available to use, modify, and distribute. It is developed
collaboratively by a community of developers who contribute their time and expertise to improve the
software is used by individuals, businesses, and organizations around the world to build websites,
applications, and other software products.
Open source projects are typically hosted on platforms like GitHub, GitLab, and Bitbucket, where
developers can access the source code, report issues, and contribute to the project.
Contributing and Creating Open Source Projects

You can contribute to open source projects by fixing bugs, adding new features, and improving
documentation. You can also create your own open source projects and share them with the community.
Create tools, libraries, and frameworks that solve common problems and help other developers build better
software. Open source projects can be a great way to showcase your skills, collaborate with others, and
give back to the community.
@Oluwasetemi
Contributors
RIDWANADEBOSIN
OLUBEBE

School of Engineering

Uploaded by

Copyright:

Available Formats

School of Engineering

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

School of Engineering

Uploaded by

Copyright:

Available Formats

@Oluwasetemi

AltSchool School of Engineering

What is Software Engineering?

Read more about Software Engineering?

Why Web and Cloud?

Focus of this Class

GitHub and any other equivalent in GitLab or BitBucket

Algorithms and FlowCharts

let name = 'AltSchool'

Composite types: arrays, structs, classes.

Abstract data types: List, Stack, Queue, etc.

let name = 'AltSchool'

const arrayOfScore = [99, 40, 50]

[99, 40, 50]

Conditional statements: if, else, switch.

Loops: for, while, do-while.

Branching: break, continue, return

1 let name = 'AltSchool'

Functions (or Methods)

Data Structures More (Trees)

Encapsulation - Hiding the internal state and requiring all interaction to be

Notable Key Points

Concurrency and Asynchronous Operations

Getting Up and Running with HTML

Let’s break it down a bit

<output> , <progress> , <video> , <ul> , <ol> , <li> and many others.

Check this out:

<h1>Welcome to the world of HTML</h1>

Breakdown of the HTML element

Opening tag: <h1>

Content: Welcome to the world of HTML

Closing tag: </h1>

Explanation of the Diagram in the previous slide

<DOCTYPE html />

<DOCTYPE html /> <body>

<html lang="en"> <body/>

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

Note: There can only be one <body> element in an HTML document.

Let’s put some of the tags in usage

Breakdown of the Code:

Understanding Semantic HTML

Meaning Over Appearance

Non-semantic vs. Semantic Markup

Accessibility and Machine-Readability

Roles and Landmarks

Using the role attribute

Choosing the Right Elements

Heading & Sections

Contd(Heading & Sections )

1 <share-action authors="@estellevw" data-action="click" data-category="web.dev"

These three opening tags are equivalent:

<style contenteditable="contenteditable"> , the value defaults to inherit.

1 <section class="feedback" id="feedback">

<a href="#main" class="visually-hidden">Skip to main</a>

<footer>I'm at the bottom<span><a href="#top">Got to the

Resources 1× 0.5× 0.25× Rerun

Accessibility and Semantics

Styling and Responsiveness

Form(Label & fieldsets)

1 <label for="full_name">Your name</label>