0% found this document useful (0 votes)

17 views64 pages

HTML Basics for Front End Development

The Meta Front End Developer Programme covers essential topics in front-end development, starting with HTML basics, including structure, tags, and elements. It progresses to creating simple web pages, linking multiple pages, adding images, tables, and forms, while emphasizing the importance of web accessibility and the Document Object Model (DOM). The course includes practical examples and coding exercises to reinforce learning.

Uploaded by

dikshashekhawat623

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

17 views64 pages

HTML Basics for Front End Development

Uploaded by

dikshashekhawat623

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

Meta Front End Developer Programme:

1. Course 1: Introduction to Front end Development

a. Module 1:handwritten notes:

b. Module 2:
Getting Started with html
i. Video 1:
The content focuses on the basics of HTML and its role in web development.

Understanding HTML

 HTML (Hypertext Markup Language) is the foundational structure of web pages, similar to the
frame of a building.
 It consists of elements and tags, with HTML files typically having a .html suffix.

HTML Tags and Elements

 Each HTML element has an opening tag and often a closing tag, which define the content within.
 Elements can be nested, and some can be self-closing, like the line break tag(<br>).

HTML Standards

 The HTML specification, maintained by the World Wide Web Consortium (W3C), outlines the rules
for HTML elements and tags.
 The current version is HTML5, which standardizes how browsers interpret HTML documents to
display web pages.

ii. Video 2:

This video lecture focuses on the fundamental structure of an HTML document and guides you through
creating a simple webpage for a restaurant called Little Lemon.

HTML Document Structure

 The video explains that HTML documents can be viewed locally in a web browser without needing
to be hosted on a server.
 It introduces the standard HTML structure, starting with the DOCTYPE declaration, followed by the
HTML root element, which contains the head and body elements.

Head and Body Elements

 The head element contains metadata about the document, such as the title displayed in the browser
tab and links to CSS files.
 The body element holds the content of the webpage, including headings, paragraphs, images, and
videos.

Creating a Simple Webpage

 The instructor demonstrates adding a main heading using the H1 tag and subheadings for menu items
using the H2 tag.
 The video concludes with instructions on saving the HTML file and viewing it in a web browser,
encouraging practice with basic HTML tags.
 Example:

<!DOCTYPE html>
<html>
<head>
<title>Little Lemon - Our Menu</title>
</head>
<body>
<h1>Our Menu</h1>
<h2>Falafel</h2>
<p>Chickpea, herbs, and spices.</p>
<h2>Pasta Salad</h2>
<p>Lettuce, vegetables, and mozzarella.</p>
</body>
</html>

Emphasis vs. Italics

By default both tags will have the same visual effect in the web browser. The only difference is the
meaning.

Emphasis tags stress the text contained in them

I <em>really</em> want ice cream.

My favourite book is <i>Dracula</i>.

Lists
You can add lists to your web pages. There are two types of lists in HTML.

Lists can be unordered using the <ul> tag. List items are specified using the <li> tag, for example:

<ul>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>

Lists can also be ordered using the <ol> tag. Again, list items are specified using the <li> tag.
<ol>
<li>Rocky</li>
<li>Rocky II</li>
<li>Rocky III</li>
</ol>

Div tags
A <div> tag defines a content division in a HTML document. It acts as a generic container and has no
effect on the content unless it is styled by CSS.

The following example shows a <div> element that contains a paragraph element:

<div>
<p>This is a paragraph inside a div</p>
</div>

As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a small CSS rule that
styles all divs on the page.

Don't worry about the meaning of the CSS just yet, you'll explore CSS further in a later lesson. In
summary, you're applying a rule that adds a border and some visual spacing to the element.

Div elements are an important part of building webpages. More advanced usage of div elements will be
explored in another course.

Comments
If you want to leave a comment in the code for other developers, it can be added as:

The comment will not be displayed in the web browser.

Mark as completed
Like
Dislike
Report an issue

iii. Video 3
The course content focuses on how to create a website by linking multiple web pages together using
HTML.

Creating a New Web Page

 A new webpage is created by adding a file named "[Link]" to the project folder.
 The new page includes a heading and a paragraph with the restaurant's address.

Linking Web Pages

 The anchor tag (<a>) is used to create hyperlinks between web pages.
 The href attribute specifies the file name to link to, allowing navigation from one page to another.

Testing the Link

 After saving changes, the [Link] file is opened in a web browser to test the link.
 Clicking the link successfully opens the [Link] file, demonstrating the connection between
the pages.

Here are two examples illustrating how to link web pages using HTML:

Example 1: Linking to a Location Page

1. Create a new file named [Link] with the following content:

2. <!DOCTYPE html>

3. <html>

4. <head>

5. <title>Our Location</title>

6. </head>

7. <body>

8. <h1>Our Location</h1>

9. <p>123 Rome Road, Main District, Capital City</p>

10. </body>

</html>

11. In your main file ([Link]), add a link to the location page:

12. <!DOCTYPE html>

13. <html>

14. <head>

15. <title>Welcome to Little Lemon</title>

16. </head>

17. <body>
18. <h1>Welcome to Little Lemon</h1>

19. <p>Visit us at our location:</p>

20. <a href="[Link]">Our Location</a>

21. </body>

</html>

Example 2: Linking to a Menu Page

1. Create another file named [Link] with the following content:

2. <!DOCTYPE html>

3. <html>

4. <head>

5. <title>Menu</title>

6. </head>

7. <body>

8. <h1>Menu</h1>

9. <p>Check out our delicious offerings!</p>

10. </body>

</html>

11. In your main file ([Link]), add a link to the menu page:

<a href="[Link]">View Menu</a>

These examples show how to create separate HTML files and link them together using anchor tags,
allowing users to navigate between different pages of your website.
iv. Video 4:
In this course content, you will learn how to effectively add images to HTML documents using the image
tag.

Understanding the Image Tag

 The image tag (IMG) is used to link to image files, creating a placeholder for images on a web
page.
 The source (src) attribute specifies the path to the image file, such as "[Link]" and
"[Link]".
Setting Image Dimensions

 You can control the size of images by adding width and height attributes directly in the image tag.
 For example, setting width to 240 pixels and height to 135 pixels ensures images are displayed at
the desired size.

Importance of Alternative Text

 Including a short description for images using the alternative text (alt) attribute is essential for
accessibility.
 This text is not visible on the site but is read by assistive technologies, enhancing user experience
for those with disabilities.

By mastering these concepts, you can enhance the visual appeal and accessibility of your web pages.

Here are two examples of how to use the image tag in HTML:

Example 1: Adding a Falafel Image

<img src="[Link]" width="240" height="135" alt="A falafel">

 src: Specifies the image file "[Link]".

 width: Sets the width to 240 pixels.
 height: Sets the height to 135 pixels.
 alt: Provides a description for accessibility.

Example 2: Adding a Salad Image

<img src="[Link]" width="240" height="135" alt="A pasta salad">

 src: Specifies the image file "[Link]".

 width: Sets the width to 240 pixels.
 height: Sets the height to 135 pixels.
 alt: Provides a description for accessibility.

These examples demonstrate how to properly include images in your HTML documents while ensuring
they are accessible.

v. Video 5:
The content focuses on how to create and style an HTML table to display prices for a website.

Creating an HTML Table

 Use the <table> tag to start the table structure.

 Add <tr> tags for each row and <td> tags for the data within those rows.
Adding Data to the Table

 Populate the first row with a dish name (e.g., Falafel) and its price (e.g., $10).
 Repeat for additional rows, such as Pasta Salad with its price.

Enhancing Table Clarity

 Introduce headers using <th> tags for better organization.

 Add a new row at the top for headings like "Dish" and "Price."

Basic Table Styling

 Apply simple CSS by adding a border to the table for visual clarity.
 Future lessons will cover more advanced styling techniques.

Congratulations on learning how to add tables to HTML files!

Here are two examples of how to create an HTML table for displaying prices:

Example 1: Simple Price List

<table>

<tr>

<th>Price</th>

</tr>

<tr>

<td>Falafel</td>

</tr>

<tr>

<td>Pasta Salad</td>

</tr>

</table>

Example 2: Expanded Price List with More Dishes

<table>

<th>Price</th>

</tr>

<tr>

<td>Falafel</td>

</tr>

<tr>

<td>Pasta Salad</td>

</tr>

<tr>

<td>Grilled Chicken</td>

</tr>

<tr>

<td>Vegetable Stir Fry</td>

</tr>

</table>

Here’s an example of how to style an HTML table using CSS to add borders and improve its appearance:

HTML with CSS Styling

<!DOCTYPE html>

<head>

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

<title>Styled Price List</title>

<style>

