Front End Development

Do you want to pursue your career as a front end developer but know nothing about it . Don't worry you are at the right place .We will cover all the points in this blog .

Introduction

There are two types of developer in web development.

1. Front End Developer
2. Back End Developer

Front End Development mainly focuses on designing of website. This is the part that user actually see and interact with. The developer which do all these kinds of work are called Front End Developer.

If you are interested in website or web application designing and want to become a front end developer then there are three things you need to learn.

HTML

HTML (Hypertext Markup Language) is a markup language which is used to give a structure to your website. You can say you are giving a blueprint to your website with the help of HTML like headings , paragraphs , links etc. There are many tags which are used in HTML like

So let's start your first HTML project on Visual Studio Code. Firstly , create a file on VS code with . html extension. But before that , download a extension on VS code live server . Press the ! button and then enter. It will create a boiler plate code for you .

This is your boiler plate code .

Now , let's write a code on this file to say HELLO WORLD

We write all the Html code inside body tag . h1 means heading . You will get to know these tags betten when you will learn html . Note that code is still not saved . You can see the white dot on first.html . It means you need to save the code to see the changes . Press ctrl+s to save the code . Now you can see the white dot is not visible . Right click the mouse and click on open with live server .

You can see the output on your screen. This is the magic of HTML .

Fun Fact : World's first web page is still available on internet . Click Here . It is mostly made up from HTML .

CSS

So now you created a structure for your website but don't you think something is missing . Ohh yess !! we need to make our website more attractive and beautiful . CSS (Cascading Style Sheets ) is the language which defines the presentation of our website like font color , background color , height and width etc. We use class and id in css.

Let's change the color of HELLO WORLD from black to red . For this , you need to create a separate file with .css extension and you need to link your css file with your html file . You can do this by typing the given code inside title tag.

As you can see the css is now added to your HTML file . Now let's write a css code. This code is defining a color to H1 . Let's see the output . Isn't it looking more beautiful than before . This is the magic of CSS. You can define various rule on any class with the help of CSS.

JS

Now your website is looking attractive . But you need to make your website more lively . This is where JS(Javascript) is used. JS is the programming language that allows you to implement complex functions on your website . For example you can use JS for displaying timely updates , animations and much more . Let's show a message on your website saying "you are not logged in" with the help of JS . Firstly you need to create a file with .js extension then you need to add this file into your HTML file . You will add this code in body tag . As you can see the javascript file is now added . Now let's write a code on JS file .

This code will show an alert in output .

You must have understand the use of Javascript by now .

Note : All the three files i.e HTML , CSS , JS should be in the same folder .

Summary

If we take a example of Human Body then the HTML is the skeleton of body , CSS is the skin of body and the JS is the brain of body . You must have understand this example . I hope you like this blog . Best of luck