1.
HTML Basics
HTML Page Structure
1: HTML Page Structure
An HTML page typically starts with a <!DOCTYPE html> declaration to define the document type and
version of HTML. This is followed by an <html> tag that encompasses the entire document. Inside the
<html> tag, there are two main sections:
<head> Section:
o Contains meta-information about the document, such as its title, character set, linked stylesheets,
and scripts.
o Common tags within the <head> section include <title>, <meta>, <link>, and <script>.
<body> Section:
o Contains the content of the document that is displayed to the user, such as headings, paragraphs,
images, links, and other elements.
Example: Basic HTML Template
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Page Linking in HTML
2: Page Linking in HTML
Links between pages are created using anchor tags (<a>). The href attribute specifies the URL of the page
the link goes to. Links can be absolute (pointing to an entire URL) or relative (pointing to a file within the
same site).
Absolute URL: Links to an entire URL, including the domain.
html
Copy code
<a href="https://www.example.com">Visit Example.com</a>
Relative URL: Links to a file within the same site.
html
Copy code
<a href="page2.html">Link to Page 2</a>
Example:
html
Copy code
<a href="page2.html">Link to Page 2</a>
Forms & Inputs
3: Forms & Inputs
Forms are used to collect user input. The <form> element acts as a container for various types of input
elements. The action attribute specifies where to send the form data when submitted, and the method
attribute specifies the HTTP method to use (GET or POST).
Common Input Elements:
o <input type="text">: Single-line text input.
o <input type="submit">: Submit button.
o <textarea>: Multi-line text input.
o <select>: Dropdown list.
Example: Basic Form with Text Input and Submit Button
html
Copy code
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
Inline & Block Elements
4: Inline & Block Elements
HTML elements are either inline or block-level.
Inline Elements:
o Do not start on a new line.
o Only take up as much width as necessary.
o Examples include <span>, <a>, and <img>.
Block Elements:
o Start on a new line.
o Take up the full width available.
o Examples include <div>, <h1>-<h6>, and <p>.
Example:
html
Copy code
<div>This is a block element.</div>
<span>This is an inline element.</span>
2. Introduction to CSS
CSS Documents & The Cascade
5: CSS Documents & The Cascade
CSS (Cascading Style Sheets) is used to style HTML elements. Styles can be applied in three ways:
Inline Styles: Added directly to HTML elements using the style attribute.
html
Copy code
<p style="color: blue;">This is a blue paragraph.</p>
Internal Styles: Defined within a <style> tag in the <head> section.
html
Copy code
<style>
p { color: blue; }
</style>
External Styles: Linked to an external CSS file using the <link> tag.
html
Copy code
<link rel="stylesheet" href="styles.css">
Example: External CSS File Linked to HTML
html
Copy code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph styled by an external CSS file.</p>
</body>
</html>
Selectors, Properties & Values
6: Selectors, Properties & Values
CSS rules consist of selectors, properties, and values.
Selectors: Target HTML elements to apply styles to.
o Examples: p, .className, #idName.
Properties: Define which style aspects to modify.
o Examples: color, font-size, margin.
Values: Specify the settings for the properties.
o Examples: blue, 16px, 10px.
Example:
css
Copy code
p { color: blue; }
Classes & IDs
7: Classes & IDs
Classes and IDs are used to target and style specific elements.
Class Selector: Targets multiple elements. Denoted with a period (.).
css
Copy code
.className { color: red; }
ID Selector: Targets a single unique element. Denoted with a hash (#).
css
Copy code
#idName { color: green; }
Example:
html
Copy code
<p class="className">This paragraph is styled with a class.</p>
<p id="idName">This paragraph is styled with an ID.</p>
Specificity in CSS
8: Specificity in CSS
Specificity determines which styles are applied when multiple rules target the same element.
Order of Specificity:
1. Inline styles (highest specificity)
2. IDs
3. Classes, attributes, and pseudo-classes
4. Elements and pseudo-elements (lowest specificity)
Example of Specificity Calculation:
css
Copy code
p { color: blue; } /* Element selector */
.className { color: green; } /* Class selector */
#idName { color: red; } /* ID selector */
Example:
html
Copy code
<p id="idName" class="className">This text will be red due to the ID selector's higher
specificity.</p>
Setting Widths & Heights
9: Setting Widths & Heights
The width and height properties control the dimensions of an element. These can be set using various
units, such as pixels (px), percentages (%), and relative units like em and rem.
Example:
css
Copy code
div {
width: 100px;
height: 200px;
background-color: lightblue;
}
Example HTML:
html
Copy code
<div>This div has a width of 100px and a height of 200px.</div>
Length Units
10: Length Units
CSS provides different units to define lengths:
Absolute Units: Fixed sizes.
o Examples: px (pixels), cm (centimeters), in (inches).
Relative Units: Relative to other measurements.
o Examples: em (relative to the font-size of the element), rem (relative to the font-size of the root
element), % (percentage of the parent element).
Example:
css
Copy code
div {
margin: 1rem; /* Margin relative to the root element's font size */
}
Colors & Color Types
11: Colors & Color Types
Colors in CSS can be specified in several ways:
Named Colors: Predefined color names.
css
Copy code
color: red;
Hexadecimal: #RRGGBB format.
css
Copy code
color: #ff0000;
RGB: rgb(red, green, blue) format.
css
Copy code
color: rgb(255, 0, 0);
RGBA: rgba(red, green, blue, alpha) format, including transparency.
css
Copy code
color: rgba(255, 0, 0, 0.5);
Example:
css
Copy code
p {
color: #ff0000; /* Hexadecimal */
background-color: rgb(255, 255, 0); /* RGB */
}
Padding
12: Padding
Padding is the space between the content of an element and its border. It can be set for all sides or
individually for top, right, bottom, and left.
Example:
css
Copy code
div {
padding: 10px; /* All sides */
}
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
Margin
13: Margin
Margin is the space outside the element's border, between the element and its surrounding elements. Like
padding, margin can be set for all sides or individually.
Example:
css
Copy code
div {
margin: 20px; /* All sides */
}
div {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
}
Borders
14: Borders
Borders are the lines surrounding an element. You can control the width, style, and color of borders.
Border Width: Can be set using units like px.
Border Style: Examples include solid, dashed, and dotted.
Border Color: Can be set using color values.
Example:
css
Copy code
div {
border: 1px solid black; /* Solid black border */
}
The Box Model
15: The Box Model
The CSS box model describes the rectangular boxes generated for elements in a document tree and
consists of:
Content: The actual content of the element (e.g., text, image).
Padding: Space between the content and the border.
Border: Surrounds the padding (if any) and content.
Margin: Space outside the border.
Example:
html
Copy code
<div style="width: 100px; padding: 10px; border: 5px solid black; margin: 20px;">
This is a box model example.
</div>
Visibility
16: Visibility
The visibility property controls whether an element is visible or hidden, without affecting the layout.
Visible: The element is visible.
Hidden: The element is hidden but still takes up space in the layout.
Example:
css
Copy code
div {
visibility: hidden; /* The element is hidden */
}
Working with Fonts
17: Working with Fonts
CSS provides several properties to style text:
font-family: Defines the font type.
font-size: Defines the size of the font.
font-weight: Controls the boldness of the text.
font-style: Controls the style (e.g., normal, italic).
Example:
css
Copy code
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
Element Flow in HTML and CSS
18: Element Flow in HTML and CSS
Elements in HTML flow naturally from top to bottom. Block-level elements stack vertically, while inline
elements flow horizontally.
Normal Flow: Default flow of elements without any positioning.
Relative Flow: Adjusts elements' positions relative to their normal flow.
Example:
html
Copy code
<div>Block Element 1</div>
<div>Block Element 2</div>
<span>Inline Element</span><span>Next to each other</span>
Float Layout
19: Float Layout
The float property is used to position elements to the left or right, allowing text and inline elements to
wrap around them.
Left Float: The element floats to the left.
Right Float: The element floats to the right.
Clear: Stops elements from wrapping around a floated element.
Example:
css
Copy code
div {
float: left;
width: 100px;
margin: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
Position Property
20: Position Property
The position property specifies the positioning method for an element:
Static: Default value; elements are positioned according to the normal flow.
Relative: Positioned relative to its normal position.
Absolute: Positioned relative to the nearest positioned ancestor.
Fixed: Positioned relative to the browser window.
Sticky: A mix of relative and fixed, depending on scroll position.
Example:
css
Copy code
div {
position: absolute;
top: 50px;
left: 100px;
}
CSS Pseudo-Classes
21: CSS Pseudo-Classes
Pseudo-classes allow you to style elements based on their state or position.
:hover: Applies styles when the user hovers over an element.
:first-child: Applies styles to the first child of a parent.
:nth-child(n): Applies styles to the nth child.
Example:
css
Copy code
a:hover {
color: red; /* Change link color on hover */
}
p:first-child {
font-weight: bold; /* Bold the first paragraph */
}
3. Introduction to Bootstrap
Introduction to Bootstrap
22: Introduction to Bootstrap
Bootstrap is a popular front-end framework for building responsive websites. It includes a set of CSS and
JavaScript tools for layout, typography, forms, navigation, and more.
Advantages of Bootstrap:
o Responsive design with a mobile-first approach.
o Pre-built components and utilities for rapid development.
o Cross-browser compatibility.
Example:
html
Copy code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
Key Elements
23: Key Elements
Bootstrap provides several key elements, including a grid system, typography, and form controls. The grid
system is based on a 12-column layout, allowing for responsive design across different screen sizes.
Example: Bootstrap Grid System
html
Copy code
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
Source Code Elements
24: Source Code Elements
Understanding the source code of Bootstrap can help in customizing and extending the framework.
Bootstrap's source code includes CSS and JavaScript files that provide the styling and interactivity for its
components.
Example:
CSS: bootstrap.min.css
JavaScript: bootstrap.bundle.min.js
Screen Sizes
25: Screen Sizes
Bootstrap handles different screen sizes using breakpoints, which define the responsive behavior of
elements. The breakpoints are based on common device widths, such as mobile, tablet, and desktop.
Common Breakpoints:
o sm (Small devices, 576px and up)
o md (Medium devices, 768px and up)
o lg (Large devices, 992px and up)
o xl (Extra large devices, 1200px and up)
Example: Media Queries in Bootstrap
css
Copy code
@media (min-width: 768px) {
.example-class {
color: blue;
}
}
4. Key Bootstrap Components
Bootstrap Alerts
26: Bootstrap Alerts
Bootstrap alerts are used to display important messages to users. They come in various contextual styles
such as success, danger, warning, and info.
Example:
html
Copy code
<div class="alert alert-warning" role="alert">
Warning! This is a warning alert.
</div>
Bootstrap Badge
27: Bootstrap Badge
Badges are small count indicators or labels that can be used with various components like buttons, lists,
and nav items.
Example:
html
Copy code
<span class="badge bg-primary">4</span>
Bootstrap Breadcrumbs
28: Bootstrap Breadcrumbs
Breadcrumbs are navigation aids that indicate the current page’s location within a navigational hierarchy.
Example:
html
Copy code
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Bootstrap Buttons & Button Groups
29: Bootstrap Buttons & Button Groups
Bootstrap provides pre-styled buttons with various contextual colors. Button groups allow you to group a
series of buttons together on a single line.
Example:
html
Copy code
<button type="button" class="btn btn-primary">Primary Button</button>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Bootstrap Cards
30: Bootstrap Cards
Cards are flexible content containers with various options for headers, footers, content, images, and more.
They are ideal for displaying information in a concise, stylish format.
Example:
html
Copy code
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Bootstrap Carousels
31: Bootstrap Carousels
Carousels are slideshows for cycling through a series of content, such as images or text. They support
controls, indicators, and captions.
Example:
html
Copy code
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-
to="0" class="active" aria-current="true" aria-label=" 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-
to="1" aria-label=" 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-
to="2" aria-label=" 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Bootstrap Collapse
32: Bootstrap Collapse
Collapse components are used to toggle the visibility of content. They are typically used for accordions or
expanding/collapsing sections.
Example:
html
Copy code
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample"
role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-
target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by
default but revealed when the user activates the relevant trigger.
</div>
</div>
Bootstrap Dropdowns
33: Bootstrap Dropdowns
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made
interactive with a combination of the dropdown JavaScript plugin and additional HTML.
Example:
html
Copy code
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Bootstrap Forms
34: Bootstrap Forms
Bootstrap forms provide styles for different input types, labels, and form groups. They include validation
states, custom checkboxes and radio buttons, and responsive layouts.
Example:
html
Copy code
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-
describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone
else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Images
35: Bootstrap Images
Bootstrap provides classes to style images with responsive behaviors and rounded corners.
.img-fluid: Makes the image responsive by scaling to the parent element.
.rounded: Applies rounded corners to the image.
.rounded-circle: Makes the image circular.
Example:
html
Copy code
<img src="..." class="img-fluid rounded" alt="Responsive image">
Bootstrap Layouts
36: Bootstrap Layouts
Bootstrap’s grid system allows for responsive layouts with ease. The grid is divided into 12 columns, and
you can span any number of columns.
Example:
html
Copy code
<div class="container">
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Bootstrap Modal
37: Bootstrap Modal
Modals are dialog boxes that overlay the main content. Bootstrap modals include options for titles, bodies,
and footers, and are triggered by buttons or links.
Example:
html
Copy code
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootstrap Navbar
38: Bootstrap Navbar
The Navbar is a responsive navigation header that can include links, branding, togglers, and other
elements.
Example:
html
Copy code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</nav>
Bootstrap Pagination
39: Bootstrap Pagination
Pagination is used for dividing content into multiple pages. Bootstrap provides a simple way to implement
pagination.
Example:
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
Bootstrap Tooltips
40: Bootstrap Tooltips
Tooltips provide additional information on hover or focus. Bootstrap tooltips are powered by Popper.js
and can be customized with various options.
Example:
html
Copy code
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-
placement="top" title="Tooltip on top">
Tooltip on top
</button>
5. Conclusion
Conclusion
41: Conclusion
Key Takeaways:
CSS is essential for styling and layout.
Bootstrap simplifies responsive design with its grid system and components.
Combining HTML, CSS, and Bootstrap allows for rapid and efficient web development.
