MINI PROJECT REPORT

On
Introduction to Web Development using HTML , CSS and JAVASCRIPT
Submitted in partial fulfillment
of
BACHELOR OF TECHNOLOGY
in
ARTIFICIAL INTELLIGENCE AND MACHINE LARNING
By
ANUSHKA KUMARI
ROLL NO. 2301201530014
UNDER THE GUIDANCE OF
MR.SACHIN MADHESHIYA

SUBMITTED TO:
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
INSTITUTE OF TECHNOLOGY AND MANAGEMENT GIDA , GORAKHPUR
SESSION : 2024-25
Web Development:
HTML, CSS, and
JavaScript
This presentation will guide you through the foundational
languages of web development: HTML, CSS, and JavaScript. We'll
explore the core concepts, key features, and real-world
applications of each language, empowering you to build engaging
and dynamic websites.
Introduction to Web Development
The Building Blocks of the Web Frontend and Backend

Web development involves creating websites and web Frontend development focuses on the visual aspects of
applications using various programming languages and a website, what users see and interact with. Backend
technologies. It's a blend of creativity and technical development handles server-side logic and database
skills, allowing you to bring ideas to life online. interaction, unseen by users.
 HTML
(Hypertext Markup Language)
HTML: The Foundation
The Language of Structure Building Blocks
HTML (HyperText Markup Language) defines the HTML uses tags to create elements, like headings,
structure and content of a webpage. It's like the paragraphs, images, and links. These elements are
blueprint of a building, outlining the layout and arranged hierarchically, forming the webpage's
organization of elements. structure.
Elements, Tags, and
Attributes
Elements Tags
Elements are the building Tags are used to mark the
blocks of HTML. They define beginning and end of an
specific content types on a element. They are written
webpage, like headings, within angle brackets, for
paragraphs, images, and example, `
` for a paragraph.
links.

Attributes
Attributes provide additional information about an element, like
its ID, class, or source for an image. They are written within the
opening tag.
 CSS
(Cascading Style Sheet)
CSS: Styling the Web

The Language of Style Separation of Concerns

CSS (Cascading Style Sheets) CSS separates styling from the
controls the visual presentation HTML structure, making
of a webpage. It defines how webpages easier to maintain
elements are displayed, and modify. It allows you to
including their colors, fonts, apply styles consistently across
sizes, and layout. multiple pages.
Types of CSS
Inline CSS
Styles applied directly to HTML elements using the
style attribute. This is useful for small, specific style
adjustments.

Internal CSS
CSS rules defined within the style tag of the HTML
document. It's suitable for styling a single webpage.

External CSS
CSS rules stored in separate files with a .css extension.
It's best for larger projects and allows you to reuse
styles across multiple pages.
CSS Styles
Properties
CSS properties define specific visual aspects of an
element, such as font-size, color, and background-
color.

Values
Values determine the actual style of an element. For
example, font-size: 16px; sets the font size to 16
pixels.

Selectors
Selectors target specific elements or groups of
elements on which to apply styles. They allow you to
style elements based on their tags, IDs, or classes.
CSS Selectors

Tag Selectors
Target elements based on their tag name. For example, `p { color: blue; }`
1 styles all paragraphs with blue text.

ID Selectors
Target elements with a specific ID. For example, `#header
2
{ background-color: red; }` styles the element with the ID "header"
with a red background.

Class Selectors
Target elements with a specific class. For example,
3
`.button { font-weight: bold; }` styles all elements with
the class "button" with bold font.
JAVASCRIPT
JavaScript: Adding Interactivity
The Language of Behavior
1 JavaScript brings interactivity and dynamic behavior to webpages. It allows you to create
responsive elements, handle user interactions, and manipulate page content.

Event Handling
2 JavaScript can respond to user events like clicks, mouse movements, and
form submissions, triggering actions and creating interactive experiences.

DOM Manipulation
JavaScript allows you to manipulate the Document
3 Object Model (DOM), the tree-like representation of a
webpage. It enables you to modify content, styles, and
structure dynamically.
Key Features of JavaScript
1 2
Variables Functions
Variables store data that can be used Functions encapsulate reusable
and manipulated throughout your blocks of code, making your
code. They are the building blocks of JavaScript more organized and
dynamic behavior. efficient. They can be called to
perform specific tasks.

3 4
Objects Arrays
Objects represent real-world entities Arrays store collections of data,
with properties and methods, allowing you to organize and access
allowing you to model complex data data in a structured way, enabling
structures and interactions. efficient data manipulation.
Javascript Frameworks and Libraries
React Angular Vue.js Node.js

A declarative, efficient, A comprehensive A progressive framework A runtime environment

and flexible JavaScript framework for building that is easy to learn and that allows JavaScript to
library for building user complex web use, ideal for both small be used for server-side
interfaces. applications with a focus and large projects. development.
on structure and
testability.
Layouts of Javascript
Grid Layout Flexbox
A powerful layout method A one-dimensional layout
that allows for flexible and model for aligning and
responsive arrangements of distributing elements along
elements on a webpage. a single axis.

Float Layout
A traditional layout method where elements can be positioned
next to each other or wrapped around other elements.
Responsive Design and
Mobile-First Approach

Mobile-First Adaptive Design

Designing for mobile devices first Creating different versions of a
and then scaling up for larger website for specific device types.
screens.

Responsive Design
Designing a single website that
adapts to different screen sizes
and orientations.
Best Practices for HTML, CSS, and JavaScript
Semantic HTML 1
Using HTML tags that accurately describe the content
and structure of a webpage.
2 Modular CSS
Organizing CSS code into reusable modules to
improve maintainability and scalability.
Efficient JavaScript 3
Writing JavaScript code that is optimized for
performance and readability.
Integrating Libraries and
Frameworks
Package Managers
Tools that help install, manage, and update libraries and
frameworks.

Module Bundlers
Tools that combine multiple JavaScript files into a single
optimized file.

Build Systems
Automated processes for compiling, testing, and
deploying web applications.
Debugging and Troubleshooting

Browser Developer Tools

1

Console Logs
2
Displaying messages and debugging information in the browser console.

Breakpoints
3
Pausing execution of code at specific points to inspect variables and values.

Network Analysis
4 Monitoring HTTP requests and responses to identify
performance issues.
THANK YOU