davidacevedo

Introduction to Front End Engineering

July 23, 2020

I want to go over what Front End Engineering is, what they do, and what they’re primary tools to accomplish the job.

What is a Front End Engineer

A Front End Engineer is a developer that builds user interfaces (UI) using HTML, CSS, and JavaScript. Usually this means building websites, but in more recent years this can also mean building mobile applications and desktop applications.

Now, you may think that a Frontend Engineer needs to be visually creative in order to build amazing websites, but that’s far from the truth. Yes, it may be helpful to have some visual creativity, but companies usually hire UI designers to create many amazing UIs, so coming up with visually appealing designs is not up to Front End Engineers. After UI Designers create UIs it is then passed on to the Front End Engineer to bring the design to fruition through code. This is where a Front End Engineer really needs to shine by using HTML, CSS, and JS.

Let’s talk about a Front End Engineer’s tool belt

HTML

HTML is the basic building block for any website. You can think of HTML as a canvas for a drawing where we can draw different elements onto.

Canvas for drawing

In HTML’s case, this allows us to add elements onto the page, such as buttons, images, links, text, and much more.

Examples:

Example LinkExample Text

We can see that HTML gives us access to basic elements that we can add onto our page… although for some it may look basic. This is where our next best tool comes into play: CSS.

CSS

Paintbrush dipping paint CSS allows us to give an artistic style to our websites. It allows us to customize a website by changing styles such as colors, sizing, fonts, spacing, and most things you can think of.

It’d be best to explain CSS with the examples for HTML shown above. Let’s take a look at the buttons adding a bit of CSS into the max.

Examples:

Example LinkExample Text

The above examples demo how we can change the style HTML elements, more specifically we changed:

  1. The button by adding colors to the background, changing the text color to white, rounding corners, and adding a shadow under it to give it some depth
  2. The link to have a border around it… I know not very creative 🙂
  3. The text to be more bold, to have a bigger font size, and changing all the letters to uppercase

I only show a small piece of CSS, but we can see that it can transform elements to look a lot better.

Now it’s time to move on the magic of the web, JavaScript.

JavaScript

JavaScript is the programming language of the web. It’s what really allows us to create magic on websites. It allows us to:

  1. Listen and respond to user actions, such as user clicks and keyboard presses
  2. Modify existing HTML and CSS
  3. Store temporary data that can be used later
  4. Make network requests which opens the web to do amazing things

Let’s show an example of the magic:

The above uses JavaScript to modify HTML and CSS. This allows us to show how many times the button has been clicked. I also modified a bit of CSS to add some fun transitions for the lines turning every time the button was clicked. We can expand more on this if we need to, but that was just a simple example of what JavaScript can do.

JavaScript can also do more, such as making a request to turn on a light or make a connection with another computer to have a video call. There’s many more things that JavaScript can do and this is just the tip of the iceberg.

That’s all for today folks, thanks for reading!

Personal blog by David Acevedo.
Just sharing knowledge.