Web Technology Tools
(BIT223)
By: Prince Emmanuel Ndoinjeh
Course Overview
• This course will introduce you to the fundamental tools and techniques used
in front-end web development.
• By the end of the course, you will be able to build a fully functional,
responsive website.
Course Objectives
• Understand the basics of HTML, CSS, and JavaScript.
• Create structured, styled, and interactive web pages.
• Develop responsive designs using modern CSS techniques.
• Use front-end frameworks like React.
BlueCrest Liberia 2
Introduction to Web Development
• What is Web Development?
Web development is the work involved in developing websites for the
Internet or an intranet.
What is the Internet?
A global network of interconnected computers that communicate using
standard protocols.
What is an intranet?
A private network utilized by a company might be referred to as an intranet.
Its main objectives are to support safe staff communication, information
archiving, and teamwork.
BlueCrest Liberia 3
Introduction to Web Development
• Front-end vs. Back-end
Front-end: The part of the website that users interact with directly.
Technologies: HTML, CSS, JavaScript.
Roles: Web designers, front-end developers.
Responsibilities: Creating the layout, design, and interactivity of a website.
Back-end: The server side of a website, which includes servers, databases, and
applications.
Technologies: Server-side languages ([Link], Python, Ruby), databases (SQL, MongoDB).
Roles: Back-end developers, database administrators.
Responsibilities: Managing data, server logic, and integration with front-end components.
BlueCrest Liberia 4
Introduction to Web Development
• Components of a Website
HTML: Hypertext Markup Language - the structure.
HTML is the backbone of any website. It creates the structure and layout with a series of elements that
are defined by tags.
CSS: Cascading Style Sheets - the style.
It allows web developers to apply styles to HTML elements, such as colors, fonts, and layouts.
It controls how the website's content is displayed on different screens and devices, ensuring a consistent
look and feel.
JavaScript: Programming language - the interactivity.
JavaScript is a programming language that facilitates website interactivity.
It enables web developers to implement complex features on webpages, from content updates without
page reloads to interactive maps and animated graphics that engage users.
BlueCrest Liberia 5
Introduction to Web Development
• Components of a Website
HTML (Hypertext Markup Language)
Example:
Definition: The standard markup <!DOCTYPE html>
<html>
language for creating web pages.
<head><title>My Website</title></head>
<body>
Function: Provides the structure <h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my
of a web page by using elements
website.</p>
such as headings, paragraphs, <a href="[Link]
links, images, and other types of [Link]</a>
</body></html>
content.
BlueCrest Liberia 6
Introduction to Web Development
• Components of a Website
CSS (Cascading Style Sheets)
Example:
Definition: A stylesheet language
used for describing the body { font-family: Arial, sans-serif;
presentation of a document written margin: 20px; }
in HTML or XML. h1 { color: blue; }
p { font-size: 16px; }
a { text-decoration: none; color: red; }
Function: Controls the layout and
appearance of the web page,
including colors, fonts, and spacing.
BlueCrest Liberia 7
Introduction to Web Development
• Components of a Website
JS (JavaScript)
Definition: A programming language Example:
commonly used to create interactive [Link]('DOMConte
ntLoaded', (event) =>
effects within web browsers. { [Link]('h1').[Link]
or = 'green';
Function: Adds interactivity to web [Link]('a').addEventLi
pages, such as dynamic content stener('click', function(event)
updates, form validations, { [Link]();
alert('You clicked the link!'); });});
animations, and handling user
events.
BlueCrest Liberia 8
Introduction to Web Development
• Importance of Web Development
Businesses: Online presence, e-commerce, marketing.
Education: E-learning platforms, information dissemination.
Personal: Blogs, social media, personal branding.
BlueCrest Liberia 9
Introduction to Web Development
• Types of Websites
Informational Websites:
Purpose: Provide information on a specific topic or range of topics.
Examples: News sites (CNN, BBC), blogs, wikis
E-commerce Websites:
Purpose: Sell products or services online.
Examples: Amazon, eBay, Shopify stores.
Social Media Websites:
Purpose: Connect people and facilitate social interactions.
Examples: Facebook, Twitter, Instagram.
Entertainment Websites Educational Websites Portfolio Websites
BlueCrest Liberia 10
Setting Up a Development Environment
Text Editors:
VS Code: Popular, customizable, with extensions for web development.
Sublime Text: Lightweight, with powerful features.
Browsers:
Chrome: Developer tools for debugging and testing.
Firefox: Developer Edition with tools for CSS Grid, Flexbox.
Version Control:
Git: Version control system to track changes.
GitHub: Platform for hosting and collaborating on code.
BlueCrest Liberia 11
Introduction to
HTML
What is HTML?
BlueCrest Liberia 12
Introduction to HTML
Definition: HTML (Hypertext Markup Language) is the standard
markup language for creating web pages and web applications.
Purpose: It describes the structure of a web page using markup.
History: Created by Tim Berners-Lee in 1991, HTML has evolved over
time, with HTML5 being the latest version.
BlueCrest Liberia 13
Basic Structure of an HTML Document
HTML Document Structure:
<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the document.
<title>: Specifies the title of the document, shown in the browser's title bar.
<body>: Contains the content of the HTML document.
BlueCrest Liberia 14
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text on my website.</p>
</body>
</html>
BlueCrest Liberia 15
HTML Elements and Tags
Elements: The building blocks of HTML, defined by tags.
Tags: Used to create elements, typically in pairs (opening tag <tag> and
closing tag </tag>).
Self-closing Tags: Some tags do not have a closing tag (e.g., <img>,
<br>).
Nesting Elements: Placing elements inside other elements.
BlueCrest Liberia 16
Common HTML Elements
Headings: <h1> to <h6> define HTML headings.
o <h1>Heading 1</h1>
o <h2>Heading 2</h2>
o <h3>Heading 3</h3>
o <h4>Heading 4</h4>
o <h5>Heading 5</h5>
o <h6>Heading 6</h6>
BlueCrest Liberia 17
Common HTML Elements
Paragraphs: <p> defines a paragraph.
o <p>This is a paragraph.</p>
Links: <a> defines a hyperlink.
o Attributes: href specifies the URL of the link.
o <a href="[Link] [Link]</a>
BlueCrest Liberia 18
Common HTML Elements
Images: <img> embeds an image.
o Attributes: src specifies the path to the image, alt provides
alternative text.
o <img src="[Link]" alt="Description of the image">
BlueCrest Liberia 19
HTML Attributes
Definition: Attributes provide additional information about HTML
elements.
Syntax: Placed within the opening tag of an element.
Common Attributes:
o href for links.
o src for images.
o alt for alternative text.
o class for CSS class names.
o id for unique identification.
BlueCrest Liberia 20
Inline vs. Block Level Elements
Block Elements Inline Elements
Start on a new line Don’t start on a new line
Take up full available width Take up only the necessary width
Eg. <p><h1>-<h6><div> Eg. <a><span><button><b>
BlueCrest Liberia 21
Common HTML Elements
HTML Lists
o Unordered Lists: <ul> creates a list with bullet points.
<ul> In HTML and markdown, unordered lists are used to group
items that do not have a hierarchical order or sequence. Here
<li>Item 1</li> are the types of bullets typically used for unordered lists:
<li>Item 2</li>
<li>Item 3</li> Disc: A filled circle (default style).
</ul> Circle: A ring or hollow circle.
Square: A filled square.
BlueCrest Liberia 22
Common HTML Elements
HTML Lists
o Ordered Lists: <ol> creates a numbered list
<ol> In HTML, ordered lists are created with the <ol> tag and each item
<li>First item</li> in the list is defined with the <li> tag. There are different types of
<li>Second item</li> numbering styles for ordered lists, which can be specified using the
<li>Third item</li> type attribute:
</ol> Type “1”: The default, represents numbers (1, 2, 3, …).
Type “A”: Represents uppercase letters (A, B, C, …).
Type “a”: Represents lowercase letters (a, b, c, …).
Type “I”: Represents uppercase Roman numerals (I, II, III, …).
Type “i”: Represents lowercase Roman numerals (i, ii, iii, …).
BlueCrest Liberia 23
Common HTML Elements
HTML Lists
o Nested Lists: Lists within lists
<ul>
Nested lists can be quite useful for organizing information
<li>Item 1 in a hierarchical manner. Let’s take a look at how you can
<ul> create nested lists in Markdown:
<li>Subitem 1.1</li>
<li>Subitem 1.2</li> 1. Ordered (Numbered) Nested List:
o Start with the main list item.
</ul> </li> o Indent the sub-items using spaces or tabs.
<li>Item 2</li> o Use numbers to indicate the order of sub-items.
</ul>
BlueCrest Liberia 24
<table>
Common HTML Elements <caption>Example Table</caption>
<tr>
HTML Tables <th>Header 1</th>
<th>Header 2</th>
Table Elements: </tr>
<tr>
o <table>: Defines the table. <td>Data 1</td>
o <td>Data 2</td>
<tr>: Defines a table row.
</tr>
o <td>: Defines a table cell. <tr>
o <th>: Defines a table header cell. <td>Data 3</td>
o <caption>: Defines a table caption. <td>Data 4</td>
</tr>
</table>
BlueCrest Liberia 25
Common HTML Elements
HTML Forms
Purpose: Collect user input.
Form Elements: <input type="button">
o <form>: Defines the form. <input type="checkbox">
o <input>: Defines an input field. <input type="email">
<input type="file">
o <label>: Defines a label for an input element. <input type="password">
o <textarea>: Defines a multi-line text input. <input type="radio">
o <button>: Defines a clickable button. <input type="search">
<input type="submit">
o <select>: Defines a drop-down list.
BlueCrest Liberia 26
Common HTML Elements
HTML Forms
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="message">Message:</label>
<textarea id="message"
name="message"></textarea>
<button type="submit">Submit</button>
</form>
BlueCrest Liberia 27
Common HTML Elements
Form Validation
Built-in Validation: HTML5 provides built-in validation for certain input
types.
Required Attribute: Ensures the input field is not empty.
Pattern Attribute: Validates input against a regular expression.
<form>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
<button type="submit">Submit</button>
</form>
BlueCrest Liberia 28
Common HTML Elements
HTML Semantic Elements
Purpose: Provide meaning to the web page structure.
Examples:
o <header>: Defines a header for a document or section.
o <nav>: Defines navigation links.
o <main>: Defines the main content of the document.
o <section>: Defines a section in a document.
o <article>: Defines an independent piece of content.
o <aside>: Defines content aside from the main content.
o <footer>: Defines a footer for a document or section.
BlueCrest Liberia 29
Common HTML Elements
Benefits of Using Semantic HTML
SEO: Improves search engine optimization by providing meaningful content
structure.
Accessibility: Enhances accessibility for screen readers and assistive
technologies.
Maintainability: Makes the code easier to read, understand, and maintain.
Collaborative Development: Facilitates better collaboration among
developers by using a standard structure.
BlueCrest Liberia 30
Common HTML Elements
HTML5 New Features
New Elements:
<audio> and <video>: Embed media content.
<canvas>: Draw graphics on the fly.
<datalist>: Provides an autocomplete feature for input elements.
Form Enhancements:
New input types: email, date, number, etc.
Placeholder attribute for providing hints.
BlueCrest Liberia 31
Common HTML Elements
HTML Best Practices
o Write Clean and Readable Code:
Use proper indentation.
Close all tags properly.
Use lowercase for element names and attributes.
o Use Semantic Elements:
Use HTML5 semantic elements to improve the readability and
accessibility of the code.
o Optimize Images and Media:
Use appropriate formats and sizes to ensure fast loading times.
BlueCrest Liberia 32
Common HTML Elements
Assignment:
Create a personal webpage using HTML.
Include the following elements:
Heading and subheading.
Paragraphs of text.
Links to other websites.
An image.
A list (ordered or unordered).
A table.
A form to collect user input.
Use semantic elements where appropriate.
BlueCrest Liberia 33
Prince Emmanuel Ndoinjeh
+231555169548
Bluecrest Liberia
Thank You!
BlueCrest Liberia 34