SlideShare a Scribd company logo
10
Most read
13
Most read
15
Most read
Definition
The word Web Development is made up of two words:
– Web: It refers to websites, web pages or anything that
works over the internet.
– Development: Building the application from scratch.
1
Introduction
• Web development refers to the building, creating, and
maintaining of websites. It includes aspects such as web
design, web publishing, web programming, and
database management.
• It is the creation of an application that works over the
internet i.e. websites.
• The term development is usually reserved for the actual
construction of these things (that is to say, the
programming of sites). The basic tools involved are
programming languages called HTML (Hypertext
Markup Language), CSS (Cascading Style Sheets), and
JavaScript. 2
3
Web Development can be classified into two ways:
• Frontend Development: The part of a website that the
user interacts directly is termed as front end. It is also
referred to as the ‘client side’ of the application.
• Backend Development: Backend is the server side of
a website. It is the part of the website that users cannot
see and interact. It is the portion of software that does
not come in direct contact with the users. It is used to
store and arrange data.
4
Classification
●●●
5
Frontend Roadmap
• HTML: HTML stands for HyperText Markup Language. It
is used to design the front end portion of web pages using
markup language. It acts as a skeleton for a website since it
is used to make the structure of a website.
• CSS: Cascading Style Sheets fondly referred to as CSS is a
simply designed language intended to simplify the process
of making web pages presentable. It is used to style our
website.
• JavaScript: JavaScript is a scripting language used to
provide a dynamic behavior to our website.
●●●
6
Frontend Roadmap
• Bootstrap: Bootstrap is a free and open-source tool
collection for creating responsive websites and web
applications.
It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the websites
are perfect for all the browsers (IE, Firefox, and Chrome)
and for all sizes of screens (Desktop, Tablets, Phablets, and
Phones).
• Bootstrap 4
• Bootstrap 5
●●●
7
Frontend Roadmap
Frontend Frameworks and Libraries:
• AngularJS
• React.js
• VueJS
• jQuery
• Bootstrap
• Material UI
• Tailwind CSS
• jQuery UI
8
Frontend Roadmap
Backend Roadmap
●●●
9
Backend Roadmap
• PHP: PHP is a server-side scripting language
designed specifically for web development.
• Java: Java is one of the most popular and widely
used programming language. It is highly scalable.
• Python: Python is a programming language that lets
you work quickly and integrate systems more
efficiently.
• Node.js: Node.js is an open source and cross-
platform runtime environment for executing
JavaScript code outside a browser.
●●●
10
Backend Roadmap
Back End Frameworks
The list of back end frameworks are:
Express,
Django,
Rails,
Laravel,
Spring, etc.
11
Full-Stack Developer
• A Full-Stack Developer is someone familiar with both
front- and back-end development. They are generalists,
adept at wearing both hats, and familiar with every layer of
development. Obviously, employers want to hire Full-Stack
Developers – according to an Indeed study, they are the
fourth-most in-demand job in tech.
• If the title is contentious, it’s in the generalist nature of the
position. Developers who specialize in the front-end or
back-end often bristle at the notion that someone could be
equally adept at both – the expression “jack-of-all-trades,
master of none” comes to mind.
12
What Does Web-Developer Do?
•Translating wireframe designs into working code
•Creating the architecture and content of a site
•Building in functionality and responsivity
•Making a site go live
•Updating and renovating sites
•Troubleshooting, fixing bugs, and glitches
13
Tools Used
•WordPress
•Joomla!
•Drupal
•TYPO3
•Adobe Experience Manager
•Sketch – A toolkit for digital designs
•InVision Cloud – A leading digital product design platform
•Sublime Text – A code editor for advanced website design
•Foundation – A family of front-end frameworks
•Chrome DevTools – Tools from the popular browser that
facilitate web development
14
Conclusion
•In today's Web development, a good page design is
essential. A bad design will lead to the loss of visitors
and that can lead to a loss of business. In general, a
good page layout has to satisfy the basic elements of a
good page design.
•This includes color contrast, text organization, font
selection, style of a page, page size, graphics used, and
consistency. In order to create a well-designed page for
a specific audience.
15

More Related Content

PPT
JavaScript Tutorial
Bui Kiet
 
PPTX
Java programming course for beginners
Eduonix Learning Solutions
 
PPTX
Intro to React
Justin Reock
 
PPTX
ReactJS presentation.pptx
DivyanshGupta922023
 
PPTX
Java Input Output (java.io.*)
Om Ganesh
 
PPTX
Introduction to angular with a simple but complete project
Jadson Santos
 
PPTX
HTTP request and response
Sahil Agarwal
 
PDF
JavaScript Programming
Sehwan Noh
 
JavaScript Tutorial
Bui Kiet
 
Java programming course for beginners
Eduonix Learning Solutions
 
Intro to React
Justin Reock
 
ReactJS presentation.pptx
DivyanshGupta922023
 
Java Input Output (java.io.*)
Om Ganesh
 
