Introduction to HTML + CSS Workshop – Tools – HTML

View Github Repository Open presentation in a new window

makersquare

See all presentation from makersquare

Introduction to HTML + CSS Workshop – Tools – HTML

3 0

htx-html-css-workshop

An Introduction to HTML + CSS Workshop

On Github makersquare / htx-html-css-workshop

Introduction to HTML + CSS Workshop

Presented by Josh Medeski

http://j.mp/htxworkshop

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!

Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).

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

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

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

Sublime Text

http://www.sublimetext.com/

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

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

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/