Its pretty common to hear the title of Front End Developer being thrown around these days. The funny part about front end is that 9 out of 10 people seem to consider it different things. So we thought why not explain the basics of frontend and clear the bubble around it.
Now to understand the front end, you also have to know the back end. The front end, also called “client-side” programming, is what happens in the browser. It’s everything the users sees and interacts with. The back end, also called “server-side” programming, happens on the server and the database. It’s the machinery that works behind the scenes to power those fancy features users interact with on the client side.
Structure webpage with HTML
This is not really an option folks. HTML is the foundation of any website and has been since Al Gore invented the Internet. HTML is what gives structure to your pages. Its like the human skeleton that keeps you standing. First thing that you would want to do is learn the syntax and learn everything that it has to offer. You should focus on learning the below:
- Learn the basics and how to write semantic HTML
- Understand how to divide page into sections and how to structure the DOM properly
Beautify the HTML with CSS
CSS is also a cornerstone of web development and its going to be your best friend and worst enemy all in the same day. HTML describes whats on the page and CSS describes how it should look. You want a hot pink button that bounces when you hover? CSS can do that for you. You want a 4 column grid that dynamically resizes, and is compatible in Internet Explorer 6? Well…It can do that too, but you may tear a bit of hair out. So basically CSS — Cascading stylesheets are used to add beauty to your HTML pages.
- First thing that you will have to do is learn about the syntax and familiarize yourself with the common CSS properties.
- Learn about the box model and how to prepare layouts using Grid and Flexbox.
- Once you are done with that, learn how to make your websites responsive with media queries.
By the time you complete the above tasks you will know that CSS is easy enough to pick up, but is challenging to master. You can already do some amazing things with it and the features are growing daily. Stick with this and it will pay off.
- Learn the syntax and the basic constructs of the language.
- After you are done with that learn and understand the topics such as scopes, closures, hoisting and event bubbling etc.
- Learn how to make HTTP calls with XHR or Ajax. Ajax is what lets you perform certain actions without reloading the page.
- CSS Preprocessors and Organization
- Package Managers
- Build Tools
There could be things still missing in the roadmap but this is all of what you need for any “Frontend Engineering” role. And remember the key is to practicing as much as you can. It will look scarier in the beginning and you will feel like you are not grasping but that is normal and over time you will feel that you are getting better and better. And don’t forget to ask for help if you are stuck, you will be amazed by how much people are willing to help… or at least we are 😉