Nolan E Robinson

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.

If you’re familiar with web development, you’ve probably heard reference to “the front end” — but what is it, exactly? Generally speaking, the front end is the user-facing part of a website. It’s what you see when you type in something like “codecademy.com.” But, of course, there’s more to it than that.

As Front-End Web Developer Pat DePuydt explains in the video above, the front end is the part of the website a user or customer interacts with. A lot goes into making the front end work, including database architecture, frameworks, scaling solutions, and more. It includes:

  • Styles: This includes the buttons, layouts, inputs, text, images, and more. It’s the overall look of the website.
  • Accessibility: Accessibility features like text-to-speech, voice recognition, simple user flows, and more, make websites easier to use and provide a better user experience.
  • Speed: Most people won’t wait for a website to load. The faster a website works, the better.

What are common front-end tasks?

Front-end web development can include a variety of tasks, including:

  • Updating existing web pages or creating new ones
  • Building HTML emails for email campaigns
  • Making sure web pages work well on mobile or tablets
  • Improving website performance by cleaning and splitting code
  • Adding and improving accessibility features

What are front-end technologies?

You’ll use three main technologies in front-end development.

  • HTML: Pat describes HTML as the skeleton of a webpage. It’s used to structure a webpage’s content, and it also tells the web browser how to display it.
  • CSS: The “skin and clothes of the webpage” according to Pat, CSS (Cascading Style Sheets) gives browsers more specific information on displaying content, like the size and color of text.
  • JavaScript: There’s more to websites than just text. JavaScript allows you to create more complex elements like interactive maps and animated graphics. It’s executed both in the browser and the server, which makes it versatile.

Front-End Developers also use other tools, ranging from content management systems (CMSs) like WordPress and Drupal to libraries and frameworks like React, Angular, and Vue. Libraries and frameworks allow you to use a blueprint to create web elements like buttons rather than creating a new one every time.