Intro to Web Development

Introduction to Development Web

Everyone! can do it

rules learn the

tools learn the

language learn the

Request Response

HTML! HyperText Markup Language

HTML! Is not a programming language

index.html

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

HTML <h1>How does this work?</h1>! ! <p>Imagine that you see
all of this on a website.</p>

<h1>How does this work?</h1> HTML Start Tag End Tag

HTML <b>Bold</b>! ! <i>Italics</i>! ! <h1>Header 1</h1>! ! <h2>Header 2</h2>
Bold Italics Header 1 Header 2

HTML <html>! ! …! </html>

HTML <html>! ! <head>! ! ! <title>My Website</title>! ! </head>!
! …! </html>

! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html>

<a href=“http://google.com”>You should check out Google.</a> Most HTML tags can
have attributes HTML

! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome! <a href=“http://! ! ! ! google.com”>You should check! ! ! ! out Google.</a>! ! ! </p>! ! </body>! </html>

CSS! Cascading Style Sheets

CSS! Is not a programming language

CSS! Styles your HTML!

HTML <html>! ! <head>! ! ! <title>My Website</title>! ! !
<link rel="stylesheet" href=! ! ! "styles.css" />! ! </head>! ! <body>! ! ! <h1>Main heading</h1>! ! ! <p>Hi! Welcome!</p>! ! </body>! </html>

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

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

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

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

<html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>! <body>!
<h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http:// blueprint.hackmit.org/">Blueprint 2014.</a></p>! </body>! </html> HTML

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

HTML <html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>!
<body>! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </body>! </html>

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

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

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

HTML <html>! <head>! <title>My Website</title>! <link rel="stylesheet" href="styles.css" />! </head>!
<body>! <div class="wrapper">! <div class="top">! <h1>Blueprint is awesome!</h1>! <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>! </div>! </div>! </body>! </html>

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

HTML <body>! <div class="wrapper">! <div class=“top">! ! ! …! </div>!
! <div class="about">! <div class="column" id="column1">! <h2>Feature 1</h2>! </div>! <div class="column" id="column2">! <h2>Feature 2</h2>! </div>! <div class="column" id="column3">! <h2>Feature 3</h2>! </div>! </div>! </div>! </body>

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

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

Padding Margin Div

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

.class #id vs

HTML <div class="column" id="column1">! <h2>Feature 1</h2>! <img src="1.png"><br /><br />!
Why we are the best.! </div>

HTML <body>! <div class="wrapper">! <div class=“top">! …! </div>! <div class=“about">!
…! </div>! <div class="bottom">! <h2>You'll love our awesome features.</h2>! </div>! </div>! </body>

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

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

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

Frank Wu! frankjwu.com! @frankjwu

Intro to Web Development

Intro to Web Development

More Decks by Frank Wu

Other Decks in Programming

Featured

Transcript