SlideShare a Scribd company logo
1 of 9
A PRESENTATION ON FRONT END
DEVELOPMENT
BY
VERONICA OJOCHONA MICHAEL
WHAT IS FRONT END DEVELOPMENT
 It is a mix of programming and layout that powers the visuals and
interactions of the web. It comprises of 3 basic tools:
 HTML(hyper text mark up language): describes the contents of a file, it
describes the structure of a page. is the backbone of any website
development process, without which a web page doesn’t exist Html breaks
into two <head> and <body>
 CSS(cascading style sheet): describes how a page looks, it is used to
style the page, it is responsible for appearance. IT coexist in html in three
forms: inline, document, and external.
 JavaScript: is used to transform a static HTML page into a dynamic
interface. It basically deals with how a page behaves or how it functions.
FRONT END LIKE NATURAL ; A TODLER’S
APPROACH TO FRONT END TECHNOLOGIES
 Let’s imagine that a website is like a car. There are a lot of things
inside of a car that help it run – make it speed up, slow down.
 But then there are items that you directly use in the car to make it
go: gas and brake pedals, steering wheels. And there are also a lot
of things on that car that make it fun to drive and cool to look at:
a racing stripe, a slick leather interior. All the stuff you can
directly touch, see or hear is the front end.
WHAT THE FUSS ALL ABOUT, WHY YOU SHOULD CARE
ABOUT FRONT END DEVELOPMENT
About a decade ago, web applications started overtaking desktop
applications (usually developed in Java Swing or VB.NET) in
order to improve compatibility with the user’s computers. By
adopting HTML for the user interface (UI), we no longer need to
worry about the user’s operational system, as long as the user can
access a web browser. This way, our software can even support
mobile devices. We need to care about front end because without
the front end, the backend is useless, so it basically the backbone
to a complete website which gives the appearance of a page and
beautifying the page. To be in a good shape as a developer, one
needs to update his/her skills and knowledge all the time because
technology advances each day.
HOW TO START MY FIRST HTML PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my first html page</title>
</head>
<body>
</body>
</html>
A simple CSS code
 Body{
Margin: 10px;
Padding:20px;
Align-text: center;
Height:50%;
Width:50%;
}
A simple JavaScript code
 <script language="JavaScript">
 <!- -
document.write("Hello World!");
 //-->
 </script>
REFERENCES
 What is the fuss all about with front-end
development by Tiago Garcia, August 25, 2014
 JavaScript for beginners by Nongjian Zhou, October
26, 2000
THANKS FOR LISTENING
Devcriber Veralyn

More Related Content

What's hot

Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web DevelopmentParvez Mahbub
 
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 web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"ecentricarts
 
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-developmentGlobal Media Insight
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
Difference between frontend and backend
Difference between frontend and backendDifference between frontend and backend
Difference between frontend and backendRahul Rana
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiTemitayo Fadojutimi
 
Introduction to Basic Concepts in Web
Introduction to Basic Concepts in WebIntroduction to Basic Concepts in Web
Introduction to Basic Concepts in WebJussi Pohjolainen
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development toolsBenji Harrison
 

What's hot (20)

Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Introduction to Web Development
Introduction to Web DevelopmentIntroduction to Web Development
Introduction to Web Development
 
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
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"Web accessibility 101: The why, who, what, and how of "a11y"
Web accessibility 101: The why, who, what, and how of "a11y"
 
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
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Difference between frontend and backend
Difference between frontend and backendDifference between frontend and backend
Difference between frontend and backend
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
ashish ppt webd.pptx
ashish ppt webd.pptxashish ppt webd.pptx
ashish ppt webd.pptx
 
Introduction to Basic Concepts in Web
Introduction to Basic Concepts in WebIntroduction to Basic Concepts in Web
Introduction to Basic Concepts in Web
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
 

Similar to A presentation on front end development

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptxmalise2997
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxacademicjfurio
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The WebsiteJulie May
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptxPalash Sukla Das
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websiteswebsiteunlimited
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignataroJohn Coonen
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web developmentEstelle Weyl
 
The Guide to Website Development for Beginners.ppt
The Guide to Website Development for Beginners.pptThe Guide to Website Development for Beginners.ppt
The Guide to Website Development for Beginners.pptConnect Solutions
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonMukalele Rogers
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingHemant Sarthak
 

