Chaoo Charles1. The Problem - Being Stuck in The Tutorial Hell
I remember when I was learning to code, I learnt the basics of web development including HTML, CSS, JavaScript, PHP, SQL and WordPress from Sololearn and YouTube tutorials. Despite this I was really struggling to create real world projects using those skills. I was stuck for a long time (almost 2years), just learning to code with no meaningful progress in terms of projects' development. I know most beginners get stuck in this barrier (where you learn to code, but can't really use your skills to develop something meaningful). And when this is the case, it becomes hard to work on freelance projects or even secure a job since your portfolio of projects tend to be weak.
2. Break the Barrier
I broke this barrier when I decide enough is enough and I started to work on actual projects like coding a portfolio website from scratch using HTML, CSS and JavaScript or Creating a blog website in PHP and SQL. And after doing this for a few months I realized how much I had made progress in understanding how the web work. I also realized how I could have accelerated my learning process earlier if I had started to create projects earlier in my coding career.
For you to break the barrier faster, you need to take the project based learning path. Where you learn the fundamentals quick (like taking crash courses) and starting to work on projects right after. Of course your first few projects will be hard to get through but they will be totally worth it. You can start by following a tutorial to get you started on your first project but for further related projects you try to do them on your own and utilize the power of google when you get stuck. Example, if you learnt how to create a website landing page using HTML and CSS from a tutorial, after completing, try to create a different landing page with a slightly different design on your own using HTML and CSS. Frontend Mentor (https://www.frontendmentor.io/) has a lot of free designs you can try to implement.
See how I converted a landing page design from scratch into a pixel perfect HTM and CSS website.
Build a Complete Responsive Website in HTML and CSS | Frontend Mentor - Fylo dark theme landing page
After creating a landing page, now try to add some JavaScript to the project. Example, Open and Close a side navbar using JavaScript, Create a Slide Show of Testimonials/Images Using JavaScript, Add a Count Down Timer in JavaScript etc.
If you manage to code a website landing page without following a complete Tutorial and be able to sprinkle some JavaScript into it, Congratulations 🎉, you have already broken the barrier. At this point you can think of a nice design for your own portfolio website and code it from scratch using HTML, CSS and JavaScript. It doesn't have to be perfect but as long as you do it all by yourself, it will make you more comfortable with these technologies and be more confident with your skills.
At this point you can even start looking for Freelance Projects where you convert Designs Into HTML and CSS websites.
I know it is possible to get projects with just HTML and CSS skills because I have done it before. Below are some of my very first gigs I did with just HTML and CSS.
3. Create at least 3 Small JavaScript Focused Projects
Here I am assuming you have gone through the JavaScript fundamentals before you start building up the projects. If you don't know anything about JavaScript, then you can start with the following Crash Course.
JavaScript Crash Course For Beginners by Traversy Media
Getting familiar with JavaScript is a bit hard than getting familiar with HTML and CSS, that is why I recommend working on a minimum of 3 JavaScript projects. You would probably need more projects to become better and better, but about 3 of them will give you a pretty good Idea of what JavaScript is all about and how to manipulate the DOM.
Some people might recommend doing hundreds of these small JavaScript projects but I think that will just keep you stagnated, our approach here is to build just enough skills with a few projects quick and move on towards building one big project that solves a real world problem.
@florinpop17 have a very nice video on JavaScript Projects, I recommend choosing at least 3 of these projects and coding them for your JavaScript practice. Below is the video 👇
10 JavaScript Projects in 10 Hours - Coding Challenge 🔥
4. Build your first Fullstack Project
Here you can choose your frameworks of choice, but if you are starting out, deciding which frameworks to use tends to be tricky. If you don't know what to use on your fullstack projects I recommend going with the MERN stack or Next.js(A popular react framework). MERN stack involves React.js on the frontend and Node.js on the backend. Next.js can be used on the frontend and you use node.js on the backend but it is also a fullstack framework, meaning you can use Next.js to write backend code as well.
You will obviously need some knowledge before starting building up your projects, that is why I recommend taking some crash courses before starting the project. Take a crash course on React, Node and express. Express is basically a node.js framework which makes creating of the APIs easier. If you decide to use Next.js, then you will need to also take a crash course on the latest version of Next.js. A crash course on Next.js version 13 and above right now would be okay.
React Full Course for free ⚛️ (2024) by Bro Code
Learn Node Basics in 30 Minutes! by codeSTACKr
Learn Express JS In 35 Minutes by Web Dev Simplified
My 1hr Next.js 13 Tutorial is a good one. See it below 👇
Crash courses are meant to help you move quick, They don't usually cover everything about the language or framework but they definitely give you enough knowledge to get started.
At this point you should be well familiar with HTML, CSS, JavaScript, React, Node.js and Express. The next step will be to build your first fullstack project. In your first fullstack project, it will be okay to follow a tutorial to learn how everything works together. I have personally created several free courses which can help you to get up and running.
If you decided to use the MERN Stack, I recommend the following course.
Realtime Chat App Complete Course (free 🔥) - React, ContextAPI, Node.js and Socket.io
This course will teach your how to implement authentication, perform CRUD operations and implement web sockets for realtime messaging and notifications. It will really cement your knowledge in React and Node.js as well.
If you decided to use Next.js, you can build your first fullstack project using one of the following courses. These projects will help you understand more on React, Next.js, how to create and consume APIs, working with images, processing payment in stripe and more.
Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma
Build and Deploy a Full-Stack E-Commerce: Next.js 13, React.js, Typescript, Tailwind, Prisma, Stripe
4. Build your second Fullstack Project
After coding and completing your first fullstack project, now it's time to get your hands dirty on your second fullstack project. Here you will use the same tech stack that you used on your first project. This will make it easy for you to get start and to actually complete the project.
This project will now be unique to you. Here I recommend solving a real world problem. Identify a problem around you and build a project for specifically that. Example, people are having problems getting houses to buy or rent around your area, so you build a project to make that process easier. Your project would connect people with properties available for rentals or purchase. That is just an example, ideas can be limitless. Just think of one good idea, document your idea (answer questions like what problem is the project trying to solve, how long it will take to build the project, etc), and implement it. The reason for this is, I want you to have a story behind the project, I also want your project to be unique and exciting to you. Not just a random clone of another app. You can even create a project for free for a real world business.
When you get stuck, use google, go to docs, use blog posts, and you can still use a few tutorials but try your best not to rely too much on tutorials when creating this project. You can remind yourself stuff from the first project and do your research on how you can add additional features. You can use ChatGPT to help you debug issues as well but don't copy paste codes. Basically learn how to do the research, and this is how you grow and be able to work on your own projects.
Now, this is the kind of project that you add to your resume and it counts as a real world experience, as in, you didn't just follow a tutorial to build it. On your resume you can have good pointers about it, like the problem you were trying to solve, the challenges you experienced while creating the project, the things you learnt, you are able to explain your code and so on. On an interview you are actually able to talk about your past project and being exited about it. If it's good enough you can actually even monetize this project, but the main goal is to have the hands on experience on a real world project.
This is how I became good at creating projects, for me to graduate from college, it was a requirement to solve a real world issue using code. And I think this is still the best way to go about it. When you take this approach, going forward you will be able to learn a technology quick and be able to use it in a project without getting stuck in the tutorial hell. The following was my first project. Not the best design or features but it really helped me to be confident with coding.
(just for motivation) My Final Year React Project - Projects' Progress Management System 🔥
If you successfully complete your project and put it online with an easily sharable link, then you are good enough to start applying for jobs and projects to work on. You can try freelance sites like Upwork, fiverr or advertise your skills on socials. You can actually even teach others on blog posts and increase your visibility.
5. Conclusion
Remember all this will take you time to accomplish. Code for at least 2hours daily for at least 9months. The more hours you put in the quicker you will get to your goal of creating a fullstack project by yourself. Be consistent and do not give up. By the end of 2024 you will be happy of how much you have learnt and accomplished.
Now, as you look for jobs and payable projects, remember to continue improving your skills. Continue learning JavaScript. Continue Building Projects. Consider learning Data Structure and Algorithms. Most tech interviews are pretty hard, learning Data Structure and Algorithms can help you pass the technical interviews. But you can still secure a position in some companies without going hard on Data Structure and Algorithms especially for front-end positions. That is why I recommend to start applying early and learn more while interviewing. Divide your day. Spend 50% of your day learning and the other 50% looking for jobs or projects. During interviews remember to show and mention your second project as part of your coding experience (do not say that you don't have experience, remember you solved a real world problem with code).
With your fullstack skills you can decide to focus now either on the front-end or backend. You can also be just a fullstack dev. Generally you will now be able to do bigger projects and earn way more with your skills and experience.
Below is an example of a project I did in less that 2weeks, compare the earning with the projects that I showed you at the HTML and CSS section and see the big progress
These are my takes on how you can move quicker. It's easy to get stuck in tutorial hell for years but by creating projects you can avoid that. I hope this was helpful. Give me your opinions at the comment section below.
Help me get to my goal of 100k subscribers on my youtube channel quick: https://www.youtube.com/c/chaoocharles
I am on X: https://twitter.com/ChaooCharles
