SlideShare a Scribd company logo
Front-End Web Developer Nanodegree
Session 1
Agenda
• What is Front-end application.
• Front-end vs Back-end
• Front-end job titles
• UI vs UX
• Objective of web application
Front-end application
• Front-end application is one that user interact with
directly.
• Front-end is everything involved with what the user sees.
• We can built complete web application using front-end
tools (static web site) without any backend development.
Front-end vs Back-end
• Front-end developers are
responsible for a website’s
user-facing code and the
architecture of its immersive
user experiences. In order
to execute those objectives,
front-end developers must
be adept at three main
languages: HTML, CSS,
and Javascript
programming.
• The back end of a website
consists of a server, an
application, and a database.
• back-end developers use
server-side languages like
PHP, Ruby, Python, Java,
and .Net to build an
application, and tools like
MySQL, Oracle, and SQL
Server to find, save, or
change data and serve it
back to the user in front-end
code.
Front-end Job Titles
Front-end developer
• Front-end developer :mean some one with good
knowledge in some languages like HTML ,CSS and
JavaScript. He need to be familiar with frameworks like
Bootstrap, Foundation, Backbone, AngularJS, and
EmberJS, jQuery and LESS.
Front-end Designer
• Front-end Designer: and call web designer . Web
designer could just be someone who designs the sites in
program like photoshop or fireworks and will never touch
the code.
UI vs UX
User Interface
• user Interface (UI): is basically a visual design. It not
usually involved in the implementation of the design. It
might use light HTML and CSS. It more related to color
and photos.
• user Interface (UI): and is a digital field , which includes
responsibility for cooperation and work with developer
code.
User Experience
• User Experience (UX): it depend on study and research
how people use site and make changes through a lot of
testing.
• User Experience (UX): is the process of enhancing
customer satisfaction and loyalty by improving the
usability , ease to use and pleasure provided in the
interaction between the customer and the product.
Objective of web application
1. See the information in a format that is easy to read and
relevant.
2. Use a large variety of devices with variety screen sizes .
3. Variety screen resolutions.
4. Ensure that web application comes up correctly in
different browsers.
5. It must be cross-platform and cross-device
Front-end Language
(HTML)
• HyperText Markup Language (HTML)
• (HTML) is the backbone of any website development
process.
• Hypertext means that text has links, termed hyperlinks,
embedded in it.
• When a user clicks on a word or a phrase that has a
hyperlink, it will bring another webpage.
Front-end Language
(CSS)
• Cascading Style Sheets (CSS)
• (CSS) controls the presentation aspect of the site and
allows your site to have its own unique look. It does this
by maintaining style sheets which sit on top of other style
rules and are triggered based on other inputs, such as
device screen size and resolution.
Front-end Language
(JavaScript)
• JavaScript is an event-based imperative programming
language.
• JavaScript code can also actively retrieve content from
the web ,and also react to server-side events as well,
adding a truly dynamic nature to the web page
experience.
General Talk
• Course projects.
• Course Target.
• Front- end career.
• Other useful material.
Contact me
Engmarwaayad@gmail.com
https://eg.linkedin.com/in/marwa-ayad-mohamed-
0a405215
Ad

More Related Content

What's hot (20)

Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
Web development
Web developmentWeb development
Web development
Sunil Moolchandani
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
Katy Slemon
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
A presentation on front end development
A presentation on front end development   A presentation on front end development
A presentation on front end development
Veronica Ojochona Michael (MCP)
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
Wasim Shemna
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
Milind Gokhale
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Kannika Kong
 
Asp net
Asp netAsp net
Asp net
Dr. C.V. Suresh Babu
 
Js ppt
Js pptJs ppt
Js ppt
Rakhi Thota
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
Report html5
Report html5Report html5
Report html5
Himanshu Phulara
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
Benji Harrison
 
List of Web Technologies used in Web Development
List of Web Technologies used in Web DevelopmentList of Web Technologies used in Web Development
List of Web Technologies used in Web Development
Jayapal Reddy Nimmakayala
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
Lemi Orhan Ergin
 
Top web development tools
Top web development toolsTop web development tools
Top web development tools
BusinessDevelopment35
 
Difference between-web-designing-and-web-development
Difference between-web-designing-and-web-developmentDifference between-web-designing-and-web-development
Difference between-web-designing-and-web-development
Global Media Insight
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
Abhishekchauhan863165
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
Katy Slemon
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
JohnTaieb
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
Wasim Shemna
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
Milind Gokhale
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
Mohammed Safwat
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3
Kannika Kong
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Jayant Surana
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
admecindia1
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
Benji Harrison
 
