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 LearnHTML/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 CSSThis 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 & CSSFirst, 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 JavaScriptBuild ThingsThat’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 JavaScriptUdacity 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 JSThis 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 JSFunctional Programming in JSAsynchronous code (Callbacks, Promises, Async/Await)The Event LoopInheritance patternsClosure and ScopeDom manipulationES6In 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 TopicsI 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 30 course 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!How to Learn Frontend Web DevelopmentI 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 i only comes with practice!Resources for Learning ReactMy favorite courses for learning React as a beginner, are from WesBos 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 ExpressBy 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!. More details