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.
First thing that you would want to do is learn the basics which includes learning the basics of HTML, CSS and some familiarization with JavaScript syntax.
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.
Make HTMLs interactive with JavaScript
Ok this is where things become a bit more fun. So, we’ve got our content on the page and its got a nice coat of paint on it thanks to CSS, but it’s still going to feel pretty static. Let’s bring this thing to life! I want to click a button and have dollar bills start raining down the page. JavaScript can help you make it rain. JavaScript can be used for triggering events, inserting / removing elements from our page, creating pop ups, and yes — “making it rain”. It’s very flexible and is an incredibly hot topic in the web world right now. In this step, you are going to learn the basics of JavaScript to prepare you for the Journey to Front End Development
- Learn the syntax and the basic constructs of the language.
- Learn how to manipulate DOM with JavaScript e.g. how to remove some element from the page, how to add some element, adding and removing classes, applying CSS styles etc with JavaScript.
- 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.
- After you have learnt that now it is time to learn about all the new features in ES6+. ES6 is just a version of JavaScript which introduced lots of interesting updates to the language e.g. classes, different ways to declare variables, added new methods to arrays, string concatenation etc. Most of the articles that you will find online, they will use Babel to explain ES6 which is a transpiler that converts the new JavaScript to old JavaScript since it is not supported by the old browsers. But don’t worry about Babel for now, just get the idea about the concepts and use them in any of the latest browser which support ES6 for practicing. We will revisit ES6 later on.
As soon as you are ready with HTML, CSS and JavaScript with practice and you can deep dive into advance tools and technologies i.e.
- JQuery
- CSS Preprocessors and Organization
- Package Managers
- JavaScript frameworks
- 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 😉