List of Web Technologies used in Web Development
List of Web Technologies used in Web DevelopmentList of Web Technologies used in Web Development
List of Web Technologies used in Web Development
Jayapal Reddy Nimmakayala
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
Lemi Orhan Ergin
 

Similar to Front end development session1 (20)

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
PSK Technolgies Pvt. Ltd. IT Company Nagpur
 
PPT ON UI.pptx
PPT ON UI.pptxPPT ON UI.pptx
PPT ON UI.pptx
ssusera5f9d81
 
FULL STACK DEVELnxcOPMENT BY RAHUL.pptx
FULL STACK DEVELnxcOPMENT  BY RAHUL.pptxFULL STACK DEVELnxcOPMENT  BY RAHUL.pptx
FULL STACK DEVELnxcOPMENT BY RAHUL.pptx
sg6338123
 
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbH1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
harinim886
 
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjks1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
harinim886
 
The Importance of Programming Languages for Web Developers.pptx
The Importance of Programming Languages for Web Developers.pptxThe Importance of Programming Languages for Web Developers.pptx
The Importance of Programming Languages for Web Developers.pptx
mbcaday
 
Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online Training
Front End UI Online Training from India
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
Qurinom Solutions
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
MohdArbazraza
 
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
RamudgarYadav
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf
preeti katiyar
 
Mastering Web Development.pdf
Mastering Web Development.pdfMastering Web Development.pdf
Mastering Web Development.pdf
WiwinIsmawardi
 
amanWeb.ppt.pptx
amanWeb.ppt.pptxamanWeb.ppt.pptx
amanWeb.ppt.pptx
vinitajain703
 
Web Development
Web DevelopmentWeb Development
Web Development
Harshdeep Singh
 
Frontend Developer Roadmap PDF By Scholarhat
Frontend Developer Roadmap PDF By ScholarhatFrontend Developer Roadmap PDF By Scholarhat
Frontend Developer Roadmap PDF By Scholarhat
Scholarhat
 
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
puneetbatra24
 
Becoming a Software Developer
Becoming a Software DeveloperBecoming a Software Developer
Becoming a Software Developer
Xyples LLC
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
RaihanUddin57
 
html css presentation for the btech cse students
html css presentation for the btech cse studentshtml css presentation for the btech cse students
html css presentation for the btech cse students
surjitbansal
 
Mini Project PPT.pptx
Mini Project PPT.pptxMini Project PPT.pptx
Mini Project PPT.pptx
AbhishekKumar961766
 
FULL STACK DEVELnxcOPMENT BY RAHUL.pptx
FULL STACK DEVELnxcOPMENT  BY RAHUL.pptxFULL STACK DEVELnxcOPMENT  BY RAHUL.pptx
FULL STACK DEVELnxcOPMENT BY RAHUL.pptx
sg6338123
 
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbH1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
H1.pptxjkbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
harinim886
 
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjks1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
s1 (1).hvjhbbbbbjkjvbbhjhbhnjkjhnhbjbhkjk
harinim886
 
The Importance of Programming Languages for Web Developers.pptx
The Importance of Programming Languages for Web Developers.pptxThe Importance of Programming Languages for Web Developers.pptx
The Importance of Programming Languages for Web Developers.pptx
mbcaday
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
Qurinom Solutions
 
web development.pptx
web development.pptxweb development.pptx
web development.pptx
MohdArbazraza
 
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
RamudgarYadav
 
7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf7 useful websites for front end developers.pdf
7 useful websites for front end developers.pdf
preeti katiyar
 
Mastering Web Development.pdf
Mastering Web Development.pdfMastering Web Development.pdf
Mastering Web Development.pdf
WiwinIsmawardi
 
Frontend Developer Roadmap PDF By Scholarhat
Frontend Developer Roadmap PDF By ScholarhatFrontend Developer Roadmap PDF By Scholarhat
Frontend Developer Roadmap PDF By Scholarhat
Scholarhat
 
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
puneetbatra24
 
Becoming a Software Developer
Becoming a Software DeveloperBecoming a Software Developer
Becoming a Software Developer
Xyples LLC
 
Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
RaihanUddin57
 
html css presentation for the btech cse students
html css presentation for the btech cse studentshtml css presentation for the btech cse students
html css presentation for the btech cse students
surjitbansal
 
Ad

More from marwa Ayad Mohamed (9)

2017 arab wic marwa ayad machine learning
2017 arab wic marwa ayad machine learning2017 arab wic marwa ayad machine learning
2017 arab wic marwa ayad machine learning
marwa Ayad Mohamed
 
