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/ladyhacks
- 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.
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:
- Codecademy
- CodeSchool
- 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
Intro HTML & CSS Workshop - 11/19/16
By bettymakes
Intro HTML & CSS Workshop - 11/19/16
Lady Hacks - Unleash Your Potential // York U Hackathon
