INTRODUCTION TO FRONT-END DEVELOPMENT

What is front-end development? What does it entail and how can one become a front end developer?

What is front-end development? Anyone remotely interested in coding is likely to have looked this up. Even developers who are not into front-end development need to know what it is about. They also need to know the basic tools used for front-end development. What is it then? Where is it used and why is it so important? We shall address these questions and more in this blog.

What is front-end development?

Let’s start at the beginning. So what is front-end development? In a nutshell, front-end web development, also called client-side development, refers to writing Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript code for a website or web application so that users can see and interact directly with them.

To delve further into this subject, it is important to know the basic differences between front-end development, back-end development and full stack development. Simply put, a front end developer works on the parts / aspects of an app or website that users get to see and interact with. Whereas a back-end developer handles the behind-the-scenes aspects of the said app or website, say the infrastructure and databases. On the other hand, a full-stack developer does both, so it’s someone who deals with the whole design process from start to finish.

The bottomline is this: there are some websites and web applications that only need front end development. For instance, a single page info website. However, anything functional generally needs back-end development. So all that you see on the page — and by that we are referring to anything happening on the user’s computer — is a result of front-end development. Anything that provides data from a server comes under back-end development. So when in use, an app’s front-end (the page) has requests sent to the back-end (i.e. server) which then sends across information in plain format. The front end then renders it with styling, whereas the backend is the code on the server, and its job is to communicate with the database.

Goals and challenges in front-end development

Now that we know front-end development is, let us look at the key goals that a front-end developer works towards and the challenges faced by them. The following are the main front-end development goals:

- Accessibility: This is where they ensure that everyone — irrespective of their mobile device (think smartphones and tablets) — can easily access the said website or app. Basically, here front-end developers get their site to show up correctly in browsers on all devices. This is done with the help of a responsive web design using stylesheets in CSS.

- Performance: Performance here is measured in terms of the render time. So front-end developers work on the code to make sure that the site / app opens up quickly.

- Speedy Development: This is about a quick and smooth development process that is also high on efficiency.

The main challenge in front end development is that the tools and techniques used to build a website’s front end are subject to constant change. This means that a front-end developer needs to keep tabs on how the field is evolving, what are the latest tools and so on. Such a developer working on the site’s front-end has to come up with a format that makes it easy for the user to open and read relevant information on the said site. Moreover, with users accessing websites through different devices with varying screen sizes and resolutions, front-end developers have to deal with greater levels of complexity. Now they need to ensure that their site comes up correctly in different browsers, on different devices and on different operating systems (cross-platform).

Tools used for front-end development

A front-end developer develops websites and applications using HTML, CSS, JavaScript and DOM. DOM or the Document Object Model is a programming API (Application Programming Interface) for HTML and Extensible Markup Language (XML) documents. So DOM defines the logical structure of documents and the way a document is accessed and manipulated.

The main front-end development languages, as we have seen already, are HTML, CSS and Javascript. JQuery has also been used but it is said to be going out of style whereas many legacy projects still use the JavaScript library, ensuring it continues to be taught at front-end bootcamps. Front-end development also deals extensively with responsive design along with typography, layouts, grid system, and color theory.

Let us understand how and why these coding languages are used in front-end development.

HTML

The backbone of any website development process, web pages can not exist without Hyper Text Markup Language (HTML). Hypertext means that the text has links, called hyperlinks, embedded in it. So when a user clicks on a word or a phrase that has a hyperlink, it leads him/ her to another web-page. A markup language also means that the text can be converted into images, tables, links and other representations. The overall framework of how the site will look is written in HTML code. Developed by Tim Berners-Lee, HTML’s latest version is called HTML5 which was published back in 2014. This version boasts new and efficient ways of handling elements such as video and audio files.

CSS

A cornerstone technology of the World Wide Web (along with HTML and JavaScript), Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. So it deals with the presentation aspect of the site and gives your site its own unique look. This is done by maintaining style sheets which sit on top of other style rules and are activated on the basis of other inputs like device screen size and resolution.

JavaScript

A multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It is used to transform a static HTML page into a dynamic interface. JavaScript code can use the DOM to manipulate a web page in response to events, such as user input. In fact, JavaScript code can also actively retrieve content from the web as well react to server-side events using a technique called AJAX. An essential part of web applications, most websites use it for client-side page behavior and all major web browsers have a dedicated JavaScript engine to execute it.

In addition to the above, today there are modern front-end frameworks like Angular.js, React Native and Flutter which allow one to build modular and reactive components as part of front-end development. For more details about web development frameworks, read our blog here: https://www.youngwonks.com/blog/Top-10-web-development-frameworks-for-2019

And if you want to know more about these programming languages, check out blog on leading coding languages for kids in 2021.

Roles and responsibilities of front-end developers

Now let us look at all that a front end developer does using the tools mentioned above. For starters, he/ she needs to:

• Work on the web page design and structure

• Come up with features to enhance the users’ experience

• Maintain a balance between functional and aesthetic design. I.e. ensure that the webpage/s are easy on the eye and can be used easily by the end-user

• Make sure the web design is smartphone-capable

• Write reusable code for future use

• Optimize webpages for speed and scalability

• Use a diverse selection of markup languages to design web pages

• Keep the brand’s voice consistent throughout the whole site/ app.

Skills needed to become a front-end developer

To be a front end developer, often also called a Javascript developer, one does not need back-end development skills. Sites created by front-end developers do not have to interact with information stored on a database in order to function.

A front-end developer should have the following:

• Preferably, a degree in Computer Science or similar field

• More importantly, proficiency in coding languages such as HTML, CSS, JavaScript, and jQuery

• Understanding of server-side CSS

• Experience in dealing with graphic design applications (e.g., Adobe Illustrator)

• Good understanding of Search Engine Optimisation (SEO) principles

• Excellent problem-solving skills

• Good communication skills are a plus.

(This blog was originally posted in the Blogs section of the YoungWonks website on January 8, 2021 under the headline: Introduction to front-end development. To read more such blogs and to claim a free trial coding class for your child, please visit: https://www.youngwonks.com/

Blog written by: Team YoungWonks (Written by: Vidya Prabhu; Illustration by Leonel Cruz)