So, you’re looking to learn how to code hey?
Well thank the binary gods, you’ve found yourself in the right place.
I created this guide after realizing that there is a bit of a bottleneck during the learning stages for beginners. The amount of resources available is mind-boggling and as I like to say, we tend to be moving everywhere but going nowhere.
What you can expect from this guide is a straightforward and easy to follow learning path to get you started in the world of code and web development.
By the end of this guide you will be equipped with the relevant skills and knowledge to be able to venture out on your own and start building your crazy ideas!
If this sounds like your cup of tea, turn the kettle on cos now we’re cooking with.. boiled water? Ugh, this was meant to be a no non-sense wasn’t it?
OK NO NONSENSE FROM NOW.
The Beginner’s Trinity.
The unity of HTML, CSS and JavaScript.
Pay close attention, these will be your fundamental building blocks.
For the sake of explaining these three, lets pretend you’ve bought some land and plan to build a house.
HTML is a Markup language — it’s the foundation of a web page.
Think of HTML as the structure of the house and the core components that hold it together. A front door, walls, windows and a roof. Basically the structure and foundation of the house.
Your web page needs structure as well, in the form of HTML elements. A header, body, and paragraph tags to put your text in!
CSS will address the cosmetic matters, it is what allows you to style your web page and make it unique on the world wide web!
You’ve got the structure and foundation of your house, now lets give it some style. We want the door to be red with a height of 200cm and width of 90cm. It’ll be positioned in the middle of the house and have a baby blue door knob.
Lets make your web page aesthetic, how about giving it a background color of green and make the text white for some contrast.
JavaScript is what gives some life and interactivity to the web page!
You add a doorbell to the house and when its pressed, will play a sound inside the house (explaining what a doorbell does, look at me go).
Lets give your web page some personality and spring some life into it. How about editing a button so that when it’s clicked, it’ll greet the user with a simple welcome message!
Start learning through coding.
- Signup for freeCodeCamp and begin their Front End Development Certification track. Here you’ll be exposed to HTML and CSS and tasked to create your first projects! Work through the tasks until you’ve finished the Basic JavaScript module.
- Signup for Watch and Code and start the Practical JavaScript course. Having finished this, you’ll have a stronger understanding of how to use JavaScript in your web pages/applications.
- Head back to freeCodeCamp and begin from where you left off. After having gone through the Practical JavaScript course, you’ll be better equipped to take on freeCodeCamp’s Algorithm Scripting and Intermediate Front End Development Projects. Continue riding the freeCodeCamp (it is in my opinion the best resource out there for beginners) wave until you’ve reached the end and can claim what is rightfully yours, the freeCodeCamp Front End Development Certificate.
- Pat yourself on the back.
“Wait that’s it?”, well yeah, what you’ve just done is no small feat. The whole purpose of this guide was to be succinct and by now you’ll have…
- Completed a total of 42 algorithms.
- Completed 10 projects using HTML, CSS and JavaScript.
- Gained a better understanding of how JavaScript works.
- Learned how to manipulate the DOM with JavaScript.
Yeah, I’m impressed as well!
You’ve gone from being a complete newbie to someone who should now be confident and knowledgeable enough to crack open a text editor and start coding and building.
A few things…
I highly recommend creating a GitHub account and uploading your algorithm solutions and projects to your profile.
If you really enjoy Gordon’s teaching style from Watch and Code and it’s curriculum you can signup for the Premium Membership to access his other content.
“But wait! I still have questions!!!!”
And I am not surprised! There are an abundance of things you can do next in your journey to learning code and I’m more than happy to help you along that journey.
Feel free to connect with me on any of the platforms below!