did I take an embarrassingly long time to think of a title? yes.
ok, so here's the thing - before I actually started coding, I thought I was like super tech-savvy (turns out I was terribly wrong). did this make me want to give up and, crawl back to my bed and cry? yes. did I do exactly that? no... ok yes, maybe I did.
honestly, the tech industry is filled with INSANELY smart people, and idk that's kinda intimidating, right? it feels like the people in the industry must've come outta their mother's womb knowing how to solve hashmaps. like bro - how do I even compete with that? after like 10+ hours of coding, a lot of cursing, and sacrificing a virgin I finally managed to figure out how to make a counting app.
when it comes to coding, nothing is common sense.
when I first embarked (a fancy way of saying "started") on my coding journey, I saw that there were a lot of shortcuts, or tricks people used, to make their experience better but because it was thought of as "common" knowledge - nobody really explained what they did.
in instances like that, I know you'll feel stupid, partially because you are. but that's okay, cause I am too.
but as someone who might be two steps ahead of you in their coding journey, I want to pass down some of the very simple hacks I've learned that will automatically make you feel like a tech god and will just overall improve your life.
Code Editor
Choose VS Code. I know most people will try to allude that VS Code is the better option, but I'm here to confirm it in case you're still confused. Because it's currently the most popular code editor out there, it means that you'll likely find a solution to any problem you run into and trust me, you will if you're dumb like me :)
Cool Shortcuts
Commenting out code
In your code file for literally, anything that isn't produced by apple:
Press Ctrl and /
for our wealthy MAC users:
Press command and /
<!-- these are HTML comments -->
<!-- ayo bro this actually works-? -->
/* these are CSS comments */
/* bro I'm like flabbergasted rn */
// and these are JavaScript comments
// this is sm fun
sidenote: you can also select multiple lines of code and comment them out at once with this method
HTML boilerplate code
**Hate having to write HTML starter code? Me too. ** Good thing there's a solution for people as useless as us.
Open up your HTML file
In your file, type
html:5and pressEnterBOOM! You should have a ready-made template like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>we did it!!</h1>
</body>
</html>
Plugins that will slightly reduce your hate for coding
ok I'm hungry ( this isnt related to coding, I just needed to find a way to make this all abt me. )
Live Preview: If you do not have this as an aspiring web developer INSTALL IT LIKE LITERALLY RN. Ok- so yk those youtube tutorials where when they're in vscode and they somehow manage to split their screens to see their code AND the page they're developing? this is the extension they use to do it.
Prettier - Code Formatter: Whether you like it or not as a developer you'll be staring at your code for HOURS. So would you prefer to look at ugly code? or pretty code? that's what I thought.
Auto Rename Tag: Did you ever use the wrong HTML tag while you were coding and rewriting an identical 5-word tag twice, made you want to end it all? Ofc it did, you're just like me. Anyways, this extension solves our problem - it automatically rewrites the second tag, when we're fixing the first. YAY!
ESLint: We suck at coding, and sometimes the issue is we made a dumb typo - well this extension will help you while you're debugging by underlining your JS code in red for places you made mistakes.
#colorize: Colours are super fun; the fact I have to be subjected to the American version of the word while writing CSS code, isn't - but that's a conversation for another day. Sometimes you have a hunch about a hex code, but you're not sure if it's the right colour because you have low self-esteem, well now you'll be able to know immediately because this extension literally highlights your hex code in that colour!
FUN FACT: while we're talking about CSS, do you ever wonder what the
*selector does when you copy a random stranger's CSS code w/o even thanking them? That selector is used to select ALL of your elements and it's primarily used to remove the automated margins/ padding of certain elements to give you full mobility when you're styling.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*its primarily used like this to reset elements*/
Free sources for all my fellow broke developers
Netlify: This is literally the best way to deploy all your projects on the internet, for FREE!! i love it <3
Scrimba: In my opinion, one of the best learning platforms for web development. I feel like it's not talked about as much because it mainly has paid resources - but they have SO many amazing free resources (I've linked all the free courses here ). I really do struggle with reading an insane amount of text (ironic, I know) while learning but long youtube videos are also super intimidating, so for me - scrimba was the best balance between the two. (sorry just a small fangirl moment)
W3Schools: Usually use this when I'm trying to figure out what certain elements do, it has such a nice UI and all their information is very concise. Literally perfect for filling in those small gaps in knowledge
StackOverflow: The obvious resource for last, just roll w the motto - "If your code doesn't work, someone else's will". You'll always find a solution here.
P.S. For a more updated version of this list, you can check out the Resources section, on my blog.
Special Mention: freeCodeCamp, it's such an amazing resource with a humongous library, although I didn't use it as much, I know one of you definitely will!
Guys we made it to the end !!
I know this article was uh... really... something? But thank you for reading it through :). I kinda want to document my learning journey ( currently learning React! ) and bring you guys along the way. But also, this was my very first time blogging, and I'm absolutely open to feedback, so please do let me know ways I can improve and what you guys would want to see!