Search

A Step-by-step Guide To Become A Front-end Developer

I am a recent graduate and started my career in web development and I've been interested in front-end since I've come across it. Since I had my first class in college for web development, I've been interested in front-end.


People keep asking me why do I love to work in the front-end? and my answer is straightforward that "I just love to work on it."


I've come across a lot of people who don't like the front-end, even after listening to their point of view, I never changed my mind to leave the front-end and work on something else.

I've learned a lot of new technologies but I never thought of leaving the front-end completely. Front-end development is something I think I'll be working on for the rest of my life.





Today, I'm gonna be telling you few things listed below

  • Who is a front-end developer & What does a front-end developer do?

  • What skills are required to become a front-end developer?

  • What is the scope of being a front-end developer?


So, First of all, Who is a Front-end Developer and what does he/she do?


In layman terms, a Front-end developer is a person who is responsible for the look and feel of the website. All the things that user can see on a screen are made by a frontend developer, Front-end developers are responsible for the visuals that user can see and interact with, Ultimately Front-end developers look around with the design and interaction of the website.


Next, comes the skills, that are required to become a front-end developer?


There are 3 basic skills that you must learn to become a front-end developer.

They are as follows:




  • HTML (Hypertext Markup Language)

According to Wikipedia, HTML is the standard markup language for documents designed to be displayed in a web browser.


This is a basic example of HTML code, Here you want to show a button that says "click me"

<html>
<body>
<button> Click Me </button>
</body>
</html>

It will Display the button as shown below, This button does nothing and does not have any look or feel to it. But, that's the work of HTML, it's a basic structure of your website.

  • CSS (Cascading Style Sheets)

CSS is a code that styles your website, whatever you see on a website that has some colors, design, stylish buttons, etc. All of it is done using CSS. Here you selectively select a part of code that you want to style and design them using CSS.


E.g. The above button that was created by HTML is very dull, we can make it more stylish using CSS.


<html>
<style>
button{
    font-size: 18px;
    color: red;
    border: solid 2px black;
    border-radius: 10px;
    padding: 10px;
    background: black
}
</style
<body>
<button> Click Me </button>
</body>
</html>

The above styles given inside style tag to button applies on the button and make it look pretty.

  • JavaScript

JavaScript is a Programming language used to make a website interactive, and communicate with it.


E.g. Now you've added a button and then added styles to it, but still, it does nothing, So to make that button do anything you'll need JavaScript.


<html>
<style>
button{
    font-size: 18px;
    color: red;
    border: solid 2px black;
    border-radius: 10px;
    padding: 10px;
    background: black
}
</style
<body>
<button onclick="clickMeFunc()"> Click Me </button>
</body>
</html>

<script>
function clickMeFunc() {
    alert("Welcome To Web Technology Guide");
}
</script>

Now, when you'll click on this button, it will give you an alert saying, "Welcome To Web Technology Guide"


Now, that you know the basics of Front-end Development, you can start working with it and start making your own web pages, websites.


These are just the basics, once you dive down on to the path of learning web development, there is a lot more, but these 3 technologies are more than enough to get you started on your path to becoming a front-end developer.


38 views0 comments

Recent Posts

See All