Skip to main content

Intro to Frontend Development

Why#

There are three core coding languages that we need to know for frontend web development: HTML, CSS, and JavaScript.

  • HTML: a language that determines how documents and web pages are displayed in a web browser, the language for the building blocks of any website.
  • CSS (Cascading Style Sheets): a popular style sheet language that determines how a document created in HTML is styled (colors, font styles, layout and responsive features).
  • Javascript: allows you to change CSS and HTML elements on your website after the site has been loaded, which gives you the ability to make your site more interactive and engaging for users.

We’ll use these three languages in every website we create, so it’s necessary to learn the in’s and out’s of each, so we can advance to more complex frontend technologies and frameworks.

What#

Frontend languages live and operate in the browser. You are viewing this document in a browser right now! When you navigate to a url in your address bar, your browser will receive at least an HTML file from the web server that you requested from. That file will likely tell the browser to request a CSS file and a JavaScript file as well (probably 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).

How#

Role of HTML#

HTML, which stands for HyperText Markup Language, is a document format used for defining the semantic structure of a single web page. One could say that HTML is what the internet is made of: All the websites that we are looking at every day are all rendered from HTML.

HTML was first proposed by Tim Berners-Lee in 1989, and laid grounds for the World Wide Web’s huge breakthrough during the 1990s. It is defined by the W3C and its latest version is HTML 5, which added many useful features.

The fundamental, primary feature of any web browser, such as Chrome, Firefox, Edge, is to render HTML documents.

HTML allows you to define the semantic structure of a website. If you want a word or sentence on a page to have a strong emphasis, you would write particular syntax to markup the text. When using HTML, any text files can be tagged for effects, graphics, fonts, or colors. All of the text on a page should be given meaning through syntax as to how or what the text represents: links, images, paragraphs, headings, lists, etc.

Role of CSS#

CSS, which stands for Cascading Style Sheets, is a style sheet language that is used to improve the presentation/look of HTML elements. While CSS is a stylesheet language, it can be used to make your website appear visually pleasing and modern. If you want to change the font, text color, background color, text size, margin, padding, orientation, position, or effects of any element on the document, you can use CSS.

Role of Javascript#

JavaScript is a dynamic, interpreted programming language that can add interactivity to a website. It was invented by Brendan Eich (co-founder of the Mozilla project), the Mozilla Foundation, and the Mozilla Corporation. JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated graphics with WebGL and Canvas, comprehensive database-driven apps, and so much more.

JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:

  • Application Programming Interfaces (APIs) built into web browsers, that provide functionality such as dynamically creating HTML and setting CSS styles; collecting and manipulating a video stream from a user's webcam, or generating 3D graphics and audio samples
  • Third-party APIs that allow you to incorporate functionality in sites from other content providers, such as Twitter or Facebook
  • Third-party frameworks and libraries that you can apply to HTML to accelerate the work of building sites and applications

Now that we’ve been introduced, let’s hop into writing the base of all webpages, HTML.