web design tutorials! yay!

HTML/CSS Foundations

1. Links for HTML/CSS resources

Intro to JavaScript

• LESSON 1: onclick, alert(), strings, numbers
• LESSON 2: <script>, functions, variables
• LESSON 2A: inspect panel, console.log()
• LESSON 3: Booleans, if/else statements, arrays, .length
• EXERCISE A: a short story
• LESSON 4: Math.random()
• LESSON 5: document.querySelector(), .innerText, .style, .classList
• EXERCISE B: a bit of generative art
• LESSON 6: document.querySelectorAll(), setInterval(), template strings
• EXERCISE C: a bit more generative art
• LESSON 7: while loops, for loops, .innerHTML
• EXERCISE D: let the computer code the page

High quality portfolio layout (HTML/CSS)

1. Navbar using flexbox
2. Header using flexbox
3. Main portfolio gallery using CSS grid
4. Footer using CSS grid
5. Putting it together!

Creative uses for JavaScript

Fundamental concepts

• Function arguments and reusing functions
• The this argument

Changing CSS with JavaScript

• Reading from an array in order
• Randomly reading from an array
• Tracking information
• Using random numbers
• Making decisions randomly using if statements
• Adding/removing classes

Changing content and HTML with JavaScript

• Changing text
• Combining text
• Changing images
• Playing audio
• Editing HTML

Doing things automatically

• Repeatedly and automatically running a function
• Delaying an action
• Stopping a loop
• Changing multiple elements at once
• Generating HTML using a loop
• A more complicated loop

AdVaNcEd TeChNiQuEs (not recommended for now!)

• Dragging elements (which is surprisingly difficult!)
• Endless Horse
• Yellow3D