Developer Roadmap 

Frontend 
Early Access 
 
This SkillPack is geared toward people just starting to learn to code. It will get 
you started with exactly what you need and walk you through the resources you need for 
a job and in what order. It won’t have you thinking “When would I use this in real life?” 
This is crafted to use what’s available, but skip the pointless stuff. This pack follows an 
80/20 rule, meaning - you only use about 20% of what’s out there, 80% of the time. If you 
follow along in the roadmap, you’ll see that there are multiple options for most steps. 
 
We include the most popular sources for learning. Some of them are free, and some of 
them are paid (but with free trials). You’re free to choose if you want to do them. Each 
core skill is structured so that you understand what it is and why you need it, followed 
by the curriculum. 
 
This will continue to be updated each month.  
 
 
 

 
 
 
 
 
 
 
 
 
Text Editors / IDE  
 
What it is: T
​ ext Editors are simple note-like taking applications that are typically lightweight and 
modular, meaning you can extend it’s functionality with addons. IDEs (Integrated Development 
Environment) come with more functionality baked in. They can be slower, and have many more 
options that can be confusing if you’re just starting out. We recommend sticking with a text 
editor. 
 
Why You need it: ​You can code in a notepad however this can get tedious, and confusing if you 
break the syntax of the code. Text Editors / IDEs can highlight what is wrong with your code, and 
even offer auto complete options - reducing the amount you have to type while maintaining the 
integrity of the code.  
 
Core Concepts: 
Emmet - A ​ fundamental core concept to editing in any text editor that will save you time. The 
shortcuts require a commitment to memory at first but will change how you code. (​Read More​)  
 
Resources -​   
https://code.visualstudio.com/​ - A light and popular option, that is also free.  
https://www.jetbrains.com/webstorm/​ This resource is free for ​one year​ with a .edu email 
address. It also has a 30 day trial.  
 
Other Text Editors -  
https://www.sublimetext.com/ 
https://atom.io/ 
 
Online Editors - (For examples and premade projects) 
https://codepen.io/ 
https://codesandbox.io/ 
 
 

 
 
 
 
HTML5  
What it is: 
HTML5 is the skeleton that holds the internet pages together.  
 
Why You need it: 
Manipulating HTML5 with CSS3 and Javascript is an essential role of a Front End developer. 
This is ‘known as manipulating the DOM’.  
 
Core Concepts: 
There are 150+ HTML5 elements but not all over them are used all of the time. Here is a list of 
some of the most common elements. 
 
<div><header><footer><p><span><a><section><img><h1> 
 
Underwhelming? We know. Just i​ nspect the page​ and look for yourself.  
 
Resources -  
Free Code Camp​ - This is one of the most popular sites to learn HTML5 for free however; there 
is no video. Complete this section. 
SkillShare​ - This is a free course, but there is also a two month free trial for paid. 

 
 
Recommended Paid Resources - 
Team Treehouse​ - 
  
 

Semantic HTML 
What it is: 
Semantic HTML or semantic markup is HTML that introduces meaning to the web page
rather than just presentation. For example, a <p> tag indicates that the enclosed text is
a paragraph
 
Why You need it: 
The benefit of writing semantic HTML stems from what should be the driving goal of any
web page— the desire to communicate. By adding semantic tags to your document, you
provide additional information about that document, which aids in communication.
Specifically, semantic tags make it clear to the browser what the meaning of a page and
its content. This is a skill many people miss, however it is vital to know.

Resources -​   
Pluralsight​ has a course and this is one of the only ​well reviewed ‘​ courses’ on semantic HTML. 
However; there are some other resources where I think r​ eading should be enough. 

 
 
 
 
 
 
 
 
 
 
 
 
 
 

Accessibility 
What it is: 
In short - T
​ he ability to develop applications and websites around users with disabilities. 
This is a great read​. 
 
Why You need it: 
This is probably the most hidden skill front end developers miss. This skill, in addition to 
semantic HTML, can take your interview to the next level. This is a required skill for most 
government jobs, or public organizations that have users of all types. 
 
Resources -  
This is straight to the point, and for this purpose the ​HTML section ​should enough. However; 
there is more advanced documentation h ​ ere. 
 
Freecode Camp​ also has a course. 
 
Team Treehouse has a great course ​here 

 
CSS3 
What it is: 
In short - this is the styling of the page. 
 
HTML and CSS3 - Combined make beautiful static websites. For inspiration look at 
HTML5up.net 
 
There are a number of ways to use CSS3. The most common application is the use of media 
queries for making websites responsive. However these have been built into their own libraries 
the most popular being bootstrap and CSS. There are hundreds of CSS tags used but as with 
html there are a few used most commonly. 
 
Why You need it: 
CSS controls the look and feel of the page. With CSS you can add flair and create sleek and 
responsive websites. There are frameworks and libraries built off of this that we will discuss 
below. If you are curious about what some of the greatest websites in the world look like check 
out A
​ wwwards​. It’s a site that gathers the most modern looking sites.  
 
 
 
Core Concepts: 
The box model - ​This is the understanding of what elements look like in regards to their borders, 
margins, and padding. We been asked this in almost every front end developer interview. 
Phrased as “Please describe the box model” (​Read More​)  
 
Resources -  
The Ultimate Guide to learning CSS 
Free Code Camp 
Codecademy 
CSS Tricks 
 
 
 
 

