SlideShare ist ein Scribd-Unternehmen logo
1 von 11
Downloaden Sie, um offline zu lesen
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.
Classification
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.
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.
• 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
Frontend Frameworks and
Libraries:
•AngularJS
•React.js
•VueJS
•Bootsap
• jQuery
•Tailwind CSS
•jQuery UI
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.
Back End Frameworks
The list of back end frameworks are:
Express,
Django,
Rails,
Laravel,
Spring, etc.
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.
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
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
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.

Weitere ähnliche Inhalte

Ähnlich wie Introduction to HTML, CSS, and JavaScript for Web Development

Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...smart Scripts
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentpuneetbatra24
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web developmentUjjwal Ojha
 
Full Stack Web Development | MAGES Institute
Full Stack Web Development | MAGES Institute Full Stack Web Development | MAGES Institute
Full Stack Web Development | MAGES Institute JeniferJenkins2
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxRamudgarYadav
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...Demystifying Web Development A Comprehensive Guide to Understanding the Basic...
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...dreamtech123
 
internship presentation 123445667890987a
internship presentation 123445667890987ainternship presentation 123445667890987a
internship presentation 123445667890987adhimanakshit76
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxssuser485fb2
 
web development.pptx
web development.pptxweb development.pptx
web development.pptxMohdArbazraza
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx12KritiGaneriwal
 
Web development revolution
Web development revolutionWeb development revolution
Web development revolutionAhmed El-Zekred
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.JohnLagman3
 

Ähnlich wie Introduction to HTML, CSS, and JavaScript for Web Development (20)

Mini Project PPT.pptx
Mini Project PPT.pptxMini Project PPT.pptx
Mini Project PPT.pptx
 
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
Boost Your Online Presence with SmartScripts.tech - The Best Digital Marketin...
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web development
 
Full Stack Web Development | MAGES Institute
Full Stack Web Development | MAGES Institute Full Stack Web Development | MAGES Institute
Full Stack Web Development | MAGES Institute
 
Full Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptxFull Stack Web Developer (MERN STACK Developer.pptx
Full Stack Web Developer (MERN STACK Developer.pptx
 
Low-Cost Digital Marketing Service in Nagpur | PSK Technologies
Low-Cost Digital Marketing Service in Nagpur | PSK TechnologiesLow-Cost Digital Marketing Service in Nagpur | PSK Technologies
Low-Cost Digital Marketing Service in Nagpur | PSK Technologies
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
PPT ON UI.pptx
PPT ON UI.pptxPPT ON UI.pptx
PPT ON UI.pptx
 
UI Web Development.pptx
UI Web Development.pptxUI Web Development.pptx
UI Web Development.pptx
 
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...Demystifying Web Development A Comprehensive Guide to Understanding the Basic...
Demystifying Web Development A Comprehensive Guide to Understanding the Basic...
 
internship presentation 123445667890987a
internship presentation 123445667890987ainternship presentation 123445667890987a
internship presentation 123445667890987a
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
 
Intro to web development
Intro to web developmentIntro to web development
Intro to web development
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptxINDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
 
Web development revolution
Web development revolutionWeb development revolution
Web development revolution
 
Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.Web-Development Powerpoint Presentation.
Web-Development Powerpoint Presentation.
 

Kürzlich hochgeladen

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxjbellis
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingScyllaDB
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMKumar Satyam
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiRaviKumarDaparthi
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfalexjohnson7307
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهMohamed Sweelam
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 

Kürzlich hochgeladen (20)

Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Vector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptxVector Search @ sw2con for slideshare.pptx
Vector Search @ sw2con for slideshare.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
الأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهلهالأمن السيبراني - ما لا يسع للمستخدم جهله
الأمن السيبراني - ما لا يسع للمستخدم جهله
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 

Introduction to HTML, CSS, and JavaScript for Web Development

  • 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. Classification 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.
  • 3. 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.
  • 4. • 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
  • 6. 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.
  • 7. Back End Frameworks The list of back end frameworks are: Express, Django, Rails, Laravel, Spring, etc.
  • 8. 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.
  • 9. 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
  • 10. 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
  • 11. 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.