SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
Front-End
Development
MEDICAPS UNIVERSITY
CrystalTech Services Pvt. Ltd.
What is Front-End Development
Front-end web development, also known as client-side development is the practice of producing
HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact
with them directly. The challenge associated with front end development is that the tools and
techniques used to create the front end of a website change constantly and so the developer
needs to constantly be aware of how the field is developing.
The objective of designing a site is to ensure that when the users open up the site they see the
information in a format that is easy to read and relevant. This is further complicated by the fact
that users now use a large variety of devices with varying screen sizes and resolutions thus
forcing the designer to take into consideration these aspects when designing the site. They need
to ensure that their site comes up correctly in different browsers (cross-browser), different
operating systems (cross-platform) and different devices (cross-device), which requires careful
planning on the side of the developer.
Web technologies
A front-end developer architects and develops websites and applications
using web technologies (i.e., HTML, CSS, DOM, and JavaScript), which run
on the Open Web Platform or act as compilation input for non-web
platform environments (i.e., React Native).
Frontend frameworks are needed to facilitate the job of web developers:
these software packages usually provide pre-written/reusable code
modules, standardized front-end technologies, and ready-made interface
blocks making it faster and easier for developers to craft sustainable web
applications and UIs without coding every function or object from scratch.
Web Technologies
HTML: the key front-end technology
HTML (or Hypertext Markup Language) is a computer language designed to
create websites that later can be explored by anybody who accesses the
Internet. HTML is normally employed to structure a web document. It
defines such elements as headlines or paragraphs and enables embedding
images, video, and other media
HTML is composed of a series of shortcodes called tags, normalized into a
text-file by a site creator. The text is then stored as an HTML file and
observed through a browser. The browser scans the file and interprets the
text into a visible form, and in the best case, renders the page as the
designer had planned.
CSS : Styling your facade
CSS (or Cascading Style Sheets) is a style sheet language. It’s applied to
define how HTML elements are supposed to be presented on a webpage in
terms of design, layout, and variations for diverse devices with different
screen sizes. CSS masters the layout of numerous different web pages at a
time
CSS frameworks. A CSS framework is a set of default CSS and HTML files. It
extends a front-end developer’s capabilities for website design. In addition
to assisting while building a responsive design, CSS frameworks also
present distinct and symmetric layouts, saving developers from writing
code from ground zero at every occasion.
DOM: the web page structure
The Document Object Model (DOM) is defined as a programming interface
for HTML and XML documents. It interprets the page so that programs can
modify the document structure, style, and content. The DOM renders the
document as nodes and objects, enabling programming languages to
connect to the page.
The Document Object Model (DOM) represents this document so it can be
modified. The DOM is an object-oriented representation of the web page,
which can be altered with a scripting language like JavaScript.
JavaScript: making the Web alive
JavaScript (JS) is one of the most popular scripting languages. It’s mostly
renowned for providing a full stack of technologies for both front-end and
back-end development. As we are talking about the first one, it’s applied to
make web pages dynamic.
JS boosts a website’s overall interactivity. It enables modeling animated UI
components such as image sliders, pop-ups, extensive site navigation
menus, and more. JavaScript provides a website with extended
functionality that isn’t otherwise achievable with HTML and CSS alone.
JavaScript allows web pages to reply to users’ actions and dynamically
refresh themselves.
JavaScript: Frameworks and Libraries
Frameworks are templates to create a website or a web application. They
provide a structure (such as a skeleton or scaffolding) on which to arrange
the whole project. While the framework sets the page templates, they
build the structure with particular allocated areas to embed a framework
code in.
Libraries are sets of prewritten code snippets used and reused to
implement core features of JavaScript. The snippet can be easily
integrated into an existing project code when necessary.
Javascript Frameworks
React or Angular
Angular is a front-end framework powered by Google that is compatible with
most of the common code editors. Angular is intended to create dynamic,
single-page web applications (SPAs), and progressive web-apps.
React is an open-source library for building dynamic user interfaces, born
and bred by Facebook. The framework is applied to create web-applications
with multiple dynamic components. It relies on JavaScript and JSX, a
Facebook PHP language extension. React enables building reusable HTML
elements for the front end. React also includes React Native, a dedicated
cross-platform mobile development framework.
Javascript Libraries
jQuery, in turn, is aimed at controlling HTML documents. It has a
simple API to control events and design animation in browsers.
Aside from that, jQuery is applied to manipulate the Document
Object Model (DOM) and serves as a plugin development tool as
well. It also comes with a lighter cross-browser library, jQuery UI for
a mobile framework jQuery Mobile and for graphic interface
construction.
D3.js is a data-driven library for data visualization. By tying
temporary data to DOM and implementing data-driven changes to
the document, the library enables managing data and making
dynamic data visualizations. It can uphold and process large
datasets and dynamic responses for interaction and animation. D3’s
functional style permits code reusing and runs with CSV and HTML.
Ember.js is a framework for SPAs, mobile, and desktop applications.
It uses the model-view-view-model (MVVM) pattern. Ember tools
enable designing a development environment, while its command-
line interface gives tools for script automation.
Three.js is a cross-browser JavaScript library and application
programming interface (API) used to create and display animated
3D computer graphics in a web browser using WebGL. The source
code is hosted in a repository on GitHub.
p5.js is a client-side JS platform that empowers artists, designers,
students, and anyone to learn to code and express themselves
creatively on the web. It is based on the core principles of
Processing.
Thank You

