OnedayStudyVisit
nit 2: Web Technology - Frontend
U
Development
1. Front-End Design
ront-end design focuses on the user interface (UI) and user experience (UX) of a website. It
F
involves creating visually appealing and functional layouts using HTML, CSS, and
JavaScript.
dy
Key Aspects of Front-End Design:
● ser Interface (UI):The graphical layout of a website.
U
● User Experience (UX):Enhancing usability and accessibility.
u
● Responsiveness:Ensuring the design works on differentscreen sizes.
● Performance Optimization:Reducing load times usingefficient coding practices.
St
2. HTML (HyperText Markup Language)
y
HTML is the foundation of web pages, defining their structure and content.
da
Basic Structure of an HTML Document
!DOCTYPE html>
<
<html lang="en">
<head>
ne
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
O
<h1>Welcome to Web Development</h1>
<p>This is a basic HTML document.</p>
</body>
</html>
Important HTML Elements
<h1> to <h6>for titles and subtitles.
1. Headings:
. P
2 <p>for text content.
aragraphs:
3. Lists:
OnedayStudyVisit
<ol><li>Item</li></ol>
○ Ordered List:
<ul><li>Item</li></ul>
○ Unordered List:
<a href="https://example.com">Click Here</a>
4. Links:
<img src="image.jpg" alt="Description">
5. Images:
<table>
6. Tables: <tr>
, <td>for tabular data.
,
<form>with
7. Forms: <input> <select>
, <textarea>foruser input.
,
8. S <header>
emantic Elements: <nav>
, <section>
, <article>
, <footer>for
,
better structure.
3. Structuring HTML
dy
Proper structuring ensures better readability, SEO, and accessibility.
Best Practices for Structuring HTML
u
● Usesemantic elements(
<article> <aside>
, St <section>
, )instead of generic
<div>
.
● ollownested elementsproperly (e.g., a
F <ul>shouldhave
<li>inside).
● Keepconsistent indentationfor readability.
● Usealt attributesfor images to improve accessibility.
● Usemeta tagsfor SEO optimization.
y
Example of a Well-Structured HTML Page:
da
!DOCTYPE html>
<
<html>
<head>
<title>My Website</title>
ne
<meta name="description" content="A simple web page">
</head>
<body>
<header>
<h1>My Website</h1>
O
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<section>
<h2>Welcome!</h2>
<p>This is the main content of the page.</p>
</section>
OnedayStudyVisit
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
4. Presentation through CSS
CSS (Cascading Style Sheets) controls the visual appearance of web pages.
dy
Types of CSS
1. Inline CSS:Directly inside an HTML tag.
<p style="color: blue;">This is blue text.</p>
u
2. Internal CSS:Inside<style>in the <head>section.
<style> St
body { background-color: lightgray; }
</style>
xternal CSS:In a separate file (
3. E styles.css <link>
) and linked using .
<link rel="stylesheet" href="styles.css">
y
CSS Selectors
da
p { color: red; }
● Element Selector:
.classname { color: blue; }
● Class Selector:
#idname { color: green; }
● ID Selector:
h1, h2, h3 { font-family: Arial; }
● Group Selector:
ne
*{ font-family: Arial; }
● Universal Selector:
Box Model
O
CSS box model includes:
● ontent:Actual text or image inside an element.
C
● Padding:Space between content and border.
● Border:Surrounds padding and content.
● Margin:Space between elements.
Example:
div {
width: 300px;
padding: 10px;
OnedayStudyVisit
order: 2px solid black;
b
margin: 20px;
}
5. Client-Side Scripting with JavaScript
JavaScript adds interactivity and dynamic behavior to web pages.
Basic JavaScript Syntax
document.getElementById("demo").innerHTML = "Hello JavaScript!";
dy
Key JavaScript Concepts
u
V
● ariables:let name = "John";
● Functions:
function greet() {
alert("Hello, welcome!");
St
}
● Events:
<button onclick="greet()">Click Me</button>
y
DOM Manipulation:
●
document.querySelector("p").style.color = "red";
da
6. Common Image Types
ne
Different image formats are used based on quality, compression, and transparency needs.
Format Description Use Case
O
JPEG ossy compression, small file
L hotos, web
P
size graphics
PNG Lossless, supports transparency Logos, icons
GIF Supports animation Simple animations
SVG Scalable, vector-based Icons, logos
WebP High quality, compressed Web images
Example of an Image in HTML:
OnedayStudyVisit
<img src="image.png" alt="A sample image" width="300">
7. APIs (Application Programming Interfaces)
What is an API?
nAPI (Application Programming Interface)is a setof rules and protocols that allows
A
different software applications to communicate with each other. APIs are commonly used in
web development to retrieve, send, and modify data between a client (browser) and a server.
or example, when you use a weather app to check the temperature, it fetches data from a
F
dy
weather API instead of storing all the information locally.
Types of APIs
u
There are multiple types of APIs, but the two most commonly used in web development are:
St
1. REST API (Representational State Transfer API)
AREST APIis a web service that usesHTTP requeststo perform operations like:
● ET- Retrieve data
G
y
● POST- Send data to the server
● PUT- Update existing data
da
● DELETE- Remove data
Example: If you want to retrieve user data from an API, a GET request might look like this:
GET https://api.example.com/users
ne
The API responds with user data inJSON format:
{
O
"id": 1,
"name": "John Doe",
"email": "[email protected]"
}
2. GraphQL API
nlike REST,GraphQLallows clients to fetch onlythe specific data they need, reducing
U
unnecessary data transfer.
Example of a GraphQL query to fetch a user’s name and email:
OnedayStudyVisit
{
user(id: 1) {
name
email
}
}
GraphQL returns exactly what was requested:
{
"data": {
"user": {
dy
"name": "John Doe",
"email": "[email protected]"
}
}
}
u
St
This makesGraphQLmore flexible compared toREST.
Fetching Data Using JavaScript (AJAX and Fetch API) (Not include in Syllabus
y
optional for Exam purpose)
o interact with APIs from a web page, JavaScript provides methods likeAJAX
T
da
(Asynchronous JavaScript and XML)andFetch API.
Using Fetch API (Modern Approach)
fetch()function allows web applications to sendHTTP requests and process
he
T
ne
responses asynchronously.
Example: Fetching Data from an API
fetch("https://api.example.com/data") // API URL
O
.then(response => response.json()) // Convert response to JSON
.then(data => console.log(data)) // Handle data
.catch(error => console.error("Error:", error)); // Handle errors
Breaking Down the Code:
1.
fetch("https://api.example.com/data")
Sends aGET requestto the specified API endpoint.
○
2.
.then(response => response.json())
OnedayStudyVisit
Converts the received response from text toJSON format.
○
3.
.then(data => console.log(data))
Once the data is received, it is logged in the console.
○
4.
.catch(error => console.error("Error:", error));
○ If there is any network error or issue, it is handled gracefully.
Example Response from API
If the API returns this JSON:
{
dy
"id": 1,
"name": "John Doe",
"age": 30
}
u
The JavaScript console will output: St
{id: 1, name: "John Doe", age: 30}
y
Making a POST Request with Fetch API
da
POSTmethod alongwith
Tosend datato an API, use the fetch()
.
Example: Sending Data to an API
fetch("https://api.example.com/users", {
method: "POST", // Specify request method
ne
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
O
name: "Alice",
email: "[email protected]"
})
})
.then(response => response.json())
.then(data => console.log("User added:", data))
.catch(error => console.error("Error:", error));
How It Works:
● Theheadersspecify that JSON data is being sent.
OnedayStudyVisit
b
● ody: JSON.stringify({...})converts the object to aJSON string.
● TheAPI responseis logged in the console.
Example API Response:
{
"id": 2,
"name": "Alice",
"email": "
[email protected]",
"status": "User created successfully"
}
dy
Conclusion
● PIs allow web applications to communicate with servers.
A
● REST APIsuse HTTP methods to send and receive data.
u
● GraphQL APIsenable fetching specific data more efficiently.
● Fetch APIis a modern way to retrieve data from APIs using JavaScript.
● Proper error handling ensures smooth operation when working with APIs.
St
HTML5 Features
y
da
TML5 introduced several new elements, attributes, and APIs to improve web development.
H
These enhancements providebetter structure, interactivity,and multimedia capabilities
while ensuring cross-browser compatibility.
ne
1. New Semantic Elements in HTML5
emantic elements define the meaning of the content they contain, improving accessibility
S
O
and SEO. Before HTML5, developers used <div>elementsfor everything. Now, HTML5
providesmeaningfulelements that describe their purpose.
Key Semantic Elements
Element Description
<article R
epresents self-contained content (e.g., blog post, news
>
article).
OnedayStudyVisit
<section Groups related content (e.g., a chapter in a book).
>
<nav>
Contains navigation links (e.g., menu, sidebar links).
<header> Defines introductory content or navigation within a page.
<footer> Represents footer content (e.g., copyright info, links).
<aside> Represents related content, like a sidebar or ads.
<figure> Contains images, illustrations, and captions.
dy
Example Usage
<article>
<header>
u
<h2>Introduction to HTML5</h2>
<p>Published on: <time datetime="2024-03-03">March 3, 2024</time></p>
</header> St
<section>
<p>HTML5 brings new semantic elements, multimedia features, and APIs.</p>
</section>
<footer>
<p>Author: Abhishek</p>
y
</footer>
</article>
da
2. HTML5 Form Enhancements
ne
orms in HTML5 come withnew input types, validationfeatures, and attributesto
F
improve user experience and reduce JavaScript reliance.
New Input Types
O
Input Type Description
email
Validates an email format automatically.
url
Ensures only URLs are entered.
tel
Used for phone numbers.
number
Allows numeric input with min/max values.
range
Creates a slider for numeric input.
OnedayStudyVisit
date/dateti Allows date selection via a date picker.
me
Example Usage
<form>
<label>Email:</label>
<input type="email" placeholder="Enter your email" required>
label>Phone:</label>
<
<input type="tel" placeholder="Enter your phone number">
dy
label>Age:</label>
<
<input type="number" min="18" max="99">
label>Choose a date:</label>
<
<input type="date">
u
button type="submit">Submit</button>
< St
</form>
Validation Without JavaScript
y
requiredattribute ensures the field must be filledbefore submission.
● The
patternattribute allows custom validation rules.
● The
da
Example: A required email field with validation:
<input type="email" required>
ne
3. Canvas and SVG for Graphics
O
TML5 introducedCanvasandSVG (Scalable Vector Graphics)for creating graphics
H
directly in the browser.
Canvas
<canvas>element allows dynamic drawing usingJavaScript. It ispixel-basedand
he
T
best forgame graphics, animations, and real-timerendering.
Example: Drawing on Canvas
canvas id="myCanvas" width="300" height="150" style="border:1px solid
<
#000;"></canvas>
OnedayStudyVisit
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
tx.fillStyle = "blue";
c
ctx.fillRect(20, 20, 100, 50);
</script>
Explanation:
●
getContext("2d")enables 2D drawing.
dy
●
fillStylesets the fill color.
●
fillRect(x, y, width, height)draws a rectangle.
SVG (Scalable Vector Graphics)
u
VG isXML-basedand used for vector graphics thatscale without losing quality. Ideal for
S
icons, illustrations, and charts.
Example: Drawing an SVG Circle
St
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="red" />
y
</svg>
da
Key Differences Between Canvas and SVG
Feature Canvas SVG
raphics
G Pixel-based (raster) Vector-based (scalable)
ne
Type
Performance Faster for animations/games Best for static graphics
Manipulation equires JavaScript for
R Uses XML, easy to modify
O
interaction
Conclusion
H
● TML5 introducedsemantic elementsfor better contentstructure.
● Formsnow support new input types and built-in validation.
● Canvasis ideal for real-time graphics, whileSVGis great for scalable images.
OnedayStudyVisit
Conclusion
his unit covered the essentials of front-end web development, including HTML structuring,
T
CSS styling, JavaScript scripting, common image types, APIs, and HTML5 features.
Mastering these topics is crucial for building interactive and visually appealing web
applications.
u dy
St
y
da
ne
O
