I'm incredibly lucky to be starting my path in a generation where there are so many good (and free) learning resources! However, that's what makes it a bit daunting to get started, because we sometimes don't know what will work best for us as individuals.
I've recently shipped my first project, and I wanted to write a post to others in case my journey may be helpful for them.
If I could rewind time, I'd tell my past self to start here:
My free trial of bootcamp - Bootcamp isn't for everyone, and I found out that it wasn't for me. But one of the days were extremely valuable as it got me quickly familiar with git bash, GitHub, and workflows. However, if I were to go back in time, I'd take back the few weeks I spent here and learned how to use version control via documentation or youtube videos.
I'm ready to start coding my first project! What do I need to get started?
VS Code or any code editor. For VS Code, after you get it, search on YouTube for a few VS Code extensions people recommend for Web Dev and download those. You can always remove any you don't like later!
GitHub - Make a GitHub account and get started by learning about git commands and how git works. Essentially this is how you work on code with others via version control. Think of it kinda like how google docs work, kinda.
Sass (or Less) - It lets you write your CSS in a more efficient way which then preprocesses into CSS. You can nest your CSS, use mixins, functions, and do so much more.
Material UI (or Blueprint.js or some other React toolkit) - Never make components again! Need a button or a tag? Grab it from the toolkit and override any CSS as needed. Spend your time coding, not designing from scratch.
TypeScript - This is so helpful as it really helps to give you errors that are more descriptive so that you can debug quickly. It's a bit painful for me sometimes since I'm still learning how to use it and I don't understand what all the errors mean, but I can already feel the value!
Jest - Test, test test! It's important to write test scripts for your code! It's something I'll be working on in the coming weeks so that when I make changes, I can see the downstream impact.
Youtube sites that are worth taking a look at when you just want someone to show you something because you're tired of reading documentation:
Other sites worth mentioning:
- MDN - the place to go for documentation around web dev. Don't forget to sign up for their emails!
- CSS Tricks - As the name implies, a great resource to see how to use CSS in fun/creative ways.
- GFonts - a place to get fonts for your website
- Unsplash - free photos for your website
- unDraw - free vector/svg illustrations for your website (we used them for more eyes, plz!)
- favicon.io - create a custom favicon (that icon/image on the webpage's window tab)
- Font Awesome - so that you can use icons
- Vim - download Vim as an extension on VS Code and use keyboard shortcuts. Never touch your mouse again
- Normalize.css and CSS Reset - a ways to get your CSS to render all elements more consistently
- Code everyday!! Even if that means doing a few HackerRank or Edabit problems.
- Don't fear the documentation! It's the best place to read first to solve your problem. Don't guess and check, read the source documentation and then google for additional help.
- Reiterate your code! The first time is almost never going to be your best code. It's going to have some bandages as you try to fix it up because of some oversight. Clean it up and look for ways to make your code more readable.