Skip to content

chanpory/Coffee-Break-HTML-CSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 

Repository files navigation

Coffee Break HTML and CSS

This is a work in progress. Things will be ugly. Things will change. Things might explode. Don't worry.

About this project

The goal of this project is to build a curriculum with hands-on exercises to make learning HTML/CSS easy and fun. Our hope is to also incorporate the teaching of typographic principles alongside HTML/CSS. So a more appropriate class name in the future might be You Can Do It: Typography + Front-End Development

About this class

This is not a class about making web pages. It is about forming opinions, having a backbone, and making arguments. In this class you will learn how to express and communicate opinions in the form of typography via HTML and CSS.

HTML

**Assignment 1: Hello World **

  • !doctype html
  • html
  • head
  • title
  • body

** Assignment 2: A paragraph and a bit more **

  • p
  • h1
  • h2
  • em
  • strong
  • &
  • &em;
  • a

** Assignment 3: **

  • <! -- -->
  • ol
  • ul
  • li
  • br

** Assignment 4: **

  • article
  • section
  • nav
  • header
  • footer
  • aside

** Assignment 5: **

  • div
  • span
  • class
  • id

** Assignment 6: Forms **

** Assignment 7: Tables **

** Assignment 8: Images **

** Assignment 9: Advanced Tags **

  • abbr
  • b
  • i
  • pre
  • code
  • blockquote
  • figure
  • figcaption
  • cite
  • caption
  • hr
  • time
  • sub
  • sup
  • small
  • s
  • q
  • mark

CSS

Selectors

  • Tag, ID, Class
  • Inheritance

Color

Typography

  • Links
  • Text decorations/transformations
  • Character properties

Box model

  • Margin
  • padding
  • border
  • width
  • height
  • content

Page-flow

  • Block vs inline
  • Floats and Clears
  • Visibility

Positioning

  • Absolute
  • Relative
  • Static

Advanced selectors

  • Descendant and child
  • Attribute selectors

Mouse events

  • Pseudo classes

Content-generation

  • :before
  • :after

Image

Background

Effects

Animation/transitions

Forms

Tables

Techniques

  • Horizontal nav
  • 3-column layout
  • Linking/importing css

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published