March 15, 2019 · Top Posts ·

The 10-minute Road Map To Becoming a Junior Full Stack Web Developer

So you have started your journey into the world of web development. But what do you learn first as a junior full stack developer?

This guide has been assembled based on my experience in industry as a junior developer, as well as the thing's that impress me when hiring junior developers.

There is a lot of information here - so grab a drink, get comfortable, and let's get started!

Quick note - Some resources listed contain affiliate links. This means I get a small commission if you make a purchase. This goes towards keeping my site running and ad free. I only display links that I have personally used and found helpful.

The Must Know's

Regardless of your pathway and career goals, there are some things that every developer needs to know.


Frontend

Ah the frontend, the thing the user see's and is super important. Unless we start to teach user's how to read JSON this skill isn't going anywhere anytime soon. So what will you be doing as a frontend developer?

Let's dive into this in a bit more detail.

HTML/CSS

This is the bread and butter of frontend development. At a very basic level, HTML is used to position and place elements on a web page, while CSS is used to style those elements. There's more to it than that, but you're a junior developer so that's all you need to know for now.

If you're completely new to web development, now would be a good time to look at some resources:

Resources

QUICK TIP - There's a lot here but try not to be overwhelmed. This stuff will come with practice, as a junior full stack you won't be expected to be an expert. Make sure you are familiar with the terms, and can make a basic responsive webpage before moving on.

Frameworks

The next stage is to get familiar with CSS frameworks. These are basically "out of the box" elements, components and styles that you can use within your projects. Most companies use these as it saves their developers time as they don't have to reinvent the wheel. There are a plethora of frameworks, but I suggest you pick one and get familiar with it. They are typically all quite similar and once you are familiar with one, it's easier to pick up and learn another.

"Wait, why did I have to learn CSS/HTML from scratch if I can just use a framework?!"

Good question. Framework's only make thing's easier for us developers, if we understand the concept's behind them in the first place. This is why we learn the basics young padawan.

I won't confuse you with all the frameworks there are, but a common one is Bootstrap. This was created by Twitter and has been around for a while, so it's a solid choice:

Resources

JavaScript

