Introduction to the Front End

Introduction

The “front-end languages” live in the browser. After you type an address into the address bar at the top and hit the enter/return key, your browser will receive at least an HTML file from the web server. That file will likely tell the browser to request a CSS file and a JavaScript file as well (probably many more than one, but we’ll keep it simple).

Each of these languages performs a separate but very important function and they work harmoniously together to determine how the web page is STRUCTURED (HTML), how it LOOKS (CSS), and how it FUNCTIONS (JavaScript). And keep in mind that your browser handles figuring out how to make these files into a functioning web page (not the server).

Front-end web development is NOT design (you won’t be playing around in Photoshop or anything), but a front-end developer does apply the work of designers to the web page by translating their well-designed layouts into real code. The front-end developer stands between the designer on one end and the back-end developer on the other, translating the design into code and plugging the data from the back-end developer into the right spots. He or she must also handle all the possible interactions that the user may need to make with the page.

On the front end, you will need to be highly conscious of who your user is and how they will be interacting with your web page, because you are building their gateway to your page or product. This may mean gaining a strong understanding of accessibility and things like responsive development down the line, but first you need to build up your toolkit and pick up the fundamentals of the front-end languages.

In the following lessons, you’ll get a healthy understanding of each of the three front-end languages (and jQuery, the most popular JavaScript library). To get warmed up, we’ll start at the high level.

Learning Outcomes

Look through these now and then use them to test yourself after doing the assignment:

  • What is the role of HTML in a web page?
  • What is the role of CSS in a web page?
  • What is the role of JavaScript in a web page?

Assignment

  1. Read a brief intro to front-end development from this interview with Nick Schaden
  2. Get a high-level overview of how all three languages work together in MDN’s Getting started with the web. Learners should only read: Dealing with files, HTML basics, CSS basics and JavaScript basics. There is no need to implement the website; simply read about the process at this point.
  3. Familiarize yourself with these documentation pages: HTML, CSS, JavaScript, and jQuery. You will not understand most of what is there just yet, but bookmark the pages for later reference.

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

Web Development 101

Introduction to the Front End

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Open Discord

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship