Follow Us:
Front-End Web Development | Everything you need to know
Hello pals.
In the domain of Web development, Front-end web development is a great and profitable subdomain to work on. Although it is a very popular domain, lots of people don’t have complete knowledge about “Front-end dev”.As, I’m a Front-end web developer for the past 2 years, so in this article, I’ll try to give you every single details that I know about this domain.
Well, so let’s start with
What is front-end dev actually is?
As I have already told in our previous post which is web development oh about the front in development so this is
In front-end development, we basically create or design the outer looks of a website. For example, in this website, whatever design you are experiencing was made by those 3 languages, HTML, CSS, Javascript and this is a part of front-end web development. These are done by front end developers.
What does a Front-end Dev do?
There is a proverb that we all know- “First impression is the last impression”.
A Front End Developer exactly do that thing. They develop that part of a website that will a user see at the first glance, i.e. the front part.
As we can see in the image, the following things are done by a frontend developer.
Here I specially mention that “Cross Browsing is nothing but making a website more interactive for a user in different browsers.
Language for front end web development:
In front end development we use 3 basic languages. Those are- HTML, CSS and JavaScript.
Although there are more two languages as we can see,
- Angualr JS
- ReactJs
But these two languages are used to create complex user interfaces.
Now let’s understand these three languages.
Starting with HTML.
HTML
The full form of HTML is HyperText Markup Language. It is the backbone of a website or a web page.
We all have heard or seen in many videos that HTML helps us to make our websites sculpture, which is absolutely true. If we consider a website like a human body then HTML is used to make the sculpture or the bone structure of the website.
Learn HTML
See personally I believe that you don’t need to learn HTML, at least all HTML tags. You just need to learn the basics of HTML and as long as you work on that platform it will automatically recognize by you and after some time you will be a master in HTML. So don’t be worried it will take some time. But if you wanna learn HTML from scratch, then there are lots of books and lots of websites.
Also, there are lots of videos on Youtube, so you can check that out from there. Just search for the HTML and there will be lots of videos in front of you.
But the things you should know before starting to create a website that is the basic knowledge of HTML structure i.e. the head tag the HTML tags and some basic tags which I’m going to show you in the syntax part of this article.
Syntax of HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>This is the title</title>
</head>
<body>
Here goes the body of our webpage/website.
</body>
</html>
This is called an HTML boilerplate. This is the basic structure of an HTML page.
There are so many tags in HTML which hard to remind, so as you start doing more live projects, you’ll learn more tags.
Now, let’s have a look at CSS.
CSS
Cascading Style Sheets is a designing language.
CSS uses to design the webpage. It makes the webpage beautiful and responsive for all devices.
CSS is a very straightforward and very easy language.
With the help of CSS, we handle the looks(fonts design, background design, icons, column, row etc.) of our website.
Without CSS our webpage will look like a car
Syntax of CSS
Now writing CSS is very easy.
Now as we already know CSS is a styling language, so in our website where we have to style we’ve to declare that in a class or an ID after that we will take that class or that ID and we’ll style them.
For example, we want to style a form. The first thing we’ve to do is to write an HTML code for the form and declare a class then add CSS to that class.
<form action="/login.html" method="post">
<div class="container">
<h1>Login Form</h1>
<label for="uname"><b>Email</b></label>
<input type="text" placeholder="Enter email" name="emailId" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<label>
</label>
<span class="psw"><a href="">Forgot password?</a></span>
</div>
</form>
Now, it is just HTML code. If you run it, it will show two text boxes of Email and Password and a login button.
Now we are going to style this. See there is a <form> tag and a class named container, an <input> tag and a <button> tag.
So, what we’re going to do is-
We’ll add CSS to both of them to beautify their look. Let’s see how we’ll do that.
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(107, 208, 233);
}
/* body tag */
h1 {
color: rgb(0, 0, 0);
text-align: center;
font-family: 'Courier New', Courier, monospace;
}
form {
background-color: transparent;
background-size: cover;
margin: 50px auto;
font-family: Raleway;
padding: 10px;
width: 80%;
height: 100%;
min-width: 300px;
min-height: 640px;
border-radius: 10px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #041241;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 40%;
max-width: 100px;
}
button:hover {
opacity: 1;
}
.container {
align-content: center;
padding: 16px;
background-color: whitesmoke;
margin: 100px auto;
font-family: 'Courier New', Courier, monospace;
padding: 40px;
width: 70%;
min-width: 300px;
border-radius: 10px;
}
span.psw {
float: right;
padding-top: 5px;
}
Now, if you run this, you’ll see a beautiful login form like this-
So this is how CSS works.
Now, let’s talk about the most important part of front-end dev in my opinion i.e. Javascript.
Javascript
A website without Javascript is more like beauty without brains
.HTML and CSS makes the body of the website but Javascript makes it perfect to do the required tasks.
It is an object-oriented scripting language and it is used for scripting a webpages.
Now there is a misconception that JAVA and JS both are the same but actually, there is a key difference between them, i.e. JAVA is an Object-oriented programming language and Javascript is an object-oriented scripting language.
So what does Javascript do?
Javascript is the key to everything clickable on a website, for example, the menu button of our website and many more.
Now let’s see the syntax of JS.
Syntax of Javascript
<script>
document.write("this is a test Javascript");
</script>
APIs
In some cases, front-end developers use API(Application Programming Interface) to make the site more interactive and collect data from the server.
Then the server performs the necessary actions.
You can go through this article MuleSoft for better knowledge about APIs.
So, we’ve done with the language used in front-end web development. Now, we’ll discuss platforms to write codes and opportunities.
Platforms
Although there are lots of platforms to code the front end part of a website I’m going to talk about those platforms which I personally use.
The first platform is Visual Studio Code. Here, I basically write my codes and run them.
VS CODE
Visual Studio Code (VS Code) is a great code editor from Microsoft. It is totally free for all. So you can obviously try it. With lots of extensions and shortcuts Vs code is a great choice for all coders.
Github
If you are creating a client website or doing a big project with your friends/ teammates then Github is the best solution to monitor your code and the changes on it.
You can upload all your files here and continue doing changes to them. You can see every single changes that your teammates do.
Now we’ll talk about the opportunities you’ll get in this domain.
Opportunities:
Front-end Web development is such a widely known and highly required domain.
This is a domain where you don’t need a certificate to prove your skills that much. In this domain, you can do both-
- Job
- Freelancing
Jobs
You can go to many websites and apply there to get a job as a front end developer.
A good front end developer can make an average salary of $76,000 which is a lot.
Freelancing
The second thing you can do is freelancing. Now, this is also a great side of front end development. If you think you are good in front-end development, then there are so many websites, like Upwork, freelancer, Fiverr etc. where you’ll have to make websites for your clients and for that you’ll get paid for it.
Income
Now, as I’ve told you already “Front-end Dev” is a profitable domain. Here you can earn lot’s of money from $500 to $76,000 or even more.
Now, the income aka the salary of a Front End Developer may differ for these three things.
- Experience
- Company
- In which language they are more comfortable.
You can check this website- InterviewBit. You’ll get a complete overview of the salary part of a Front-end developer.
So, this is all about front-end development. I’ve shared all those things that I know.
If I missed anything then let me know about that. Share your thoughts in the comment box below.
And here I’m sharing the courses that will help you if you want to be a Front-end web Developer too.
Lastly, if you like this then subscribe to our newsletter.
Courses:
Courses that would help you most.
1. Learn Html5 & Css3 with Responsive Project
2. Learn Basic HTML, CSS & Javascript (Typescript) with Angular
