This is Part 3 of a 5 part series:
Part 1
Part 2
Part 4
Part 5
Learn To Code
This section is a beast — after all, you will be tested on your ability to code. A lot of your confidence on the job will come from your actual skills. Coding isn’t the only thing you need to learn though.
Too many guides to becoming a software developer focus only on this section. Thankfully, there are a lot of amazing resources out there for learning to code. My goal is to give you an order to your learning, and to point you in the direction of the best resources.
I want to reiterate something I mentioned earlier. Your fingers and your brain have to do the work. Reading books or blogs, watching videos, or doing code-alongs won’t teach you what to do. They can fill in small gaps in knowledge, but you need to be able to make things on your own.
Google will always be a wonderful resource. I highly encourage everyone to practice Google-Fu. You need a mental model of what you’re trying to build, which you can explain to a friend or an interviewer. Web resources can help you understand the concepts and the best way to explain them.
Another great way to practice is to explain what you’re learning to your parents or grandparents. If you can’t describe technology so that they can understand, you don’t own the knowledge yet.
My recommendation is to take a break whenever you’re stuck for more than 15 minutes. Take a walk, read a book, play with your dog — whatever. Learning is a marathon, not a sprint. Naps are great too!
Do your best to learn it on your own first (you don’t want to get over-dependent on help from others), but if you can’t figure something out after a couple of attempts — it’s time to ask for help online. Don’t feel bad or stupid or dumb if you can’t understand something.
Remember, your mental model is different from the mental model of the person who created this piece of technology. Big deal. None of it is a reflection on who you are as a person.
Before you begin this journey, here’s what I want you to buy or download (either today or tomorrow):
- A whiteboard and dry erase markers
- Sticky notes and flashcards (or a flash card app to practice terminology — I like Anki)
- A small tripod for your phone so you can record video
- An account on zoom (or practice using quicktime to record video if on a Mac). Don’t spend money on this
- VS Code and the Bracket Pair Colorizer plugin
- Postman
These tools will help you practice. Whiteboard out concepts often! There is a whole section on whiteboarding below. Use notes and flashcards to keep track of important information. Use your video camera to practice speaking technically for interview prep. This is your toolkit for the next several months.
Which Programming Language Should I Learn First?
I hear this question all the time. The short answer is: it doesn’t matter. The longer answer is: it depends on your goal. For getting a first job as a software engineer my recommendation is JavaScript, with Python as a close second.
Why JavaScript? Every browser uses it. There are millions of youtube videos, stack overflow threads and blog posts covering every aspect. There is also a huge community of people who teach it. And you can use it everywhere in the stack. It’s that simple.
What about Python? It depends on your career goals. If you want your first job to be doing database work or any type of data analytics, then Python is fantastic. A lot of new programmers get tripped up between learning and managing Python 2 and Python 3 as well. This won’t be a problem forever, but it causes a steeper learning curve today.
I would recommend you start with JavaScript and then branch into Python after you feel solid in JS-land, but it’s up to you!
This guide covers JavaScript.
Overview of the 8 Areas to Learn
- HTML/CSS: The bread and butter of any website. We won’t go crazy deep here, but you need a decent understanding of how a website works before moving on.
- JavaScript basics: The main chunk of ‘how to program’. Learn to build things and feel like you have superpowers in a matter of days!
- Advanced JS: The tricky parts of learning JavaScript. These are the pieces interviewers love to ask questions about. I’ll show you the resources I recommend for mastering each of the common interview topics.
- React (Frontend): I’m going to recommend you learn React as your first frontend framework. This will power what your users see of your application.
- Node/Express (Servers): This is the code that handles data in the cloud. Since we’re in JS-land, we’ll use Node and Express. I’ll explain the difference and show you some great courses on mastering them.
- MySql, Postgres, Mongo, and Redis (DBS): This is our data storage section. All the web is about data, and I recommend you get experience with a few different types of database. Practicing these will help you speak with confidence during your interviews.
- Travis, Docker, Heroku, and AWS (DevOps Lite) : Enough deployment to be dangerous. Understanding how to deploy and update code is generally enough for your first job, unless you want to pursue a DevOps career.
- Git, CLI, Testing (Developer Tools): These don’t fit into any other bucket, but are tools you will use on a daily basis. We’ll go over how I recommend learning these before you show up at work your first day and are overwhelmed.
What is the Internet?
One of the main things people struggle with is their mental model of how the web is built. The piece that I tend to focus on when teaching is data. Everything is data.
What does this mean?
It means that you’re going to create a page on the internet. It may have forms that collect data from users. It may show data from one user to another.
When the user submits the form, it will send the data to a server. The server will send the data to a database which stores it for use later. That’s pretty much it.
The majority of the web works this way — it isn’t scary or complicated.When you go to a page, it makes a request to a server, which makes a request to a database. It then sends the data back down to Google Chrome or Safari. These applications display the data and let you interact with it.
There are nuances to this, of course. The whole process is straightforward, though. No need to be scared or overwhelmed!
To learn more, I’d recommend that you first watch this course on Khan Academy. It provides a good overview on how the internet works in 5-minute videos.
Next, I’d recommend that you read through MDN’s article. MDN is from Mozilla (the people who make Firefox). This is the best resource on the entire web for HTML, CSS, and JavaScript.
If I don’t remember what a CSS property does, or how to use a specific JavaScript method, I refer to MDN. I recommend against using w3schools. They have good SEO and will show up at the top, but refer to MDN instead.MDN spends more time updating articles and getting user feedback than any other site of its kind, plus they have great documentation.
After you have a rough idea of how the internet itself works, it’s time to start learning HTML and CSS.
How to Learn HTML and CSS
This is the foundation of every website. I’m going to spend a little time to give you a high-level overview of both, and then send you off to study.
Remember, for this section and the rest in the module, you must do the work. There are no short cuts. Your brain will only learn by you making things, breaking them, and putting them back together. Tap into that childlike sense of play!
HTML works like a non-fiction book. There are words on the page and sometimes images. There is a cover and titles for chapters. Often, there are links to other parts of the book or reference to other books.
HTML on the web roughly serves three purposes:
- To show data to users of your site. This data can be anything, videos, images, text. Your browser downloads the data and displays it on the page.
- To collect data from your users. It does this through the use of forms, fields, and inputs that take in things like a username or password, or a comment for a blog post. Sometimes you want to display this data for other users, sometimes you want to save it for later.
- To connect your website to other sites through links (hyperlinks). If your website has many pages, you can connect them together with links. Most modern apps are a single page and mimic this behavior. You can also link to other sites on the web or a specific page on another site.
If we go back to our book analogy, CSS is the look and feel of the book and its text. It answers questions like “What does the cover look like?” “What color and size is the text?” “How large are the images?” It also answers some other questions when it comes to the web.
CSS has three main components, the style of the page, the layout of the page, and any movement on the page. It’s worthwhile to split CSS into these different buckets and spend time practicing each one. CSS can be quite frustrating for a beginner. Have patience when learning how to select individual elements and how to layout a whole page.
I suggest you keep practicing it bit-by-bit. Whenever you make a new app, spend some time trying a different part of CSS to learn it. Whenever you stumble across a site you think looks cool, try to re-create it. You can always download the CSS for the site and use it as a reference if you get stuck.
Resources For Learning HTML & CSS
- First, I recommend learning a bit about the Developer Tools in Google Chrome. The more time you spend practicing with these, the easier your time will be as you get into more advanced JavaScript. Google has a great site to get you started. If you’re more of a visual learner, Traversy Media has fantastic videos on YouTube. I will refer to both his and Net Ninja’s videos a lot throughout this course, as they make some of the highest-quality free content around.
- The full reference for Dev Tools from Google.
- Next, spend some time learning and building simple things with HTML. Whatever seems fun to you — try making it and viewing it in your browser.
- Mozilla has a great written resource for learning HTML.
- Udacity has a great video series on learning HTML and CSS.
- I highly recommend working through Shay Howe’s course. It’s organized diffrerently to this course, and focuses on making things using HTML and CSS. Often people don’t invest enough time into learning HTML and CSS before diving into JavaScript — I think this is a mistake. These two are the foundation of the modern web.
- At this point, test yourself. If you can think of an idea and are able to make a rough approximation of it, you’re ready to move on. If you still need more practice, that’s OK — spend another day or two creating sites!
- If you want more practice with syntax check out Codecademy. I only recommend this site as a last resource, because it creates a false sense of learning. You usually type a thing, without understanding how it works. This is the trap I want you to avoid!
- When it comes to a deep dive into CSS I’m a big fan of Wes Bos’ free CSS Grid Course, as well as the CSS Tricks site for Flexbox and Grid.
- Play around with Flexbox Froggy and Grid Garden. To practice both layout tools I would use them in projects going forward.
How to Learn JavaScript
Build Things
That’s it. Okay, maybe it’s not quite that easy, but that is my advice. The sooner you can apply something you have learned in a project, the faster you will master it.
Watch a video or read some content, then test it on your own. One of the most powerful things about JavaScript is that you can use your browser to test any ideas you have. The console gives you a REPL (Read Evaluate Print Loop) environment, and some other nice bells and whistles.
Your mission for this phase and the next is to make and break things. Every hour or so ask yourself, “What have I broken to test my understanding recently?” Be comfortable breaking your code to test assumptions.
Cultivate a sense of being a tinkerer. It’s fine if you want to read and understand how things work, but your understanding needs to come from your own experimentation. This will give you the ability to explain your understanding in a job interview.
Everything we do goes back to this central goal. Ask, “how do I gain knowledge as fast as possible to be able to show this knowledge to others?”
Let’s dig in.
Resources for Learning Basic JavaScript
- Udacity has a great free course if you like video content. I think the course is a fine starting point, but you’ll need more hands-on practice to master the basics.
- Eloquent JavaScript is a fantastic free book. It’s comprehensive, so I recommend only working through the first 6 chapters for now. However, you can use this as a reference for several other sections of my guide. Feel free to refer to it during the advanced JavaScript sections and when learning Node.
- Use MDN as your resource any time you are stuck trying to build a project, especially with syntax (how does that method work again?).
- The goal is to keep practicing building things until you feel comfortable with a given topic. There are two wonderful sites for practice: Repl.it is great for simple JS practice and CodeSandbox is fantastic for building small applications and seeing them in a browser. If you want to mess with pure JS, use repl.it, if you want to see what you’re building in the DOM tryout CodeSandbox!
- A couple of great places for toy problems are codewars and codesignal.For now, I would generally stick with the easy challenges in order to get more repetitions. Save the harder ones for later, we’ll come back to them in the job prep section.
- As a last resort, I’ll say you can use Codecademy — but again, I think it’s too easy to type without learning in this resource!
You are ready to move on to the advanced section when you feel able to demonstrate these three things:
- You can manipulate the data in Objects and Arrays comfortably.
- You can create and pass around Functions to other Functions.
- You’re comfortable explaining what your code is doing to someone who doesn’t know how to code.
Advanced JS
This is one of the most important sections, if not the most important. A lot of people end up only learning the basics of JavaScript before they dig into learning frontend and backend. This is a huge mistake. Why? Because when it comes time to find a job, people want to know that you understand the advanced features.
The tools you use to write frontend code and the modules for your server will change as projects change. However, the fundamental parts of JavaScript don’t change. This is why experienced interviewers love asking questions about how both JavaScript and the Internet as a whole work. It makes sense right?
The key areas I want you to spend time learning are:
- The this keyword (and context)
- Object Oriented Programming in JS
- Functional Programming in JS
- Asynchronous code (Callbacks, Promises, Async/Await)
- The Event Loop
- Inheritance patterns
- Closure and Scope
- Dom manipulation
- ES6
In my experience, the majority of hard JavaScript questions in interviews are based on your understanding of one of these topics. How do you go about studying them? A combination of two ways.
First, you need to be able to code them out. Second, you should practice whiteboarding them. It’s fine if you only code for now. Keep a list of the ones you find the most challenging so that you can practice them in the whiteboarding section of this guide.
Resources for Studying Advanced JavaScript Topics
I have a bunch of these. It is likely you will need to see something explained in a few different ways to completely understand it. Practice by creating small projects and quiz yourself based on your conceptual understanding of a topic. Use console.dir to dig deeper into your functions. Be able to explain these topics in code!
- Wes Bos has several great courses. I recommend his free Javascript 30course for Dom manipulation. Spending time making small projects like these is my favorite way to learn. His ES6 course is great too.
- I am a huge fan of the Fun Fun Function channel on YouTube. Here is some of the best free content for learning advanced topics (it is all theoretical though, so you still need to practice to master the concepts!) Check out the what are higher order functions playlist.
- Tyler McGinnis’ Blog and Courses are very useful. I would work through both his Advanced JS course and his Modern JS course. His blog posts on individual topics are also fantastic. He has YouTube videos covering many of these subjects. His explanations can be challenging but he uses clear language.
- Will Sentence’s courses on Frontend Masters are the best on how to whiteboard difficult concepts. The course is all whiteboarding in front of a live class. He has three courses up now. I would work through the first one (JS the hard parts), then come back to the other two as you dig into OOP and Async code (JS the new hard parts). He has a couple of other courses coming soon! Will runs a coding school which has some great materials I will be linking later. I am a huge FEM fan!
- MDN has a great read on the Event Loop.
- This is a classic talk on the Event Loop given at JS Conf by Philip Roberts.
- NetNinja has a pretty good series on Async Code. There are some newer techniques, but he explains them in a way that students have found helpful.
- This is a wonderful guide to Functional Programming in JavaScript:Professor Frisby’s Mostly Adequate Guide To Functional Programming.
- For ES6, I enjoyed Stephen Grider’s ES6 Course. He makes a lot of courses and a lot of people love him. However, it can be easy to fall into the trap of coding along with him without understanding what he’s doing. This course has mini quizzes to test your knowledge in-between sections which is why I recommend it. Wes Bos’ course listed above is free and great too.
- Lastly, I’m going to link my favorite articles on callbacks, promises, and async/await. I highly recommend that you master all three ways of dealing with asynchronous code.
- I know of interviewers who still ask about the differences are between callbacks and promises. Here’s a short overview post of the 3 on Medium that is a good primer. This is a great video/blog post from Tyler M, it goes very in-depth. Finally, here’s my absolute favorite post comparing all 3 — the code examples and explanation of each are fantastic!
Conclusion
That’s it for this post! What a chunky one…
The next post in this guide will go over frontend and backend frameworks, and databases. Check it out here!
And if you have any questions please post a comment below, happy coding 🙂
Leave a Reply