LEARNING_WEBDEV.md

Getting started

• 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 generates 2. 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:
  • HTML: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
  • CSS: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • JS: http://jsforcats.com/
• 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:

Tooling

• 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 using git (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)

See Also

• Learning JS

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)