Intro to Web Development

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>

<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>

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

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;!}

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;! 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

Intro to Web Development

Self Improvement

Transcript of Intro to Web Development