Introduction to HTML + CSS Workshop

Presented by Josh Medeski

http://j.mp/htxworkshop

Jimmy Fallen saying HAAAAAAY

Welcome!

Thank you for coming! We are so glad you are interested in learning something new. Today is going to be interesting, simple, and FUN!

Workshop Agenda

Here's is what I want you to learn in today's workshop:

  • How to STRUCTURE a web page using HTML
  • How to STYLE a web page using CSS
  • How to MANIPULATE a web page using the INSPECTOR
  • How to BUILD a web page quickly with a FRAMEWORK
Guy raising his hand

Please Ask Questions

We will be covering a lot of material, so please ask for help if you need help with anything or need clarification.

Tools

Before we begin, there are some tools and resources we will need.

Google Chrome

Google Chrome

http://www.google.com/chrome/
Sublime Text

Sublime Text

http://www.sublimetext.com/
animated picture of an old building be built

HTML

Hyper Text Markup Language

HTML Structures the Web

Just like a newspaper, the web also needs structure (titles, columns, images, etc...).

Picture of a newspaper and website showing the same content

Sample of HTML

HTML code sample

Sample of HTML

Laptop displaying HTML sample

Elements

HTML uses elements to describe the structure of pages

An element is composed of a opening tag, content, and a closing tag.

Opening Tag

The character(s) defines the tags purpose.

Closing Tag

Tag Attributes

Attributes add extra information to an element. They always appear with the opening tag.

HTML, HEAD, TITLE, BODY

Every web page is structured with the following elements.

Practice: Your First Web Page

Open Sublime Text and re-create the following content:

When you are done, open the file with Google Chrome

Congrats gold stars for everyone!

HTML Summary

  • HTML creates structure for the web (think newspapers)
  • HTML is made up of elements
  • HTML elements have an opening and closing tags
  • HTML tags can include attributes
  • HTML is made up of html, head, title, and body elements
Pink Panther Painting

CSS

Cascading Style Sheets

CSS Styles the Web

Just like the toolbar in Microsoft Word, CSS allows you to change the look and feel of a web page.

Sample of CSS

Sample of CSS

CSS Selectors

CSS associates rules with HTML elements.

CSS Declarations

The property indicates what aspect you want to change and is specified with the value.

CSS Works in Boxes

CSS Box

Practice: Styling a Web Page

http://j.mp/htxcss

Congrats you're so stylish!

CSS Summary

  • CSS creates STYLE for the web (think Word)
  • CSS is made up of SELECTORS
  • CSS selectors have DECLARATIONS
  • CSS declarations have PROPERTIES and VALUES
  • CSS works in a BOX
Sherlock Holmes

Inspector

Google Chrome Web Inspector

Read and Manipulate the Code on ANY Website

Practice: Let's Dive Right In!

Congrats you're a pro!

Inspector Summary

  • The inspector works on ANY website
  • The inspector VIEWS the code
  • The inspector can MANIPULATE the code
Infinite loop of legos being built

Framework

Building Blocks for the Web

Pre-Written Code

A FRAMEWORK is a collection of pre-written code to help you create a project quickly.

What FEATURES do most websites have in common?

*This is NOT rhetorical.

Buttons

Grids

http://foundation.zurb.com

Practice: Let's see what Foundation can offer!

http://j.mp/htxframework

Congrats you're a master builder!

Framework Summary

  • A framework is PRE-WRITTEN CODE
  • A framework help you get STARTED
  • A framework keeps everything CONSISTENT

Questions & Answers

Thanks!

We Create Developers:
Learn more at http://www.makersquare.com/

Learn more about our program