BUILD YOUR

FIRST WEBSITE

Web Development 101

Olex Ponomarenko, UVA '2011

Thinkful

@tholex – olex.co – slid.es/tholex

DON't PANIC

This workshop is an intro to Frontend development,

it's not rocket science!

HOW DOES THE INTERNET WORK?

THE WEB

Every website you visit sits on a URL, an address on the web.


The envelope used to deliver the site
–called a protocol–
is called HTTP(S).

A URL

HTTP is the top dog of protocols – it brings HTML, fonts, gifs to your browser

http://www.thinkful.com/learn

1. PROTOCOL

A URL

Points to a server on the global network.

http://www.thinkful.com/learn

2. DOMAIN NAME

A URL

App Development starts here.

http://www.thinkful.com/learn

3. PATH

What exactly do you want?

HTTP

GET /learn HTTP/1.1
User-Agent: Mozilla/5.0 .... Firefox/37.0
Host: www.thinkful.com
Accept: text/html,...

Request. This is what your browser sends.

The whole URL is in the request,
plus metadata.

HTTP

Response. This is what your browser gets back.

HTTP/1.1 200 OK
Server: gunicorn/0.17.2
Content-Type: text/html; charset=utf-8; charset=utf-8
Content-Length: 40849
X-Hello-Human: Hey there, wanna join us? Visit http://www.thinkful.com/about or tweet @thinkful

<!DOCTYPE html>
<html lang="en">
<head>
  ... (100's more lines of HTML code) ...

HTTP Response Body

HTTP Response Code

A URL is an address, a server and then something inside it.

https://twitter.com/tholex/favorites

HTTP is an envelope utility / security mechanism

200 OK

404 Not Found, ...

302 Found

THE BROWSER and HTML

THE BROWSER

Fetches stuff with HTTP, acts out redirects, ...

 

"Reads" HTML, CSS, and JavaScript

 

Displays a picture, lets you interact with it: scrolling, clicking, sliding, gifs, ...

Keeps you safe from h@ck3rs

hTML

"Markup" adds structure and meaning to text

<div class="sidebar">
  <a href="/blog">Read our blog!</a>
</div>

Mozilla HTML Reference ▸

hTML SYNTAX

<div class="sidebar">
</div>
  <a href="/blog">Read our blog!</a>

Opening Tag

Tag w/ Text

Closing Tag

HTML SYNTAX

<div class="sidebar">
</div>
  <a href="/blog">Read our blog!</a>

Tag name + Attributes="Attribute Value"

Attributes have special meaning - spelling!

Forward Slash and the Tag Name

Hello Browser

<!doctype html>
<html>
  <head>
    <title>Good day mr. browser!</title>
  </head>
  <body>
  </body>
</html>

Save this into hello.html or open up jsbin.com

Hello Browser

<!doctype html>
<html>
  <head>
    <title>Good day mr. browser!</title>
  </head>
  <body>
    <h1>Pancakes</h1>
    <p>Hello world!</p>
  </body>
</html>

Hello Browser

<!doctype html>
<html>
  <head>
    <title>Good day mr. browser!</title>
  </head>
  <body>
    <h1>Pancakes</h1>
    <p>Hello world!</p>
  </body>
</html>

STYLING With CSS

<a class="button red">Download</a>
<a class="button pink">Download</a>
<a class="button gray">Download</a>
<a class="button black">Download</a>

CSS SELECTORS

<a href="/sign-in" class="button">Sign in</a>
a {
  /* Change a tags here */
}

.button {
  /* Change "buttons" here */
}

CSS EXAMPLE

.button {
  font-family: "Avenir", sans-serif;
  color: orange;
}
<a href="/sign-in" class="button">Sign in</a>

CSS SYNTAX

.button {
  font-family: "Avenir", sans-serif;
  color: orange;
}

Selector - which elements are affected?

Property - what aspect is being changed?

Value - what amount / option?

CSS PROPERTIES

Codrops CSS Reference ▸

There are >100 CSS properties

Mostly they fall into three categories:
Layout, Typography, and Colors

display, width
font-family, text-align
color, border-left-color

Recreating Mailchimp

SETUP

You may want a codepen.io account

Sign up here ▸

Want the code? Download it here:
https://github.com/tholex/css-tutorial-mailchimp

Fork (copy) this pen:
bit.ly/uvathinkful

Get Started

By Olex Ponomarenko

Made with Slides.com

Get Started

  • 1,278

More from Olex Ponomarenko