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


HTML

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="https://www.google.com">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.


CSS

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

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.

Comments

Post a Comment

Popular posts from this blog

How to Inspect Problems in Your ReactJS Codes

Image
Every web developer needs to validate their codes according to standard formats especially ReactJS Web Developers. When writing JavaScript with an editor such as Visual Studio Code, there are different ways you can ensure your code is syntactically correct and in line with current best practices. You can use a linter to do this. Linters check your code for syntax errors and highlight errors to make sure you can quickly find and fix them.
Read more

ReactJS Hooks: How to Use useState in ReactJS?

Image
Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
Read more