Core Front-End Components Overview
By: Charles Tillmon

Core Front-End Components Overview

Have you ever wondered how web pages get on the web? When it comes to basic web pages, typically they consist of 3 core components on the front-end. The front-end refers to the client side, which is what is presented on your screen once you open a web browser. I’m making this guide in an effort to bring a better understanding of these technologies to assist with proper implementation.

The first layer is the content layer. Created by Tim Berners-Lee in 1980, he proposed the prototype enquire for a company named CERN to use and share documents. This is where you create the building blocks of your web page using hypertext markup language, or html for short. This phrase can be simplified into two separate components. Hypertext refers to any text that can be displayed on your web browser while markup provides the semantic structuring of that text through the use of tags. The beginning of an html document begins with a doctype declaration followed by the head and body sections. The head containing meta data regarding the document; and the body the actual text to be displayed.

The second layer is the styling layer which is typically seen in the form of cascading style sheets. This layer is responsible for adding visual styling to the content layer. First proposed by Hakon Wium Lie, who also worked at CERN with Tim Berner-Lee. In 1980 he would design the prototype for what would become the CSS that we know today. The cascading portion of the style sheet refers to the principle that the importance of the style is related to where it is placed in script. This helps the computer understand what style to implement if there are multiple values for one property.

The last layer of the trio is JavaScript, which is responsible for the behavior of your site. Any interaction with a website, such as button clicks are programmed with this language. Created by Brendan Eich in 1995 during his time at Netscape. Netscape at the time had the best web browser available, even though dial up was never too user friendly. Influenced by technologies such as Java, but ultimately becoming its own unique language. All Modern Web Browsers have JavaScript engines so that they can execute the code.

These are brief overviews of the languages to help encourage further seeking upon the topic. This is only the tip of the iceburg, as there are many principles and syntax rules that need to be learned. As you continue through your journey be child like and continue to question and seek answers. It will open up new doors. Have you ever wondered how web pages get on the web? When it comes to basic web pages, typically they consist of 3 core components on the front-end. The front-end refers to the client side, which is what is presented on your screen once you open a web browser. I’m making this guide in an effort to bring a better understanding of these technologies to assist with proper implementation.

要查看或添加评论,请登录

Charles Tillmon的更多文章

  • CSS: Normal Document Flow

    CSS: Normal Document Flow

    As we focus more on understanding the styling layer of web pages it is only natural that we discuss the normal document…

  • Async & Await Keywords

    Async & Await Keywords

    When ES2017 was released along with it came the async and await keywords. These keywords were developed to make working…

  • JavaScript Promises

    JavaScript Promises

    Typically, with asynchronous code you will see the use of callback functions, which are functions that are passed as…

  • TCP/IP Overview

    TCP/IP Overview

    Have you ever wondered how data is transmitted between computers? Well just like us they must establish a common…

  • The Internet vs. The Web

    The Internet vs. The Web

    Have you ever used the Internet and the Web interchangeably? This is a common mistake that many have made, me included.…

  • Asynchronous vs. Synchronous Code

    Asynchronous vs. Synchronous Code

    JavaScript is a single threaded, synchronous programming language. This means when code is executed by the JavaScript…

  • Is Modernizing Your Business Worth The Investment?

    Is Modernizing Your Business Worth The Investment?

    “The day that you plant the seed is not the day that you eat the fruit”. This is a mantra that can apply to life, but…

  • JavaScript Basics-Functions: Part 4

    JavaScript Basics-Functions: Part 4

    JavaScript functions are blocks of code that either perform a task or return a value. These blocks of code are executed…

  • JavaScript Basics-Loops: Part 5

    JavaScript Basics-Loops: Part 5

    Loops in JavaScript are a way to repeat the same set of actions a set number of times or until a condition is met…

  • JavaScript Basics-Conditional Statements: Part 3

    JavaScript Basics-Conditional Statements: Part 3

    Sometimes in programming languages the code needs to make a decision on what actions to take dependent upon the…

社区洞察

其他会员也浏览了