/ Learning to code

What is front end?

What is front end?

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.

What are front-end careers?

There are two primary roles in front-end development: Front-End Interface Developers and Front-End Engineers. While they might sound similar, several distinctions lie between the two.

Front-End Interface Developers

Front-End Interface Developers (or Front-End Designers) take drawings and other static images and translate them into web pages. This is a big task, as the web pages need to match the designs and ensure they work on various screen sizes.

Front-End Engineers

Front-End Engineers are less focused on design and more on making the website functional and scaleable. Some Front-End Engineers also do design work, and some workplaces use the two job titles interchangeably.

What goes into front-end design?

Front-end design is a collaborative effort, so if you enjoy working with others as much as you enjoy development, it could be a good fit.

Most Front-End Developers and Engineers coordinate with user experience (UX) teams. These folks determine the target demographic for the website and how users might interact with it.

Graphic design is another critical part of front-end design. It includes fonts and colors and ensures that the website's design matches the company and product the web application is for. This often comes from the research and branding team. For example, Amazon has a distinct logo, the same fonts used throughout, and consistent colors.

Front-End Developers coordinate with various departments to ensure web applications work across all browsers and screen sizes, including phones and tablets. They may also receive feedback from these departments throughout development, so they need to be able to incorporate and listen to feedback from a variety of people with different perspectives and priorities.

Why is the front end important?

In the video above, Pat explains that the front end is important because:

"It's the digital representation of a company, or an individual, or an organization. It builds a bridge between a customer or client and the brand."

If a website or application has an issue, it reflects poorly on the brand.

The front end is also what makes a website usable. If a website or application doesn't work well, it can push customers away, and those customers can be difficult to win back.

Ultimately, the front end represents someone's idea, and it's important to do it justice.

Becoming a Front-End Engineer

One option for becoming a Front-End Engineer or Developer is to get a degree. While that's a good fit for some, getting a degree isn't practical for everyone. Fortunately, you can become a Front-End Engineer without a degree.

To do that, you'll want to start by taking relevant courses. You could start with programming languages like HTML, CSS, and JavaScript. Or, you could check out our Front-End Engineer Career Path. Each Career Path provides a series of courses that take you from a beginner to ready to interview.

The Front-End Engineer Career Path includes the languages listed above, along with libraries like React and Redux. You'll learn the basics of web design, including wireframing and color theory. You'll build projects that you can include in your portfolio. You'll also learn what to expect in a technical interview. Ready to get started? Sign up now!


Web Design Courses & Tutorials | Codecademy
Web Design is essential to bringing a website to life and creating the experience that you want for your end users. The courses here will help you polish your HTML and CSS skills while learning about color design, navigation design, and more.
Web Development Courses & Tutorials | Codecademy
Web Development is the practice of developing websites and web apps that live on the internet. Whether you’re interested in front-end, back-end, or going full-stack, the content in our Web Development domain will help you get there.

Get more practice, more projects, and more guidance.

What is front end?
Share this