Roadmap to Becoming a Front End Developer

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
Roadmap to become frontend developer
Roadmap to become frontend developer

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 😉

Disrupting antiquated process in a modern industry

At SimNation, we are constantly finding ways to improving on our quality of work. In order to do so, we need to hire top professionals, provide them the collaborative environment and best tools they need to perform the tasks. Historically, most software dev. firms have gone by the same tired processes which can cause much trepidation for their clients. We understand the fears clients may have when partnering with an off-site vendor. Which is why we are here to change the way things work!

Lagard Development Co’s Approach

  • Under quotes on projects and under estimates timelines in order to pigeonhole” clients down the road
  • Once deep in to projects will suggest changing to hourly rates
  • Uses a multitude of excuses as to why projects are not on schedule, mostly using an ‘out of scope” approach
  • Outsources portions of projects to dev. co’s without the knowledge of clients
  • No real measurable accountability for hours spent on projects
  • Lack of details on developers highered and capabilities of projects
  • No real measurable accountability for hours spent on projects
  • Hold’s code hostage in instances of disagreement


  • Significant amount of efforts put in to the beginning stages of a project
  • Assurance prior to programming that the scope is fully understood and documented
  • A stringent process for hiring personnel including, personal interviews, test of capabilities, references of past projects, overall work performance, attitude and background checks.
  • Full visibility of programmers hours spent including intervaled screenshots, web browser activity, activity levels based on mouse and keyboard movement.
  • Weekly reports showing hours spent and achievements for that week.
  • Weekly conference calls with clients to discuss completed work, workflow changes, bugs and enhancements
  • Invite to our project management software to provide full visibility on activities of the project

Here is what we can do for you?

Each and every project has is assigned dedicated programmers to your project only. This may sound costly, however, we have found that in doing so:

  • Most projects are completed prior to the set deadline
  • There is a large reduction in miscommunication from planning scope to actual development
  • An increase in quality of the finished product with less bugs and more successful launches
  • A more concise, defined cost of work with more projects completed under budget

Interested in knowing more or have some comments, feel free to get in touch!