What is FEE?

Back to Curriculum Index

Goals

  • Identify the key differences between Front-End and Back-End engineering
  • Categorize various technologies used in Front-End engineering

What is Front-End?

The Front-End is the part of the application that users see, touch, and interact with.

When we’re talking about web development, the Front-End is the part of the code base that takes care of rendering the user interface in the web browser.

Over the last decade, the web has evolved from a platform that served static web pages with content to a platform that provides rich, interactive experiences to users.

What Makes Front-End Engineering Interesting + Challenging?

It Presents Logical Challenges

See the Pen Tearable Cloth v2 by dissimulate (@dissimulate) on CodePen.

It Can Guide a User Through a Complicated Task

Turbo Tax screenshot

Here's a great blog post about how Turbo Tax makes a complicated, intimidating task relatively simple, and even fun.

Or Help Us Understand a Complicated Subject

Big numbers are difficult to imagine. How can you imagine a billion? Even a thousand things collectively is a challenge. The recent news and precautions around COVID-19 is all a lot to take in and understand. Visualizations like this help people understand the role that social distancing can play in reducing the impact of the virus.

25% Social Distancing Giphy

See the project.

It Allows You, As a Developer, to Tell a Story

The boat interactive story screenshot

Check out The Boat -- an interactive graphic novel about the Vietnam War using CSS/JS/Parallax.

No Matter Your Passion, You’re Needed in FE

While many people become developers because it can provide a stable career and lifestyle, it can also allow you to contribute towards something you are passionate about! Whether that be problems solving, exposing important data, or helping people do daily tasks, or anything in between, Front-End developers play an essential role.


You Don’t Have to Be a Designer

To Do list application One section of To Do List application, arrows pointing to each section to notate size and colors.

Front-End developers often work with designers, who provide detailed comps like the one above. These comps allow a Front-End developer to focus on managing the complicated interactions of the site.

There’s a common misconception that the Front-End is only about colors, fonts, and having a good eye. However, this type of development is more focused on making data useful, accessible, and interactive. The code we write in JavaScript and other frameworks does a lot of heavy logical lifting.

What technologies are used on the Front-End?

The Front-End of the web is based on three major technologies:

  1. HTML: HyperText Markup Language (HTML) defines the structure and semantics of web pages on the web.
  2. CSS: Cascading Style Sheets (CSS) sets the look and style of a web page. CSS provides style to the structure provided by HTML.
  3. JavaScript: JavaScript allows us to define interaction in our pages. What happens when a user clicks on a certain area?

Many libraries and frameworks have been built on top of JavaScript that make Front-End development even more robust and powerful! If you hear terms like React, Vue, Ember, Angular… those are all JavaScript frameworks used to build professional level applications.

What are we doing today?

We’re going to dive into the three technologies used on the frontend:

  1. Review the structure of web pages that we can build with HTML
  2. Add identifiers to our HTML elements using IDs
  3. Use JavaScript to access HTML elements that appear in the browser
  4. Listen and respond to user interactions such as clicks and mouseovers


Back to Curriculum Index