table {
width: 50%;

border-collapse: collapse; /* Merges borders */

margin: 20px auto; /* Centers the table */

th, td {

border: 1px solid #000; /* Adds a solid border */

padding: 10px; /* Adds space inside cells */

text-align: left; /* Aligns text to the left */

th {

background-color: #f2f2f2; /* Light gray background for headers */

</style>

</head>

<body>

<table>

<tr>

<th>Price</th>

</tr>

<tr>

<td>Falafel</td>

</tr>

<tr>

<td>Pasta Salad</td>

</tr>

<tr>

<td>Grilled Chicken</td>
<td>$15</td>

</tr>

<tr>

<td>Vegetable Stir Fry</td>

</tr>

</table>

</body>

</html>

Key CSS Styles Explained

 border-collapse: collapse;: Merges the borders of adjacent cells into a single border.
 border: 1px solid #000;: Adds a solid black border around each cell.
 padding: 10px;: Provides space inside each cell for better readability.
 background-color: #f2f2f2;: Sets a light gray background for the header cells.

This example creates a visually appealing table with clear lines and spacing, making it easy to read. You
can adjust the styles as needed!

vi. Video 6:
This course item focuses on the creation and functionality of HTML forms, which are essential for user
interaction on websites.

Understanding HTML Forms

 HTML forms allow users to input data, such as credit card details during online shopping.
 Forms are defined using the <form> tag, with an optional action attribute to specify where to
send the data.

Form Submission Methods

 The method attribute can be set to either GET or POST.

 GET retrieves information from the server, while POST sends data to the server.

Input Types and Labels

 Input fields are created using the <input> tag, with various types like text, password, checkbox,
and radio buttons.
 Labels can be added using the <label> tag to enhance user experience.
Additional Input Elements

 For multi-line text, the <textarea> tag is used, and for dropdown lists, the <select> tag
with <option> tags is utilized.
 Different input types cater to various user needs, improving form usability.

Here are two examples of HTML forms that illustrate different input types:

Example 1: Simple Login Form

This form allows users to enter their username and password.

<form action="/submit-login" method="POST">

<label for="username">Username:</label>

<input type="text" id="username" name="username" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" required>

<input type="submit" value="Login">

</form>

Example 2: Registration Form with Checkboxes

This form collects user information and preferences.

<form action="/submit-registration" method="POST">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="newsletter">Subscribe to newsletter:</label>

<input type="checkbox" id="newsletter" name="newsletter" value="yes">

<label for="gender">Gender:</label>

<input type="radio" id="male" name="gender" value="male">

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label>
<input type="submit" value="Register">

</form>

vii. Video 7:
The content focuses on the Document Object Model (DOM) and its role in web development.

Understanding the DOM

 The DOM is a tree structure that represents the objects in an HTML document, allowing
JavaScript to interact with and manipulate web pages.
 Each HTML element is represented as an object in the DOM, starting from the root html object,
which contains head and body objects.

Interacting with the DOM using JavaScript

 JavaScript can access and modify HTML attributes and content, enabling dynamic updates to
web pages, such as changing a digital clock or responding to user actions.
 Developers can add, delete, or animate DOM objects, enhancing user experience on websites.

Applications of the DOM

 Common uses include updating content, responding to user interactions (like clicks), and
animating elements for visual effects.
 Libraries like React rely on the DOM to create interactive user experiences, showcasing its
importance in modern web development.

viii. Video 8:
The content focuses on the importance of web accessibility in web development, emphasizing the need
for inclusive design.

Understanding Web Accessibility

 Web accessibility ensures that everyone, including individuals with disabilities, can access and
interact with websites.
 It encompasses various disabilities, including visual, auditory, cognitive, and physical
impairments.

Assistive Technologies

 Assistive technologies like screen readers and speech recognition software help users with
disabilities navigate the web.
 Subtitles and video scripts support those with audio and visual disabilities.

Best Practices for Accessibility

 Incorporating accessibility from the beginning of a project is crucial; retrofitting can be
challenging.
 Using proper HTML structure and elements enhances accessibility, making it easier for assistive
technologies to interpret content.

CSS Basics
i. Video 1:

🔁 1. Live Server (by Ritwick Dey)

✅ What it does:

 Launches a local development server.

 Opens your web page in a browser.
 Automatically reloads the page when you save changes to your files (HTML, CSS, JS).
 Good for full websites and projects with multiple files and folders.

🚀 How to use:

1. Install the Live Server extension from the VS Code Extensions tab.
2. Open your HTML file.
3. Right-click and choose "Open with Live Server" or click “Go Live” at the bottom-right of VS
Code.
4. Your page will open in the browser (e.g., [Link]
5. Edit and save to see changes instantly.

‍2. Live Preview (by Microsoft)

✅ What it does:

 Shows a preview of your webpage directly inside VS Code (no external browser).
 Updates in real time inside the editor.
 Does not use a full development server like Live Server.
 Great for quick edits or learning HTML/CSS.

📌 Use Cases:

 Quick preview of small static pages.

 When you don’t want to switch between browser and VS Code.
 When working in a limited or educational environment (like on Coursera or GitHub Codespaces).

🚀 How to use:

1. Install the Live Preview extension (by Microsoft).

2. Open your HTML file.
3. Click the "Open Preview" button in the top-right of the file tab (or use command palette: Live
Preview: Show Preview).
4. See live updates within the editor.
The content focuses on the basics of CSS (Cascading Style Sheets) and its role in web development.

Understanding CSS

 CSS is compared to the paint and decorations of a building, while HTML is the structure. CSS
controls how HTML elements are displayed in a web browser.
 A CSS rule consists of a selector, which targets HTML elements, and a declaration block that
contains property-value pairs.

Creating CSS Rules

 The selector specifies which HTML elements to style, such as changing the color of all <h1> tags.
 Each declaration in the block includes a property (like color) and a value (like blue), which defines
how the selected elements appear.

Using CSS with HTML

 To apply CSS, a stylesheet (e.g., [Link]) must be linked in the HTML file's head section using
the <link> tag.
 Specificity rules dictate which CSS rules apply when multiple rules target the same element, with
ID selectors taking precedence over type selectors.

Practical Application

 The content encourages practicing CSS by creating and styling HTML documents, emphasizing
the importance of understanding selectors and declaration blocks.
 Here are two examples of CSS styling for HTML elements:
 Example 1: Styling All <h1> Elements

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

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

 <link rel="stylesheet" href="[Link]">

 <title>Example 1</title>

 </head>

 <body>

 <h1>Welcome to My Website</h1>

 </body>

 </html>
 [Link]

 h1 {

 color: blue; /* Text color */

 background-color: lightgray; /* Background color */

 }

 Result: All <h1> elements will display blue text on a light gray background.
 Example 2: Styling a Specific <h1> Element with an ID

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

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

 <link rel="stylesheet" href="[Link]">

 <title>Example 2</title>

 </head>

 <body>

 <h1 id="header-one">Chapter One</h1>

 </body>

 </html>

 [Link]

 #header-one {

 color: green; /* Text color for the specific h1 */

 }

 Result: The <h1> element with the ID "header-one" will display green text, overriding the
general <h1> styling if it exists.

In CSS, a selector and a declaration are key components of a CSS rule. Here’s a brief explanation of
each:

Selector

 The selector specifies which HTML element(s) you want to style. It can target elements by their
type, class, ID, or other attributes.
 Example: In the rule #header-one { ... }, #header-one is the selector that targets the HTML
element with the ID "header-one".

Declaration

 The declaration consists of one or more property-value pairs that define the styles to be applied
to the selected element(s).
 Each declaration is enclosed in curly braces {} and ends with a semicolon ;.
 Example: In the rule #header-one { color: green; font-size: 24px; }, color: green; and font-size:
24px; are declarations. Here, color and font-size are properties, and green and 24px are their
respective values.

Complete Example

Here’s a complete example combining both:

#header-one {

color: green; /* Declaration: sets text color to green */

font-size: 24px; /* Declaration: sets font size to 24 pixels */

In this example:

 Selector: #header-one
 Declarations:
o color: green;
o font-size: 24px;

 Different types of selectors

 When styling a web page, there are many types of selectors available that allow developers to be
as broad or as specific as they need to be when selecting HTML elements to apply CSS rules to.
 Here you will learn about some of the common CSS selectors that you will use as a developer.
 Element Selectors
 The element selector allows developers to select HTML elements based on their element type.
 For example, if you use p as the selector, the rule will apply to all p elements on the webpage.
 HTML
 <p>In a hidden land...</p>
 CSS
 }
 ID Selectors
 The ID selector uses the id attribute of an HTML element. Since the id is unique within a webpage,
it allows the developer to select a specific element for styling. ID selectors are prefixed with a #
character.
 HTML
 <span id="latest">New!</span>
 CSS
 #latest {
 background-color: purple;
 }
 Class Selectors
 Elements can also be selected based on the class attribute applied to them. The CSS rule has
been applied to all elements with the specified class name. The class selector is prefixed with a .
character.
 In the following example, the CSS rule applies to both elements as they have
the navigation CSS class applied to them.
 HTML
 <a class="navigation">Go Back</a>
 <p class="navigation">Go Forward</p>
 CSS
 .navigation {

 margin: 2px;}
 Element with Class Selector
 A more specific method for selecting HTML elements is by first selecting the HTML element, then
selecting the CSS class or ID.
 The example below selects all p elements that have the CSS class introduction applied to
them.
 HTML
 1
 <p class="introduction"></p>
 CSS
 [Link] {
 margin: 2px;
 }
 Descendant Selectors
 Descendant selectors are useful if you need to select HTML elements that are contained within
another selector.
 Let's explore an example.
 You have the following HTML structure and CSS rule.
 HTML

 </div>
 <h1>Archives</h1>
 <div>
 </div>
 <p>Subscribe for more news</p>
 </div>
 <p>The weather will be sunny</p>
 <h1>Today's Weather</h1>
 <h1>Latest News</h1>
 <div>
 <div id="blog">
 CSS
 #blog h1 {
 color: blue;
 }
 The CSS rule will select all h1 elements that are contained within the element with the ID blog.
The CSS rule will not apply to the h1 element containing the text Archives.
 The structure of a descendant selector is a CSS selector, followed by a single space character,
