Slide 1

Slide 1 text

Introduction to Development Web

Slide 2

Slide 2 text

Everyone! can do it

Slide 3

Slide 3 text

rules learn the

Slide 4

Slide 4 text

tools learn the

Slide 5

Slide 5 text

language learn the

Slide 6

Slide 6 text

Request Response

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

HTML! HyperText Markup Language

Slide 10

Slide 10 text

HTML! Is not a programming language

Slide 11

Slide 11 text

index.html

Slide 12

Slide 12 text

How does this work?! ! Imagine that you see all of this on a website.

Slide 13

Slide 13 text

HTML

How does this work?

! !

Imagine that you see all of this on a website.

Slide 14

Slide 14 text

How does this work?

HTML Start Tag End Tag

Slide 15

Slide 15 text

HTML Bold! ! Italics! !

Header 1

! !

Header 2

Bold Italics Header 1 Header 2

Slide 16

Slide 16 text

HTML ! ! …!

Slide 17

Slide 17 text

HTML ! ! ! ! ! My Website! ! ! ! …!

Slide 18

Slide 18 text

HTML ! ! ! ! ! My Website! ! ! ! ! ! !

Main heading

! ! !

Hi! Welcome!

! ! !

Slide 19

Slide 19 text

HTML

Slide 20

Slide 20 text

You should check out Google. Most HTML tags can have attributes HTML

Slide 21

Slide 21 text

HTML ! ! ! ! ! My Website! ! ! ! ! ! !

Main heading

! ! !

Hi! Welcome! You should check! ! ! ! out Google.! ! !

! ! !

Slide 22

Slide 22 text

HTML

Slide 23

Slide 23 text

CSS! Cascading Style Sheets

Slide 24

Slide 24 text

CSS! Is not a programming language

Slide 25

Slide 25 text

CSS! Styles your HTML!

Slide 26

Slide 26 text

HTML ! ! ! ! ! My Website! ! ! ! ! ! ! ! ! !

Main heading

! ! !

Hi! Welcome!

! ! !

Slide 27

Slide 27 text

CSS h1 {! color: red;! } styles.css

Slide 28

Slide 28 text

CSS h1 {! color: red;! } styles.css

Slide 29

Slide 29 text

CSS h1 {! color: red;! } Selector Declaration

Slide 30

Slide 30 text

CSS h1 {! color: red;! } Property Value

Slide 31

Slide 31 text

CSS h1 {! color: red;! ! text-align: center;! }

Slide 32

Slide 32 text

CSS h1 {! color: red;! ! text-align: center;! }

Slide 33

Slide 33 text

! ! My Website! ! ! !

Blueprint is awesome!

Hi! Welcome, I'm learning HTML and CSS. Built by Frank at Blueprint 2014.

! ! HTML

Slide 34

Slide 34 text

CSS body {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;! }! ! h1 {! font-size: 50px;! }

Slide 35

Slide 35 text

CSS body {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;! }! ! h1 {! font-size: 50px;! }

Slide 36

Slide 36 text

HTML ! ! My Website! ! ! !

Blueprint is awesome!

Hi! Welcome, I'm learning HTML and CSS. Built by Frank at Blueprint 2014.

! !

Slide 37

Slide 37 text

What is a div? A new foe has appeared!!

Slide 38

Slide 38 text

.wrapper .top #column2 #column1 #column3 .bottom body

Slide 39

Slide 39 text

CSS .top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;! }

Slide 40

Slide 40 text

CSS .top {! color: #D7E0E6;! background-color: #0099F8;! padding: 50px;! margin: 30px 0 0 0;! }

Slide 41

Slide 41 text

HTML ! ! My Website! ! ! !

Blueprint is awesome!

Hi! Welcome, I'm learning HTML and CSS. Built by Frank at Blueprint 2014.

! !

Slide 42

Slide 42 text

CSS a {! color: #D7E0E6;! }! ! .wrapper {! margin: 0 auto;! width: 900px;! }

Slide 43

Slide 43 text

CSS a {! color: #D7E0E6;! }! ! .wrapper {! margin: 0 auto;! width: 900px;! }

Slide 44

Slide 44 text

HTML !

! ! ! …!

! !

Feature 1

Feature 2

Feature 3

Slide 45

Slide 45 text

CSS .about {! display: inline-block;! margin: 15px 0 0 0;! }

Slide 46

Slide 46 text

CSS .column {! background-color: #CE4D4F;! color: #263039;! height: 210px;! width: 260px;! ﬂoat: left;! padding: 20px 15px;! text-align: center;! }

Slide 47

Slide 47 text

Padding Margin Div

Slide 48

Slide 48 text

CSS #column1 {! margin-right: 15px;! }! ! #column2 {! margin-right: 15px;! }

Slide 49

Slide 49 text

.class #id vs

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

HTML

Feature 1

! Why we are the best.!

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

HTML !

! …!

You'll love our awesome features.

Slide 54

Slide 54 text

CSS .bottom {! color: #D7E0E6;! background-color: #092F4B;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;! }

Slide 55

Slide 55 text

CSS .bottom {! color: #D7E0E6;! background-color: #092F4B;! margin: 15px 0 0 0;! padding: 50px;! text-align: center;! margin: 15px 0 30px 0;! }

Slide 56

Slide 56 text

Now what? Dynamic Server side Database Responsive design CSS frameworks Buttons Forms Optimization

Slide 57

Slide 57 text

Frank Wu! frankjwu.com! @frankjwu