Introduction

Reality Check 😱

Now, let's start off by talking about how deep this coding stuff can get. Beyond web development, there're so many different routes you can go down in the field of development as a whole. Although you may be learning this to get a starter understanding of coding and how you're going to manage your way through a first hackathon, keep in mind there're more opportunities in this field. Beyond this already vast pool of web development is a countless amount of room for creativity and possibilities.

Explore Subfields πŸ”

Check out the insightful video by Fireship, a fantastic teacher and YouTuber, who delves into key roadmaps across various computer science fields. It's not expected that you'll understand or know most of the stuff he talks about in this video at first but give it a watch so you can see and hear some of the tools out there that goes into building really complex projects.

The web development section ends at around 4 minutes in but he goes on with other good info after.

How to ACTUALLY learn to code... 7 Roadmaps - Fireship πŸ”₯

  • For now that video might've been confusing, but think of it as a Time Capsule for Your Brain so in the future you can rewatch it and realize it's not actually all that complicated

Code Used

Below is the simple HTML you saw towards the beginning of the web development section in Fireships video. Give it a look because you'll see that again soon.

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hi Mom!</title>
  </head>
  <body>
    
  </body>
</html>

Code Writing Setup πŸ› οΈ

Fireship mentioned VSCode, a powerful and free tool widely used in the coding realm by millions of users including employees at very large companies. Now, let's get a quick walkthrough of VSCode from the amazing NetworkChuck. He covers everything you need to know about VSCode, and even if you're familiar, there's always something new to learn.

Video Disclaimer: There're some sections where he talks about more advanced topics which you shouldn't worry about, I've highlighted those here

  • "Linode" - Setting up VSCode server on the cloud (optional and may cost money, doesn't apply to us).
  • Instead of his cloud solution, you can access VSCode via vscode.dev if you really want to access it via a web browser.
  • Important parts of the video end 7 Minutes in, beyond that are advanced topics and the only other important thing to know is that you can view pictures and videos in VSCode too.

you NEED to use VS Code - NetworkChuck β˜•

  • Now, you should have VSCode set up and ready to roll!

Personalize Your Code πŸŽ¨πŸ’»

Feel free to add a personal touch to your coding environment. Explore the VSCode extensions tab to find a cool theme that resonates with your style. Dive into the world of VSCode extensions for additional fun and utility. Check out the suggestions in this Reddit post for some cool recommendations! πŸ˜ƒ

Quick Tip πŸ”§

Sometimes in these videos you'll see when they're viewing their website, the link they're using is something like "http://127.0.0.1:5500". This is because they're using a pretty useful VSCode extension called Live Server (Available in your VSCode extensions tab). This is a really useful tool that many people use including myself when developing with HTML. This extension makes it so instead of openning the HTML document in your browser to view your changes, you can simply press a button that says "Go Live" at the bottom of the VSCode window and it'll serve your HTML on your computers localhost so you can view it and changes will automatically happen in your browser whenever you save any HTML, CSS, or JS file. I strongly recommend using this if you're able to since it's pretty handy and cuts out annoying time spent looking for your HTML file inside your file explorer to open it.

If you need help on setting it up here's a video (I'm not sure if it'll work on tablets)

How to Set Up Live Server - Julio Codes

Next we'll go through the coding mindset including code usage
Table of Contents