Similar to A presentation on front end development (20)

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
 
Intro to bootcamp
Intro to bootcampIntro to bootcamp
Intro to bootcamp
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptxppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
 
Day1
Day1Day1
Day1
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The Website
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Basics of Web Development.pptx
Basics of Web Development.pptxBasics of Web Development.pptx
Basics of Web Development.pptx
 
Websites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly WebsitesWebsites Unlimited - Pay Monthly Websites
Websites Unlimited - Pay Monthly Websites
 
UI Web Development.pptx
UI Web Development.pptxUI Web Development.pptx
UI Web Development.pptx
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
Worry free web development
Worry free web developmentWorry free web development
Worry free web development
 
The Guide to Website Development for Beginners.ppt
The Guide to Website Development for Beginners.pptThe Guide to Website Development for Beginners.ppt
The Guide to Website Development for Beginners.ppt
 
1_Intro_toHTML.ppt
1_Intro_toHTML.ppt1_Intro_toHTML.ppt
1_Intro_toHTML.ppt
 
Web designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lessonWeb designing and publishing computer studies theory lesson
Web designing and publishing computer studies theory lesson
 
Ecommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project CodingEcommerce Mini Project / Group Project Coding
Ecommerce Mini Project / Group Project Coding
 

Recently uploaded

BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEOrtus Solutions, Corp
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfPower Karaoke
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfAlina Yurenko
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxnada99848
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 

Recently uploaded (20)

BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASEBATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
BATTLEFIELD ORM: TIPS, TACTICS AND STRATEGIES FOR CONQUERING YOUR DATABASE
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdfGOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
GOING AOT WITH GRAALVM – DEVOXX GREECE.pdf
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 

A presentation on front end development

  • 1. A PRESENTATION ON FRONT END DEVELOPMENT BY VERONICA OJOCHONA MICHAEL
  • 2. WHAT IS FRONT END DEVELOPMENT  It is a mix of programming and layout that powers the visuals and interactions of the web. It comprises of 3 basic tools:  HTML(hyper text mark up language): describes the contents of a file, it describes the structure of a page. is the backbone of any website development process, without which a web page doesn’t exist Html breaks into two <head> and <body>  CSS(cascading style sheet): describes how a page looks, it is used to style the page, it is responsible for appearance. IT coexist in html in three forms: inline, document, and external.  JavaScript: is used to transform a static HTML page into a dynamic interface. It basically deals with how a page behaves or how it functions.
  • 3. FRONT END LIKE NATURAL ; A TODLER’S APPROACH TO FRONT END TECHNOLOGIES  Let’s imagine that a website is like a car. There are a lot of things inside of a car that help it run – make it speed up, slow down.  But then there are items that you directly use in the car to make it go: gas and brake pedals, steering wheels. And there are also a lot of things on that car that make it fun to drive and cool to look at: a racing stripe, a slick leather interior. All the stuff you can directly touch, see or hear is the front end.
  • 4. WHAT THE FUSS ALL ABOUT, WHY YOU SHOULD CARE ABOUT FRONT END DEVELOPMENT About a decade ago, web applications started overtaking desktop applications (usually developed in Java Swing or VB.NET) in order to improve compatibility with the user’s computers. By adopting HTML for the user interface (UI), we no longer need to worry about the user’s operational system, as long as the user can access a web browser. This way, our software can even support mobile devices. We need to care about front end because without the front end, the backend is useless, so it basically the backbone to a complete website which gives the appearance of a page and beautifying the page. To be in a good shape as a developer, one needs to update his/her skills and knowledge all the time because technology advances each day.
  • 5. HOW TO START MY FIRST HTML PAGE <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my first html page</title> </head> <body> </body> </html>
  • 6. A simple CSS code  Body{ Margin: 10px; Padding:20px; Align-text: center; Height:50%; Width:50%; }
  • 7. A simple JavaScript code  <script language="JavaScript">  <!- - document.write("Hello World!");  //-->  </script>
  • 8. REFERENCES  What is the fuss all about with front-end development by Tiago Garcia, August 25, 2014  JavaScript for beginners by Nongjian Zhou, October 26, 2000