Más contenido relacionado

Was ist angesagt?

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 SQLJayant Surana
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designingAanand Bohara
 
Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design PresentationEugen Figursky
 
Web Publishing: An Overview of Tools and Service
Web Publishing: An Overview of Tools and ServiceWeb Publishing: An Overview of Tools and Service
Web Publishing: An Overview of Tools and Servicekilmeny21
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design Mindy McAdams
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1Shahrzad Peyman
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3Gopi A
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing PresentationRahulSuri30
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 

Was ist angesagt? (20)

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
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Jsp Introduction Tutorial
Jsp Introduction TutorialJsp Introduction Tutorial
Jsp Introduction Tutorial
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
 
Responsive Design Presentation
Responsive Design PresentationResponsive Design Presentation
Responsive Design Presentation
 
Web Development
Web DevelopmentWeb Development
Web Development
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Web Publishing: An Overview of Tools and Service
Web Publishing: An Overview of Tools and ServiceWeb Publishing: An Overview of Tools and Service
Web Publishing: An Overview of Tools and Service
 
Web development
Web developmentWeb development
Web development
 
Rakshat bhati
Rakshat bhatiRakshat bhati
Rakshat bhati
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 
Presentation about html5 css3
Presentation about html5 css3Presentation about html5 css3
Presentation about html5 css3
 
A presentation on front end development
A presentation on front end development   A presentation on front end development
A presentation on front end development
 
Web Designing Presentation
Web Designing PresentationWeb Designing Presentation
Web Designing Presentation
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 

Ähnlich wie It ppt.pptx

Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modiDeepak Modi
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modiDeepak Modi
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Best Web Development Courses - Classes  in Pune | Web Development Classes in ...Best Web Development Courses - Classes  in Pune | Web Development Classes in ...
Best Web Development Courses - Classes in Pune | Web Development Classes in ...Swati Pardeshi
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Best Web Development Courses - Classes  in Pune | Web Development Classes in ...Best Web Development Courses - Classes  in Pune | Web Development Classes in ...
Best Web Development Courses - Classes in Pune | Web Development Classes in ...Swati Pardeshi
 
Web Design & Development Courses in Pune | 3DOT Technologies
Web Design & Development Courses  in Pune | 3DOT TechnologiesWeb Design & Development Courses  in Pune | 3DOT Technologies
Web Design & Development Courses in Pune | 3DOT Technologiesabeda786
 
Introduction To Website Development
Introduction To Website DevelopmentIntroduction To Website Development
Introduction To Website Developmentzaidfarooqui974
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptxJenaj2
 
Introduction to Frontend Technologies
Introduction to Frontend TechnologiesIntroduction to Frontend Technologies
Introduction to Frontend TechnologiesaTeam soft solutions
 
Exploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonExploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonaTeam soft solutions
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in puneNidhi Samdani
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in puneNidhi Samdani
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developernariyaravi
 

Ähnlich wie It ppt.pptx (20)

Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modi
 
3 dot technologies by deepak modi
3 dot technologies by deepak modi3 dot technologies by deepak modi
3 dot technologies by deepak modi
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
 
ashish ppt webd.pptx
ashish ppt webd.pptxashish ppt webd.pptx
ashish ppt webd.pptx
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Best Web Development Courses - Classes  in Pune | Web Development Classes in ...Best Web Development Courses - Classes  in Pune | Web Development Classes in ...
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
 
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
Best Web Development Courses - Classes  in Pune | Web Development Classes in ...Best Web Development Courses - Classes  in Pune | Web Development Classes in ...
Best Web Development Courses - Classes in Pune | Web Development Classes in ...
 
Web Design & Development Courses in Pune | 3DOT Technologies
Web Design & Development Courses  in Pune | 3DOT TechnologiesWeb Design & Development Courses  in Pune | 3DOT Technologies
Web Design & Development Courses in Pune | 3DOT Technologies
 
Introduction To Website Development
Introduction To Website DevelopmentIntroduction To Website Development
Introduction To Website Development
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
 
