Welcome to Learning Front-End Development.

After watching
this video, you will be able to: Discuss the key languages used in
the front-end development of a website. Define the importance
of creating a responsive and adaptive website, and recognize
various JavaScript frameworks used in web development.
Internet websites offer many services, one of the most popular
being online shopping. When you explore an online shopping
website, navigating through pages, choosing different product
categories, or comparing products, you interact with a
website’s front-end. Let’s see how front-end developers
develop the front-end of a website. For this, we need to
understand how a website is made. Web developers usually use
Hypertext Markup Language (HTML), Cascading Style Sheets
(CSS), and JavaScript to create a website. These languages are
designed to work in conjunction with each other. HTML is used
to create the physical structure of a website. The physical
structure contains elements such as text, links, images/videos,
page dividers, and buttons. The HTML code ensures proper
formatting of all text and image elements so that browsers
display the page consistently. The back-end developer codes
the structure of the website. A website is like a house that has
only been constructed. Just like we need interior designers to
add style to a space, we need front-end developers to add the
necessary glamor and appeal to a website. When you order
products from any website, you realize that the pages have a
pleasing font style and attractive colors and are easy to
navigate. Developers use CSS to create stylish websites. CSS
provides front-end developers with a standard method to
define, apply, and manage different style characteristics for a
website and its components. CSS ensures uniformity in look and
feel, style, colors, fonts, designs, and layouts. So, HTML is used
to create the structure, and CSS is used to design and make it
appealing. CSS is also used to create websites with cross-
browser compatibility, which means that they are compatible
with multiple browsers and devices such as PCs, mobile devices,
iPads, etc. Online shopping websites are intuitive, interactive,
and quick to load. This is where JavaScript comes into the
picture. JavaScript is an object-oriented programming language
used in conjunction with HTML and CSS to add interactivity to a
website. For example, you use HTML to add a login button to a
page and CSS to style that button. You then use JavaScript to
add log-in functionality to that button. A new front-end
development language is Syntactically Awesome Style Sheets
(SASS). It is an extension of CSS compatible with all CSS
versions. SASS enables you to use things like variables, nested
rules, and inline imports to keep things organized. SASS allows
you to create style sheets faster and more easily. Another
language currently used is Learner Style Sheets (LESS). LESS
enhances CSS, adding more styles and functions. It is backward
compatible with CSS. Less.js is a JavaScript tool that converts
the LESS styles to CSS styles. Using all these languages, websites
are designed as reactive and responsive. Reactive or adaptive
websites display the version of the website designed for a
specific screen size. For example, a website can provide more
information if opened on a PC than when opened on a mobile
device. The responsive design of a website means that it will
automatically resize to the device it is being accessed from. For
example, opening up a product’s website on your mobile device
will adapt to the small screen size and still show you all the
features. A JavaScript framework is an application framework
that is written in JavaScript. Programmers can manipulate the
different functions, use them wherever required, and create
device-responsive applications. A few examples of several
frameworks being used are: Angular framework is an open-
source framework and is being maintained by Google. Angular
framework allows websites to render HTML pages quickly and
efficiently. It has built-in tools for routing and form validation.
React.js has been developed and maintained by Facebook. It is
a JavaScript library that builds and renders components for a
web page. It is not a complete suite of tools. For example,
routing is not a part of this framework and will need to be
added using a third-party tool. React.js only helps build and
drop components into a page. The community maintains Vue.js,
and its main focus is the view layer which includes a user
interface, buttons, and visual components. It is flexible,
scalable, and integrates well with other frameworks. It is very
adaptable – it can be a library, or it can be the framework. The
task of a front-end developer evolves continuously. The
technologies are constantly upgraded, so the front-end
developers must keep upgrading the websites they create. The
websites they create should work in multiple browsers,
operating systems, and devices. In this video, you learned that:
There are many services in a fully functioning website. HTML is
used for website content and structure. CSS is used for website
style. JavaScript is used for website interactivity. SAAS is a
faster extension of CSS, and frameworks are libraries of code
for developers.