OFF WITH THE NICETIES

Hey peeps! I hope you’re all holding up well and staying safe. Have you been following my previous articles? Yes? Remember we’ve been talking about the front-end spectrum? Let me enlighten y’all who’s honoring me with the first-ever visit to my blog.

So you know, there are a bunch of elements that go behind making up the appearance of your website. But those are only the tip of the iceberg. There are a lot more than 2 or 3 technologies. All with their own specialties and functionalities.

All of those, when, in all their glory and their true colors, come together, make up our front-end spectrum. In more layman terms, The spectrum is a formal term for a horde of front-end technologies.

Today, we’re going to inaugurate with the first element, that, most obviously happens to be The Core of the spectrum.

FIRST SPLASH INTO THE CORE OF THE FRONT-END SPECTRUM

It’d be very much like stating the obvious to say that The Core is the most important part of anything. The front-end spectrum is no different in this aspect. The Core is the building block of the spectrum.

Can you guess what it might comprise of? Take a moment. Still, rings no bells?

Well, we’re talking about The Core of the Front-end spectrum. So it will comprise of something that is at the heart of front-end technology. Now that is a big hint. Nothing still?

Allow me to end the Suspense. The Core of Front-end spectrum consists of

  • Web components
  • HTML
  •  CSS, and?

Yes, you’re right.

  • Javascript.

These are The Core elements of the front-end spectrum. In the next portion, we’re going to have a chit-chat about these elements.

WEB COMPONENTS

We’re talking about all things web, right? So how is it possible to not talk about web components?

Reusability is always been something that has had a lot of fuss to its credit where technology is concerned. And why not? I mean, imagine you have to write the same HTML code 10 times. How tiresome it’d make your work and how messy, your code.

Coming back, web components are a bunch of APIs. These help you create your own tools and tags(custom ones) that can be used over and over again. You can use them as many times in your websites or applications.

The web components in The Core of the front-end spectrum further have some elements.

  • SHADOW DOM: These are a bunch of APIs written in Javascript, added as a subcategory to the main DOM. The main DOM controls all the front-line features. The shadow DOM elements are kept and executed separately from the main ones.

         The benefit is that you can design the Shadow elements detached-ly from the main ones. No fear that the codes will conflict. No stress leads to better code. Yay!

  • TEMPLATES OF HTML: The specification of HTML elements can be done using the <slot> and <templates> tags. It facilitates you guys to work with elements whose effects you cannot see when the final page is out.

            And of course, these can be used over and over again. CUSTOM ELEMENTS: These are the APIs coded in JavaScript that allows you to create elements that will do your bidding. The customized ones allowing all the re-usability.

  • HYPERTEXT MARKUP LANGUAGE (HTML)

One of the most revered and well-known markup languages. HTML has been ruling the throne of Web Technologies for as long as I can recall.No wonder it is included as one of The Core elements of the front-end spectrum.

 It was brought forth 27 years back. Years down the line. And what is the first language that pops up in our brain when we hear about web development? HTML.

It is the foundation of all web pages. The markup language stands on tags and elements and attributes.  The tags are written using  ‘<’ which is the opening brace, then the text and then ‘>’, the closing brace.

Examples can be <img>, <p> and attributes like height, alignment, background, etc, to name a few.

HYPERTEXT MARKUP LANGUAGE (HTML)

One of the most revered and well-known markup languages. HTML has been ruling the throne of Web Technologies for as long as I can recall.No wonder it is included as one of The Core elements of the front-end spectrum.

 It was brought forth 27 years back. Years down the line. And what is the first language that pops up in our brain when we hear about web development? HTML.

It is the foundation of all web pages. The markup language stands on tags and elements and attributes.  The tags are written using  ‘<’ which is the opening brace, then the text and then ‘>’, the closing brace.

Examples can be <img>, <p> and attributes like height, alignment, background, etc, to name a few.

HTML has got a straightforward unambiguous layout that helps in writing the most structured code. Cool, right?

HTML has got a straightforward unambiguous layout that helps in writing the most structured code. Cool, right?

The layout is made up of tags like :

  • <html>: It indicates the beginning of the HTML type document.
  • <head>: This one can be used for giving headings or there are certain other tags. The head tag encloses these certain tags. For example title tag, style tag, etc.
  • <title>: The title tag can be used to give a title to your webpage. The given title will appear in the address bar. The title tag is always written inside the head tag.
  • <body>: The body tag comprises of all the content, all the pictures that you want to display. Or text boxes, radio buttons, links, etc all of that and more comes under the body tag.

And then there is a closing tag corresponding to each one of the tags.

There are a number of tags, with distinct use and functionality. But the language has still maintained its simplicity which is a wonder. The latest version of HTML is 5.2, while the HTML 5.3 is underway.

CSS (Cascading StyleSheets)

Ok, all the geeks out there, what happens when there are a number of rules, which one gets the priority? That is where CSS kicks in. Or when you want to apply the same set of styles of a number of different elements. See how convenient it is? Even more so when you use it.

CSS short for Cascading Style Sheets is The Core element We’re going to discuss next. It has been HTML’s Partner in Crime for the past 23 years. CSS is used to provide an extra touch of finesse and exquisiteness to the HTML code.

It plays around with elements on whom it is to apply styles. The elements are termed as selectors.

It is super convenient. Also, it takes developers’ needs into consideration by providing two ways of applying CSS.

  • INTERNAL CSS: It simply means to embed the code within the HTML file. It is accomplished by using the style tag, inside the head tag. In which you can define designing on various components like buttons, <a> tags, <div> tags, etc.
  • EXTERNAL CSS: Now, how this one works is, you create a separate file with the extension .css. Write your designing code in there. Then you link that file with your HTML file.

JAVASCRIPT

The next element of The Core of the spectrum!!! About this one, I can go on and on and on with using adjectives. The hottest trend in web technologies and hands-down the most popular language that has existed in the last 5 years. Javascript!!

Has it happened to you that you visit this high-end stunning looking web page? And it does something dynamically, with your information and You go wow!!? That is Javascript working in the background, my friend.

To put it formally it is a scripting/programming language using multiple paradigms. Javascript is just-in-time compiled. Yes, that means exactly what the phrase implies. It is compiled when the need arrives. Apart from that, one thing that caught my eye is its curly brace syntax. All the code is written inside ‘{‘ and ‘}’.

Javascript code is written in <script> tag. The code can be written in an HTML document or can be written externally just like in CSS. Also, it provides the functionality of APIs to do things which are otherwise a hard nut to crack.

These three HTML, CSS AND JS, go hand-in-hand if you want to design a good website.

CONCLUSION

That was all about what makes up The Core of our Frontend spectrum. Personally, these are some of my favorites from the field of web development. And trust me when I say this, because like so many others, coding has a superpower to make me cringe.

You’ll enjoy it when you read it. So go on, don’t let me keep you.

Happy Reading!!Stay tuned for more such blogs