Resources

Lectures

• Intro to HTML
• Intro 2 WWW
• Jurriaan Schrofer
• HTML Basics
• HTML Paths
• Images and Assets
• Intro to CSS
• CSS Selectors
• CSS Colors
• CSS Box Model
• CSS Position

Demos

• The Chrome Inspector
• Setting Up Your Class Site
• GitHub Summary

Troubleshooting

Try to be patient when writing code, so much of programming is debugging – typos are one of the most common errors! If you find yourself stuck, try breaking your issue down into smaller, more manageable parts.

Search Google or Stack Overflow for how to solve those parts, one at a time. While frustrating, these bugs will may lead yout o discover something new you would not have considered before!

Downloads

• To edit code, download Sublime Text.
• For Browsing the web and viewing our pages, use Google Chrome (we'll use Chrome exclusively because of its devtools).

Online Tools

• Figma for image/media generating, editing, and prototyping
• Slack for class communications
• Glitch for online coding
• Zoom for video calls

Debugging

• Chrome's DevTools

Getting Started

• Mozzila: Getting started with the web: Dealing with files
• Mozzila: Getting started with the web: So what is HTML?
• Mozzila: Getting started with the web: So what is CSS, really?
• Mozzila: Getting started with the web: So what is Javascript, really?

HTML

• Mozilla: HTML
• Shay Howe: Building Your First Web Page
• learn.shayhowe.com/html-css/getting-to-know-html

CSS

• Mozilla: CSS
• Shay Howe: Getting to Know CSS
• Shay Howe: Opening the Box Model
• CSS Specificity
• Learn CSS Layout
• FlexBox
• Flexbox in 5 Minutes
• CSS Animations
• animate.css
• The Shapes of CSS
• Clippy CSS
• DevTips for Designers: CSS Basics Part 1
• DevTips for Designers: CSS Positioning Part 1
• DevTips for Designers: CSS Positioning Part 2

Web Fonts

• Font Squirrel
• Google fonts

More

• Unix for Mac OS X Users
• Copy Paste Character
• Devdocs
• Can I Use?

At CCA

• CCA's Learning Resource Center