Resources

 

Learn.ShayHowe.com

BaseCamp for Web Design 1

 

 

 

Index

 

0. Course Overview

1. Tools & Process

2. HTML vs CSS

3. Cascade, Inheritance, Specificity 

 

Web Design 1

DESN 368 

concepts

Transitions

 

 

2D Transforms

 

 

Resources

 

Transitions

TreeHouse: CSS Transforms

Shay Howe: CSS Transforms

CSS Tricks: Transitions

 

2D Transforms

TreeHouse: Transforms

Shay Howe: Transforms

 

transition
transition-property
transition-timing-function
transition-duration
transition-delay
transform: rotate() 
           scale() 
           skew() 
           translate()

0. Course Overview

Goals

  • Design with modern website tools and processes
  • Gain an understanding of web design as a profession
  • Apply graphic design principles to the web as a medium
  • Work with existing, and future web enabled devices
  • Create an interest (hopefully excitement) for Web Design

</end>

1. Tools & Process

1. Get/Make Files

2. Do Work

3. Go Live

DreamWeaver

Resources

 

DreamWeaver via Lynda.com

 

 

It's Just Text. 

 

Many, many, better text editors than DreamWeaver exist. 

 

DreamWeaver for: one-window environment, code snippets, live preview.

 

Try Sublime Text, Atom, NotePad++, Brackets, Textmate, or CodePen.  

Local

Remote

DreamWeaver

file://

 Your Desktop

 

GitHub

http://

repository

 

User Interface

Understand

 

Toolbars

 

Panels

 

Properties Inspector

 

</end>

2. HTML vs CSS

READ

Building Your First Webpage from 

Learn to Code HTML & CSS

 

 

HTML

HTML TERMS

tag is apart of element

 

 

 

Yes, there is a difference.

 

Content

 

Elements

 

Tag

 

Attribute 

 

Value

CSS

</end>

3. Cascade, Inheritance, Specificity 

READ

Building Your First Webpage from 

Learn to Code HTML & CSS



Cascade

All rules cascade into a single stylesheet

 

Sites can be made up of many stylesheets

 

"the avalanche of styling"

Inheritance

Where did you hair color or eye color come from? 

Not all properties, from the cascade, are inherited

 

"the direction of avalanche of styling"

SPECIFICITY

X. FlexBox Layout