FREE Web Development Curriculum

Building websites is the FASTEST way to become a software engineer. Here's my FREE curriculum on web development. 👑

Another FREE Curriculum

Hey Pirates. 🏴‍☠️ In my last video, I released my free curriculum on the fastest way to learn coding. If Python is the best programming language to learn for beginners, building web projects is the quickest way to become a software engineer. For that reason, this time, I’m releasing another free curriculum on web development, the highest in-demand software-engineering skill in the job market. The entire curriculum is available here. Included are the free web development courses, plus my strategies for landing a job. Just for context, I’m PK, a software engineer in Seattle. I used to work at Microsoft, Amazon, and ebay.

Traversy Media

In my previous video, I recommended the YouTube channel freeCodeCamp and its free tutorials for my general software development curriculum. For web development, however, I’m introducing the channel Traversy Media and their free crash courses. And no, this isn’t a sponsorship; it’s my genuine recommendation. I learned React and Vue from their classes, too. My curriculum is a series of their courses I hand-picked myself. If I were to learn web development from scratch, this is the order I would do it.

Frontend, Backend, and Full-Stack

Let’s start with the basics. What are frontend, backend, and full-stack? Frontend refers to the webpage and its interfaces that users can see and interact with. Simply put, everything you see on amazon.com, the texts, images, buttons, and layout, falls under the frontend. On the contrary, the backend refers to everything else behind the scenes. When you click the “Place your order” button, your card gets charged, shipping gets tracked, and the delivery estimate is calculated. That’s because backend developers have instructed the servers to do so under the hood. Lastly, a full-stack developer is an engineer capable of doing both.

Frontend

Let’s dive deeper into the frontend. A website’s three basic building blocks are HTML, CSS, and JavaScript. HTML controls the structure of a website. It tells the browser to place a button here. CSS is responsible for its decoration. It stylizes the button by defining its position, color, and size. Lastly, JavaScript tells the browser what to do when clicking the button. For example, sign in to Amazon. But where do we learn about the building blocks? Traversy Media. Follow their crash courses in my curriculum. Some are a few years old, but that’s okay because fundamentals do not change. Another thing I love about their content is that it’s less than 90 minutes and packed with just the essentials.

Bootstrap

Next up, Bootstrap. Bootstrap is the most popular free CSS framework for developing a responsive website. A website is responsive if the appearance changes depending on the screen size. For example, this is how my website looks on a PC. This is how it looks on a phone.

PIRATE KING Website PC

PIRATE KING Website Mobile

Do you see how the navigation bar changes to a hamburger on a particular window width? That’s because my website’s responsive. It resizes the content to fit different screen widths. Implementing all this yourself can be time-consuming and challenging. But Bootstrap takes care of that for you. Learn how Bootstrap works, and apply it to your website. You can account for different devices with a single code base and make your website look professional with its built-in templates and themes.

Git

Let’s pause on coding for a sec and quickly go over Git. Git is a free version control tool used for source code management. Getting accustomed to it is crucial because the entire industry uses it.

Frontend Portfolio Project

Now, it’s time to review your learnings by creating a project. Working on projects is the best way to learn to code. Since this is your first project, keep it small and simple. I recommend starting with a personal bio website. Apply your knowledge and use this opportunity to build your online presence. You can develop more features as you progress and add links to your other projects. Once you finish your first website, let’s make it public - or available online - for free. But how? GitHub pages. Follow Traversy Media’s step-by-step instructions on deploying your website for free using GitHub pages.

JavaScript

Cool! We deployed our first website. Next, let’s learn JavaScript. JavaScript is a scripting language that makes your website interactive—for example, changing the color of a button, picking a date, or alerting the users. While at it, study JavaScript DOM, jQuery, and AJAX. jQuery is getting deprecated, but it’s still a practical skill that’s easy to pick up. Add it to your resume skillset. Once you complete the JavaScript series, improve your first project with the new skills. What can you do to make it more interesting and interactive? Get creative.

Backend

Alright. We’ve covered the basics of frontend development. Let’s move on to the backend. Backend development means working on the server side, writing the logic for everything you cannot see on a website. You have several choices for the tech stack. You can continue with JavaScript with Node. Or, explore other options like Python with Django or Flask, Java with Spring, or C# with .NET. For this curriculum, I’ll stick to JavaScript and Node for three reasons. One, you only need one coding language; you can go full-stack with JavaScript alone. Two, JavaScript and Node were both voted to be the most popular technologies in 2022; they are in high demand. Three, we want the fastest way to learn web development, right? Stick to one language.

Server Side

We now understand the importance of JavaScript. Let’s get serious with ES6+ and learn the latest JavaScript syntax. Then, move on to asynchronous JavaScript. Learn what callbacks, promises, and async await keywords are. These concepts lay the foundation for NodeJS, a backend JavaScript environment. Then, move on to ExpressJS. Express is a middleware framework for building REST APIs with Node. Lastly, REST API is the most common way for two computer systems to exchange information over the internet. In our curriculum, your frontend web project will communicate with your backend via REST APIs.