Google ar
Google arGoogle ar
Google ar
marwa Ayad Mohamed
 
software testing
software testing software testing
software testing
marwa Ayad Mohamed
 
Front end development gurant
Front end development gurantFront end development gurant
Front end development gurant
marwa Ayad Mohamed
 
Tensorflow windows installation
Tensorflow windows installationTensorflow windows installation
Tensorflow windows installation
marwa Ayad Mohamed
 
Tensorflow
TensorflowTensorflow
Tensorflow
marwa Ayad Mohamed
 
Mobile gpu cloud computing
Mobile gpu cloud computing Mobile gpu cloud computing
Mobile gpu cloud computing
marwa Ayad Mohamed
 
Create first-web application-googleappengine
Create first-web application-googleappengineCreate first-web application-googleappengine
Create first-web application-googleappengine
marwa Ayad Mohamed
 
 Introduction google cloud platform
 Introduction google cloud platform Introduction google cloud platform
 Introduction google cloud platform
marwa Ayad Mohamed
 
Ad

Recently uploaded (20)

Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)Into The Box Conference Keynote Day 1 (ITB2025)
Into The Box Conference Keynote Day 1 (ITB2025)
Ortus Solutions, Corp
 
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxIncreasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Anoop Ashok
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptx
Samuele Fogagnolo
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxSpecial Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
shyamraj55
 
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven InsightsAndrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell: Transforming Business Strategy Through Data-Driven Insights
Andrew Marnell
 
What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...What is Model Context Protocol(MCP) - The new technology for communication bw...
What is Model Context Protocol(MCP) - The new technology for communication bw...
Vishnu Singh Chundawat
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
BookNet Canada
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 

Front end development session1

  • 1. Front-End Web Developer Nanodegree Session 1
  • 2. Agenda • What is Front-end application. • Front-end vs Back-end • Front-end job titles • UI vs UX • Objective of web application
  • 3. Front-end application • Front-end application is one that user interact with directly. • Front-end is everything involved with what the user sees. • We can built complete web application using front-end tools (static web site) without any backend development.
  • 4. Front-end vs Back-end • Front-end developers are responsible for a website’s user-facing code and the architecture of its immersive user experiences. In order to execute those objectives, front-end developers must be adept at three main languages: HTML, CSS, and Javascript programming. • The back end of a website consists of a server, an application, and a database. • back-end developers use server-side languages like PHP, Ruby, Python, Java, and .Net to build an application, and tools like MySQL, Oracle, and SQL Server to find, save, or change data and serve it back to the user in front-end code.
  • 6. Front-end developer • Front-end developer :mean some one with good knowledge in some languages like HTML ,CSS and JavaScript. He need to be familiar with frameworks like Bootstrap, Foundation, Backbone, AngularJS, and EmberJS, jQuery and LESS.
  • 7. Front-end Designer • Front-end Designer: and call web designer . Web designer could just be someone who designs the sites in program like photoshop or fireworks and will never touch the code.
  • 9. User Interface • user Interface (UI): is basically a visual design. It not usually involved in the implementation of the design. It might use light HTML and CSS. It more related to color and photos. • user Interface (UI): and is a digital field , which includes responsibility for cooperation and work with developer code.
  • 10. User Experience • User Experience (UX): it depend on study and research how people use site and make changes through a lot of testing. • User Experience (UX): is the process of enhancing customer satisfaction and loyalty by improving the usability , ease to use and pleasure provided in the interaction between the customer and the product.
  • 11. Objective of web application 1. See the information in a format that is easy to read and relevant. 2. Use a large variety of devices with variety screen sizes . 3. Variety screen resolutions. 4. Ensure that web application comes up correctly in different browsers. 5. It must be cross-platform and cross-device
  • 12. Front-end Language (HTML) • HyperText Markup Language (HTML) • (HTML) is the backbone of any website development process. • Hypertext means that text has links, termed hyperlinks, embedded in it. • When a user clicks on a word or a phrase that has a hyperlink, it will bring another webpage.
  • 13. Front-end Language (CSS) • Cascading Style Sheets (CSS) • (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It does this by maintaining style sheets which sit on top of other style rules and are triggered based on other inputs, such as device screen size and resolution.
  • 14. Front-end Language (JavaScript) • JavaScript is an event-based imperative programming language. • JavaScript code can also actively retrieve content from the web ,and also react to server-side events as well, adding a truly dynamic nature to the web page experience.
  • 15. General Talk • Course projects. • Course Target. • Front- end career. • Other useful material.