Upload
frank-wu
View
346
Download
0
Embed Size (px)
DESCRIPTION
Workshop given at MIT Blueprint 2014
Citation preview
Introduction to
DevelopmentWeb
Everyone!can do it
ruleslearn the
toolslearn the
languagelearn 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>
HTML<html>!! <head>!! ! <title>My Website</title>!! </head>!! <body>!! ! <h1>Main heading</h1>!! ! <p>Hi! Welcome!</p>!! </body>!</html>
HTML
<a href=“http://google.com”>You should check out Google.</a>
Most HTML tags can have attributes
HTML
HTML<html>!! <head>!! ! <title>My Website</title>!! </head>!! <body>!! ! <h1>Main heading</h1>!! ! <p>Hi! Welcome! <a href=“http://!! ! ! google.com”>You should check!! ! ! out Google.</a>!! ! </p>!! </body>!</html>
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;!}
styles.css
CSS
h1 {! color: red;!}
Selector
Declaration
CSS
h1 {! color: red;!} Property Value
CSS
h1 {! color: red;!! text-align: center;!}
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
CSSbody {! background: #d9d9d9;! font-family: "Helvetica Neue",! Helvetica, Arial, Sans-serif;! text-align: center;!}!!
h1 {! font-size: 50px;!}
CSSbody {! 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;!}
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;!}
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;! float: left;! padding: 20px 15px;! text-align: center;!}
Padding
Margin
Div
CSS
#column1 {! margin-right: 15px;!}!!
#column2 {! margin-right: 15px;!}
.class
#idvs
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 designCSS frameworks
Buttons
Forms
Optimization
Frank Wu!frankjwu.com!
@frankjwu