0% found this document useful (0 votes)
10 views22 pages

Tech Seminar

The document is a seminar presentation on web development, covering its definition, importance, and the distinction between front-end and back-end development. It discusses various components, programming languages, and frameworks used in web development, including HTML, CSS, JavaScript, and SQL. Additionally, it highlights web performance optimization techniques and concludes with the significance of web development in various fields and its promising career prospects.

Uploaded by

www.irfan89090
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views22 pages

Tech Seminar

The document is a seminar presentation on web development, covering its definition, importance, and the distinction between front-end and back-end development. It discusses various components, programming languages, and frameworks used in web development, including HTML, CSS, JavaScript, and SQL. Additionally, it highlights web performance optimization techniques and concludes with the significance of web development in various fields and its promising career prospects.

Uploaded by

www.irfan89090
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Web Development: The Building Blocks of the Internet

Done by MOHD IRFAN


“WEB DEVELOPMENT”

TECHNICAL SEMINAR BY

MOHD. IRFAN (21P71A6915)

UNDER THE GUIDANCE OF

Mr. Thomas Reddy Sir.

Department of Internet of things(IOT)

SWAMI VIVEKANANDA INSTITUTE OF TECHNOLOGY


Mahbub College Campus, R.P Road,Secunderabad-03
(Affiliated to JNTUH)
2021-25
3 content
 Introduction.
 What is front end?
 What is back end?
 Why Web Development?.
 Comparison between Static/Dynamic website.
 Frontend Development Components..
 Backend Development Components.
 How Web is works?
 APIs in Web Development
 Why do we use programming language in Backend
 Web Performance Optimization

9/4/20XX
 Conclusion.
Introduction to Web
Development
 Web Development refers to the process of building, creating, and maintaining
websites.
 Web Development was emerge in early 1990s.
 It’s also known as “web-programming”.
 Involves web design, web publishing, web programming, and database
management.
 Web Development divided in to 2 parts:-
 1.Frontend development
 2.Backend development
What is Front-End
Development?
 Front-end development focuses on the user interface and user experience.
 It’s also known as “Client-side development”.
 Front-end development focuses on creating everything that users see and
interact with on a website or web application.
 The goal is to make the site easy and enjoyable to use.
 Uses languages like HTML, CSS, and JavaScript .
 Everything the user interacts with in a browser
What is Back-End
Development?
 Back-end development handles the server-side logic.
 Back-end development controls what goes on behind the scenes of website.
 Common back-end programming languages include Python, Java, Node.js, PHP, and
Ruby.
 Involves databases, server configuration, and server-side programming.
 Users cant see how the backend works but this code is what communicates the
database information to the browser.
 Security: Back-end developers ensure the website or app is secure, preventing
sensitive user information(like passwords).
 Authentication & Authorization: They manage how users log in, sign up, and
access different parts of the site based on their roles.
Why Web Development?

 High Demand: The internet is growing, and businesses of all sizes


need websites and web applications, creating a constant demand
for web developers.Almost every business needs an online presence.
 Impactful Work: You directly shape the user’s online experience,
helping businesses reach their audience, making your work highly
impactful.
 Combination of Creativity and Coding: Web development lets you
design how a website looks (using creativity) and also write the code
that makes it work (using logic). It’s a good mix of both!
Difference between Static/Dynamic Website?
8
 Static Websites:-
 Fixed Content: The content stays the same for everyone. You can only change it by
manually updating the files.
 Faster Loading: They load quickly because they are just plain HTML files.
 Limited Interaction: Users can view the content but can't interact with it much.
 Examples: A personal blog, a portfolio, or a simple business website.

Presentation Title 9/4/20XX


Dynamic website:-
 Changing Content: The content can change based on who is visiting or what they
do on the site.
 Slower Loading: They may take longer to load because the server has to process
information to show different content.
 More Interaction: Users can interact with the site more, like logging in, posting
comments, or filling out forms.
 Examples: Social media sites (like Facebook), online stores (like Amazon), or news
websites.
Front-End Development Components: HTML

 Basic Structure: HTML is the basic building block of all websites. It creates the structure of a
webpage.
 HTML is Markup Language means its not programming language(doesn’t contain logic) computer
can communicate each other, how text and different element are presented on a web.
 Uses Tags like:- <P> paragraph, <h1> heading, <a> link, etc…
 Responsive Design: HTML works with CSS to help create responsive designs that look good on
all devices, from phones to desktops.
 Web Browsers: Browsers like Chrome or Firefox read the HTML code and display it as a
webpage.
11 What is CSS?

 Cascading style sheet (CSS) is used to style HTML elements, controlling how they
look on the page.
 Colors and Fonts: You can change colors, fonts, sizes, and spacing of text using
CSS.
 Layout Control: CSS helps arrange elements on a webpage, allowing you to create
different layouts (like grids or columns).
 Responsive Design: CSS allows you to create responsive designs that adapt to
different screen sizes using media queries.
 Animations: CSS can create simple animations and transitions, adding visual
effects to elements.

Presentation Title 9/4/20XX


What is Responsive Web
Design?
 Responsive web design means creating websites that look good, compatible and work
well on all devices, like computers, tablets, and smartphones.
 It allows the layout of the website to change automatically based on the size of the
screen.
 Uses flexible, grids, layouts, and media queries
 Frameworks like Bootstrap simplify responsive design.
 User-Friendly: Responsive design makes it easier for users to navigate and interact
