Self-Taught Developer: How To Code Like A Pro 4/5– 5 Starter Projects You Can Build Today!
Use this as your guide and reference as you start your Web Development journey.
Don’t forget to read the previous chapters so you can follow along with the series, the previous part contains several tools and resources that will be very helpful on your journey, everything there is free, so don’t miss it.
A lot of developers fall into the trap by learning Web Development through copy-pasting code from tutorials to tutorials, you can probably do it as you start, but please try to do something on your own, the best approach would try solving problems on your own, whenever you encounter errors, research them, don’t just copy the source code, you need to understand why, read documentations, read StackOverflow (my best bud!), and other websites where other developers ask questions and find answers, you need to master these skills of problem-solving, debugging, and finding answers through communities.
As you advance, you will realize that the Developer’s job is 30% coding and 70% debugging, soon enough you will agree with this, just last month I spent the whole week solving just one error, and guess what, there was just a problem with the versions of my packages in React Native Android platform, but that’s part of the developer’s job.
So here are the free courses you can start, best of luck!
1 — Create Your First HTML/CSS/JS Project ( 20mins)
This is a good starter course, this serves as your warmup as you follow along with the other courses below that comes with the actual building of projects.
- Take note of how you can set up your Google Chrome Developer Tools, this is very important, you can also set up your developer tool the different screen sizes you would want to see, whether you want to set it up into IphoneX, iPad, Android, and web, it’s all there on your Google Chrome Developer Tool.
2 — Build A Responsive Website With HTML and CSS Tutorial (40Mins Course)
This course contains building a website from scratch using the fundamentals, HTML, CSS, and JS, the website will also be Mobile Approach first, it is a responsive web app that also contains animations, you will enjoy it, even if it’s just a 40min course.
3 — How To Make Website Using HTML CSS | Start To End Step By Step (2HR Course)
This is a complete website built using HTML, CSS, and Bootstrap, this is a professional look website with logo and navigation menu, you will also learn about Single Web Page approach, this is typical when building a business website for their marketing approach.
You will be using a lot of Bootstrap Framework in this project.
The Website also contains Contact Form.
4 — Cofee Junkie Website Project ( 5HR Course)
This is a complete project, you might want to take it during weekends or holidays, don’t just copy-paste his code but rather learn them, be a rebel, try to experiment with the code too, that’s how you will learn.
This project uses HTML, CSS, JS, with several packages like FontAwesome, google map, you will learn several styling in this project too, there will be login and signup forms and images.
This project is also responsive, mobile-friendly, you will also use Grid for images that will be displayed dynamically, this is a good course and a bit of advanced.
This course is a must! this is an introductory course, though it is not a full course, however, you can still learn a lot from this free course, this is not just informative but enjoyable at the same time after this course you will be able to have your mini-project that will help you as you build up your portfolio.
- Build a Restaurant Website using basic HTML and CSS, with a great design! This is a nice starter website.
- Build Motorcycle Website, this is some sort of Intermediate level, but I know you can do it, understand how things work, analyze the instructor’s coding style too.
- After the Motorcycle Website, you will then able to learn how website should be mobile-friendly, so in this part, you will learn how to make the website responsive, responsive means the website design will adjust depending on the size of the screen, one good piece of advice is when you build a website that is mobile-friendly, it is a good practice to build it first on mobile perspective before going to the web, it is sometimes called Mobile First Structure.
- Bootstrap is a super cool, super powerful framework that will help you build your website super fast and will provide a professional-looking website and at the same time, user-friendly and mobile-friendly.
The instructor will also introduce you to JQuery, which will be responsible for the effects, design and better user interaction, this course is pretty cool! You will love this, and once you build those sample projects it will boost your confidence, and will make you love Web Development more! :)
Some Few Reminders
Another thing to remember is that don’t get too addicted to jumping from one tutorial to another for the sake of studying or so you can just say you’ve had 100s of tutorials now you are a very good Web Developer, it’s not.
This is not a quantity over quality approach, but rather quality over quantity, it’s not about how many hours you spent, it’s all about how you used it, it will depend on how much you understand and analyze them.
It’s like you decided to spend 8hrs of learning and studying but half of it was through browsing the internet, browsing your phone, chatting, So.. nope! compared to straight 4hrs of no distraction, complete focus, and deep work, that’s the best approach. And to do that you better hide your phone, hide any distraction and just focus, that’s all it takes.
I’ve mentioned this from the previous blog, my Senior Tech Lead for System Architecture gave me some golden nuggets during our meeting, we were about to start on a new complex project with a very short timeline, and at the same time we will be using new technologies so from the given timeline we are not sure if it’s possible, so he then told us this.
“Do not learn anything all at once, know first the requirements, solve the current problems, and move on to the next, let your project be ugly, just make sure that it’s working, and call it a day. Designing the colors, fonts, lines takes so much time, so let it be ugly first, rather than making it beautiful and ended up nothing done for the day, it’s procrastination. The beauty comes after, the function always comes first.”
This will probably gonna be useful in the future for you, but probably not that much as you start, regardless, try to master deep work, you only 3–4hrs of full focus and no distraction, not 8hr half-ass.
Best of luck…. Part 5/5 coming right up…