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!

Introductions

I would like to get to know everyone. We will go around the room have everyone state the following items:

1. My name is...
2. I'm taking this class because...
3. If someone made a movie of your life would it be a:
   • Drama
   • Comedy
   • Romantic-Comedy
   • Action Film
   • Science Fiction
   • Other

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

NOT on the Agenda

Here's is what you are NOT going learn in today's workshop:

• How to build a website from scratch
• How to create WordPress sites (or any other CMS)
• How to fix your current website (or computer)

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

Sublime Text

Codepen

Ready to get started?

How the Web Works

How People Access the Web

We all access the web in different ways, here is some terminology.

• Web Server
• Device (Computers, Tablets, Mobile)
• Other (Screen Readers, TVs, etc...)

How Websites are Created

1. Files are received by the device
2. The web browser interprets the code
3. Static Files (HTML & CSS)
4. Content Management Systems (CMS)

HTML

Hyper Text Markup Language

HTML Structures the Web

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

Sample of HTML

Sample of HTML

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

CSS

Cascading Style Sheet

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

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

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

Practice: Let's see what Foundation can offer!

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

Project Time!

What You are Making

You will be creating a resume website today.