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.

  • Git/Source control - Every good developer will need to know how to use Git, especially in a team environment. So learn how to clone repos, make commits, create branches, and merge code
  • Debugging - Frontend, or backend, there will be bugs. Get familiar with the debugging tools for your IDE. Speaking of IDE's...
  • IDE - There are many IDE's you can use, so pick one and get to know it. Your IDE is your best friend, and knowing the shortcuts and tools will make you a better developer. Personally, I recommend using VS Code.
  • Methodologies (Agile/SCRUM/Kanban) - When operating in a team, the odds are you will be using a product development methodology, so make sure you're familiar with how they work

Frontend

business code coding 270360 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?

  • A designer will have put together some designs using photoshop or whatever. Your mission is to implement these designs using HTML & CSS
  • When a webpage is interactive, 99% of the time this is done using JavaScript
  • Data must come from somewhere right? So it's pretty common for a frontend developer to be able to interact with an API

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.

  • Using HTML to create a webpage
  • Stying elements using CSS
  • Different ways to apply CSS to HTML - inline styles, stylesheets etc
  • Responsive design - this is making your webpage look and act great on mobile devices

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

  • Good old W3School's has a good intro into Bootstrap
  • Bootstrap 4 From Scratch With 5 Projects He will take you through 5 projects which covers a lot of the main use cases you'll encounter as a web developer. I loved this course, I felt comfortable with Bootstrap after finishing the first 3 projects!

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:

  • Objects, functions, conditionals, loops and operators
  • Modules
  • Arrays (including how to manipulate them)
  • Retrieving data from an API using FETCH API
  • Manipulating the DOM and using Events
  • Async/Await (More an optional advanced topic, but really impressive if you know it)
  • JSON
  • ES6+
  • Testing (Jest, Enzyme, Chai etc)

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

  • eloquentjavascript.net - I love this book, it goes super in depth for those of you who like to really understand a topic. Don't worry if it all doesn't stick right away!
  • freeCodeCamp.org - If you like free interactive tutorials, freeCodeCamp is the place to go, and you'll  learn a lot
  • github.com/getify/You-Dont-Know-JS - a free book series, that again goes super in depth into JavaScript.
  • The Complete JavaScript Course 2019: Build Real Projects! This is one of my favourite courses for JavaScript. Creating project's is my favourite way to learn, and this course does exactly that, and complements the other resources above. You'll have a firm grasp of JavaScript by the end, and have a bunch of projects to put on your portfolio!

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

Some project ideas:

  • Create a Super Mario game (you'll learn JavaScript, manipulating the DOM, and using events)
  • Create a dashboard showing some stats which are pulled from an API. e.g, a twitter dashboard, a Github dashboard or anything you like (you'll learn working with APIs and JSON)
  • Don't worry about how things look here, focusing on  learning JavaScript, not the CSS/HTML. You can always make it look nice later if you want!

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:

  • Understand that React is based around components, and how components work
  • Using State & Props within your components
  • JSX and how to use it to render HTML elements on a webpage
  • How and when components re-render
  • Using React hooks
  • NPM, Webpack and Babel

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:

  • Rebuild some of your previous JavaScript projects to use React
  • Create a** calculator app **(A good one to practice state management, as a lot of user actions will need to update state. HINT: Try using React Hooks)
  • Create your own, Twitter, GitHub, or News feed. Use the public api's to get the data, and display this within your app.
  • Again, don't worry about making your app perfect, or making it look super sexy. Focus on making it work, and focus on learning the React concepts.

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

  • The React docs is a good starting point to learn React, it can be quite "technical" for junior full stack developers though
  • This video by Brad Traversy is a great way to get your feet wet
  • React - The Complete Guide (incl Hooks, React Router, Redux) This is the course I used to learn React & Redux before becoming a freelancer. It's super indepth and you'll definately be able to apply for React positions upon completion. It's quite long so take your time going through it!

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:

  • Debugging tools (e.g chrome dev tools)
  • Working with the storage methods (local storage, session storage, cookies)
  • Browser features - the biggest pain of web development is developing with browser support in mind. Keep an eye on whatwebcando.today to make sure your code supports the necessary browsers.

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

  • GitHub Pages
  • Heruko
  • Netlify
  • Digital Ocean
  • AWS
  • Firebase

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 .com) I recommend **NameCheap **for domain names. Again, really easy to use and the domains are, well, cheap.


Backend

ai artificial intelligence code 34676 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:

  • Create API's that the frontend's will use (typically by returning JSON)
  • Write the business logic and validation logic
  • Integrations with 3rd party APIs
  • Save and read data from a database

Programming Languages

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

  • Java
  • C#
  • Python
  • Node.js  (Not technically a language, more a runtime that let's you run JS on the server)
  • PHP
  • Go

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;

  • Creating API's
  • Language basics (creating functions, using conditionals, operators, variables, etc)
  • How to connect to a database
  • How to query a database
  • Package management
  • Writing tests

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 importantto 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?

  • You'll be learning JavaScript for frontend development, so jumping into Node.js development won't seem completely new
  • Node.js has a large eco system, is one of the most in demands skills, and has a great community

REST API & JSON

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

  • The different verbs and what they are used for
  • How to create a good response
  • How to handle requests
  • Authenticating requests
  • How to document your API

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

bandwidth close up computer 1148820 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:

  • How to manage a database
  • The different platforms for hosting (AWS, Azure, Google etc)
  • CICD and tools such as Jenkins, GitLab etc
  • Logging and monitoring

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

AdobeStock 152340875 1 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:

  • How to connect to a server using SSH
  • Navigate around using commands (cd, ls, and so on)
  • Edit files using vim (or similar. Heres a cheat sheet vim.rtorr.com)