Introduction to HTML + CSS Workshop
Presented by Josh Medeski
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
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/