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:
FreeCodeCamp - It's literally a free code camp. This is a great resource that got me kick-started with HTML, CSS, and vanilla JavaScript. Everything is there for you in the browser, so you don't even need to download a code editor to get started. They have a YouTube channel as well that goes through the exercises if you want someone to help "instruct" you virtually.
Eloquent JavaScript - I found JavaScript hard to pick up (still do!) I'm still going through this book and rereading chapters over again, but this was really helpful in getting a deeper understanding of JavaScript, and the online version is free!
JavaScript in 30 days - Essentially 30 days of small JavaScript projects that are pretty cool to help you get more experience understanding DOM and vanilla JavaScript. What I liked best about this resource was that I could see some better ways to organize or write my code as it comes with an answer key and each lesson has a walk-through video. However, you're going to need to download VS Code or some code editor, and you're going to have to learn how to use GitHub and CLI commands to get started.
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!
Git Bash - This looks scary! But you'll need to learn it so that you can use commands in the git bash terminal to get your workflow up and running. This CLI cheatsheet will help you.
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.
Cool! I've done the JavaScript in 30 days and I've done a few small projects. I want to learn how to do things more efficiently now! What tools should I use?
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.
React (or Vue or Angular) - These are frameworks/libraries that help structure your JavaScript. I went with React because it's been around awhile and so there's a lot of resources around it, and it's currently the most widely used. MDN has a great tutorial for learning this.
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
General Tips:
- 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.
Top comments (0)