(Music) Internet websites offer lots of different 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 are interacting with the front-end of a website. Let us see how the front-end of a website is developed by front-end developers. For this, we need to understand how a website is made. To create a website, web developers usually use Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript. 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 a proper formatting of all text and image elements so that browsers display the page consistently. The backend developer codes the structure of the website. A website is like a house which 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, 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 sets of style characteristics for a website and each of 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 it and make it appealing. CSS is also used to create websites that have cross browser compatibility which means that they are compatible with multiple browsers and multiple devices such as PC, 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 that is 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) called SAAS. It is an extension of CSS that is compatible with all versions of CSS. SASS enables you to use things like variables, nested rules, and inline imports to keep things organized. SAAS allows you to create style sheets faster and more easily. Another language that is being used now is Learner Style Sheets (LESS) or LESS. LESS enhances CSS, adding more styles and functions. It is backwards 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. Responsive design of a website means that it will automatically resize to the device it is being accessed from. For example, if you open up a products website on your mobile device, it will adapt itself to the small size of the screen 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 can create device responsive applications. A few examples of several frameworks being used are: Angular framework: an open-source framework and is being maintained by Google. Angular frameworks allow websites to render the 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. Vue.js is maintained by the community and its main focus is the view layer which includes 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 upgraded constantly and so front-end developers needs to keep upgrading the websites that they create. The websites that they create should work in multiple browsers, multiple operating systems and multiple devices.
