4 learning resources that helped you become a Software Engineer

Getting started with Software Engineering is hard. You initially spent countless hours going through Youtube tutorials wondering if you were learning the right thing and there are some souls out there who find it overwhelming to even start.

Here are some goodies that you found helpful when you started learning. This broke the monotony of Youtube tutorials and made the learning experience a bit more pleasant :)

1. Code Sandbox - codesandbox.io

One of the hardest things about applying what you learn is setting up a development environment. This was definitely a problem when you started learning but it's also a problem for experienced developers who have to switch their development machine for whatever reason.

CodeSandbox is an online code editor and prototyping tool that makes creating and collaborating on web apps easier and faster.

This one is probably the one I would recommend the most compared to the rest in this list (I should have saved the best for last...).

Code Sandbox is a browser-based IDE (integrated development environment), similar to something like VS Code. It makes creating and sharing web apps extremely convenient as it provides a fully featured text editor with syntax highlighting just like other traditional alternatives as well as a preview window to see your changes live. Inviting others to code along is as easy as a few clicks.

Typically, a set-up like this can be tricky to get up and running at first (especially if you're on Windows... that could be its own blog post).

You used this when you weren't yet familiar enough with setting up a project to start building a web app. Even in recent years, you've continued to use this when prototyping ideas on your own or when working with others on an idea to just skip the time-consuming process of setting up a project and just get coding.

2. Developer Roadmaps - roadmap.sh

As I mentioned previously, something you struggled with initially is knowing what to learn. Especially, when you didn't have the luxury of knowing anyone in the industry who you could bug with questions.

These developer roadmaps lay out all the technologies within the area you're interested in and identifies which are worthwhile prioritising based on current industry standards and the recommended order to learn them.

You've used the frontend developer roadmap in the past whenever you hit a wall and weren't sure what to learn next. You've also been using it more recently as reference when helping others who have asked you for help with getting into frontend development. There's no doubt you'll continue coming back to this as you become a more rounded engineer.

3. CSS Battle - cssbattle.dev

So, here's a little secret. You sometimes spend way too much time struggling with CSS and you hate to admit it. You've spoken to other developers (even more experienced than you) who are in the same boat and you were absolutely relieved to hear it.

CSS Battle is a great website for practising your CSS skills without having to set up a whole project. Instead of going through the whole process of creating a HTML file and writing CSS within it or linking a separate file, CSS Battle gives you an interactive space to focus on writing CSS and not worry about setup.

However, the main point of CSS Battle is the challenge it provides. In one of the first challenges, you're presented with a simple and humble orange square and an abstract or themed image. The goal is to transform your little orange square into the image you're given using CSS.

You get more points the closer you get to pixel-perfect and, if you're anything like me (which you are), you might find yourself triggering that gaming part of your mind that makes you sink countless hours into a game.

4. Git Cheat Sheet from Atlassian

You've lost count of the number of times you've had to look up Git commands, this is one you wish you knew about from the start. It outlines some of the most used commands in the typical development workflow and a basic example of usage for each alongside a brief description of what each one does.