Resources: Frontend

[sammdu]

Learning HTML & CSS

You don't need to install the specific text editor each tutorial recommends. Just pick one editor that you like or is already using, and stick with it.

• Static Tutorials
  • 💚 https://marksheet.io/ (this one I like very much)
  • 💚 https://www.internetingishard.com/ (also pretty good)
  • https://www.freecodecamp.org/learn/responsive-web-design/
  • Mozilla HTML Basics https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
  • Mozilla CSS Basics https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
• Interactive Tutorials
  • https://www.learn-html.org/
• Videos
  • HTML & CSS for beginners Series — Kevin Powell https://youtube.com/playlist?list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-
  • HTML & CSS Crash Course Tutorial — The Net Ninja https://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G

Learning CSS Flexbox

Flexbox is the most important layout feature in CSS so really pay attention.
Also don't worry about CSS Grid. Anything that can be done with Grid can be done with Flexbox. We'll only be using Flexbox.

• Static Tutorials
  • https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2
  • https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/
  • 💚 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (my personal fav for continued reference)
• Interactive Tutorials
  • 💚 https://flexboxfroggy.com/ (learn & play games at the same time!)
• Videos
  • Learn Flexbox in 15 Minutes — Web Dev Simplified https://youtu.be/fYq5PXgSsbE
  • 💚 What the Flexbox? Short video series. — Wes Bos https://youtube.com/playlist?list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid
  • Flexbox CSS In 20 Minutes — Traversy Media https://youtu.be/JJSoEo8JSnc?t=354

Learning JavaScript

If any of these ask you to install node or Node.js, DO NOT. You don't need it. Skip that part.

• Static Tutorials
  • Mozilla JavaScript Basics https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics
  • https://javascript.info/
• Interactive Tutorials
  • 💚 https://jgthms.com/javascript-in-14-minutes/ (my favorite JS tutorial)
  • https://www.learn-js.org/
• Videos
  • JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour — Mosh https://www.youtube.com/watch?v=W6NZfCO5SIk
  • JavaScript Crash Course For Beginners — Traversy Media https://www.youtube.com/watch?v=hdI2bqOjy3c

Mustache.js: HTML Templating

• https://github.com/janl/mustache.js/

Useful Resources

• Start a simple HTTP server with Python3
  • Run the command below in a folder to start a simple HTTP server in that folder.
  • For Windows:

  python3 -m http.server 80 --bind 0.0.0.0
  

  • For MacOS and Linux:

  sudo python3 -m http.server 80 --bind 0.0.0.0
  

• Advanced REST Client
  • Allows you to test and play with APIs and save your options
  • https://install.advancedrestclient.com/install