Introduction to the Front End (v1)

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 Objectives

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?

Study

  • Watch the following awesome video explaining the big picture of the three core web technologies: HTML, CSS and JavaScript.

  • Duration: 4 minutes

  • Read a brief intro to Frontend development from this interview with Nick Schaden.

    • Reading time: 5~10 minutes
  • Read about the role of HTML.

    • Reading time: 5~10 minutes
  • Watch the next video, which is another great introduction to how the various front-end technologies interact.

    • Duration: 1 minute

  • 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.

    • Reading time: 5~10 minutes
  • Skills of a Successful Front-End Web Developer from Drupal (a CMS based on PHP).

    • Reading time: 5~10 minutes
  • Watch the next What is JavaScript? 2-minute introductory video.

    • Duration: 2 minutes

Resources / Tools

  • Bookmark DevDocs.io. Read the "Welcome" message. Massive API documentation collection that even works offline. Essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp)
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 19.01.2021

CONTRIBUTORS: