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
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
- 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.
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:
- W3Schools is a great free resource to explore
- freeCodeCamp has some free tutorials
- css-tricks.com is a great reference guide
- Web Design for Beginners: Real World Coding in HTML & CSS is great course for beginners. I personally recommend it as it goes really in depth, but it easy to follow. I learned a lot about responsive designs with this course.
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.
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:
- 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!
Let's look at some of the thing's a junior developer you will need to to know:
- Objects, functions, conditionals, loops and operators
- 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)
- Testing (Jest, Enzyme, Chai etc)
Again, no need to panic. A junior developer isn't expected to know everything on these topics.
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.
- freeCodeCamp.org - If you like free interactive tutorials, freeCodeCamp is the place to go, and you'll learn a lot
Some project ideas:
- 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)
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?
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.
It has huge backing from Facebook, massive online community and is the most popular in the industry at the minute.
- 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:
- 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.
- 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!
There are a number of tools available to help you with debugging React/Redux (part of the reason why I love it)
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
- Digital Ocean
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.
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
There are many programming languages you can choose from. Like millions of them. But don't worry, the main ones are:
- Node.js (Not technically a language, more a runtime that let's you run JS on the server)
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 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?
- 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.
- This crash course on YouTube is a good primer for Node.js, and doesn't take very long to get through
- Tutorials point has some Node.js stuff. It's a bit fragmented so it will be more useful as a point of reference
- The Complete Node. js Developer Course (3rd Edition)This is a great course to learn Node.js in depth. All the concepts are covered with real examples, all in one place!
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.
- The Complete 2019 Web Development Bootcamp
- The Complete Web Developer Course 2.0
- The Web Developer Bootcamp
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:
- 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.
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 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
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
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)