This is Part 4 of a 5 Part series, if you want one of the other sections…
Part 1
Part 2
Part 3
Part 5
How to Learn Frontend Web Development
I recommend that everyone learn React as a starting point. Why not jQuery? Or Angular? Or Vue? One reason: there are more React jobs right now than any others, by a large margin. This makes it a practical starting point. There’s also a wonderful and large community of React developers and the React documentation is absolutely, amazingly, delightfully beautiful (can you tell I’m a fan?)
As you progress through this guide you will see lots of documentation for different frameworks and libraries. The React docs are the gold standard. I recommend walking through their tutorials before going anywhere else.
A lot of what you read or explore may not make that much sense at first, and this is okay. I have a lot of resources for you here, find the ones that fit your style the best.
A word of caution around React Hooks. They are great to learn later, but you still need to understand how to use class-based components. Most of the codebases you’ll end up with at work for some time will be class-based! The same goes for learning Redux — you should learn it for now. I’ll update this guide later if this recommendation changes.
What is a Frontend Framework?
Before I start listing the ways I recommend you study React, let’s talk about what problem it solves. Up until now you’ve been writing code for yourself, in local files or in the browser. This is fine for getting started but at some point, you will want people all over the world to have access to your code.
More importantly, you are going to want their experience to be the same (or almost the same) regardless of their browser or operating system. You also want them to be able to get updates to the website in real-time. Remember when you used to have to hit the refresh button on your browser to get new messages? If not, lucky you!
React is one of the solutions to manage writing a single page application (SPA) for client-side code. The main superpower in SPAs is how they manage the state of your application. State is the condition (data, user interactions) of your application at a given point-in-time. This blog post gives a great explanation of state.
React has a cool way of handling state internally and passing it to different components within your application. I recommend reading both React’s definition of how it works and this post from Stack Overflow.
Now that you have a rough sense of the basics, I encourage you to start building things. The goal of this and the next 4 modules are the same — build small practice projects as often as possible to test your ideas and understanding.
If you ever get stuck, Google is your friend. Whenever you understand a topic — explain it to a buddy or write a blog post about it to practice your technical communication. I keep bringing up this method of practice for one reason: your ability to verbally communicate your technical understanding will be crucial for job interviews and only comes with practice!
Resources for Learning React
- My favorite courses for learning React as a beginner, are from Wes Bos and on Frontend Masters.
- There are some fantastic free resources. My two favorite YouTube courses are from Traversy Media and Net Ninja’s (which also includes Redux). Redux is hard for beginners, work on mastering React before you master Redux. The reason Redux is challenging is a combination of new syntax and new concepts for managing the flow of data.
- For the above, focus on state vs. props — solidify your understanding of how to pass functions and events around. Whenever you get stuck, refer to the React docs or use Google. There are lots of great blog posts and Stack Overflow answers to help with common questions.
- When you feel like you’re getting the hang of things, I recommend going deep with Tyler McGinnis’ courses on React and Redux. These have you building both pieces of tech from scratch using JavaScript. They help you to develop an under-the-hood understanding, crucial for explaining the tech during job interviews!
- There are two other course providers I enjoy. I’ve mentioned Stephen Grider already, who has a TON of content out. I am not opposed to his teaching style, but it can be easy to code along with him and not actually learn the material, so be wary. The second I recommend is Scott Tolinksi. Scott has a fantastic YouTube channel, and he’s focused his energy the past couple of years on Level Up Tutorials. He has some great design-oriented content and goes deep on advanced React topics too.
- Once you’re starting to feel comfortable, I recommend you practice building several small apps. A great starting point is JSON Placeholder API — it has blog and todo data with RESTful endpoints. I use this as my go-to whenever testing something new. A large list of public APIs is here. Make fun projects using data from the big list and share them with friends!
- Use CodeSandbox to create practice projects, or use create-react-app to build projects locally. Practice, practice, practice!
Once you feel comfortable with parent-child components, passing state around as props, and event handlers, you’re ready to move on! Don’t shortcut your time here, the concepts of how to move data around a local application are important.
How to Learn Node and Express
By the end of this section, you will feel you have superpowers! Writing server code seems like the hardest, strangest thing to beginners. We tend to imagine that a server is some mythical computer in a center somewhere deep underground — this couldn’t be further from the truth.
A server is simply a file listening to requests from the outside world. That outside world can even be on your own computer. Part of what makes JavaScript a great first language is Node.js. Node is the same engine that makes JavaScript run in the Chrome browser run outside of the browser. It lets you use JavaScript code on any file system.
To run a node file, on a system that has Node installed, you type node FILE_NAME.js and it executes the file. It’s like running a file inside of a <script> tag in the browser, except that you don’t need the browser!
Why is this so powerful? For obvious reasons, JavaScript inside the browser isn’t written to give access to your computer’s file system. Imagine if any website could access all the files in your Documents or Downloads directory!
Node, on the other hand, has modules written to give access to the internal files of the system. This allows your server to access HTML or JavaScript files stored on the server to send them to a client. Pretty powerful.
One of the main challenges learning Node is that you will be dealing with a lot of asynchronous code. This is why we spend so much time covering it in the Advanced JS section above. If you feel rusty on callbacks and promises go back and practice.
Another big challenge is learning to understand the Node Package Manager (NPM). NPM gives access to a huge number of packages written by other developers around this world. This is a blessing and a curse! It allows you to extend your projects easily, but it means adding a lot of code without understanding what it actually does. When starting out I encourage you to look at the original source code of these packages when you begin using a new one.
Over time you will see the same packages used again and again. Your understanding of how they are written will improve. This won’t happen overnight but it’s worth the exposure, so start early.
One piece of caution: I highly recommend that you use Node Version Manager (NVM) to install Node. It takes a bit more work to set up, but will make your life much easier in the long run.
Resources for Learn Node and Express
- I encourage you to spend at least a few days using Node without Express. It is a little frustrating, but it will show you where Node ends and Express begins. I have noticed in job interviews that a lot of newer developers don’t understand where this line is. This tutorial by Traversy Media is a great starting point.
- As usual, NetNinja has a fantastic series on Node and Express. Spend time looking through the Express docs for a few tutorials on routing and middleware. Middleware can be a challenging concept but it’s powerful. In a nutshell, you can use middleware to intercept requests and transform them if they fit a specific pattern. BodyParser is a great place to begin learning about middleware.
- There are a few topics you should understand in this section but they don’t require entire courses to master. The first is writing RESTful routes from this article on Codecademy. The second is how Semantic Versioning works and how NPM uses semantic versioning.
- If you’ve purchased a Frontend Masters subscription (and I highly encourage it), then there are two courses I recommend. The first is Introduction to Node, and the second is How To Write an API using Node.
- I want to make sure you feel confident using the file system too! One of the major benefits of Node comes from this superpower! Devslopes.io has a Complete Node.js course. And Stephen Grider has a deep course called Advanced Node (this covers things like Redis and some AWS tools as well).
The last few topics to cover are Encryption, Hashing, and Authentication. You don’t need to go deep on any of these topics right now, but how they work are common interview questions. Here are a few videos I would watch on the subjects: - Public Key Encryption
- Web Encryption
- SSL
- Hashing
- Passport.js from Traversy Media
- OAuth from Net Ninja
As usual, my recommendation is to build lots and lots of small projects. Practice building a small server, creating routes, saving things to a local file, and sending them back to a client.
Get comfortable with asynchronous code! This is a challenge and something that beginners don’t practice enough. There’s a reason the most common take-home project is to build a RESTful API. It shows that you have an array of skills and can put the pieces of a server together.
How to Learn Databases: MySql, Postgres, Mongo, and Redis
For some of you, this is going to be the most challenging section of all. We tend to have mental models that make CSS either easy or hard, that make networking and interviewing easy or hard, and databases easy or hard.
I believe this has to do with what you enjoyed and spent the most time doing as a child. If you liked math, and now enjoy spreadsheets, then learning how to use databases will seem natural. If not, then you should commit to practicing a little more. Be patient with yourself during this process. I’ll give the same advice again in the networking and interviews section below.
At this point, you want to be in “play” mode. If you aren’t already, you should start keeping a dev journal. Write down your war stories — what works, what doesn’t — so you can tell them later in job interviews. You also want to turn these into bullet points on your resume.
Start by learning SQL, first with MySQL and then with Postgres. Both are wonderful and have lots of tutorials. The syntax is almost identical, but they are set up and can treat your data differently. Remember, you’ll be using a connector package — something installed from NPM to actually connect to the database. This means you’ll have to read the documentation for the DB and for the NPM package too.
I’m going to say this again: databases can be hard for new engineers. Have fun and don’t get frustrated if things don’t click right away. There are a lot of 3rd party tools, called ORMs (or ORDs) that can help you write cleaner code. I encourage you to write raw SQL to begin with so you can troubleshoot when things don’t work the way you expect.
After you’ve created a few small projects using one database you should switch to the other. You can swap out this piece and plug a different database into your server.
Repeat the process with Mongo (& Mongoose) once you’re comfortable with SQL. Mongo is considered NoSQL (horrible name), which just means it’s something other than SQL.
There are trade-offs for using different databases, but your goal is to become familiar with how they structure data (Schemas) and how to store and query the data.
Before moving on, spend a little time learning Redis. The concept of caching is important — people love checking your understanding of it during system design questions in an interview.
Resources for Learning Databases
- MySQL docs just as reference (remember when I said how great the React Docs are!?) Don’t spend too much time with these, but keep them in your back pocket. The Mongo and Postgres docs are better.
- Traversy Media MySql with Node course. A good, free, YouTube course that you can follow along with.
- MySql NPM package as a reference.
- Codecademy’s tutorial is actually decent for learning SQL. I’d work through it then just practice building things. Swapping over to Postgres should be a breeze.
- If you like GUIs check out Sequel Pro — it’s a free tool! I use Tables Plus, which is paid, but amazing!
- Postgres docs. This is actually a solid reference, I use it often.
- Pg package on NPM. Fantastic package with great docs.
- A long, but fantastic free course on Posgres from freeCodeCamp.org.
- I don’t think you need to pay for any database specific courses. What you already have purchased should suffice. Frontend Masters has a greatSQL course and my favorite Mongo course I’ve found so far.
- Another Mongo course from our pal Net Ninja.
- A Redis course from Traversy Media, and one with Node.
- One from the Redis team.
- Again, there’s LOTS of free database content. Paying isn’t necessary unless you want to go deep into DB optimization, or are looking for something specific you can’t find in a tutorial. Stephen Grider has a Mongo course on Udemy and Colt has a MySQL course on Udemy.
Developer Operations is a deep topic. I still consider myself a novice in this area and most of the developers I know are in this category. Unless you want to dig deep into AWS and large-scale data management, it isn’t important to master any of the topics in this section. Yet, exposure to deployment and some of the other tools will make your job search much easier.
It will generally impress companies if you’ve used Docker and deployed to AWS before — it gives you fantastic war stories, and that’s what everyone wants in an interview!
Also, interviewers love asking system design questions. You need to know what a load balancer is and also a virtual machine. Your goal is to spend a little time with these tools so that you understand what problem they solve. When you are given one of these problems in an interview, you’ll know the answer they are looking for.
You might find you love Dev Ops and dealing with this kind of tooling — if so, I encourage you to go deep into this area and look for work. There are lots of Dev Ops jobs out there and they pay well!
The next logical question to ask is, “What dev-ops tools should I learn first?” This is a hard question to answer. I picked out 5 for this article that I believe are worth having a beginners understanding of. If you find yourself enjoying any of them specifically, explore further.
Resources for Learning Dev Ops Lite
- Webpack. The go-to bundler at the moment. Webpack is used on the frontend and backend of many projects. It is incredibly powerful, has a lot of customization options, and is generally a pain in the butt for new devs. The best tutorial on Webpack I’ve found is a 3-part series on Frontend Masters by Sean Larkin — a fantastic entry into the how’s and why’s of Webpack.
- Heroku . There are a range of deployment options for beginners and Heroku has been a classic for quite a while. It’s a great first option, as you’ll need to learn about environment variables and building your code to deploy it. Here’s a decent tutorial, but the Heroku docs are good too.
- Travis CI. At some point you’ll hear about continuous integration or continuous deployment. Now that you’ve deployed something to Heroku, imagine that you have a test suite you want to run before you deploy again.
- It’s a good idea to lint your code. You also need keys, and perhaps several people on your team, to be able to deploy. You want to make sure each of these things happens every single time anyone deploys. They also need to run the same tests — you can see where this is going!
- Travis (or Jenkins, Circle CI, or several other tools) to the rescue! Travis is a good starting place, it’s easy to learn and simple to get your first project up. Give it a whirl.
- Great! You’ve got live code online and it updates whenever you update master! This is a powerful moment — one worth celebrating! Let’s dip our toes into the Docker and AWS pools before we get dry for awhile.
- This is a fantastic Docker tutorial that my students generally use to get up and running. There are lots of courses and YouTube videos if you prefer something visual. The tutorial above shows you how to do it with AWS as well.
- Additionally, one of my students wrote a fantastic tutorial on using Docker with AWS so I want to give him a plug! By going through these two tutorials you should be ready to rock’n’roll. Let me know if you find any resources that were especially helpful and I’m happy to add them!
Developer Tools (Or the Miscellaneous Section)
Don’t wait til the end of this guide to work through this section! If you took my advice and are skimming/reading once through before diving in please bookmark this section and refer back to it often.
This area is the reference for all the tools you’ll need during your everyday work as a software engineer. They will help you while learning too. I don’t want you spending too much time on them all at once. Instead, I recommend spending a little time on each of them every week.
The tools in this section are: using the Command Line Interface (or CLI), git/github, working on a server with SSH, and testing. Each of these could be an entire section on their own. But since you are rarely asked direct questions testing these skills during an interview, I put them in one section.
Remember, the focus of this guide is to get you job-ready for Day 1. Do you need to master these skills or the majority of the skills in this guide? No! But you need to know enough to come across as competent. That takes familiarity and practice.
Learn the Command Line
Hopefully, you’ve already spent some time learning the Command Line Interface (CLI). I would recommend you spend a couple of days during your HTML/CSS phase getting to know how the command line works. To get started, the Codecademy tutorial is great, as is Learn Bash The Hard Way.
There are plenty of good tutorials to work through online, if you want more practice. There’s a killer MIT course about Developer Tools that blew me away. I am still working through all the content, but I’ve learned a huge amount from this course. This depth of understanding isn’t needed for a junior dev, but it can be pretty amazing to see how powerful your OS is!
Learn Git
Git is a hard thing to practice on your own. The best way to learn is to work on projects with friends or contribute to open source. Both of these avenues will help you get a job — engineering Managers want to see that you can work on projects with other people.
I like this visual git tutorial so that you can see what is happening. Pro Git is a fantastic book too. I encourage people to switch back forth between the two as they are first learning. It’s likely that all of this will seem abstract and weird — that’s okay.
Start a project with a buddy and try messing up the code. Break things and google how to fix them. After a couple of days, when you start to feel comfortable, it’s time to try submitting code to an open source project on Github.
My recommendation is to pick a smaller project at first and look at their rules for submitting pull requests. You can even reach out to the maintainer, let them know you’re learning, and ask for a good first issue. People are nice — give them the benefit of the doubt!
Learn to Use SSH
Here’s a short and quick guide on using SSH to get into an EC2 instance. There are tutorials about more specific things based on what you want to learn. I’d practice installing some software on an EC2 and try running a server. It will be a little awkward at first. See what you can do and what you can’t. Try testing the limits of the environment.
Learn to Test Your Code
The last section of this part is testing. Testing is incredibly important. I would add tests to any code challenge for a job application. There are a lot of methodologies and tools related to testing.
My suggestion is that you go back to the apps you have been building for the last few months and begin adding tests to them. This Medium Post is a beast — it gives a well-written and comprehensive guide to testing. Work through it by researching the different styles of testing listed inside and adding them to projects.
You should also master Unit and Integration tests. Frontend Masters also has a great course on testing from Kent C. Dodds.
I’ll recommend you stick with Jest as your test runner, but you can research the other options on your own. Have fun testing — it can challenge how you write code!
Make your next couple of small projects through TDD (write the tests before writing any code) and see how it changes your thought process.
Let me know if you find any other resources you enjoy! A fun one to practice with is the Gilded Rose (do the js-jasmine or js-mocha ones).
Conclusion
That’s it for this section of the series! The next post will cover the process of finding and applying for technical jobs. Check it out here.
And as always, if you have any questions or comments please let me know down below. Happy coding 🙂
Leave a Reply