with a website, no matter what device they’re using.
 Flexible Images and Text: Images and text resize or rearrange themselves to fit
the screen without losing quality or becoming hard to read.
13 Why we use JavaScript in Web
Development?

 Programming Language: JavaScript is a programming language used


to make websites interactive and dynamic.
 JavaScript can ‘Update’ and ‘Change’ the HTML & CSS.
 Responsible for Functioning of Web Application.
 Interactivity: JavaScript adds interactivity to websites, such as
responding to user clicks, keyboard inputs, and mouse movements.
 Runs in Browsers: It runs in web browsers like Chrome, Firefox, and
Safari, allowing it to affect how a webpage behaves.
 Libraries and Frameworks: There are many libraries (like jQuery) and
frameworks (like React and Vue.js) that make JavaScript development
faster and easier.

Presentation Title 9/4/20XX


Why Use
Frameworks?
 Speed Up Development: Frameworks provide pre-built components and libraries,
allowing developers to write less code, save time and build applications faster.
 Organized Structure: They offer a clear structure for organizing code, making it
easier to manage and maintain large projects.
 Reusable Code: Frameworks encourage the use of reusable code components, which
means developers can use existing code for new projects instead of starting from
scratch.
 Focus on Functionality: By using a framework, developers can focus more on the
unique features of their application rather than the underlying infrastructure.
 Improve development efficiency and maintainability
 Ensure scalability and security in web projects
Back-End Development Components:SQL

 SQL stands for structured query language.


 SQL used to access and manipulate databases.
 SQL is database language that used to create, delete, read, update data in records.
 Every website supports database at the backend.
 Each time User submit information, or Search something in website, data gets
stored and retrieve.
 Security: SQL provides mechanisms for controlling access to data, ensuring that
only authorized users can view or modify sensitive information.
 Transactions: SQL supports transactions, allowing multiple operations to be completed
successfully or rolled back if there's an error, ensuring data consistency.
Server-Side Programming Languages

Node.js Python PHP


• JavaScript-based runtime • Versatile and readable syntax • Popular for creating dynamic
environment • Widely used in data science website
• • Most commonly used for e-
Ideal for building real-time and machine learning
applications. commerce platform.
• Strong libraries and frameworks.
• To build RESTful Api to
.Used for streaming app(Netflix) • Also used for building games.
communicate
• Used for Api development.
• Suitable to handle user login,
payment request.
17
Why to we use programming
language in backend?

 Handle Requests: They help the server respond to user requests, like when you
log in or submit a form.
 Connect to Databases: Programming languages let the application read and
write data in databases, so it can store information like user profiles and
posts.
 Set Rules: They define how the application should behave, like what happens
when a user clicks a button.
 Create APIs: Programming languages are used to build APIs, which let different
parts of an application to communicate to each other.
 Improve Performance: They allow for making the application run faster and
more efficiently.

Presentation Title 9/4/20XX


How web is works?

 User Access: When you want to visit a website, you enter its address (URL) into a web
browser (like Chrome or Firefox) or click on a link.
 Domain Name System (DNS): The browser sends a request to the DNS, which translates
the website's domain name (like www.example.com) into an IP address, the numerical address
of the server where the website is stored.
 Server Request: The browser sends a request to the server using the IP address to access
the website's files.
 Server Response: The server receives the request, processes it, and sends back the
website's files (like HTML, CSS, JavaScript, images, etc.) to the browser.
 Rendering the Page: The browser receives these files and uses them to build and display the
website on your screen. It reads the HTML to create the structure, applies the CSS for styling,
and runs any JavaScript for interactive features.
 Interactivity: If the website has interactive elements (like buttons or forms), the browser can
send additional requests to the server to get or send information, allowing for dynamic content
updates without refreshing the whole page.
Server-side
Development
 It ensures that everything on the client-side (frontend) functions correctly
by managing the data and server-side processes.
 Server-side development ensures that users can interact with the application
effectively and securely.
• Programming Languages: Common languages for server-side development
include: JavaScript, python, java, php, ect….

This Photo by Unknown Author is licensed under CC BY


APIs in Web Development:-

 API stands for Application Programming Interface.


 It’s a way for different software applications to communicate to each other.
 It’s act as Servant who’s serve information to client.
 An API lets one application send a request to another application and receive a response. For
example, When you use a weather app, it asks a server for the new weather updates, and the
server sends back the information..
Web Performance Optimization:-

 Faster websites lead to better user experiences and higher conversions.


 Web performance optimization is the process of improving how fast and
efficiently a website loads and runs.
 Reduce File Sizes: Compress images, CSS, and JavaScript files to make them
smaller, which help to load site fast.
 Minimize HTTP Requests: Reduce the number of files the browser needs to
download by combining CSS or JavaScript files.
 Use Caching: Store frequently accessed data temporarily so that users can
load pages faster without downloading everything again.
 Optimize Code: Write clean and efficient code to reduce unnecessary functions
and improve loading speed.
Conclusion:-
 In conclusion, web development plays a vital role in our online interactions and
experiences. It also important across various fields, including e-commerce,
education, entertainment. It combines creativity with technical skills to build
websites that are not only functional but also visually appealing and user-friendly.
As technology continues to advance, the demand for skilled web developers will
remain high, making it a promising career choice.

This Photo by Unknown Author is licensed under CC BY-SA-NC

You might also like