followed by another CSS selector.
 Multiple descendants can also be selected. For example, to select all h1 elements that are
descendants of div elements which are descendants of the blog element, the selector is
specified as follows.
 CSS
 #blog div h1 {
 color: blue;
 }
 Child Selectors
 Child selectors are more specific than descendant selectors. They only select elements that are
immediate descendants (children) of a selector (the parent).
 For example, you have the following HTML structure:
 HTML
 <div id="blog">
 <h1>Latest News</h1>
 <div>
 <h1>Today's Weather</h1>
 <p>The weather will be sunny</p>
 </div>
 <p>Subscribe for more news</p>
 </div>
 If you wanted to style the h1 element containing the text Latest News, you can use the
following child selector:
 CSS
 #blog > h1 {
 color: blue;
 }
 This will select the element with the ID blog (the parent), then it will select all h1 elements that
are contained directly in that element (the children). The structure of the child selector is a CSS
selector followed by the child combinator symbol > followed by another CSS selector.
 Note that this will not go beyond a single depth level. Therefore, the CSS rule will not be
applied to the h1 element containing the text Today's Weather.
 :hover Pseudo-Class
 A special keyword called a pseudo-class allows developers to select elements based on their
state. Don't worry too much about what that means right now. For now, let's look at how the
hover pseudo-class allows you to style an element when the mouse cursor hovers over the
element.
 The simplest example of this is changing the color of a hyperlink when it is hovered over. To do
this, you add the :hover pseudo-class to the end of the selector. In the following example,
adding :hover to the a element will change the color of the hyperlink to orange when it is
hovered over.
 CSS
 a:hover {

 color: orange;}
 This pseudo-class is very useful for creating visual effects based on user interaction.
 Other Selectors
 There are many other CSS selectors available to style your webpage.

Text and color in CSS

As you design websites, you'll be working a lot with colors and text. There are many different ways to
display text and equally as many ways to define colors.

This reading covers how text and color work in CSS.

Color

Colors are used in many CSS properties, for example:

p{
color: blue;
}

From CSS Version 3, there are five main ways to reference a color.

 By RGB value,
 By RGBA value,

 By HSL value,

 By hex value and

 By predefined color names.

RGB value

RGB is a color model that adds the colors red (R), green (G) and blue (B) together to create colors. This is
based on how the human eye sees colors.

Each value is defined as a number between 0 and 255, representing the intensity of that color.

For example, the color red would have the RGB value of 255,0,0 since the intensity of the red color
would be 100% while blue and green would be 0%.

The color black then would be 0,0,0 and the color white 255,255,255.
When using RGB values in CSS, they can be defined using the rgb keyword:

p{
color: rgb(255, 0, 0);
}

RGBA value

RGBA is an extension of RGB that add an alpha (A) channel. The alpha channel represents the opacity, or
transparency, of the color.

Similar to RGB, this is specified in CSS using the rgba keyword:

p{
color: rgba(255, 0, 0, 0.8);
}

HSL value

HSL is a newer color model defined as Hue (H), Saturation (S) and Lightness (L). The aim of the model is
to simplify mental visualization of the color that the value represents.

Think of a rainbow that has been turned into a full circle. This represents the Hue. The Hue value is the
degree value on this circle, from 0 degrees to 360 degrees. 0 is red, 120 is green and 240 is blue.

Saturation is the distance from the center of the circle to its edge. The saturation value is represented by
a percentage from 0% to 100% where 0% is the center of the circle and 100% is its edge. For example, 0%
will mean that the color is more grey and 100% represents the full color.

Lightness is the third element of this color model. Think of it as turning the circle into a 3D cylinder
where the bottom of the cylinder is more black and toward the top is more white. Therefore, lightness is
the distance from the bottom of the cylinder to the top. Again, lightness is represented by a percentage
from 0% to 100% where 0% is the bottom of the cylinder and 100% is its top. In other words, 0% will
mean that the color is more black and 100% is white.

In CSS, you use the hsl keyword to define a color with HSL.

p{
color: hsl(0, 100%, 50%);
}

Hex value

Colors can be specified using a hexadecimal value. If you're unfamiliar with hexadecimal, think of it as a
different number set.

Decimal is what you use every day. Digits range from 0 to 9 before tens and hundreds are used.

Hexadecimal is similar, except it has 16 digits. This is counted as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

A, B, C, D, E, F.

In fact, you can convert between decimal and hexadecimal. Decimal 10 is equal to hexadecimal A.
Hexadecimal F is equal to decimal 15.

Hexadecimal can also go to tens and hundreds. For example, decimal 16 is equal to
hexadecimal 10, with 10 being the next number after F.

It can be a little confusing at first but don't worry, there are plenty of converters available if you get
stuck.

Colors specified using hexadecimal are prefixed with a # symbol followed by the RGB value in
hexadecimal format.

For example, the color red which is RGB 255,0,0 would be written as hexadecimal #FF0000.

Again don't worry if you get stuck, there are plenty of converters available for this too!

Predefined color names

Modern web browsers support 140 predefined color names. These color names are for convenience
purposes and can be mapped to equivalent hex/RGB/HSL values.

Some common color names available are listed below.

black
silver
gray
white
maroon
red
purple
fuchsia
green
lime
olive
yellow
navy
blue
teal
aqua
Text

With CSS there are many ways to change how text is displayed. In this section, you'll learn the most
common text manipulation CSS properties.

Text Color

The color property sets the color of text. The following CSS sets the text color for all paragraph
elements to red.

p{
color: red;
}

Text Font and Size

There are many different fonts to display text on your computer. In simple terms, a font is a collection of
text characters written in a specific style and size.

If you've used a word processor before, you're probably familiar with the fonts Times New Roman and
Calibri.

To set the font used by text in CSS you use the font-family property.

p{
font-family: "Courier New", monospace;
}

Since computers vary in what fonts they have installed, it is recommended to include several fonts when
using the font-family property. These are specified in a fallback order, meaning that if the first font is
not available, it will check for the second font. If the second font is not available, then it will check for the
third font and so on. If none of the fonts are available, it will use the browser's default font.

To set the size of the font, the font-size property is used.

p{
font-family: "Courier New", monospace;
font-size: 12px;
}

Text Transformation

Text transformation is useful if you want to ensure the correct capitalization of the text content. In the
example below, the CSS rule will change all text in paragraph elements to uppercase using the text-
transform property:

p{
text-transform: uppercase;
}
The most commonly used values for the text-transform property are: uppercase, lowercase,
capitalize and none. The default value used is none, which means the text displays as it was
written in the HTML document.

Text Decoration

The text-decoration property is useful to apply additional decoration to text such as underlining
and line-through (strikethrough).

p{
text-decoration: underline;
}

It is possible to set the color, thickness and styling of the decoration too. In the example below, the
underline will be a solid red line that is 5 pixels thick.

p{
text-decoration: underline red solid 5px;
}

If this is confusing, don't worry. These properties can be individually set using the text-decoration-
line, text-decoration-color, text-decoration-style and text-decoration-
thickness properties. Let's use the same example again and define it using the individual properties:

p{
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}

The most common text-decoration-line values used are: underline, overline, line-
through and none. None is the default value to use no text decoration.

There are many styles available for the text-decoration-style property; solid, double,
dotted, dashed and wavy. The text-decoration-style property requires the decoration line to
be defined. If the decoration style is not specified, solid will be used.

ii. Video 2:
The content focuses on the box model in CSS, which is essential for creating effective web layouts.

Understanding the Box Model

 The box model consists of four parts: content, padding, border, and margin.
 Each part plays a role in determining the size and spacing of elements on a webpage.

Components of the Box Model

 Content: This is the actual content of the element (text or images) and its size is defined by
content width and height.
 Padding: This extends the content area, with its size calculated by adding the content size and
padding thickness on all sides.

Borders and Margins

 Border: Surrounds the padding and content, with various styles (solid, dashed) and thicknesses
(thin, medium, thick).
 Margin: Creates space between elements, calculated by adding the border box size and margin
thickness on all sides.

Practical Application

 Understanding how to manipulate these properties is crucial for web development, as they affect
the layout and user experience.

D
Diksha
in detail
Coach
Certainly! Here’s a more detailed breakdown of the box model in CSS, which is crucial for web layout
design:

Understanding the Box Model

The box model is a fundamental concept in CSS that describes how elements are structured and
displayed on a webpage. Each element is represented as a rectangular box, and the box model consists
of four main components:

1. Content
This is the actual content of the element, such as text, images, or other media.
o
o The size of the content area is defined by content width and content height.
o Browsers automatically calculate these dimensions based on the content itself, but
developers can control them using CSS properties.
2. Padding

Padding is the space between the content and the border of the box.
o
o It increases the size of the box without affecting the layout of surrounding elements.
o The total size of the padding box can be calculated as:
 Padding Box Width = Content Width + Padding Left + Padding Right
 Padding Box Height = Content Height + Padding Top + Padding Bottom
o Padding can be set individually for each side (top, right, bottom, left) using properties
like padding-top, padding-right, padding-bottom, and padding-left.
3. Border

o The border surrounds the padding and content areas.

o It can have different styles (e.g., solid, dashed) and thicknesses (e.g., thin, medium, thick).
o The size of the border box is defined as:
Border Box Width = Padding Box Width + Border Left + Border Right
 Border Box Height = Padding Box Height + Border Top + Border Bottom
