Front-end development involves using technologies like HTML, CSS, DOM, and JavaScript to build the front-end portion of websites and web applications that users interact with directly. It requires developing websites that work across different browsers, operating systems, and devices. Key front-end technologies include HTML for content structure, CSS for styling and layout, DOM for representing and accessing documents, and JavaScript for interactivity, animation and dynamic content. Popular JavaScript frameworks like React and Angular help structure projects, while libraries like jQuery, D3.js, and Three.js provide reusable code for common tasks. Ensuring a responsive design that adapts to different screen sizes is important.

1. Front-End
Development
MEDICAPS UNIVERSITY
CrystalTech Services Pvt. Ltd.

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.

4. Web Technologies

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.

10. Javascript Frameworks

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.

12. Javascript Libraries

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.

15. Thank You