Post on 18-Dec-2014
description
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