Introduction to the frontend Copy

Introduction

When we say front-end we mean the external end of a web page that is seen by the users, and thus the front-end languages live in the browser. So when you when you open the browser and type something into the address bar and hit enter, the browser will receive an HTML file from the server. That file will also request for a CSS and a JavaScript file as well. In most cases the HTML file will request more than one but we will keep it simple.

Those three languages perform different functions but all together determine how the web page will be displayed. In other words, those languages are responsible for how a web page is structured (HTML), looks (CSS) and functions (JAVASCRIPT). You also need to keep in mind that the browser handles how to combine these files and make a web page not the server.

Some people may think that front-end web development is design. That isn’t true. As a front-end developer you won’t be playing with PhotoShop and other designing programs. However you will be working closely with designers by translating their layouts into real code. Basically the front-end developer stands between the designer and the back-end developer. It takes the layout from the designer translates it to code and then takes the data from the back-end developer and place them in the correct spots.

Furthermore the front-end developer is responsible for all the interactions that a user makes with the web page. For this reason the front-end developer needs to be highly conscious of who the user is and how they will be interacting with the web page. Thus a very strong skill you need to have as a front-end developer is a strong understanding of accessibility and responsiveness. We will talk about those skills later on, but for now you need to understand the fundamentals of the front-end languages.

So in the following lessons you will learn a lot about these front-end languages and we will also see jQuery which is the most popular JavaScript library.

So let’s get started!

Learning Objectives

  • The role of HTML in a web page.
  • The role of CSS in a web page.
  • The role of JavaScript in a web page.
  • How these three languages work together.

Study

Videos
  • Watch this 1 hour session presented by Amine Grid

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

  • Duration: 4 minutes

  • Watch the next video, which is another great introduction to how the various front-end technologies interact.
    • Duration: 1 minute

  • Watch the next What is JavaScript? a short introductory video.
    • Duration: 2 minutes

Reading
  • 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.
    • JavaScript basics.

There is no need to implement the website; simply read about the process at this point.

  • Reading time: 5~10 minutes

  • Read about the role of HTML.

    • Reading time: 5~10 minutes

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Back to Lesson