Introduction to angular with a simple but complete project
Jadson Santos
 
HTTP request and response
Sahil Agarwal
 
JavaScript Programming
Sehwan Noh
 

What's hot (20)

PDF
HTTP Request and Response Structure
BhagyashreeGajera1
 
PPT
Php Presentation
Manish Bothra
 
PPTX
Ajax ppt - 32 slides
Smithss25
 
PPTX
React-JS Component Life-cycle Methods
ANKUSH CHAVAN
 
PPTX
Master page in Asp.net
RupinderjitKaur9
 
PPTX
[Final] ReactJS presentation
洪 鹏发
 
PPTX
Web development tool
Deep Bhavsar
 
PDF
Asp.net state management
priya Nithya
 
ODP
Datatype in JavaScript
Rajat Saxena
 
PDF
REST API and CRUD
Prem Sanil
 
PPTX
What is an API?
Muhammad Zuhdi
 
PPT
Struts
s4al_com
 
PPTX
Java Server Pages(jsp)
Manisha Keim
 
PPTX
Javascript
Nagarajan
 
PDF
Introduction to HTML, CSS, and JavaScript for Web Development
Qurinom Solutions
 
PDF
Lets make a better react form
Yao Nien Chung
 
PPTX
React workshop
Imran Sayed
 
PPTX
Angular 9
Raja Vishnu
 
HTTP Request and Response Structure
BhagyashreeGajera1
 
Php Presentation
Manish Bothra
 
Ajax ppt - 32 slides
Smithss25
 
React-JS Component Life-cycle Methods
ANKUSH CHAVAN
 
Master page in Asp.net
RupinderjitKaur9
 
[Final] ReactJS presentation
洪 鹏发
 
Web development tool
Deep Bhavsar
 
Asp.net state management
priya Nithya
 
Datatype in JavaScript
Rajat Saxena
 
REST API and CRUD
Prem Sanil
 
What is an API?
Muhammad Zuhdi
 
Struts
s4al_com
 
Java Server Pages(jsp)
Manisha Keim
 
Javascript
Nagarajan
 
Introduction to HTML, CSS, and JavaScript for Web Development
Qurinom Solutions
 
Lets make a better react form
Yao Nien Chung
 
React workshop
Imran Sayed
 
Angular 9
Raja Vishnu
 
Ad

Similar to Introduction to HTML, CSS, and JavaScript for Web Development (20)

PPTX
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
aadilsami37
 
PPTX
Web-Development-ppt (1).pptx
RaihanUddin57
 
PPTX
Web-Development-ppt.pptx
EleenaJha
 
PPTX
Web-Development-ppt.pptx for the student
GunavathyA
 
PPTX
amanWeb.ppt.pptx
vinitajain703
 
PPTX
html css presentation for the btech cse students
surjitbansal
 
PPTX
Web-Development-ppt.pptx
AADITYADEVA
 
PPT
varun ppt.ppt
ArunkumarKArun
 
PPTX
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
 
PPTX
WEB DEVELOPMENT.pptx
Rajnirani18
 
PPTX
Full Stack Web Developer (MERN STACK Developer.pptx
RamudgarYadav
 
PPTX
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
smart Scripts
 
PPTX
web development.pptx
MohdArbazraza
 
PDF
Web Development Mastery_ From Fundamentals to Expert-Level Skills.pdf
harshika excellence technology
 
PDF
Web development for an SEO and people which help you to built it for you
DanialSaeed6
 
PPTX
Web Development Agency in Noida in 2024 1
NadeemAnsari576752
 
PPTX
Gettings started with Web development
Ujjwal Ojha
 
PPTX
best Web Development Institute in Noida.pptx
ashishthakur730937
 
PDF
Web Development.pdf
Honey Monsoon
 
PDF
Web Development.pdf
Honey Monsoon
 
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
aadilsami37
 
Web-Development-ppt (1).pptx
RaihanUddin57
 
Web-Development-ppt.pptx
EleenaJha
 
Web-Development-ppt.pptx for the student
GunavathyA
 
amanWeb.ppt.pptx
vinitajain703
 
html css presentation for the btech cse students
surjitbansal
 
Web-Development-ppt.pptx
AADITYADEVA
 
varun ppt.ppt
ArunkumarKArun
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
chitrachauhan21
 
WEB DEVELOPMENT.pptx
Rajnirani18
 
Full Stack Web Developer (MERN STACK Developer.pptx
RamudgarYadav
 
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
smart Scripts
 
web development.pptx
MohdArbazraza
 
Web Development Mastery_ From Fundamentals to Expert-Level Skills.pdf
harshika excellence technology
 
Web development for an SEO and people which help you to built it for you
DanialSaeed6
 
Web Development Agency in Noida in 2024 1
NadeemAnsari576752
 
Gettings started with Web development
Ujjwal Ojha
 
best Web Development Institute in Noida.pptx
ashishthakur730937
 
Web Development.pdf
Honey Monsoon
 
Web Development.pdf
Honey Monsoon
 
Ad

Recently uploaded (20)

PDF
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
DOCX
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
PDF
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
PDF
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PDF
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PDF
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
CIFDAQ's Token Spotlight: SKY - A Forgotten Giant's Comeback?
CIFDAQ
 
A Day in the Life of Location Data - Turning Where into How.pdf
Precisely
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
CIFDAQ's Teaching Thursday: Moving Averages Made Simple
CIFDAQ
 
Top AI API Alternatives to OpenAI: A Side-by-Side Breakdown
vilush
 
Make GenAI investments go further with the Dell AI Factory - Infographic
Principled Technologies
 
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
Enable Enterprise-Ready Security on IBM i Systems.pdf
Precisely
 
Doc9.....................................
SofiaCollazos
 
This slide provides an overview Technology
mineshkharadi333
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
madgavkar20181017ppt McKinsey Presentation.pdf
georgschmitzdoerner
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
CIFDAQ's Token Spotlight: SKY - A Forgotten Giant's Comeback?
CIFDAQ
 

Introduction to HTML, CSS, and JavaScript for Web Development

  • 1. Definition The word Web Development is made up of two words: – Web: It refers to websites, web pages or anything that works over the internet. – Development: Building the application from scratch. 1
  • 2. Introduction • Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. • It is the creation of an application that works over the internet i.e. websites. • The term development is usually reserved for the actual construction of these things (that is to say, the programming of sites). The basic tools involved are programming languages called HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. 2
  • 3. 3
  • 4. Web Development can be classified into two ways: • Frontend Development: The part of a website that the user interacts directly is termed as front end. It is also referred to as the ‘client side’ of the application. • Backend Development: Backend is the server side of a website. It is the part of the website that users cannot see and interact. It is the portion of software that does not come in direct contact with the users. It is used to store and arrange data. 4 Classification
  • 6. • HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion of web pages using markup language. It acts as a skeleton for a website since it is used to make the structure of a website. • CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. It is used to style our website. • JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website. ●●● 6 Frontend Roadmap
  • 7. • Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular CSS framework for developing responsive, mobile-first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones). • Bootstrap 4 • Bootstrap 5 ●●● 7 Frontend Roadmap
  • 8. Frontend Frameworks and Libraries: • AngularJS • React.js • VueJS • jQuery • Bootstrap • Material UI • Tailwind CSS • jQuery UI 8 Frontend Roadmap
  • 10. Backend Roadmap • PHP: PHP is a server-side scripting language designed specifically for web development. • Java: Java is one of the most popular and widely used programming language. It is highly scalable. • Python: Python is a programming language that lets you work quickly and integrate systems more efficiently. • Node.js: Node.js is an open source and cross- platform runtime environment for executing JavaScript code outside a browser. ●●● 10
  • 11. Backend Roadmap Back End Frameworks The list of back end frameworks are: Express, Django, Rails, Laravel, Spring, etc. 11
  • 12. Full-Stack Developer • A Full-Stack Developer is someone familiar with both front- and back-end development. They are generalists, adept at wearing both hats, and familiar with every layer of development. Obviously, employers want to hire Full-Stack Developers – according to an Indeed study, they are the fourth-most in-demand job in tech. • If the title is contentious, it’s in the generalist nature of the position. Developers who specialize in the front-end or back-end often bristle at the notion that someone could be equally adept at both – the expression “jack-of-all-trades, master of none” comes to mind. 12
  • 13. What Does Web-Developer Do? •Translating wireframe designs into working code •Creating the architecture and content of a site •Building in functionality and responsivity •Making a site go live •Updating and renovating sites •Troubleshooting, fixing bugs, and glitches 13
  • 14. Tools Used •WordPress •Joomla! •Drupal •TYPO3 •Adobe Experience Manager •Sketch – A toolkit for digital designs •InVision Cloud – A leading digital product design platform •Sublime Text – A code editor for advanced website design •Foundation – A family of front-end frameworks •Chrome DevTools – Tools from the popular browser that facilitate web development 14
  • 15. Conclusion •In today's Web development, a good page design is essential. A bad design will lead to the loss of visitors and that can lead to a loss of business. In general, a good page layout has to satisfy the basic elements of a good page design. •This includes color contrast, text organization, font selection, style of a page, page size, graphics used, and consistency. In order to create a well-designed page for a specific audience. 15

Editor's Notes

  • #2: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #3: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #4: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #5: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #6: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #7: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #8: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #9: SAY: Before we wrap up the course, let’s review what we have learned today. During this course, we have <READ the bullets from the slide.> GO to next slide.
  • #10: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #11: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #12: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #13: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #14: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #15: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.
  • #16: SAY: The purpose of epidemiology in public health practice is to discover the agent, host, and environmental factors that affect health; determine the relative importance of causes of illness, disability, and death; identify those segments of the population that have the greatest risk from specific causes of ill health; and evaluate the effectiveness of health programs and services in improving population health. GO to next slide.