- Everything except images in a website is text, so it's a lot of reading and writing. As such, it makes sense to use an editor built for the purpose to make your life easier.
- Install Visual Studio Code (VSCode): https://code.visualstudio.com/
- This is where you'll do all your code editing
- Really, you only need the text editing portion of the editor, but for all the other features, check out this guide: https://code.visualstudio.com/docs/getstarted/userinterface
- There are 3 main technologies that make up a website: HTML, CSS, JavaScript (JS)
- HTML is a way of declaring the structure of pages on the web.
- CSS is a way of declaring the styling (layout, colour, fonts, etc) of structural elements defined in HTML.
- JS is a way of executing arbitrary commands to generate some sort of output
(eg;
1 + 1
generates2
. Or,alert("Hello")
generates on alert window)- Without JS, the HTML & CSS you write is the exact same that a visitor to your page will see.
- With JS, you can modify HTML and CSS inside the user's browser. It is the only one of the 3 technologies that can do this (HTML can't modify JS or CSS, and CSS can't modify JS or HTML)
- Get started with learning each technology:
- A solid understanding of these 3 technologies (and their differences / appropriate use) is required before diving deeper into tooling or advanced usage. Now that we've got the basics, we can start branching out:
- So far, all the code is only on your computer. What if it crashes? How do you
collaborate with someone else?
git
is the defacto tool for managing sharing / backing up your code, and Github.com is the defacto cloud storage provider for your code when usinggit
(like Google Docs is the cloud storage for documents)- Install
git
: https://git-scm.com/ - Learn the basics in your browser: https://try.github.io
- Now learn the basics of GitHub: https://guides.github.com/activities/hello-world/
- Finally, add your current code to a new GitHub repository (remember: "free" GitHub accounts only allow your code to be public to the world)
- Install
looks good ! I think its also beneficial to have some sort of basic understand of how the web works as well. eg. HTTP/S, IP, web servers, HTTP requests with POST, GET etc.
And its good to to know your browser inside and out (especially devtools)