Swami Keshvanand Institute of Technology, Management & Gramothan, Jaipur

Department of Computer Science and

Engineering
Industrial Training Presentation
On

FRONTEND WEB DEVELOPMENT

Submitted by: Submitted to:

Mannat Pangotra Session:2024-2025 Dr. Nidhi Srivastav
22ESKCA067 Assistant Professor
V Semester III year CSE Department
Basic Front-End
Web
Development
Presentation
Welcome to this introductory presentation on front-end web development.
We'll cover the fundamental building blocks for creating engaging and
interactive websites.
What is Front-End
Web Development?

1 User Interface 2 User Experience

(UI) (UX)
Front-end development It's also about making the
focuses on the visual aspects website enjoyable and
of a website, creating the intuitive, ensuring a positive
interactive elements that user experience through
users see and interact with. design and functionality.

3 Languages
Key languages used in front-end development include HTML, CSS,
and JavaScript, each serving a specific purpose in building a website.
Essential HTML Elements
Headings Paragraphs Images
Used to structure content and Create text blocks using the ` Insert images into the webpage using
improve readability with tags like ` the `` tag, specifying the source
` tag to break up content and make it
image file and alternative text for
` for main
easier to read.
accessibility.

headings
and `
` for
subheadings.

Links
Create links to other websites or sections within the same website using the `` tag, specifying the destination URL.
Styling with CSS
Selectors Properties Values

CSS selectors target specific HTML CSS properties determine the visual Values are assigned to properties to
elements to apply styles. Common appearance of an element, such as font define the specific style. Values can be
selectors include id, class, and element size, color, margin, and padding. keywords, numbers, or units, depending
name. on the property.
Responsive Design
Principles
Flexible Layouts

1 Using percentage-based widths for elements allows them to

resize proportionally based on the screen size.

Media Queries
CSS media queries apply different styles based on the device
2
screen size, orientation, or resolution, ensuring optimal
viewing for all users.

Mobile-First Approach
Start by designing for mobile devices and then gradually add
3 styles for larger screens, ensuring the site is usable on all
devices.
Introduction to JavaScript

Dynamic Content User Interactions Browser Functionality

JavaScript allows you to manipulate You can create interactive elements like JavaScript gives you access to browser
website content dynamically, responding buttons, forms, and animations that features like the DOM (Document Object
to user interactions or data changes. respond to user events like clicks or Model) for manipulating the web page
hovers. and the window object for controlling the
browser window.
Web Accessibility Best
Practices

1 Alternative Text
Provide alternative text for images using the `alt` attribute
so screen readers can describe the image to users with
visual impairments.

2 Keyboard Navigation
Ensure all interactive elements on the website can be
navigated and interacted with using the keyboard, not just
the mouse.

3 Color Contrast
Use sufficient color contrast between text and background
colors to make text readable for users with low vision.

4 Semantic HTML
Use appropriate HTML tags to define the structure and
meaning of content, making it easier for assistive
technologies to interpret the page.
Browser Developer
Tools
Elements Inspect and modify the HTML
structure of the webpage.

Console View JavaScript logs, errors, and

execute JavaScript code directly.

Network Analyze network requests and

responses, identify performance
bottlenecks, and monitor
resource loading times.

Sources Debug JavaScript code, set

breakpoints, and step through
code execution.
Frameworks and
Libraries

1 React 2 Angular
A popular JavaScript library A comprehensive framework
for building user interfaces, for building web applications,
known for its component- offering features like data
based architecture and binding, routing, and
efficient performance. dependency injection.

3 Vue.js 4 Bootstrap
A progressive JavaScript A popular CSS framework
framework for building user providing pre-designed
interfaces, known for its components, responsive
simplicity, ease of use, and grids, and utilities, making it
flexibility. easier to create consistent
and aesthetically pleasing
websites.
Deployment and Hosting

FTP Git Web Hosting Providers

File Transfer Protocol (FTP) allows you to Version control systems like Git track Web hosting providers offer server space
transfer files between your computer and changes to your code, making it easier to and resources to host your website,
a web server, enabling you to deploy your collaborate with others and revert to making it accessible to users on the
website. previous versions. internet.
 Project (Restaurant webpage )

• This HTML code outlines a simple yet modern restaurant website featuring several sections. Here’s a breakdown of its
main components:
• 1. Header and Navigation
• The website includes a navigation bar with links to various sections: Menu, Gallery, Reviews, Reservation, and Contact.
• The logo placeholder is marked as "Restaurant Name".
• 2. Hero Section
• A prominent header welcoming visitors with a call-to-action button to view the menu.
• 3. Menu Section
• A grid layout showcasing five dishes with images, titles, descriptions and prices.
• 4. Gallery Section
• A section displaying three images of the restaurant or dishes in a responsive grid layout.
• 5. Reviews Section
• A form for customers to submit reviews, along with a display area for submitted reviews.

15
• 6. Reservation Section
• A reservation form that collects the customer’s name, date, time, and number of people.
• 7. Contact Section
• A contact form for inquiries, gathering the user’s name, email, and message.
• 8. Footer
• A simple footer with copyright information.
• 9. JavaScript Functionality
• Uses JavaScript to handle form submissions for reviews and reservations.
• Event Listeners: Capture form submissions, preventing default behavior (which would normally refresh the page).
• Dynamic Data Handling: Data from the forms is stored in arrays and displayed dynamically using the inner HTML
property.
• 10. Styling
• Bootstrap is used for responsive design, complemented by custom CSS for layout and aesthetics.
• This structure a user-friendly experience for visitors looking to explore the restaurant's offerings and make reservations.

16
Project Screenshots

17
18
Thank You

19
References

1. https://www.w3schools.com/whatis/whatis_frontenddev.asp
2. https://getbootstrap.com/
3. https://www.geeksforgeeks.org/front-end-development/

20
Thank you

21