Class materials

http://gdipgh.github.io/html-and-css-for-beginners

Beginning HTML and CSS

Class 1

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

We are here for you!
Every question is important
Help each other
Have fun

Welcome!

Tell us about yourself.

Who are you?
What do you hope to get out of the class?

Goals for the class

Week 1: Intro to HTML
Week 2: Intro to CSS
Week 3: More CSS & Page Layouts
Week 4: Advanced Topics

Goals for today

Introduction to web development
Introduction to HTML

Terms

Web design - The process of planning, structuring and creating a website.

Web development - The process of programming dynamic web applications.

World wide web consortium

Main international standards organization for the web
Founded by Tim Berners-Lee at MIT

HTML

HyperText Markup Language

markup language

Describes how to structure and display the content of a document

CSS

Cascading Style Sheets

CSS

Presentation and styling of the document

HTML + CSS

Structure + Style

HTML + CSS =

Browser

Program that renders content, including HTML & CSS, on the web
Allows users to view and interact with web sites

major Browsers

Chrome
Firefox
Internet Explorer
Safari
Opera

Google Chrome

Chrome developer tools

A toolkit that helps web developers build and debug web sites in Chrome

activity: tool check!

Open Chrome
Go to http://www.girldevelopit.com
Right click and inspect a page element

Text Editor

Program for editing a text-based files
HTML (.html) & CSS (.css) files are text- based
We use text editors to build web sites

Sublime Text

activity: tool check!

Create a working directory (folder) for your project
Open Sublime Text
Open your working directory in Sublime Text

Basic HTML Page


<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

Doctype

Document type declaration


<!DOCTYPE html>

Tells the browser what layout to use
It is required

HTML tag


<html>
</html>

All other elements go inside here

HEAD & title

The head contains metadata for the document


  <head>
    <title>Hello HTML</title>
  </head>

The title defines the title of the document

Body

The main content of the document


<body>
</body>

anatomy of the HTML Tag


<element artibute="value">content</element>

Start/open tag


<element artibute="value">content</element>

End/close Tag


<element artibute="value">content</element>

Attributes


<element artibute="value">content</element>

Content


<element artibute="value">content</element>

element


<element artibute="value">content</element>

paragraphs


<p>
  This is the first paragraph!
</p>
<p>
  This is the second paragraph!
</p>

This is the first paragraph!

This is the second paragraph!

Line breaks


<p>
  The White House<br>
  1600 Pennsylvania Ave.<br>
  Washington, DC 20500
</p>
<p>
  old pond...<br>
  a frog leaps in<br>
  water’s sound
</p>

The White House
1600 Pennsylvania Ave.
Washington, DC 20500

old pond...
a frog leaps in
water's sound

activity: Hello world!

Go to your text editor
Create index.html in project directory
Open in browser
Create basic page with Hello World!
Change the title to indicate this is your home page
Inspect the page using the developer tools

Basic HTML Page


<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

div

Generic container for content


<div>
  header content goes here
</div>
<div>
  main content goes here
</div>

Block element
Usually good for structuring page content

span

Generic container for content


<p>
  See Spot <span>run</span>!
</p>

Inline element
Usually good for styling text

block


<div>This</div>, <div>that</div>, and the <div>other</div>

This

that

, and the

other

inline


<span>This</span>, <span>that</span>, and the <span>other</span>

This, that, and the other

EM & Strong

Inline elements for marking text


<p>em is used to <em>stress emphasis</em>.</p>
<p>strong is used to give <strong>strong importance</strong>.</p>

em is used to stress emphasis
strong is used give strong importance

Headings


<h1>one</h1>
<h2>two</h2>
<h2>three</h2>
<h4>four</h4>
<h5>five</h5>
<h6>six</h6>

one

two

three

four

five

six

anchors/links


<a href="http://girldevelopit.com">
  Girl Develop It
</a>

Girl Develop It

Images


<img src="kitten.jpg" alt="kitten">

Images


<img src="kitten.jpg" alt="kitten">

kitten

image links


<a href="http://girldevelopit.com">
  <img src="gdi-logo.png" alt="Girl Develop It">
</a>

Lists


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Activity: ul for navigation

Go to http://www.girldevelopit.com
Inspect the navigation using the Chrome Developer Tools

HTML Comments

Comments are added inside 


<div>
    <!-- TODO: write copy for this section -->
</div>

Used to leave notes or explain behavior
Should be used sparingly

HTML references

Project requirements

Goal: Create a personal web site with articles

Project requirements

Who is your audience?
Things to include:
- Page title (e.g. your name)
- Navigation - on top and bottom of page
- An “about me” section
- Several articles

Activity: Sketch your site layout

Sketch your site layout
Take notes
Think about:
1. Content areas
2. Information hierarchy
3. Purpose and audience

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque felis at dolor sollicitudin pellentesque. Donec adipiscing posuere pharetra.

Cupcake Ipsum

Cake carrot cake wypas faworki carrot cake gummi bears cupcake wafer brownie. Pudding gummies cotton candy jelly. Pudding gummies croissant wypas

Activity: HTML site layout

Build on index.html
Reference your sketch
Use the filler text of your choice to mock content
Add real content when you are ready
Use HTML references (Mozilla Developer Network)