Intro to

HTML & CSS

Intro to

HTML & CSS

1. Download Sublime Text

2. Download Our Project

http://bit.ly/ladyhacks

https://www.sublimetext.com/3

Before we start the workshop:

  • Multi-channel commerce platform
  • Supporting entreprenurship
  • Enabling merchants to manage the back-end of their business:
    • Orders
    • Customers
    • Payment
    • Shipping
  • From "Mom-and-pop" to Tesla, Red Bull, Kylie Jenner

SHOPIFY

SHOPIFY

Our North Star

I'm Betty.

I started my journey into web development       3 years ago.

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!

MEET THE TEAM

Sarah

Stella

Jessica

BEFORE WE START ...

  • Don't be shy, ask for help :)!
  • Code-along or sit back & relax
  • Feel free to continue setting up your computers during the intro
  • The slide deck is available at:​

https://slides.com/bettymakes/ladyh​acks

  • Starting off slow but might be sprinting near the end 🏃

The Internet

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

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.

https://bettymakes.github.io/yorku-ladyhacks/ladyhacks.html​

INTRO

Let's get started!

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

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

 

HTML

A typical HTML tag

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

 

HTML

Elements Without Closing Tags

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

HTML

Attributes

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>

HTML

Attributes

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

HTML Shell

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

HTML

<head>

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

HTML

<body>

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

HTML

Add content to the <body>

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>

HTML

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

HTML

Common Element Types

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> 

HTML

CSS

Cascading Style Sheets

Rules that specify how your elements should appear in your document

HTML Only

HTML & CSS

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

CSS

What's next?

NEXT STEPS

PRACTICE.

NEXT STEPS

PRACTICE.

PRACTICE.

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

NEXT STEPS

What does JavaScript actually let us do!?

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:

  1. Codecademy
  2. CodeSchool
  3. Khan Academy

NEXT STEPS

Check out Shopify!

NEXT STEPS

betty.li@shopify.com

Friends don't let friends struggle ...

Give me a shout if you need a hand :)

NEXT STEPS

Made with Slides.com