Resources


Lectures

Internet History
ASCII Art

Technical Docs

Technical Document: HTML Part 1
Technical Document: CSS Part 1

In-Class Exercises

In-Class Exercise: Class Website

Workshop / Weekly Exercises

Exercise 0. Text Editor: ASCII Town
Exercise 1. HTML & CSS Basics: Interview
Exercise 2. Arrangement: Flags
Exercise 3. Responsiveness: Multiples

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

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 - What is CSS?)
DevTips for Designers: CSS Positioning (Part 1)
DevTips for Designers: CSS Positioning (Part 2)

Web Fonts

Font Squirrel
Type Sample
Google fonts

More

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

At CCA

CCA's Learning Resource Center