JavaScript is the programming language of the web. If you want to be a successful frontend developer, you need to know JavaScript. You might have heard of frontend frameworks/libraries such as Angular, React, and Vue (we'll get to those later), but just like we learned the basics of HTML and CSS before getting into the frameworks, we'll do the same here. This will make you a better developer in the long run. As frameworks come and go, the core elements of the language will remain the same.

Let's look at some of the thing's a junior developer you will need to to know:

Again, no need to panic. A junior developer isn't expected to know everything on these topics.

How to learn JavaScript?

Everyone has their own way of learning, so you'll have to see what works for you. Personally, I like to read articles and watch videos about a topic in particular. Next, I'll try and create some projects. When I get stuck, I'll search for a solution on Google, read articles, and watch videos. And the cycle continues! With that in mind, here's some resources for you to try.

Resources

Not only do these resources teach you JavaScript, but you'll also learn a lot about programming concepts in general.

Some project ideas:

Once you can create a basic web app without tutorials, you'll have a pretty good knowledge of JavaScript!

Frameworks/Libraries

This is probably the most talked about part of web development: What framework should I learn?

There are many frontend frameworks and libraries, so again my advice is to pick one and focus on it until you learn it well. The popular ones at the moment are Angular, React.js, and Vue.js. These are all solid choices, and aren't going anywhere soon.

Personally I recommend React.js. Why?

React is popular, and you can do a lot with it; web apps, mobile apps, and even desktop apps. But if you're just starting as a junior full stack developer, it can be a bit trickier to pick up - you have to learn something called "JSX", which is like HTML and JavaScript mixed together. So make sure you have a good foundation of JavaScript before jumping into React.

You do not need to know them all, it look's more impressive if you know one framework REALLY well, as opposed having minor knowledge of multiple different frameworks.

React

It has huge backing from Facebook, massive online community and is the most popular in the industry at the minute.

Since we know a little JavaScript, learning React will be a bit easier. As a junior developer, you want to make sure you have a handle on the core concepts of React:

QUICK TIP — Again, as a junior developer you won’t be expected to know React inside out. So to practice the skills outlined above, try creating a few projects:

State Management (e.g Redux)

Once you have the core concepts of React nailed down, the next step is to understand Redux. Redux is basically a state management framework, that heavily compliments React. Think of it as a frontend database that holds the state of your web application in one, easy to manage place.

There are a a-lot of moving parts to Redux, so don't worry if you feel overwhelmed (I'm still learning the in's and out!). You will only need to know Redux when working with large enterprise scale web apps. Focus on understanding the fundamentals and state management using React.

Resources

Dev Tools

There are a number of tools available to help you with debugging React/Redux (part of the reason why I love it)

Web Browsers

As a frontend developer, it's important to know your way around web browsers. Chrome, FireFox and MS Edge are the main ones. You'll need to have a basic idea around:

Deployment & Hosting

A frontend developer should know how to deploy and host a web app. This is good for your portfolios, knowledge, and generally getting a job. I recommend using a managed service (i.e, let someone else do the heavy lifting for you) such as

Personally I recommend Netlify or Heroku. It makes it super easy to deploy and host apps through the UI Each of these services provides a free tier, so it shouldn't cost you much to run. The downside to these services is that they don't give you the finer access that some developers would need, such as email services, SSH or FTP. If you don't know what these are, you probably don't need them so the simple service will do just fine.

If you decide to go super-fancy and host some of your projects on a custom domain (such as if you were hosting your portfolio on <your-name>.com) I recommend NameCheap for domain names. Again, really easy to use and the domains are, well, cheap.


Backend

In a nutshell, this is where the data from the frontend is saved. For example, when a user creates a Tweet, this goes through the server, and is saved in the database.

A backend developer can typically perform the following tasks:

Programming Languages

There are many programming languages you can choose from. Like millions of them. But don't worry, the main ones are:

Again, my advice is to pick one and learn it well. I suggest using Node.js, as you are already in the mindset of learning JavaScript.  Node.js makes it really easy to create REST API's, which is one of the main tasks a junior developer will be expected to do.

Whichever language you choose, make sure you know the following;

If you decided to learn Node.js, a lot of this will be familiar to you. Do not try and learn them all! I bet you think I sound like a broken record but it's important to not get overwhelmed by trying to learn everything. As a junior full stack developer, you will not need to. Choose the language that best fits your goals and focus on becoming an expert in it. I highly recommend learning Node.js. Why?

REST API & JSON

Creating a good REST API is one of the main jobs for a backend developer. You will need to know:

REST API's are the bridge between backend and frontend development, so make sure you understand how they work.

JSON is the main language used to transfer data over a REST API. Data is represented as Objects and Arrays. Again, if you've learned JavaScript or frontend development using the steps outlined about, this will look familiar to you.

Resources

The Best Full Stack Developer Courses

If you've made it this far, you will have a brief idea of what you need to know to become a junior full stack developer. I've listed some resources throughout, but if you are like me and want one, go to course that has all the information you need to become a junior full stack developer, here are the best courses.


Databases & DevOps

This is pretty much the infrastructure side of web development. I wouldn't say that heavy knowledge of this stuff is a requirement for a junior developer. I'd almost suggest the opposite, and say you only really need to know this stuff in depth if you are looking to get into the field of DevOps. The broad area's you need to know are:

Depending on your team or company, there may be other teams or people to manage this. It is still an interesting and impressive set of skills to have, so if you are curious and have some spare time, learning some database and DevOp's skills will go a long way.


Advanced Topics

Below are some advanced topics I recommend once you have mastered the above. There is plenty to learn already, so I won't go into much detail here, but feel free to skip/skim this section for now and come back later.

Authentication using JWT/OAuth

This is a common approach in industry that authenticates and authorises users (e.g. login).

More info at: https://oauth.net/2/

Design Patterns

Design patterns are common solutions to common problems. Learning design patterns will make it easier to solve problems and inevitably a better developer.

More info (Java example): github.com/iluwatar/java-design-patterns

More info(JavaScript): github.com/fbeline/Design-Patterns-JS

BONUS TIP - There are many design patterns, so don't try and learn them all at once. Instead, get familiar with them, and when you encounter a problem as part of a project, see what design patterns are available for you to use.

Progressive Web App's and Mobile development

Progressive web apps are essentially web apps that run like native apps on a users phone. Pretty cool right? Check them out if you have times.

More info at: developers.google.com/web/progressive-web-apps/

Other options include:

React Native - let's you write React code that gets compiled to Android/IOS

Flutter - similar to React Native, only uses the Dart programming language

Server-side rendering

This is rendering frontend code on the server side, which is they returned and displayed to the browser. An advanced topic, that has its own merits such as SEO & speed benefits.

More info at: medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4

Using the command line (SSH/Bash etc)

Sometimes, you'll need to use the command line when a GUI is not available. At a very basic level, you'll need to know how to:

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket