HTML &

CSS
Workshop

Drop me a line -

Got questions?

betty@bitmaker.co

Welcome to Bitmaker!

admissions@bitmaker.co

I'm Betty.

I started my journey into web development 3 years ago with Bitmaker!

Since then, I've worked with various startups as a front-end web developer.

Admittedly, it was an uphill battle. This techno-mumbo-jumbo didn't come naturally.

But I've gone on to build some really cool things!

If I can do it, anyone can do it :D!

The Internet

INTRO

INTRO // The Internet

A connection of computers through a network

Tim Berners-Lee invents the World Wide Web in 1990

50 websites exist by 1993

Wikipedia, Yahoo, Ebay, Hotmail, Craigslist, Paypal, Youtube, Myspace, Twitter, Facebook, etc. etc...

1,000,000,000+ websites by 2014

More than just pictures of cats

INTRO // The Industry

According to Robert Half Technologies (International technology recruiter), in Canada the following are the average salaries for key technology positions in 2014:

Web Designer: $69,000 - $95,250 (up 5.8%)

Sr. Web Developers: $89,750 - $116,000 (up 5.9%)

Chief Technology Officer: $138,250 - $198,500 (up 5.2%)

Minimal barrier to entry for those with an entrepreneurial spirit

It’s a great time to be in web technology!

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

Browser

I'll be using Google Chrome

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

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

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

http://bitmakerlabs.github.io/html-workshop/

INTRO

Let's get started!

INTRO // Getting 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

bitm.kr/1hmaPta

HyperText Markup Language

HTML

HTML HISTORY

HTML

Invented by Sir Tim Berners-Lee
Created the World Wide Web in 1990
Wanted to share academic papers in a digital format

A language used to describe the content and structure of our documents

HTML

Think of HTML as ....

Let's take a deeper dive into an HTML tag

HTML

A typical HTML tag

HTML

<p>Content</p>

The tag above represents a paragraph

A typical HTML tag

HTML

<p>Content</p>

This is the opening tag.

It always starts with a tag name ('p' in this case).

HTML tags always start with a < and end with a >

A typical HTML tag

HTML

<p>Content</p>

This is the closing tag.

Most (but not all) HTML tags have a closing tag.

Closing tags always start with a forward slash ( / )

followed by the tag name.

A typical HTML tag

HTML

<p>Content</p>

This is the content of the tag.

The content appears between the opening and closing tags. This is the content that will appear on your page.

Elements Without Closing Tags

HTML

Some tags don't have closing tags.

Tags such as image do not enclose any content

(in the case of an image, it points to the location of a file) ...

So it doesn't need an opening and closing tag.

<img src="picture.jpg" />

Note: the / at the end is optional

Attributes

HTML

This is an example of an attribute.

They provide further description of the content or purpose of the tag. Attributes are always in the form of key="value"

<a href="http://www.google.ca">
  Google Please!
</a>

Attributes

HTML

Certain attributes may only have use for specific tags.

In the case above, we used "href" which is very specific to the "a" tag. The "src" attribute is needed by the "img" tag. If these attributes were used on a paragraph, they would be ignored.

<a href="http://www.google.ca">
  Google Please!
</a>

<img src="picture.jpg" />

HTML Shell

HTML

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		
	</body>
</html>

Hierarchy In HTML

HTML

<section>
  <p>
    Some text in a paragraph.
    <a href="http://www.cbc.ca">CBC</a>
  </p>
</section>

HTML tags can be nested inside on another.

HTML is represented as a tree. That means you can put tags inside other tags as their content. The outer tag is the parent and the inner tag(s) are the children.

<head>

HTML

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		
	</body>
</html>

Can be though of as the brain of the document

Its properties are not part of the physical layout of the page

Holds all of the properties like the document's title as shown here

<body>

HTML

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		
	</body>
</html>

Represents the area from the top left corner of our page, to the bottom right

Holds the physical structure of the page, much like our own body

All of our work today will be done here!

Add content to the <body>

HTML

We write elements (content wrapped in tags) to the document's body

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<p>Content</p>
	</body>
</html>

Common Element Types

HTML

Inline text elements

Text wrappers

Content containers

List containers

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

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

What's next?

NEXT STEPS

PRACTICE.

NEXT STEPS

PRACTICE.

NEXT STEPS

Once you're comfortable with HTML & CSS ... move on to learn Javascript!

NEXT STEPS

You might feel like this ...

NEXT STEPS

But if you keep working hard, you'll be a boss in no time!

NEXT STEPS

Online Resources:

Codecademy
CodeSchool
Khan Academy

NEXT STEPS

Come code along with us :)!

Front End Web Development (Part-time)

Web Development Immersive (Full-time)

NEXT STEPS

betty@bitmaker.co

Friends don't let friends struggle ...

Give me a shout if you need a hand :)

HTML &

CSSWorkshop

Welcome to Bitmaker!

I'm Betty.

The Internet

Tools We'll Be Using

Browser

Text Editor

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

Let's get started!

HTML HISTORY

A language used to describe the content and structure of our documents

Let's take a deeper dive into an HTML tag

A typical HTML tag

A typical HTML tag

A typical HTML tag

A typical HTML tag

Elements Without Closing Tags

Attributes

Attributes

HTML Shell

Hierarchy In HTML

<head>

<body>

Add content to the <body>

Common Element Types

Cascading Style Sheets

CSS Syntax

Declaration >> property: value;

Selecting an HTML element

Selecting an HTML element

Select the element by its tag name

Selecting an HTML element

Applying a class attribute

Selecting an HTML element

Class selectors are denoted through dot ( . ) notation

What's next?

PRACTICE.

PRACTICE.

PRACTICE.

Once you're comfortable with HTML & CSS ... move on to learn Javascript!

You might feel like this ...

But if you keep working hard, you'll be a boss in no time!

Online Resources:

Come code along with us :)!

betty@bitmaker.co

Friends don't let friends struggle ...

CSS
Workshop