Introduction to Frontend Technologies
Introduction to Frontend TechnologiesIntroduction to Frontend Technologies
Introduction to Frontend Technologies
 
Exploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonExploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in Houston
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in pune
 
Web deveplopment courses in pune
Web deveplopment courses  in puneWeb deveplopment courses  in pune
Web deveplopment courses in pune
 
A Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI DeveloperA Complete Guide to Frontend - UI Developer
A Complete Guide to Frontend - UI Developer
 

Último

Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...J. Agricultural Machinery
 
Navigating Process Safety through Automation and Digitalization in the Oil an...
Navigating Process Safety through Automation and Digitalization in the Oil an...Navigating Process Safety through Automation and Digitalization in the Oil an...
Navigating Process Safety through Automation and Digitalization in the Oil an...soginsider
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxAravindhKarthik1
 
This chapter gives an outline of the security.
This chapter gives an outline of the security.This chapter gives an outline of the security.
This chapter gives an outline of the security.RoshniIsrani1
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhjamesbond00714
 
Artificial organ courses Hussein L1-C2.pptx
Artificial organ courses Hussein  L1-C2.pptxArtificial organ courses Hussein  L1-C2.pptx
Artificial organ courses Hussein L1-C2.pptxHusseinMishbak
 
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...marijomiljkovic1
 
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxChapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxButcher771
 
Introduction to Data Structures .
Introduction to Data Structures        .Introduction to Data Structures        .
Introduction to Data Structures .Ashutosh Satapathy
 
The Journey of Process Safety Management: Past, Present, and Future Trends
The Journey of Process Safety Management: Past, Present, and Future TrendsThe Journey of Process Safety Management: Past, Present, and Future Trends
The Journey of Process Safety Management: Past, Present, and Future Trendssoginsider
 
Injection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycleInjection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cyclemarijomiljkovic1
 
First Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideFirst Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideMonika860882
 
Advanced Additive Manufacturing by Sumanth A.pptx
Advanced Additive Manufacturing by Sumanth A.pptxAdvanced Additive Manufacturing by Sumanth A.pptx
Advanced Additive Manufacturing by Sumanth A.pptxSumanth A
 
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfautonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfPandurangGurakhe
 
presentation by faizan[1] [Read-Only].pptx
presentation by faizan[1] [Read-Only].pptxpresentation by faizan[1] [Read-Only].pptx
presentation by faizan[1] [Read-Only].pptxkhfaizan534
 
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxConventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxSAQIB KHURSHEED WANI
 
A brief about Jeypore Sub-station Presentation
A brief about Jeypore Sub-station PresentationA brief about Jeypore Sub-station Presentation
A brief about Jeypore Sub-station PresentationJeyporess2021
 
Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and countingArbazAhmad25
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesMark Billinghurst
 

Último (20)

Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
 
Navigating Process Safety through Automation and Digitalization in the Oil an...
Navigating Process Safety through Automation and Digitalization in the Oil an...Navigating Process Safety through Automation and Digitalization in the Oil an...
Navigating Process Safety through Automation and Digitalization in the Oil an...
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptx
 
This chapter gives an outline of the security.
This chapter gives an outline of the security.This chapter gives an outline of the security.
This chapter gives an outline of the security.
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarh
 
Caltrans view on recycling of in-place asphalt pavements
Caltrans view on recycling of in-place asphalt pavementsCaltrans view on recycling of in-place asphalt pavements
Caltrans view on recycling of in-place asphalt pavements
 
Artificial organ courses Hussein L1-C2.pptx
Artificial organ courses Hussein  L1-C2.pptxArtificial organ courses Hussein  L1-C2.pptx
Artificial organ courses Hussein L1-C2.pptx
 
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
 
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptxChapter 2 Canal Falls at Mnnit Allahabad .pptx
Chapter 2 Canal Falls at Mnnit Allahabad .pptx
 
Introduction to Data Structures .
Introduction to Data Structures        .Introduction to Data Structures        .
Introduction to Data Structures .
 
The Journey of Process Safety Management: Past, Present, and Future Trends
The Journey of Process Safety Management: Past, Present, and Future TrendsThe Journey of Process Safety Management: Past, Present, and Future Trends
The Journey of Process Safety Management: Past, Present, and Future Trends
 
Injection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycleInjection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycle
 
First Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slideFirst Review Group 1 PPT.pptx with slide
First Review Group 1 PPT.pptx with slide
 
Advanced Additive Manufacturing by Sumanth A.pptx
Advanced Additive Manufacturing by Sumanth A.pptxAdvanced Additive Manufacturing by Sumanth A.pptx
Advanced Additive Manufacturing by Sumanth A.pptx
 
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfautonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
 