Database

We’re almost done with the backend. Just one last piece remains, which is the heart of any system: the database. There are several options for a database product, like MySQL and PostgreSQL, but I recommend MongoDB for two reasons. One, it has a free tier. I mean, who doesn’t like free? Two, MongoDB is NoSQL, and NoSQL databases are easier to learn and use. Once you set up MongoDB, learn Mongoose. Mongoose is a JavaScript library that facilitates communication with MongoDB. It helps you query and store information in the database.

Backend Portfolio Project

Finally, it’s time to put your skills into practice by building your first backend app. Again, keep your first one simple. Start with a basic CRUD. How about a ToDo app? Apply the REST principle. HTTP verb GET retrieves, POST creates, PUT updates, and DELETE removes a ToDo list. Verify your API works by checking your storage. Your API actions should reflect your database. Once your backend is complete, deploy your node server to the cloud just as you did for your frontend. This time, however, use Google’s Firebase instead of GitHub pages. Experience in cloud technologies is a huge plus for job searching.

React

Cool! Let’s quickly return to the frontend to learn ReactJS. React is a free frontend JavaScript library developed by Meta for building user interfaces. It allows you to reuse components and write maintainable code. You might wonder, “Why are we returning to the frontend?” And my short answer to that is React is important. Trust me. It’s a valuable skill many companies view as essential; you won’t get a frontend job without it. Follow Traversy Media’s latest crash course on React with Hooks. Then, revamp your frontend app using React.

Unit Testing

The last skill set in the curriculum is unit testing. Unit testing is a critical skill that many often overlook. But not only is writing a unit test easy, but it’s also a valuable skill to add to your resume. I recommend Jest. It’s a JavaScript testing framework maintained by Meta. Use it to write Unit tests in JavaScript and understand its importance.

Full-Stack Portfolio Project

We’re almost there! One last assignment remains, and that is, integrating your React frontend with your Node backend. Once everything’s wired up, congratulations, you’re a full-stack developer. That’s the end of the web development curriculum.

Job Preparation

Here are my strategies for finding your first full-time job. You can find the details in the links below, so I’ll briefly touch them here. Step one. Build a professional portfolio. Let me emphasize “professional” here. A personal bio webpage integrated with a ToDo app isn’t one. Build at least two high-quality, full-stack projects spending about 40-60 hours each. Treat them as non-paid professional work. Step two. Create a strong resume. Showcase your projects on your resume, and add their GitHub links. Check this video for my strategies on how to craft an effective resume. Step three. Prepare for coding interviews. LeetCode is the best platform to prepare them. Follow my study guide on how to use LeetCode effectively. Step four. Start applying. If you find a job soon, great. But I’ll be honest. Despite doing all this, it will still be bloody challenging for most of you to find your first full-time software engineering job. But let me share what I did in the interim. I looked for part-time developer jobs. That’s how I built my career. I started as a part-time game developer in Japan, getting paid 800 yen or about $7 an hour. There are similar jobs in the US, too, including remote ones! If you’re still unconvinced, my friend’s first coding job was part-time Python engineer in the US. How do you find one? The almighty Google! Where there’s a will, there’s a way. Embrace your part-time job as an opportunity to learn while getting paid. That’s how I landed my first internship at NCSoft, then my first full-time job at ebay, then Amazon, Microsoft, and so on.

Summary

Alright. We discussed the fastest way to become a software engineer for free. If you’re still unconfident and prefer an affordable alternative, consider giving Springboard’s coding bootcamp a try. You can get a $1,000 discount off their curriculum with my promo code PIRATEKING. Before I close, let me make this clear. I tried my best to give you the easiest path forward, but that doesn’t mean coding itself is easy. Take it seriously if you don’t want to give up midway. Realistically, if you’re determined and commit to coding at least two hours a day, I’m confident you can successfully become a software engineer within 6 to 12 months. Remember. The best way to learn to code is to do it. Start coding NOW. Like and subscribe NOW. I’ll see you at the next one. Bye.

Related

💰 Springboard Coding Bootcamp ($1,000 Discount)
🔗 Software Development Curriculum
🔗 How to Build PK’s Personal Finance Website
▶️ Fastest way to learn coding (for free) and get a job
▶️ How I would learn to code
▶️ How to Craft an Effective Resume
▶️ How to Use LeetCode Effectively
▶️ My LeetCode CHEAT SHEET
▶️ My Best Coding Project
▶️ Learn to Code for Free
▶️ How to Become a Software Engineer
▶️ 12 Years in the Life of a Software Engineer
▶️ How to Land a Full-Time Job
▶️ How I got my first full-time job