Dark Theme | Category: Code, Educational
My Top 5 Learn-to-Code Resources
As the title suggests, this is a collection of the top 5 resources I found useful when I was first starting out learning to code. I made a folder in my Bookmarks bar called “Code” (short and sweet so it didn’t take up too much real estate) and dropped all of them in there. I recommend that approach for practical space-saving reasons, staying organized, and being able to see your progress as the number of links you save increases and the type of content you collect gets more advanced. Feel free to bookmark Code Copy Coffee, too!
1. Codecademy
Ah, Codecademy – the O.G. of learning to code. There are several reasons that it tops many lists like this one. First of all, it’s FREE. There are paid elements – for instance, if you want extra practice or additional projects – but the essentials to get you started are like J.Lo’s love: they don’t cost a thing. Second, you can save courses and track your progress so you can leave and return and pick up where you left off any time. Now that’s convenience, folks! Third, it’s interactive. For those of us who learn best by doing the darn thing, Codecademy is the dream: thorough explanation on the left, work station on the right. You can even go off-book and make adjustments to your code as you go to see what effect changing one thing or another will have.
2. Codepen
If Codecademy is school, CodePen is the playground. You have free rein to use what you learn as far as front-end goes. Experiment, try things, build things, mess around, have fun! Seeing changes immediately as you’re making them, with your HTML, CSS, and JS all visible at the same time, is a great way to learn and get familiar with basic front-end languages and frameworks. You can also browse and be inspired by others’ creations, and even fork them to play with. As a hands-on learner, I don’t know where I’d be without CodePen. It’s free, it’s fun, and it’s useful no matter what level of knowledge and experience you have.
3. CSS Almanac
There is a TON of useful info for both education and reference – because even seasoned developers have limited brain space. Because it’s so vast, I picked out three of the pages that I found myself returning to often in the beginning, but I encourage you to explore the site beyond them. The first, as you can see, is the CSS Almanac. Unless you have an eidetic memory, you probably won’t be memorizing every single CSS selector and property. Thanks to the almanac, you don’t have to! It’s useful when you’re learning to read code as well, when you come across a property you’ve never seen before and want to figure out what it does.
4. CSS Shapes
When you’re first starting out and playing around on CodePen, you’re going to want to know how to make shapes. From a square that requires three lines of CSS to a star that uses 42 lines (don’t panic – it’s not as complicated as it sounds!) this page gives you the building blocks for many common shapes and a few unique ones as well (space invader, anyone?). If you’re just starting out, I recommend copying and pasting the CSS into CodePen and playing with the properties to see how assigning different values affects the shapes.
5. W3 Schools
If you’ve been asking around about where people are are getting their code education – codeucation, if you will – you’ve probably heard W3 Schools cited second-most after Codecademy. The setup is fairly similar: do some reading, learn something, get hands-on in the interactive space. In my earliest days of learning code, I would complete a topic on Codecademy and then immediately check out the same topic on W3 Schools. For me, exposing myself to the same material put slightly differently reinforced the lesson. My senior dev once cautioned me that some of the info on W3 Schools is outdated, so I’ll pass that warning on to you. In general, it’s a good idea to check dates on your resources when you’re learning anything in the realm of code, because things can change pretty quickly.
What did I miss? Share your favorite learn-to-code resources in the comments!
</ XOXO >
[Photo credit: Tim Mossholder via Unsplash]