The Basics Of Frontend Web Development

The Basics Of Frontend Web Development

HTML, CSS and JAVASCRIPT are the three main languages dominating frontend web development. This article explains briefly the functionality of these languages.

HTML

HTML was founded by Tim Berners-Lee in 1993. It stands for HYPERTEXT MARKUP LANGUAGE. A markup language is a computer language that is readable and understood by humans. It uses tags to define elements. HTML is a markup language for creating web pages and is however, not seen as a programming language. HTML defines the skeleton of the web page, i.e. the structures, sections, paragraphs etc. that make up a web page. It is used to write down the contents of a web page and arrange it’s contents in the order which they are to appear.

Every HTML file must always start with a <!DOCTYPE html> tag and the document is always saved with the .html or .htm extension. HTML has elements that are enclosed in opening and closing tags. Some of these elements include the paragraph element (p) for adding paragraphs, the heading elements (h1 - h6) for adding headings, the body element that houses the contents of the web page, the anchor tag for adding links etc..

These elements can be block level elements or inline elements. Block level elements are elements that always start on a new line and take up the entire width of a page. Examples of block level elements are , the heading elements, the paragraph tag, the button tag, the list tags etc.. Inline elements do not span the entire width of the webpage. They are mostly used to format the contents of the block level elements. HTML is very beginner friendly and easily accessible. It can however, only be used to build static websites.

CSS

CSS was found in the year 1994 and stands for Cascading Style Sheets. It is used to define the layout of your webpage. CSS adds styles and designs to your web page. It can be used to add font styles, colors , fonts, spacing and split the web page into columns. With css you can set different styles on your web page for different screen sizes. This is called making the webpage responsive. It is done with a css media queries. CSS used together with HTML can create a static website. CSS has properties that are used to style html elements.

Syntax:

selector{
      property: value;
}

A selector can be an html element, classes, Id or attributes. Property is the feature you want to give to the selector. CSS can also be used to add animations to web pages.

JAVASCRIPT

JavaScript is a programming language that is used to add functionality and interactivity to the web page. It makes a webpage dynamic. It can be used together with HTML and CSS. With JavaScript you can add popups, sliders, photo galleries etc. JavaScript accepts different data types that include, numbers, strings, Boolean (true or false), null, objects, undefined. JavaScript variables can be used to store these data types. JavaScript also has functions containing code blocks that perform a particular task. You can access html element from JavaScript through the DOM. DOM stands for Document Object Model. It allows you access elements and add whatever features you want to. JavaScript allows you to make your webpage think and act. JavaScript has libraries that make coding easier an better. Some of the libraries include React, jQuery, node etc.

In summary, JavaScript, HTML and CSS are the three main languages used to build your website. HTML for structure, CSS for design and JAVASCRIPT for dynamic functionality. You can link to your html file using the link tag for external stylesheets, style tag and the style attribute and link JavaScript file using the script tag.