Introduction to Front-end Development | What is HTML and CSS?

I wrote this article like a year ago but wasn’t able to publish it because I lost the images I used, finally created some new images, and putting this out.

Web development can be divided into two parts: The front-end and The back-end development. The front-end means focusing on the client-side of a website, meaning it deals with the development of the appearance and the interactivity of a web page. From a top-level view front-end mainly consists of HTML, CSS and, JavaScript. In this article, we’ll try to make you understand the basics of front-end development.

What Front-end development really is?

Everything you can see on a website or on a webpage comes under front-end development. The reason why we call it the front-end is that it is the front of a website, it is what’s visible to the user.

When we enter an URL, a request is sent to the server and then the server sends a response which can be anything but usually an HTML document, then the browser reads the code and the linked files with it and based on the code written in the HTML, linked CSS and JavaScript, it decides what elements are going to be present over the web page, in which order they’ll appear, how will they look, what actions to take on clicks, keypresses and on different events and creating the HTML, CSS and JavaScript are what front-end development is.

What is HTML?

HTML stands for Hypertext Markup Language. It is one of the three languages a browser understands and it is used for defining the structure and for defining the elements which are going to be present over the web page. We also specify the information that we want to give to the browser and we also provide the linked files which are going to affect or use the web page, like style sheets and scripts.

Understanding the HTML

In the image below you can see and understand how the HTML is written to create a specified look.

Remember the design shown in the image above is an output of the combination of HTML and CSS. Only using HTML will not create the same effect. We do not generally write or do the styling of our elements in HTML, we use CSS.

I keep saying elements, but never explained it. I assumed you know about it but no worries if you don’t, everything on a webpage is an element, for example, the header of a website is a header element, similarly, a footer is a footer element. These elements we write in our HTML document in form of tags. Hope you got the gist.

What is CSS?

CSS stands for Cascading Style Sheets. The definition is in the name itself, these are style sheets meaning files that contains styling of our HTML elements, now what do I mean by styling is, we define pairs of properties and their corresponding values over these elements and those property-value affect the way they appear over the web page.

As you can see in the above image we have defined properties over the HTML elements. These are some of the general properties like height, width, background color, but there are many properties and you won’t believe what can be done using CSS until you’ll try it on your own.

Thank you for reading this article and I’ll see you next time.