o You can set the border using the border property, specifying width, style, and color.
4. Margin
o Margin is the outermost space that separates the element from other elements on the
page.
o It does not affect the size of the element itself but creates space around it.
o The margin box size can be calculated as:
 Margin Box Width = Border Box Width + Margin Left + Margin Right
 Margin Box Height = Border Box Height + Margin Top + Margin Bottom
o Margins can also be set individually for each side using properties like margin-top, margin-
right, margin-bottom, and margin-left.

Practical Application

 CSS Properties: You can manipulate the box model using various CSS properties:

o To set the content size: width, height, min-width, max-width, min-height, max-height.
To set padding: padding, padding-top, padding-right, padding-bottom, padding-left.
o
o To set borders: border, border-width, border-style, border-color.
o To set margins: margin, margin-top, margin-right, margin-bottom, margin-left.
 Example:

 .box {

 width: 200px; /* Content width */

 height: 100px; /* Content height */

 padding: 20px; /* Padding around content */

 border: 5px solid black; /* Border around padding */

 margin: 15px; /* Margin around the border */

 }

Visualizing the Box Model

To help remember the box model:

 Think of the content as yourself.

 The padding is like the thickness of your clothes.
 The border is like your silhouette or outline.
 The margin is your personal space, keeping you apart from others.

iii. Video 3:
This content focuses on understanding how CSS and HTML elements are positioned on a webpage
through document flow.
Block and Inline Elements

 Block-level elements occupy the full width of their parent and start on a new line, stacking
vertically (e.g., <div>, <form>, <h1>).
 Inline elements only take up the width and height of their content, allowing them to flow within
the same line (e.g., <span>, <a>, <img>).

Demonstration of Document Flow

 An example shows a <div> containing text and <span> elements, illustrating how they display in
an unbroken flow.
 Changing a <span> to a <div> moves the text to a new line, demonstrating the difference in
behavior between block and inline elements.

CSS Display Property

 The display property in CSS can change an element's behavior from block to inline and vice versa.
 The example illustrates how to use CSS to modify the display property, affecting the layout of
elements on the page.

Here are two examples illustrating the difference between block and inline elements in HTML and CSS:

Example 1: Block Element

<!DOCTYPE html>

<head>

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

<title>Block Element Example</title>

<style>

