Welcome

to Intro to Web Development, Twitch Edition
Tune in for primary lessons Saturdays at 10am MST (Phoenix time)* at http://twitch.tv/chuckletmilk
Appendices, office hours, and supplemental lessons happen on Sundays or throughout the week.

Lessons

These are the bulk of the course. Unscripted, but mostly planned, tune in live on Twitch to ask questions and get the most out of these sessions.

1. Basic HTML and CSS (10/7)

Beginner? Start here.
https://youtu.be/S060b-fC7X8

• Basic basic HTML: What is HTML? What is a tag? What is an attribute?
• Essential tags: head, title, h1-h6, p, div, a
• CSS basics: ID, Class, changing font sizes and colors
• Tooling: The command line interface, VSCode, Node, NPM, lite-server
• Getting Help: MDN
• More tags: Head, Link, Meta, span, ul, li, img
• Using the Web Inspector to debug and learn
• Q&A

2. Advanced CSS & Layout Techniques

This lesson will be great if you're already familiar with the syntax of HTML and ready to dive into usage in the real world.
I decided to defer some of these to a later lesson.
Youtube link coming soon.

• Common layout patterns
• CSS position property
• CSS flexbox
• CSS grid
• CSS Preprocessors
• CSS Frameworks
• More practice making layouts from the real world

I've changed my mind on lessons 3 and 4. More details to follow.

3. Basic client side JavaScript

This lesson is mostly aimed at people who have never programmed before, but if there's interest, I'll do a supplemental lesson comparing Javascript to Java or C or something like that.

• A hint of additional CSS
• Hello world and console use
• Variables and arithmetic
• Control Flow
• Functions
• DOM interaction
• Using git for version control and hosting your static site with Github Pages
• Q&A

4. Client-Server communication, Node, get&put, templating

• TBD
• The Node Ecosystem & NPM
• Split into multiple lessons?

Potential lesson topics for the future:

• Intro to a front end framework (Most likely VueJS)
  • Vue basics
  • What is a progressive web app?
  • What is a single page application?
  • State Management
• More advanced Node stuff
  • Database and ORM
  • Authentication
  • Express
  • Yeoman & various generators
• Cool stuff I want to learn about
  • webgl
  • canvas
  • webvr
• Unity
  • I don't even know where to begin

Supplemental Lessons

These are additional topics I want to cover or feel like needed more depth. I can't commit to doing these regularly, but if you want something specific let me know in chat and I will do my best!

• Appendix I: The Command Line Interface (Mac & Linux)
• Appendix II: The Command Line Interface (Windows)
• Appendix III: NPM and Package.json in more detail
• Appendix IV: Build Automation with Gulp
• Appendix V: Webpack

Office Hours

I'm really excited about this class, and so far I've just been answering questions on Discord DMs. I'm happy to set up a slack or discord server and schedule regular twitch office hours if people are interested. For now, if you have a question, my contact info is in my twitch profile, but you should raise an issue in this repo so others can benefit from the answers.

This whole course is very experimental, thank you for your patience and thank you for your feedback! I can't wait to see what this becomes.

*Phoenix time is MST, but we don't observe Daylight Savings time. Frankly I've lived here my whole life so I have no idea when we're synced with MST and when we're synced with PST, so you should google it.

1. Recreating a website from the real world: https://youtu.be/5IJlKrSUDms