How to start learning the front-end development
Why we need the front-end?
-
If you are new in the tech world and you have an interest in the UI then you must need to learn front-end technology. Now the question is what’s UI?
-
So if you like to build something which user can interact and you like to create some cool stuff or design then you must learn front-end. So UI stands for user interface.
-
Front-end is used to interact with the end user, it is like the front face of any act or simple example of getting a burger 🍔 from any xyz place or company, but behind them, how everything build or how process we don’t know, so the main focus in the front-end what’s end output to the user.
What are the things required to learn?
-
First thing in the front-end is required understanding of layout part, basic we need to thing how we will plan design in the layout or each small part how to divide basically, so example for whole view is one container, inside that we will divide header, inner container and footer, so this is not generic for all the design but we need to think about layout before start writing ui.
-
Once you have an understanding of layout you need to learn first thing as technology wise HTML, How to write html, what structure and what are the things in the Html we need to learn.
-
In html basically we need to learn how div, span, p etc.. Tags worked, how these tags are helped to design our layout.
-
After HTML must need to learn CSS, it helps to design like what color you want to add, what font size, margin, padding, width, height etc. Style attributes, there which help to design properly, all the positioning elements and all the types of interaction and a UI view part we can handle using CSS.
-
With html and CSS we can build any static site, but still a few things we are not able to do with these two things like any user actions perform or any user interaction.
-
So for performing user actions we need to learn javascript, so javascript help to do all the type of actions and interaction. Like let’s say we are pressing on Register form submit button, then how the form will submit data to server and form will close those all the interaction will be done by javascript.
-
Let’s take another example, like if we have a menu bar in the header, now we want to scroll to the specific position on press on a menu item, so that interaction we can perform using javascript.
-
So to start as a front-end developer, we can learn easily html and CSS, which help to at least start a UI design, but with that if we can learn javascript then it helps to do all the interaction as well.
How to execute all the things together?
-
Once we learn HTML and CSS, we can start designing any layout, like we can design for web page or mobile web UI as well.
-
Html help to do design any layout and CSS helps to build exact design.
-
Once layout ready for our web UI, then the only pending thing is user interaction. So for that we need to use Javascript.
-
With html, CSS and javascript we can easily design any web UI and mobile web UI.
-
Let’s create one sample html page, will write CSS in the style tag and will add javascript in the header or footer of html page. Example GitHub repo.
Screenshots:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{background-color: yellow;}
span, div{color: green;}
</style>
<title>Our First HTML Page Title</title>
</head>
<body>
<div id="app"></div>
<div><span>This is a body part of our HTML page</span></div>
</body>
<footer>
<div>This is a footer part of our HTML page</div>
<script>
document.getElementById("app").innerHTML = "Hello World!";
</script>
</footer>
</html>
How to grow a career in the front-end technology?
-
Html, CSS and javascript help to write any type of UX design.
-
But if we are using HTML, CSS and JS without any external framework, then it might be time taking and we need to write too much code, so for faster and cleaner development we can use some external library/framework.
-
So we can use any UI library like bootstrap, semantic UI etc. So in that we can use any template which helps to write less code and faster development.
-
Example for if we will learn bootstraps, so if we want to design responsive web UI, then bootstrap has classes which support responsive UI, we just need to add class it will handle all the types of CSS for all the screens. If we don’t use any framework, then we need to write media queries for all the size of screens and these frameworks provided basic layout structure so we need not write too many things.
-
Core javascript if you know i.e., best thing to build any type of UI, but with that if you learn framework, then it will help structure your project and improve code base as well as the performance of your UI design.
-
So lets say if we learn React Js or Angular Js or any other JS framework, so each framework has their pros and cons, but for now I am taking React JS example, it will help to write single page site easily, its architecture based on view, using state and props and using life cycle method we can perform all the user interaction, so React JS easier to learn and if once learn we can write any view UI component very faster.
-
So if you know any JS framework which help you to grow in your career, and it helps to do cleaner and faster development with lots of benefits.
-
If We learn additional libraries and javascript framework, then it will increase our chances to grow as a front-end developer and there are many opportunities based on the framework in the market which help us to grow in our career.
Is it enough learning only front-end technology, or if we want to learn something else what should be?
-
In the front-end there are too many frameworks, their which we can learn, but apart from those if we can learn node JS because we are learning javascript which help to learn node Js easily,
-
Node JS is used for the Back-end, where you can write your services, APIs etc.
It will help to grow your career as a full stack developer. -
In full stack developer, you will write code for the front-end as well as back-end.
-
If you have full stacks developer skills, then you will have more chances to the grow faster and do multiple things.
Thanks for reading
Hopefully You have found this article useful to start learning the Front-end technologies.
If you have any recommendation or any inputs please let me know in the below comment section.
It is truly a great and useful piece of info. I am glad that you simply shared this useful information with us.
Please keep us informed like this. Thanks for sharing.