.block {

background-color: lightblue;

padding: 10px;

margin: 5px 0;

</style>

</head>

<body>
<div class="block">This is a block element.</div>

<div class="block">This is another block element.</div>

</body>

</html>

Explanation: Each <div> starts on a new line and takes the full width of the parent container.

Example 2: Inline Element

<!DOCTYPE html>

<head>

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

<title>Inline Element Example</title>

<style>

.inline {

background-color: lightgreen;

padding: 5px;

margin: 0 5px;

</style>

</head>

<body>

<span class="inline">This is an inline element.</span>

<span class="inline">This is another inline element.</span>

</body>

</html>

Explanation: The <span> elements appear on the same line, only taking up the space of their content.

Alignment basics
Let's explore how to align text and HTML elements using CSS.

Let's first focus on horizontal alignment. Vertical alignment is more difficult so you'll explore that later
on.
Text Alignment

Aligning text within an HTML element is very simple. To do this, you use the text-align CSS property.
In the following example, the CSS rule is setting the text of all paragraph elements to be center aligned.

p{
text-align: center;
}

Text alignment can be set to left, right, center and justify.

The justify alignment spreads the text out so that every line of the text has the same width.

The default alignment is left for languages that are left-to-right such as English. For right-to-left
languages such as Arabic, the default alignment is right.

HTML Element Alignment

HTML element alignment is more complicated than text alignment. To align HTML elements, you must
consider the box model and document flow from previous lessons. Aligning an HTML element is done by
changing the properties of its box model and how it impacts the document flow.

HTML Element Center Alignment

To center align an element, you set a width on the element and push its margins out to fill the remaining
available space of the parent element as in the following HTML structure:

In your CSS, you'll set the parent element to have a red border to visualize the space it occupies:

.parent {
border: 4px solid red;
}

The child element will have a width equal to 50% of the parent element with a padding of 20 pixels.
Note that padding: 20px is shorthand for setting the padding top, bottom, left and right to 20px. To
visualize the space it occupies, set the border to green:

.child {
width: 50%;
padding: 20px;
border: 4px solid green;
}

To align the element to the center, set its margin property to auto. The auto will tell the browser to
calculate the margin automatically based on the space available.

.child {
width: 50%;
padding: 20px;
border: 4px solid green;
margin: auto;
}

The result is the child element is centered within the parent element:

It is important to note that this works because the div element is a block-level element.

If you want to align an inline element like img, you will need to change it to a block-level element.
Similar to the div example, you add the img to a parent element:

</div>
<img src="[Link]" class="child">
<div class="parent">

The CSS rule then changes the img element to a block-level element and sets its margin to auto:

.child {
display: block;
width: 50%;
margin: auto;
}

To be more precise, in CSS you can set only the left and right margins to auto. This allows you to set the
top and bottom margins to specific values if needed.

.child {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}

HTML Element Left / Right Alignment

The two most common ways to left and right align elements are to use the float property and
the position property.

The position property has several value options that impact how the element displays in the
document flow. You'll explore how to use the position property later on. For now, let's focus on
the float property.

The float property sets an element's position relative to the text content within a parent element. Text
will wrap around the element.

In the following example, the image will be aligned to the right of the div element. The text content will
wrap around the image:

HTML
<div class="parent">
<img src="[Link]" class="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu odio e
get leo auctor porta sit amet sit amet justo. Donec fermentum quam in diam volutpat, at lacinia diam placerat. Aen
ean quis feugiat sem. Suspendisse a dui massa. Phasellus scelerisque, mi vestibulum iaculis tristique, orci tellus gr
avida nisi, in pellentesque elit massa ut lorem. Sed elementum ornare nunc vel cursus. Duis sed enim in nulla effici
tur convallis sed eget dolor. Curabitur scelerisque eros erat, in vulputate dolor consequat vel. Praesent ac sapien c
ondimentum, ultricies libero at, auctor orci. Curabitur ut augue ac massa convallis faucibus sed in magna. Phasellu
s scelerisque auctor est a auctor. Nam laoreet sem sapien, porta imperdiet urna laoreet eu. Morbi dolor turpis, con
gue id bibendum eget, viverra et risus. Quisque vitae erat id tortor ullamcorper maximus.
</div>

CSS

.child {
float: right;
}
c. Module 3:
Intro to UI Frameworks and Libraries
i. Video 1:
This content focuses on how to include CSS and JavaScript libraries in HTML files, as well as the
concepts of dependencies, package managers, and bundling tools in front-end development.

Understanding Dependencies

 Dependencies are libraries and frameworks that your application relies on to function properly.
 Including these dependencies in your HTML file is essential for your application to call necessary
API functions.

Using Libraries like Bootstrap

 To include Bootstrap's CSS, you add a link tag in the head element of your HTML file.
 For JavaScript functionality, you add a script tag in the body element, specifying the source of the
Bootstrap library.

Role of Package Managers

 Package managers, like npm, automate the downloading and installation of dependencies,
managing complex dependency trees.
 They ensure that the correct versions of dependencies are used, simplifying the development
process.

Bundling Tools

 Bundling tools combine multiple dependencies into a single file to streamline the inclusion
process in your HTML.
 Tools like Gulp and Webpack help manage large projects with numerous dependencies
efficiently.

ii. Video 2:
Responsive Design Overview

 Definition: Responsive design is a web development approach that allows web pages to
automatically adjust their layout and content based on the screen size and resolution of the
device being used (e.g., smartphones, tablets, laptops).
 Importance: With the increasing variety of devices and screen resolutions, responsive design is
crucial for ensuring that websites provide a consistent and optimal user experience across all
platforms.

Key Techniques in Responsive Design

1. Flexible Grids:

o Structure: Flexible grids are composed of columns, gutters (the space between columns),
and margins (the space between content and the edges of the screen).
o Percentage Values: Instead of using fixed pixel sizes, flexible grids use percentage values
to define element sizes. This allows the layout to adapt fluidly to different screen widths.
2. Fluid Images:
o CSS Max-Width Property: By setting the max-width property of images to 100%, images
can scale down to fit within their containing columns. This prevents images from
overflowing their containers while ensuring they do not become pixelated when the
container is wider than the image.

Media Queries and Breakpoints

 Media Queries: These are a feature of CSS that allows developers to apply specific styles based
on the characteristics of the device, such as display size, orientation, and aspect ratio. For
example, a media query can change the background color of a website when viewed on a mobile
device with a screen width of 700 pixels or less.
 Breakpoints: A breakpoint is a defined point in the CSS where the layout and content of a
website adapt to provide the best possible user experience. Breakpoints can function differently
across various grid types:
o Fixed Grids: Have fixed-width columns with flexible margins. The content width remains
constant within a specific range of breakpoints.
o Fluid Grids: Feature fluid-width columns that stretch from edge to edge of the screen.
Columns can grow or shrink based on the available space.
o Hybrid Grids: Combine both fluid and fixed-width components, allowing for more
complex layouts.

Bootstrap
Bootstrap is often described as a way to "build fast, responsive sites" and it is a "feature-packed,
powerful, and extensible frontend toolkit".
Some people refer to it as a "front-end" framework, and some are trying to be more specific by referring
to it as a "CSS framework" or a “CSS library”.

So, what is Bootstrap?

Simply put, Bootstrap is a library of CSS and JavaScript code that you can combine to quickly build
visually appealing websites.

Modern web development is all about components. Small pieces of reusable code that allow you to
build websites quickly. Bootstrap comes with multiple components for very fast construction of multiple
components, or parts of components.

Another important aspect of modern development is responsive grids which allow web pages to
adapt their layout and content depending on the device in which they are viewed. Bootstrap comes with
a pre-made set of CSS rules for building a responsive grid.

Bootstrap is very popular amongst developers as it saves development time and provides a way for
developers to build visually appealing prototypes and websites.

Bootstrap saves significant time because all the CSS code that styles its grid and pre-built components is
already written. Instead of needing a high level of expertise in various CSS concepts, you can simply use
the existing Bootstrap CSS classes to create visually appealing websites. This is indispensable when you
need to quickly iterate on website layouts.

Once you know how Bootstrap works, you’ll have enough knowledge to tweak its styling and a whole
new world of development opens up to you.

Since Bootstrap is so popular, understanding how to work with it is a prerequisite in many web
development companies. Additionally, you can be safe in knowing that both you and your team
members have a common design system and you don't have to spend time deciding how to build one.
You are free to jump from team to team, from project to project, even from one company to another, and
you don't need to re-learn "their way of doing things".

All of these points make investing time to learn Bootstrap a great way to boost your web development
skills. In this lesson, you’ll be introduced to the core concepts of Bootstrap and learn how to build web
pages using it.

iii. Video 3:
The content focuses on creating a simple webpage using Bootstrap, a popular front-end framework.

Setting Up the Layout

 Begin by adding container elements using HTML div and applying the Bootstrap container CSS
class.
 Create a row for content with another div element using the row CSS class, and add two columns
for menu items and prices.
Adding Content

 Name the columns using heading tags (H1 for the menu and H2 for prices).
 Under the menu column, add dish names, ingredients, and images using appropriate HTML tags
(H2 for dish names, p for ingredients, and IMG for images).

Creating a Price Table

 Add a price table using the HTML table tag and apply the Bootstrap table CSS class.
 Include table rows and data tags to display dish names and their corresponding prices.

Example 1: Basic Menu Layout

<!DOCTYPE html>

<head>

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

</head>

<body>

<h2>Falafel</h2>

<p>Ingredients: Chickpea, herbs, spices</p>

<img src="[Link]" class="img-fluid" alt="Falafel">

<h2>Pasta Salad</h2>

<p>Ingredients: Lettuce, vegetables, mozzarella</p>

<img src="[Link]" class="img-fluid" alt="Pasta Salad">

</div>

<div class="col">
<h2>Prices</h2>

<tr>

<td>Falafel</td>

</tr>

<tr>

<td>Pasta Salad</td>

</tr>

</table>

</div>

</body>

</html>

Example 2: Responsive Menu with Bootstrap

<!DOCTYPE html>

<head>

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

<title>Restaurant Menu</title>

</head>

<body>

<div class="col-md-6">
<h2>Falafel</h2>

<p>Ingredients: Chickpea, herbs, spices</p>

<img src="[Link]" class="img-fluid" alt="Falafel">

</div>

<h2>Pasta Salad</h2>

<p>Ingredients: Lettuce, vegetables, mozzarella</p>

<img src="[Link]" class="img-fluid" alt="Pasta Salad">

</div>

<h2>Prices</h2>

<tr>

<td>Falafel</td>

</tr>

<tr>

<td>Pasta Salad</td>

</tr>

</table>

</div>

</body>

</html>

In Bootstrap, col-md-6 is a class used to define the width of a column in a grid layout. Here's a
breakdown of what it means:

 col: This indicates that the element is a column in the Bootstrap grid system.
 md: This specifies the breakpoint at which the column will take effect. In this case, md stands for
"medium" devices, which typically refers to screens that are 768 pixels wide or larger.
 6: This number represents the number of columns the element will span. Bootstrap's grid system
is based on a total of 12 columns. Therefore, col-md-6 means that the column will take up 6 out of
the 12 available columns, effectively making it half the width of the container on medium and
larger screens.

Example:

 On medium and larger screens, col-md-6 will display the column at 50% width.
 On smaller screens, if you don't specify a class for those breakpoints, the column will stack
vertically and take the full width.

The main difference between the basic and responsive examples lies in how they handle layout and
responsiveness across different screen sizes. Here’s a summary of the differences:

Basic Example

 Column Structure: Uses col class without specifying a breakpoint, which means the columns will
stack vertically on all screen sizes.
 Layout: The layout is fixed and does not adapt to different screen sizes. On smaller screens, the
columns will not be side by side but rather one on top of the other.
 Use Case: Suitable for very simple layouts where responsiveness is not a concern.

Responsive Example

 Column Structure: Uses col-md-6, which specifies that the columns should take up half the width
(6 out of 12 columns) on medium and larger screens.
 Layout: The layout is responsive, meaning that on medium and larger screens, the columns will
be displayed side by side. On smaller screens, they will stack vertically, taking the full width.
 Use Case: Ideal for modern web design where adaptability to various screen sizes is important,
enhancing user experience on mobile devices.

Summary

 Basic Example: Fixed layout, no responsiveness.

 Responsive Example: Adaptive layout, adjusts based on screen size

iv. Video 4:
This content focuses on using Bootstrap CSS for responsive web design, particularly for the Little Lemon
Restaurant website.

Understanding Bootstrap CSS

 Bootstrap provides a large library of CSS classes for responsive design, allowing developers to
create adaptable websites without redesigning for each device.
 Key concepts include "infixes" for responsive breakpoints, which are specific class abbreviations
(e.g., SM for small screens, MD for medium, LG for large).

Responsive Breakpoints
 Breakpoints in Bootstrap are defined as follows:
o Extra small: < 576 pixels (default)
o Small: ≥ 576 pixels (SM)
o Medium: ≥ 768 pixels (MD)
o Large: ≥ 992 pixels (LG)
o Extra large: ≥ 1200 pixels (XL)
o Extra extra large: ≥ 1400 pixels (XXL)

 Infixes: These are abbreviations used in class names to specify breakpoints. For example:
o col-md-4: This class will apply to medium screens and larger, creating a column that takes
up 4 out of 12 columns.

Ex:

</div>
<div class="row">
<div class="col">
<h1>Our Menu</h1>
<h2>Falafel</h2>
<p>Ingredients: Chickpea, herbs, spices</p>
<img src="[Link]" class="img-fluid" alt="Falafel">
<h2>Pasta Salad</h2>
<p>Ingredients: Lettuce, vegetables, mozzarella</p>
<img src="[Link]" class="img-fluid" alt="Pasta Salad">
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<td>Falafel</td>
<td>$12</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$10</td>
</tr>
</table>
</div>

</div>
</div>
</body>
</html>

2nd time both columns are in different row

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="[Link]
<title>Menu</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Our Menu</h1>
<h2>Falafel</h2>
<p>Ingredients: Chickpea, herbs, spices</p>
<img src="[Link]" class="img-fluid" alt="Falafel">
<h2>Pasta Salad</h2>
<p>Ingredients: Lettuce, vegetables, mozzarella</p>
<img src="[Link]" class="img-fluid" alt="Pasta Salad">
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<td>Falafel</td>
<td>$12</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$10</td>
</tr>
</table>
</div>
<div class="col">
<h1>Our Menu</h1>
<h2>Falafel</h2>
<p>Ingredients: Chickpea, herbs, spices</p>
<img src="[Link]" class="img-fluid" alt="Falafel">
<h2>Pasta Salad</h2>
<p>Ingredients: Lettuce, vegetables, mozzarella</p>
<img src="[Link]" class="img-fluid" alt="Pasta Salad">
</div>
<div class="col">
<h2>Prices</h2>
<table class="table">
<tr>
<td>Falafel</td>
<td>$12</td>
</tr>
<tr>
<td>Pasta Salad</td>
<td>$10</td>
</tr>
</table>
</div>
</div>

</div>
</body>
</html>
Both columns(menu and prices) are in same row as 1st input

Using Modifiers

 Modifiers in Bootstrap allow customization of components, such as alerts. For example, "alert-
primary" uses the primary color (blue), while "alert-danger" changes it to red for error messages.
 Bootstrap provides various contextual classes for alerts, enabling easy implementation of
different alert types based on color.
 For example, in alerts:
o alert-primary: Displays a blue alert.
o alert-secondary: Displays a gray alert.
o alert-success: Displays a green alert.
o alert-info: Displays a light blue alert.
o alert-warning: Displays a yellow alert.
o alert-danger: Displays a red alert.
o alert-light: Displays a light gray alert.
o alert-dark: Displays a dark gray alert.

Here are two examples illustrating the use of Bootstrap CSS classes and modifiers:

Example 1: Responsive Grid System

In an HTML file, you can create a responsive layout using Bootstrap's grid system. For instance, to create
a six-column layout that adjusts for large screens, you would use:

</div>

 Explanation: The col-lg-6 class specifies that this column should take up 6 out of 12 columns on
large screens (≥ 992 pixels).
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet"
href="[Link]
 <title>Menu</title>
 </head>
 <body>
 <div class="container">
 <div class="row">
 <div class="col">
 <h1>Our Menu</h1>
 <h2>Falafel</h2>
 <p>Ingredients: Chickpea, herbs, spices</p>
 <img src="[Link]" class="img-fluid" alt="Falafel">
 <h2>Pasta Salad</h2>
 <p>Ingredients: Lettuce, vegetables, mozzarella</p>
 <img src="[Link]" class="img-fluid" alt="Pasta Salad">
 </div>
 <div class="col-lg-6">
 <h2>Prices</h2>
 <table class="table">
 <tr>
 <td>Falafel</td>
 <td>$12</td>
 </tr>
 <tr>
 <td>Pasta Salad</td>
 <td>$10</td>
 </tr>
 </table>
 </div>

 </div>

 </div>
 </body>
 </html>
Result of col-lg-6

</div>

</div>
</body>
</html>

Result of col-lg-3

Example 2: Alert Component

To create an alert message that changes color based on the context, you can use:

<div class="alert alert-primary" role="alert">

This is a primary alert—check it out!

</div>

 To change it to a danger alert (red for errors), you would modify it to:

<div class="alert alert-danger" role="alert">

This is a danger alert—something went wrong!

</div>
 Explanation: The alert-primary class displays the alert in blue, while alert-danger changes it to
red, indicating an error.

v. Video 5:
Here are some key notes on using Bootstrap for responsive web design:

Bootstrap Grid System

 12-Column Layout: Bootstrap uses a 12-column grid system for layout.

 Container: The root element that pads and aligns content; its width is based on the responsive
breakpoint.
 Rows and Columns: You can add rows and columns within the container.

Responsive Design

 Column Suffixes: Control column width using suffixes (e.g., col-4, col-8).
 Stacking on Mobile: Use col-12 for mobile to stack columns vertically.
 Side by Side on Desktop: Use col-lg-6 for desktop to display columns side by side.

Development Efficiency

 Responsive CSS Rules: Bootstrap automatically adjusts layouts for different devices.
 Web Developer Tools: Use tools to simulate device views and test responsiveness.

vi. Video 6:

<!DOCTYPE html>

<head>

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

<title>Little Lemon Menu</title>

</head>

<body>

<div class="container mt-5">

<img src="[Link]" class="card-img-top" alt="Fried Calamari">

<h5 class="card-title">Fried Calamari <span class="badge

bg-primary">New</span></h5>

<p class="card-text">Crispy fried calamari served with a tangy dipping sauce.</p>

<tbody>

<tr>

<td>Price</td>

</tr>

</tbody>

</table>

<div class="alert alert-info" role="alert">

Try our new fried calamari!

</div>

<a href="#" class="btn btn-primary">Order Now</a>

</div>

<script src="[Link]

</body>

</html>

HTML Tags
1. <h1> and <h2>:
o These are heading tags. <h1> is the main title of the page, while <h2> is used for
subheadings (like dish names). They help structure the content and improve accessibility.
2. <span>:
o This inline element is used to apply styles or classes to a portion of text. In this case, it
wraps the "New" badge to apply Bootstrap's badge styling.
3. <p>:
o The paragraph tag is used to define blocks of text. Here, it lists the ingredients for each
dish.
4. <img>:
o This tag is used to embed images in the webpage. The src attribute specifies the image
file, and alt provides alternative text for accessibility.
5. <div>:
o A generic container used to group elements together. In this example, it is used to create
sections for each dish and to contain the card components.
6. <table>:
o This tag is used to create a table. In the example, it displays the price of each dish in a
structured format.
7. <tbody> and <tr>:
o <tbody> groups the body content of the table, while <tr> defines a table row. Each row
can contain multiple cells.
8. <td>:
o This tag defines a cell in a table row. In the example, it is used to display the price label
and the actual price.

Bootstrap Classes
1. container:
o A Bootstrap class that provides a responsive fixed-width container, centering the content
and adding padding.
2. mt-5:
o This class adds a top margin of 5 units (spacing) to the container, creating space above the
content.
3. row:
o This class is used to create a horizontal group of columns. It helps in organizing the layout
in a grid format.
4. col-12 and col-lg-6:
o These classes define the column width. col-12 means the column will take the full width
on small screens, while col-lg-6 means it will take half the width on large screens.
5. img-fluid:
o This class makes images responsive, ensuring they scale with the parent container's
width.
6. card:
o A Bootstrap component that provides a flexible and extensible content container with
multiple variants and options for styling.
7. card-body:
o This class is used to define the main content area of the card, where text and other
elements are placed.
8. card-title and card-text:
o These classes are used to style the title and text within the card, providing consistent
formatting.
9. alert and alert-info:
o These classes create a styled alert box. alert is the base class, while alert-info applies a
specific color scheme (blue) to indicate informational messages.

Using Bootstrap documentation

Bootstrap comes with detailed documentation on setting up and using the features available in its
library. The documentation is clear and has many code examples to help you get started.

In this reading, you'll explore the frequently used documentation sections.

The documentation for Bootstrap is currently available at the following link.

[Link]

Navigating the documentation

The sidebar on the webpage allows you to navigate through the different sections of the documentation.
There is also a search box if you need to search for a specific piece of information.
Layout

The layout section of the documentation describes how to use the grid system of Bootstrap. This covers
what you've learned so far and includes more advanced usage such as offsets, column alignment, auto-
layout and variable width columns.
Content

The content section of the documentation describes Bootstrap's default text styling and how to use
responsive images and tables. You've learned the basics of these earlier on and this section goes into
further detail.

Forms

The forms section of the documentation describes how to build forms using Bootstrap's styles. The
library has many CSS rules to improve your form's user interface and experience. Below are some
features you'll frequently use as a developer:

Form Styling

Bootstrap includes CSS rules to improve the visual style of input elements.

For example:
This table outlines the different HTML form elements and which Bootstrap CSS class should be used for
them.

Form Element CSS class

input form-control

input type="checkbox" form-check-input

input type="radio" form-check-input

input type="range" form-range

select form-select

Using these CSS classes will style the elements appropriately for different input types, sizings and states.
More information is available on the Forms documentation page.

Switches

If you've used an app on your mobile device, you're probably familiar with the switch input type.

Bootstrap includes CSS rules to style checkbox input elements as switches.

To do this:

1. Add the input to a div element.

2. On the div element, apply the form-check and form-switch CSS classes.
3. On the input element, add the form-check-input CSS class.
3
</div>

More information is available in the Switches section of the documentation.

Input Groups

Input groups are useful for providing additional content to the input field. For example, if you wanted to
request the user to input a US dollar amount, you can use an input group to show the dollar symbol and
cents amount.
To do this:

1. Add the input to a div element.

2. Apply the input-group CSS classes on the div element.
3. Add a span element before and/or after the input element and apply the input-group-
text CSS class to it. The text content is then added inside the span element.
1
2
3
4
5
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control">
<span class="input-group-text">.00</span>
</div>

More information is available on the Input Groups documentation page.

Floating Labels

Floating labels help provide form information to the user as part of the input itself. These are different
from regular form placeholders. The information stays visible if the user is interacting with the element
or if the element has content.

To do this, add the input to a div element. On the div element, apply the form-floating CSS
classes.

1
2
3
4
<div class="form-floating">
<input type="email" class="form-control" id="addressInput" placeholder="Address">
<label for="addressInput">Address</label>
</div>
More information is available on the Floating Labels documentation page

Components

As you have learned, Bootstrap comes with many pre-made UI elements and styles to help speed up your
development.

Some of these components require Javascript to work, while others only require CSS classes applied to
HTML elements. The Components section of the documentation explains these requirements on each
component page and provides many code examples.

Other CSS frameworks and libraries

As a developer, you'll use many CSS libraries and frameworks throughout your career. As you move on to
different projects and as technologies advance, knowing what solutions are available is critical. While
Bootstrap is one of the most popular CSS libraries, many others are available, each with different
purposes, designs and technical approaches. This reading will introduce you to other popular CSS
libraries and frameworks.

Foundation

Official Website

Foundation is a framework for building user interfaces similar to Bootstrap. It is used by many large
companies such as Pixar, Polar and Sonos. One prominent feature of Foundation is that it can be used to
style content for sending via email.
[Link]

Official Website

[Link] is another library for building user interfaces. While it doesn't have as many features as
Bootstrap, it is designed to be minimal in file size. Smaller file sizes improve loading times for web pages
as there is less data to transfer from the web server. If your next project is focused on minimal loading
time, this library is worth considering.

Tailwind CSS

Official Website

Tailwind CSS is a CSS framework that uses a utility-based approach for its CSS rules. This means that the
framework provides many CSS classes with a single purpose. For example, the CSS class pt-6 sets the
padding-top CSS property to 6 pixels. This means that you can be precise in applying styling to your
HTML without writing CSS. The advantage to this is that it is more flexible for customizing your
webpage's design using the framework. However, the disadvantage is that if multiple developers are
working on a project, it could lead to inconsistent design if the team is not strict on its design rules.
UIKit

Official Website

UIKit is a lightweight CSS framework featuring a small set of responsive components. Its simple design
allows developers to easily customize the style rules and visuals.

[Link]

Official Website

[Link] is a small CSS library that automatically styles HTML elements without needing to apply CSS
classes to them. The library aims to allow a developer to quickly prototype a user interface without
worrying about the final design, while still being visually appealing. MVP comes from the technical term
Minimal Viable Product, a product with sufficient features to demo to customers or other business
stakeholders.
Introduction to React
i. Video 1:
This content explains the differences between static and dynamic content on websites, as well as the
roles of web servers and application servers.

Static and Dynamic Content

 Static content consists of files that are sent to the browser exactly as they are stored on the
server, such as images and videos.
 Dynamic content is generated in real-time based on user input or other factors, like the current
date, making it more complex and slower to produce.

Web Server vs. Application Server

 A web server delivers static content directly to the browser, while an application server generates
dynamic content and handles more complex processing tasks.
 Application servers communicate with databases and run application logic, which allows them to
customize content for individual users.

Caching for Performance

 To improve performance, web servers use caching to store copies of dynamic content, reducing
the need to generate it repeatedly.
 When a request for dynamic content is made, the web server first checks the cache; if the content
is not there, it retrieves it from the application server and stores it for future requests

ii. Video 2:
The content discusses the concept and functionality of single-page applications (SPAs) in web
development.

Understanding Single-Page Applications (SPAs)

 SPAs provide a user-friendly and mobile-friendly experience by loading a single HTML page that
updates dynamically as users interact with the application.
 Unlike traditional multi-page applications, SPAs reduce server load by only sending necessary
data (like JSON objects) instead of entire web pages.

Resource Delivery Approaches

 There are two main approaches for serving resources in SPAs: bundling and lazy loading.
 Bundling loads all necessary resources at once, while lazy loading fetches resources as needed,
which can improve performance for complex applications.

Comparing Traditional Websites and SPAs

 In traditional websites, every interaction often requires a full page reload, leading to slower
experiences.
 SPAs allow for more efficient updates by only changing the relevant parts of the page, enhancing
user experience and responsiveness.

Considerations for Development

 Developers should assess the complexity of their applications to determine whether a traditional
multi-page application or an SPA is more suitable.
 The choice of resource delivery method can significantly impact the performance and user
experience of the application.

iii. Video 3:

The content focuses on the React library and its significance in front-end development.

Understanding React

 React is an open-source JavaScript library that simplifies building user interfaces for web and
mobile applications.
 It allows developers to write less code, making it easier to maintain and test applications.

Components in React

 React's core concept is the use of components, which are reusable pieces of the user interface.
 For example, a user profile picture can be created as a component and reused throughout the
application, enhancing efficiency.

Community and Resources

 The React community continuously contributes to its development, offering many open-source
libraries with pre-made components.
 Annual conferences promote sharing and introduce new features, encouraging developers to
engage with the community.

Case Study: Why did Facebook

engineers create React?
There are a lot of JavaScript Model-View-Controller (MVC) frameworks out there. Why did we build React
and why would you want to use it?
React isn’t an MVC framework.

React is a library for building composable user interfaces. It encourages the creation of reusable UI
components which present data that changes over time.

React doesn’t use templates.

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate
the full set of abstractions that you are allowed to use to build your UI.

React approaches building user interfaces differently by breaking them into components. This
means React uses a real, full-featured programming language to render views, which we see as an
advantage over templates for a few reasons:

 JavaScript is a flexible, powerful programming language with the ability to

build abstractions. This is incredibly important in large applications.
 By unifying your markup with its corresponding view logic, React can actually make views
easier to extend and maintain.
 By baking an understanding of markup and content into JavaScript, there’s no manual
string concatenation and therefore less surface area for XSS vulnerabilities.

We’ve also created JSX, an optional syntax extension, in case you prefer the readability of HTML to raw
JavaScript.

React updates are dead simple.

React really shines when your data changes over time.

In a traditional JavaScript application, you need to look at what data changed and imperatively make
changes to the DOM to keep it up-to-date. Even AngularJS, which provides a declarative interface via
directives and data binding requires a linking function to manually update DOM nodes.

React takes a different approach.

When your component is first initialized, the render method is called, generating a lightweight
representation of your view. From that representation, a string of markup is produced and injected into
the document. When your data changes, the render method is called again. In order to perform
updates as efficiently as possible, we diff the return value from the previous call to render with the new
one and generate a minimal set of changes to be applied to the DOM.

The data returned from render is neither a string nor a DOM node — it’s a lightweight description of
what the DOM should look like.

We call this process reconciliation. Check out this jsFiddle to see an example of reconciliation in
action.
Because this re-render is so fast (around 1ms for TodoMVC), the developer doesn’t need to explicitly
specify data bindings. We’ve found this approach makes it easier to build apps.

HTML is just the beginning.

Because React has its own lightweight representation of the document, we can do some pretty cool
things with it:

 Facebook has dynamic charts that render to <canvas> instead of HTML.

 Instagram is a “single page” web app built entirely with React and [Link].
Designers regularly contribute React code with JSX.
 We’ve built internal prototypes that run React apps in a web worker and use React to drive
native iOS views via an Objective-C bridge.
 You can run React on the server for SEO, performance, code sharing and overall flexibility.
 Events behave in a consistent, standards-compliant way in all browsers (including IE8) and
automatically use event delegation.

Head on over to [Link] to check out what we have built.

Mark as completed
Like
Dislike
Report an issue

iv. Video 4:

This content explains how React manages updates to the web page efficiently through its virtual DOM.

Understanding React's Virtual DOM

 React components correspond directly to HTML elements on the web page.

 The virtual DOM is a lightweight representation of the actual browser DOM, stored in memory.

Reconciliation Process

 React checks for differences between the virtual DOM and the browser DOM.
 Only the changed elements in the virtual DOM are updated in the browser DOM, minimizing
performance costs.

Efficient Updates

 When a component is updated, the virtual DOM is first modified.

 React compares the new virtual DOM with the previous version to identify changes, ensuring that
only necessary updates are made to the browser DOM.
The Virtual DOM
React builds a representation of the browser Document Object Model or DOM in memory called the
virtual DOM. As components are updated, React checks to see if the component’s HTML code in the
virtual DOM matches the browser DOM. If a change is required, the browser DOM is updated. If nothing
has changed, then no update is performed.

As you know, this is called the reconciliation process and can be broken down into the following
steps:

Step 1: The virtual DOM is updated.

Step 2: The virtual DOM is compared to the previous version of the virtual DOM and checks which
elements have changed.

Step 3: The changed elements are updated in the browser DOM.

Step 4: The displayed webpage updates to match the browser DOM.

As updating the browser DOM can be a slow operation, this process helps to reduce the number of
updates to the browser DOM by only updating when it is necessary.

But even with this process, if a lot of elements are updated by an event, pushing the update to the
browser DOM can still be expensive and cause slow performance in the web application.

The React team invested many years of research into solving this problem. The outcome of that research
is what’s known as the React Fiber Architecture.

The Fiber Architecture allows React to incrementally render the web page. What this means is that
instead of immediately updating the browser DOM with all virtual DOM changes, React can spread the
update over time. But what does "over time" mean?

Imagine a really long web page in the web browser. If the user scrolls to the bottom, the top of the web
page is no longer visible. The user then clicks a button on the bottom of the web page that updates some
text on the top of the web page.

But the top of the page isn’t visible. Therefore, why update it immediately?

Perhaps there is text currently displayed on the bottom of the page that also updates when the button is
clicked. Wouldn’t that be a higher priority to update than the non-visible text?

This is the principle of the React Fiber Architecture. React can optimize when and where updates occur
to the browser DOM to significantly improve application performance and responsiveness to user input.
Think of it as a priority system. The highest priority changes, the elements visible to the user, are
updated first. While lower priority changes, the elements not currently displayed, are updated later.
While you’re unlikely to interact with the virtual DOM and Fiber Architecture yourself, it’s good to know
what’s going on if issues occur during the development of your web application.

There are many tools available to help you investigate how React is processing your webpage. The
official React Developer Tools web browser plugin developed by Meta will be one of the key tools in your
developer toolbox. So, if you do have to look deeper into the code, you’ll have the right toolbox available
to help you. These tools will be explored later on.

v. Video 5:
The content focuses on understanding the component hierarchy in React for building applications.

Component Hierarchy in React

 Every React application starts with a root component, known as the app component.
 Components are structured in a tree format, where child components are added to the app
component to create the application.

Example: Shopping List Application

 The app component includes two child components: the new item bar for adding items and the
shopping list for displaying items.
 Each shopping item is represented by a reusable child component, allowing for efficient updates
when items are removed.

Example: Blog Website Structure

 The app component serves as the entire webpage, containing a Navbar component and a Page
component.
 The Page component includes a main feature component for a blog summary and multiple
instances of a small feature component for additional blog posts, showcasing code reusability.

Overall, mastering component hierarchies in React can enhance your application development skills.

Alternatives to React
React is a library and not a framework. This means you'll often use other JavaScript libraries with it to
build your application. In this reading, you will be briefly introduced to some JavaScript libraries
commonly used with React.

Lodash

Official Website
As a developer, there's a lot of logic you'll commonly write across applications. For example, you might
need to sort a list of items or round a number such as 3.14 to 3. Lodash provides common logic such as
these as a utility library to save you time as a developer.

Luxon

Official Website

You'll be working with dates and times often as a developer. Think of viewing a list of orders and when
they were placed, or displaying a calendar schedule for an event. Dates and times are everywhere.

Luxon helps you work with dates and times by providing functions to manipulate and display them. For
example, think of how dates are formatted in different countries. In the United States the format
is Month Day Year but in Europe it is Day Month Year. This is one area where Luxon can help you
display the date in the user's local format.
Redux

Official Website

When building a web application, you'll need to keep track of its state. Think of when you shop online.
The web application tracks items currently in your shopping cart. When you remove an item from the
cart, the application needs to update what displays on the screen. This is where Redux comes in. It helps
you manage your application state and even has advanced features such as undo and redo.
Axios

Official Website

As a developer you'll be communicating with APIs over HTTP frequently. The Axios library helps to
simplify sending HTTP requests and processing the response. It also provides advanced features
allowing you to cancel requests and to change data received from the web server before your
application uses the data.

Jest

Official Website

It is good practice to write automated tests for your code as a professional developer. The jest library
helps you to do this and works with many libraries and frameworks. It also provides reporting utilities
such as providing information on how much of your code is tested by your automated tests.
Conclusion

If you're curious to learn more about these libraries, their websites feature setup guides, tutorials and
documentation to get started. These libraries will be covered later on.
Completed

HTML Basics and Practical Examples
No ratings yet
HTML Basics and Practical Examples
16 pages
Lecture 3 (Introduction To HTML)
No ratings yet
Lecture 3 (Introduction To HTML)
61 pages
Essential HTML Tags and Examples
No ratings yet
Essential HTML Tags and Examples
4 pages
Web Devolpment Bootcamp Unit1
No ratings yet
Web Devolpment Bootcamp Unit1
23 pages
HTML Basics: Structure and Tags Guide
No ratings yet
HTML Basics: Structure and Tags Guide
28 pages
Easy To Understand Intro - To - HTML
No ratings yet
Easy To Understand Intro - To - HTML
35 pages
Introduction to HTML Markup Basics
No ratings yet
Introduction to HTML Markup Basics
149 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
17 pages
HTML Text Formatting Elements
No ratings yet
HTML Text Formatting Elements
46 pages
HTML Document Structure and Basics
No ratings yet
HTML Document Structure and Basics
12 pages
Unit-4 HTML Reading Material 2025-1
No ratings yet
Unit-4 HTML Reading Material 2025-1
21 pages
Basic 7 Content For Rai
No ratings yet
Basic 7 Content For Rai
52 pages
Tim Berners-Lee and Hyperlinks
No ratings yet
Tim Berners-Lee and Hyperlinks
55 pages
HTML Document Structure and Elements
No ratings yet
HTML Document Structure and Elements
6 pages
HTML Basics for Web Design
No ratings yet
HTML Basics for Web Design
35 pages
HTML
No ratings yet
HTML
8 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
21 pages
Web Development Basics and Roadmaps
No ratings yet
Web Development Basics and Roadmaps
47 pages
HTML Fundamentals
No ratings yet
HTML Fundamentals
49 pages
Web Design-Mansa Costaz
No ratings yet
Web Design-Mansa Costaz
66 pages
HTML Basics: Tags, Links, and Images
No ratings yet
HTML Basics: Tags, Links, and Images
42 pages
Computer Notes For HTML
No ratings yet
Computer Notes For HTML
28 pages
HTML Evolution and Structure Guide
No ratings yet
HTML Evolution and Structure Guide
42 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
32 pages
MERN Stack Training Material
No ratings yet
MERN Stack Training Material
156 pages
HTML Handwritten Style Notes
No ratings yet
HTML Handwritten Style Notes
10 pages
Overview of HTML and Its Tags
No ratings yet
Overview of HTML and Its Tags
68 pages
Introduction to Website Designing
No ratings yet
Introduction to Website Designing
25 pages
Web Designing Notes (Unit 1-5)
No ratings yet
Web Designing Notes (Unit 1-5)
46 pages
What Is A Web Page?: Introduction To HTML
No ratings yet
What Is A Web Page?: Introduction To HTML
21 pages
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
No ratings yet
Modern Web Browser: Mozilla Firefox 3+ Google Chrome Apple Safari 4+ Opera 10+ Microsoft Internet Explorer 8
16 pages
Creating Hyperlinks and Tables in HTML
No ratings yet
Creating Hyperlinks and Tables in HTML
37 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
34 pages
HTML Full Notes
No ratings yet
HTML Full Notes
20 pages
More On HTML: Dr. Gaganpreet Kaur
No ratings yet
More On HTML: Dr. Gaganpreet Kaur
37 pages
HTML Basics: Structure & Elements Guide
No ratings yet
HTML Basics: Structure & Elements Guide
17 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
16 pages
Understanding HTML Basics and Usage
No ratings yet
Understanding HTML Basics and Usage
18 pages
HTML Tags and Elements Explained
No ratings yet
HTML Tags and Elements Explained
39 pages
HTML Document Structure Overview
No ratings yet
HTML Document Structure Overview
16 pages
HTML5 Basics: Structure & Syntax Guide
No ratings yet
HTML5 Basics: Structure & Syntax Guide
69 pages
HTML Basics: Tags, Attributes, and Structure
No ratings yet
HTML Basics: Tags, Attributes, and Structure
12 pages
Understanding HTML Basics and Structure
No ratings yet
Understanding HTML Basics and Structure
24 pages
Understanding HTML Structure and Elements
No ratings yet
Understanding HTML Structure and Elements
122 pages
HTML Solo Learn
No ratings yet
HTML Solo Learn
54 pages
Understanding HTML Basics and Tags
No ratings yet
Understanding HTML Basics and Tags
68 pages
Introduction to HTML Basics
No ratings yet
Introduction to HTML Basics
54 pages
HTML Basics: Create Your First Web Page
No ratings yet
HTML Basics: Create Your First Web Page
6 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
5 pages
HTML Basics for Beginners
No ratings yet
HTML Basics for Beginners
16 pages
Overview of HTML5 Structure and Tags
No ratings yet
Overview of HTML5 Structure and Tags
64 pages
HTML Basics for Web Design Beginners
No ratings yet
HTML Basics for Web Design Beginners
28 pages
HTML Basics: Structure and Elements
No ratings yet
HTML Basics: Structure and Elements
37 pages
Introduction to HTML Basics and Tags
No ratings yet
Introduction to HTML Basics and Tags
23 pages
An Introduction To HTML For Beginners
No ratings yet
An Introduction To HTML For Beginners
2 pages
HTML Basics for Web Development
No ratings yet
HTML Basics for Web Development
31 pages
HTML and DHTML
No ratings yet
HTML and DHTML
13 pages
Deep Learning Explained: Concepts & Tools
No ratings yet
Deep Learning Explained: Concepts & Tools
18 pages
Pawan Kumar's Tech Portfolio Overview
No ratings yet
Pawan Kumar's Tech Portfolio Overview
1 page
DU PhD Computer Science Exam Questions
No ratings yet
DU PhD Computer Science Exam Questions
22 pages
Shri Bagala Ashtottara Shatanama Stotra
No ratings yet
Shri Bagala Ashtottara Shatanama Stotra
4 pages
Advanced Java Swing Components Quiz
No ratings yet
Advanced Java Swing Components Quiz
1 page
Emerging Technologies
No ratings yet
Emerging Technologies
14 pages
3rd Party Repair YouTube Channels List
No ratings yet
3rd Party Repair YouTube Channels List
21 pages
Gaurav Meena's Civil Engineering Profile
No ratings yet
Gaurav Meena's Civil Engineering Profile
1 page
Supply Chain 4.0 in Hospitality Management
No ratings yet
Supply Chain 4.0 in Hospitality Management
14 pages
Yashasvi Scholarship Scheme Manual
No ratings yet
Yashasvi Scholarship Scheme Manual
13 pages
Meaning of Digital Empowerment
No ratings yet
Meaning of Digital Empowerment
9 pages
Human Movement Mimicking System Review
No ratings yet
Human Movement Mimicking System Review
7 pages
Microcontroller Circuit Components Guide
No ratings yet
Microcontroller Circuit Components Guide
15 pages
Calibration Log for ISO 9001 Compliance
No ratings yet
Calibration Log for ISO 9001 Compliance
85 pages
Nivriti Solutions Global: World Class Fleet Management Platform
No ratings yet
Nivriti Solutions Global: World Class Fleet Management Platform
13 pages
Python Developer Resume - Tulugu Naidu
No ratings yet
Python Developer Resume - Tulugu Naidu
3 pages
Machine Learning for Indian River Water Quality
No ratings yet
Machine Learning for Indian River Water Quality
16 pages
Shift and Rotate Instructions in 8086
No ratings yet
Shift and Rotate Instructions in 8086
11 pages
AI Fault Detection in Industrial Systems
No ratings yet
AI Fault Detection in Industrial Systems
10 pages
Full Forms
No ratings yet
Full Forms
7 pages
Enhance Model Performance with Keras
No ratings yet
Enhance Model Performance with Keras
13 pages
Vedanta Academy Grade XII Math Test Key
No ratings yet
Vedanta Academy Grade XII Math Test Key
6 pages
Hospice Administrator Flow Chart Guide
No ratings yet
Hospice Administrator Flow Chart Guide
12 pages
Automatic Batch Determination in SAP
100% (1)
Automatic Batch Determination in SAP
30 pages
Close Cybersecurity Risks & Identity Strategy
No ratings yet
Close Cybersecurity Risks & Identity Strategy
28 pages
Arabic Translation of Bertin's Semiology
No ratings yet
Arabic Translation of Bertin's Semiology
14 pages
Smart Cannabis Analysis User Manual
No ratings yet
Smart Cannabis Analysis User Manual
55 pages
Installation, Operation & Maintenance Manual: FLT 93 Series Flexswitch
No ratings yet
Installation, Operation & Maintenance Manual: FLT 93 Series Flexswitch
106 pages
BIM System Requirements for Interior Design
No ratings yet
BIM System Requirements for Interior Design
2 pages
OSCAM Setup Guide for Gigablue HD 800
No ratings yet
OSCAM Setup Guide for Gigablue HD 800
4 pages