Front-End Introduction: What is Front-End part of a Website?

The Front-End part of a website is the part that is directly seen by the user. Users can also directly interact in this section. This section is built using HTML (Structure), CSS (Style), and JavaScript (Interaction).

Front End Scopes Ilustration


Hypertext Markup Language (HTML) is not a programming language that means HTML doesn't have the ability to create dynamic functionality (eg: math operations). HTML allows users to organize and format documents, much like Microsoft Word. HTML Editor softwares which can be used for example Notepad, Notepad++, Sublime Text, Visual Studio Code (suggested to be used), etc. To try in writing HTML can be used URL below.

An HTML element is defined by a start tag, some content, and an end tag

<tagname>Content goes here...</tagname>

HTML elements may have attributes. Attributes provide additional information about the element. Attributes are always in the "start tag". Attributes are usually name-value, such as <a href="">Hallo Google</a>.

HTML forms is one of HTML elements which is used to collect user input. The user input is most often sent to a server for processing. Types of input elements such as text fields, checkboxes, radio buttons, submit buttons, etc.


Cascading Style Sheet (CSS) are used to create a website by arranging elements written in HTML language. CSS is used to design the front page or the appearance of the website (Front-End). CSS can be added to HTML documents in 3 ways such as:
  1. Inline - by using the style attribute inside HTML elements
  2. Internal - by using a <style> element in the <head> section
  3. External - by using a <link> element to link to an external CSS file


JavaScript is a programming language which is used in website development to make it more dynamic and interactive. JavaScript can increase the functionality of web pages. JavaScript is the world's most popular programming language and easy to learn. To try in learning JavaScript can be used URL below.

Example of JavaScript Implementation for Light Bulb

To learn more detail about HTML, CSS and JavaScript, we often need interfacing tool such as the Command-Line Interface (CLI) to maximize the function of Local Repository (Local server or better known as the computer we use). This CLI example is the CMD application on Windows and the Terminal application on Mac/Unix.

Command-Line Interface Tools

That's all for Front-End Introduction.


Popular posts from this blog

How to Inspect Problems in Your ReactJS Codes

ReactJS Hooks: How to Use useState in ReactJS?