CSS Grid 
What it is: 
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional 
system, meaning it can handle both columns and rows, unlike f​ lexbox​ which is largely a 
1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent 
element (which becomes the Grid Container) and to that elements children (which become Grid 
Items). 
 
Why You need it: 
Resources -  
CSS-Tricks Complete Guide 
CSS Grid Practice 
 
 

Flexbox 
What it is: 
Why You need it: 
Recommended Free Resources -  
Free Code Camp 
Recommended Paid Resources - 
 
Material Design 
What it is: 
Why You need it: 
Recommended Free Resources -  
Free Code Camp 
Recommended Paid Resources - 
 

Bootstrap 
What it is: 
A staple of the internet - once you see it, you can’t unsee it. Bootstrap is essentially a list of 
media queries built by hand. B​ uild responsive, mobile-first projects on the web with the world's 
most popular front-end component library. 
 
Why You need it: 
This is one of the quickest ways to learn how to make a website mobile friendly, or “responsive”. 
Meaning that it will change it’s display to fit almost all devices and screen types. Most websites 
use bootstrap or CSS Grid which we will get to below.  
 
Resources -  

 
 
Official Website

 
Boilerplate 
What it is: 
Boilerplate is prebuilt code that allows you start with some structure and build on top of it. Very 
rarely do developers create apps entirely from scratch anymore. These not only save time with 
building your app but also by reducing user introduced bugs. These are also a great way to 
reverse engineer how websites / webapps are being created. Popular for creating a portfolio 
this way and then repurposing it for your own use.  
 
Why You need it: 
Save time to build an app for a client. Save time on building an app for a job interview. Save time 
on building….you get it. This is here to get you up and running in a flash. Use this when you can. 
No need to reinvent the wheel.  
 
Resources -​   

 
HTML5 Starter Kit 
Premade Mobile Friendly Sites
 
 
JavaScript 
What it is: J
​ avaScript is a scripting language which is used for creating web pages. It’s a 
browser interpreted (client side) language. It is used when a webpage is to be made 
dynamic. 

Why You need it: 

It ​allows you to implement complex things on web pages. Every time a web page does
more than just sit there and display static information for you to look at—displaying
timely content updates, interactive maps, animated 2D/3D graphics, scrolling video
jukeboxes, or more—you can bet that JavaScript is probably involved.

Paid Resources

Team Treehouse​ - A developer specific platform with a monthly payment plan geared towards 
getting you job ready.  
 
Pluralsight​ - A more career oriented program.  
 
Skillshare​ - Udemy but with a monthly plan. 
 
Free Resources  
- ​https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps 
- ​https://www.udacity.com/course/intro-to-javascript--ud803 
- ​https://www.w3schools.com/js/js_intro.asp 
- ​https://www.codecademy.com/learn/introduction-to-javascript 
 
 
 
 
 
 
 
 
 
 
 
Jquery 
What it is:​ A
​ s the motto says​ "write less, do more"  
 
Why You need it: 
Recommended Free Resources -  
Free Code Camp 
Recommended Paid Resources - 
 

 
 
Reactjs 
 
What it is: 
React is a declarative, efficient, and flexible JavaScript library for building user 
interfaces. It lets you compose complex UIs from small and isolated pieces of code 
called “components”. Don’t  
 
Why You need it: 
This is one of the most popular front end libraries right now. Many state of the art apps are 
being built on this.  
 
Recommended Paid Resources - 
Tyler Mcginnis​ - This is hands down the best place to learn react online in terms of courses. All 
of their courses are guaranteed to be up to date.  
 
Recommended Free Resources -  
Free Code Camp​ - A decent place to learn react, although the tutorials can be outdated fairly 
frequently.  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Git & Version Control 

What it is: 
Version control is a system that records changes to a file or set of files over time so that you 
can recall specific versions later. For the examples in this book, you will use software source 
code as the files being version controlled, though in reality you can do this with nearly any type 
of file on a computer. 
 
Why You need it: 
If you’re going to be working on a shared codebase, or want to maintain a history of the code 
you’ve changed then you’ll need a VCS. You can track when bugs were introduced by reverting 
to check points (commits). You can also work on branches. Branches are the concept of 
working on parallel to the code base with ‘your own version’. That way you can make changes to 
the code without affecting the main code branch(This is usually known as the development or 
production branch). Once you’re complete with task you can then merge your work into the main 
branch of the application. 
 
Resources -  

 
My course

 
Cheat sheet
Tutorial

 
Dev Tools 
What it is: 
Dev tools are dedicated tools built into browsers to help you debug and look at all of the 
requests that are being processed. You can look at everything that loads on the front end. This 
tool will become your best friend. You can also write javascript in the built in javascript to test 
scripts, or debug code.  
 
Why You need it: 
This is essential to solve bugs, modify the CSS in real time to see what is overriding your current 
CSS. Remove or change attributes. Use the audit to test how fast or slow a  
Resources -  
Free Udemy Course  
 
 

 
 
Practice Projects 
Practice projects are a good way to stay up to date, learn quickly, and build a strong portfolio 
towards that first job. Practice projects can be as small as a console app, or as big as a full 
facebook clone. They’re meant to take you from step 1 to the end of the development cycle, over 
and over, until it's second nature. 
 
Here is a video on 100 project ideas: h​ ttps://www.youtube.com/watch?v=vShRGuweVRY