INTRO // Goal

By the end of this workshop, our goal is to build a simple responsive website.

http://bitmakerlabs.github.io/html-css-workshop-may-11-2016

How Web Pages Work

INTRO

• The page itself (code) will be a set of instructions that define how the page is to be presented or “rendered”

• Unlike a word processing document, images, videos and other resources are sent as separate ‘pieces’

• The individual pieces are put together for display by your browser

• Depending on their capabilities, different browsers may display content slightly differently

• As web browsers evolve and are able to understand more instructions, the more we are able to do! 

• Once you have requested a page and it loads up in your browser, all the ‘pieces’ have been transferred to your computer temporarily

INTRO

INTRO // How The Web Works

A simplified look at a typical web architecture

Client

(Web Browser, Mobile App)

Web Server

Database

Requests

Responses

INTRO // Web Development

The development process can be broken into two areas

FRONT-END WEB DEVELOPMENT

BACK-END WEB DEVELOPMENT

• How things look to the user

• Involves: Images, Content, Structure

• HTML, CSS, & Javascript

• How things work

• Involves: "business logic"

• Ruby, PHP, C++, Java, etc.

_________________________________________________________________________________________

INTRO // Technologies

HTML

Content

CSS

Presentation

JavaScript

Interactivity

We'll be learning about HTML & CSS today

INTRO

Tools We'll Be Using

INTRO // Tools

Text Editor

I'll be using Sublime Text

• It's free

• Provides syntax highlighting, code hinting, auto completion, and a lot more features geared toward writing code

• Word, Pages and any WYSIWYG editor are NOT suitable for code!

INTRO // Tools

Browser

I'll be using Google Chrome

It provides many developer-friendly tools ("inspect element")

INTRO

Let's get started!

1. Visit this URL and click the                          button

2. Save the file on your desktop

3. Double click the downloaded .zip file to extract to a         folder

4. Open up the Sublime Text Application

5. Drag the extracted folder to open Sublime Text             window

https://github.com/bitmakerlabs/html-css-workshop-may-11-2016

CSS

Cascading Style Sheets

Rules that specify how your elements should appear in your document

CSS

Before

After

CSS

CSS Syntax

h1 {
    font-size: 16px;
    color: red;
}

• CSS Selector

• Declaration block denoted by the opening {   and closing   }

• A declaration consists of a property and a value, separated by  :  and ends with  ;

CSS

Declaration   >>   property: value; 

p {
    font-size: 16px;
    color: red;
}

Properties:

Values:

Pre-defined terms that will change the way elements look and behave.

Properties are set with values using a colon.

Declaration:

Together, each property-value pair form a declaration

CSS

Selecting an HTML element

h1 {
    background-color: red;
}

The rule's selector will define which elements in the HTML document will have this rule's declarations applied.

CSS

Selecting an HTML element

p {
    text-align: center;
}

Select the element by its tag name

<p> 
    It's morphing time!
</p>

CSS

Selecting an HTML element

.box {
    width: 100px;
    height: 100px;
    background-color: green;
}

We don't just have to select by element type...

Custom rules can be written using the class selector. In order to apply a class, we add a class attribute to our HTML element.

CSS

Applying a class attribute

<div class="box">
    <p>I'm shaped like a box</p>
</div>

This is the class attribute.

A class is a way of grouping similar things together, like how cars and trucks are both automobiles. The class attribute is useful for styling and adding interaction to many elements at once.

CSS

Selecting an HTML element

.highlight {
    background-color: red;
}

<h1 class="highlight"> 
    Hello there! 
</h1>

Class selectors are denoted through dot ( . ) notation

CSS