HTML &

CSS
Workshop

      Drop me a line  -

      Got questions?

                                mina@bitmakerlabs.com

Welcome to MaRS!

      Contact us :)  -

                                  admissions@bitmakerlabs.com

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 // Web Design

Designers have become developers, developers have become designers

»

The “unicorn” doesn’t exist anymore (we’re all unicorns!)

»

 Designing for dynamic interfaces

»

Not static print layouts or billboards

»

Mobile devices have changed the game

»

Screen resolution and small devices

»

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.

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

HTML Shell

HTML 

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

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

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.

 

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>

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

Common Element Types

HTML

Inline text elements

Text wrappers

Content containers

List containers

<a>      <span>      <em>      <strong>

<p>      <h1> to <h6>      <blockquote>      <li>

<header>      <footer>      <main>      <section> <article>        <nav>          <aside>      <div>

<ul>      <ol> 

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.

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

What's next?

NEXT STEPS

PRACTICE.

NEXT STEPS

PRACTICE.

PRACTICE.

NEXT STEPS

Free Resources:

  1. Codecademy
  2. CodeSchool
  3. Khan Academy

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!

Copy of HTML & CSS Workshop

By Bitmaker

Source: bettymakes

Copy of HTML & CSS Workshop

Intro to HTML & CSS Workshop /// Bitmaker (Mina)

  • 1,314

More from Bitmaker