Web Design Boot Camp

HTML & CSS

Introduction

Introduction (.pdf)

Web Servers

Local Server: Testing
Tour of local server
WAMP (PC), MAMP (MAC) , XAMPP (BOTH)
Web Server: Live Content
Tour of a live web server
Web Host vs Domain Name
Domain Names
An address for you website
Think of it like your street address
Transfering Domain Names
Domain registrar
Who is
Web Hosting
The space where your website is located
Think of it like your house or apartment
Hosting Companies
A Small Orange
Media Temple
1 and 1
Go Daddy
Web Publishing Workflow
Creat files locally
Upload files via FTP, HTTP, or Web Disk

Web Content

Web Content
Blogs, Templates, and Custom Built
File Extensions
.htm, .html, .shtml, .php, .jsp, .asp, .aspx, .cfm

Text Editors

Notepad ++
Notepad 2
Coda
BBEdit
TextMate
Dreamweaver
Aptana
1st Web Page
Create and publish an index file to the local server
Start the local server
Create an index.html file
Place your name around H1 tags
View you web page through the local server

Doctypes & Validation

Doctype (.pdf)
Doctype Activity
Open Dreamweaver
Create 2 New Files
Select Trasitional for one and Strict for the other
Identify 2 ways to valide

What is the doctype for HTML?

Web Design Ground Rules: Intro to Web Standards

Web Standards Rules (.pdf)

Layout Translation Strategies

Design to Web Translations (.pdf)
Translation Activity
Translate a newspaper article into semantic markup plan
Break into Pairs
Place the appropriate tag next to the content in the newspaper article
Compare with my semantic markeup plan

The objective is to gain a better understanding of how to break down content into semantic markup

Basic Tags

  • <h1> - <h6>
  • <p>
  • <hr />
  • <li>
  • <img />
Plotting Mark Up Activity

Using your semantic mark up plan, plot out your mark up in index.html file.

Download and use the Newspaper Copy

Open Dreamweaver
Manage your site
Setup folder structure
Create index.html
Uset this code to start
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Place all content inside of the body tag
Add appropriate markup
Misc
favicons
Meta Description

The objective is to practice and become more familiar with plotting basic mark up.

Example of Completed Markup (zip) Example of Completed Markup (html)

Anatomy of a HTML Document

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>

File Management

Find what works for you
There's more to manage than just html files
My current file management method
It will mostly likely evolve, as technology and client needs change
Version-Control
Sub Version (SVN)
Git
Sourcesafe
Tortise SVN

Semantic Structure

Describe the Content
Describe the Structure
<div> and id's
Cannot duplicate id's
Semantically Named
<div id='header' >
Keep it simple
div-itis
class-itis
HTML5 Tags
The truth about HTML5

HTML5 Tags

  • header
  • nav
  • section
  • article
  • aside
  • footer
  • mark
Semantic Architecture

Add semantic architectural markup to the index.html file from the semantic mark up exercise. Example of semantic architecture plan

JavaScript

What is JavaScript?

What is JavaScript? (.pdf)

How to use JavaScript?

JavaScript Syntax Slides (.pdf) Language Basics (.pdf)

Applying Basic JavaScript

Bare Bones
Loading
Alert
Alert + Click Event
Output Basics
Target via INNERHTML
Ouptput + Click Event
Style Manipulation
Target style
Assign Class via Click Event
Practice Basic JavaScript Commands

Programming

Functions (.pdf) Conditionals (.pdf)
Basics
Variables
Functions
Conditionals
Build a Toggle

jQuery

jQuery Basics
What is jQuery?
What is it used for
jQuery animations and toggles
jQuery documentation
jQuery in Practice

Wordpress

Wordpress Framework

Wordpress Interface

  • Public View
  • Admin View
  • Admin Control Panel Tour

Creating a Post

  • Post Creation
  • Pulic and private viewing
  • Tags
  • Categories
  • Edit HTML
  • Insert Media

Pages and Sidebars (Widgets)

  • Create a Page
  • Pages vs Posts
  • Sidebar modifications

Settings

  • General
  • Permalink settings
  • Misc Settings

Appearance

Custom Theme Development

Template Design Concepts
HTML & CSS are still important
Container & content replacement
Basline Requirments
What is all of this stuff
No really these are the files you need to get started
File path weirdness
Using Wordpress Code
Stylesheet Path
Handy Wordpress Function - bloginfo()
Wordpress Loop

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<!-- Display the Post's Content in a div box. -->
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Navigation
Includes
Separate files
More Input...
Documentation
Refer to the Template Site
Check out other templates
Common problems
My images won't upload through wordpress
My permalinks won't change

Resources

Read these articles!
Read this First
http://codex.wordpress.org/Theme_Development
Breaking up the Templates
http://codex.wordpress.org/Stepping_Into_Templates
Template Hierarchy
http://codex.wordpress.org/Template_Hierarchy
The Loop - This is what makes the blog work
http://codex.wordpress.org/The_Loop
Function Reference
Function Reference
Loop PGH