presentation by faizan[1] [Read-Only].pptx
presentation by faizan[1] [Read-Only].pptxpresentation by faizan[1] [Read-Only].pptx
presentation by faizan[1] [Read-Only].pptx
 
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxConventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
 
A brief about Jeypore Sub-station Presentation
A brief about Jeypore Sub-station PresentationA brief about Jeypore Sub-station Presentation
A brief about Jeypore Sub-station Presentation
 
Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and counting
 
Evaluation Methods for Social XR Experiences
Evaluation Methods for Social XR ExperiencesEvaluation Methods for Social XR Experiences
Evaluation Methods for Social XR Experiences
 

It ppt.pptx

  • 2. What is Front-End Development Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.
  • 3. Web technologies A front-end developer architects and develops websites and applications using web technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the Open Web Platform or act as compilation input for non-web platform environments (i.e., React Native). Frontend frameworks are needed to facilitate the job of web developers: these software packages usually provide pre-written/reusable code modules, standardized front-end technologies, and ready-made interface blocks making it faster and easier for developers to craft sustainable web applications and UIs without coding every function or object from scratch.
  • 5. HTML: the key front-end technology HTML (or Hypertext Markup Language) is a computer language designed to create websites that later can be explored by anybody who accesses the Internet. HTML is normally employed to structure a web document. It defines such elements as headlines or paragraphs and enables embedding images, video, and other media HTML is composed of a series of shortcodes called tags, normalized into a text-file by a site creator. The text is then stored as an HTML file and observed through a browser. The browser scans the file and interprets the text into a visible form, and in the best case, renders the page as the designer had planned.
  • 6. CSS : Styling your facade CSS (or Cascading Style Sheets) is a style sheet language. It’s applied to define how HTML elements are supposed to be presented on a webpage in terms of design, layout, and variations for diverse devices with different screen sizes. CSS masters the layout of numerous different web pages at a time CSS frameworks. A CSS framework is a set of default CSS and HTML files. It extends a front-end developer’s capabilities for website design. In addition to assisting while building a responsive design, CSS frameworks also present distinct and symmetric layouts, saving developers from writing code from ground zero at every occasion.
  • 7. DOM: the web page structure The Document Object Model (DOM) is defined as a programming interface for HTML and XML documents. It interprets the page so that programs can modify the document structure, style, and content. The DOM renders the document as nodes and objects, enabling programming languages to connect to the page. The Document Object Model (DOM) represents this document so it can be modified. The DOM is an object-oriented representation of the web page, which can be altered with a scripting language like JavaScript.
  • 8. JavaScript: making the Web alive JavaScript (JS) is one of the most popular scripting languages. It’s mostly renowned for providing a full stack of technologies for both front-end and back-end development. As we are talking about the first one, it’s applied to make web pages dynamic. JS boosts a website’s overall interactivity. It enables modeling animated UI components such as image sliders, pop-ups, extensive site navigation menus, and more. JavaScript provides a website with extended functionality that isn’t otherwise achievable with HTML and CSS alone. JavaScript allows web pages to reply to users’ actions and dynamically refresh themselves.
  • 9. JavaScript: Frameworks and Libraries Frameworks are templates to create a website or a web application. They provide a structure (such as a skeleton or scaffolding) on which to arrange the whole project. While the framework sets the page templates, they build the structure with particular allocated areas to embed a framework code in. Libraries are sets of prewritten code snippets used and reused to implement core features of JavaScript. The snippet can be easily integrated into an existing project code when necessary.
  • 11. React or Angular Angular is a front-end framework powered by Google that is compatible with most of the common code editors. Angular is intended to create dynamic, single-page web applications (SPAs), and progressive web-apps. React is an open-source library for building dynamic user interfaces, born and bred by Facebook. The framework is applied to create web-applications with multiple dynamic components. It relies on JavaScript and JSX, a Facebook PHP language extension. React enables building reusable HTML elements for the front end. React also includes React Native, a dedicated cross-platform mobile development framework.
  • 13. jQuery, in turn, is aimed at controlling HTML documents. It has a simple API to control events and design animation in browsers. Aside from that, jQuery is applied to manipulate the Document Object Model (DOM) and serves as a plugin development tool as well. It also comes with a lighter cross-browser library, jQuery UI for a mobile framework jQuery Mobile and for graphic interface construction. D3.js is a data-driven library for data visualization. By tying temporary data to DOM and implementing data-driven changes to the document, the library enables managing data and making dynamic data visualizations. It can uphold and process large datasets and dynamic responses for interaction and animation. D3’s functional style permits code reusing and runs with CSV and HTML.
  • 14. Ember.js is a framework for SPAs, mobile, and desktop applications. It uses the model-view-view-model (MVVM) pattern. Ember tools enable designing a development environment, while its command- line interface gives tools for script automation. Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub. p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing.