Win a Free Class!

Join our email list for a chance to win

Web Development Level 1

Building Websites with HTML & CSS

You write HTML and CSS code to create webpages. In this class we’ll introduce you to what HTML and CSS are and how to code. We focus on best practices for structuring the content of your webpages with HTML and then styling the content with CSS.

Once you have the basics under your belt, you'll move on to real-world page layout. You’ll learn text and link styles, centered page layout, background images, CSS-based navigation, two-column layouts, forms, uploading files via FTP, and much more. We will provide you with all the content and prepared images for use in these projects but this training will essentially give you hands-on practice coding websites from scratch all the way through uploading them to make them live.

The course workbook can be completed in any code editor. In class, you can use either Sublime Text or Dreamweaver in Code View.

  • Learn how to layout pages. We start off simple and elegant, then get fancier later.

  • Learn to layout pages with text and images.

  • You’ll make rollovers that indicate interactivity.

  • Learn to create and style forms.

What You’ll Learn

Section 1
Coding Basics: Intro to HTML Syntax

Topics

  • HTML, Head, Title, and Body Tags
  • Headings, Paragraphs, and Lists
  • Strong and Em Tags
  • The Doctype Declaration (DTD)
  • The Lang Attribute
  • Meta Tag: the Unicode Character Set
Coding Links

Topics

  • Anchor Tags and Hrefs
  • Linking to Pages Within a Website
  • Linking to Other Websites
  • Opening a Link in a New Browser Window
Adding Images

Topics

  • The Image Tag and Source Attribute
  • Using the Width, Height and Alt Attributes
  • Using Horizontal Rule
  • The Break Tag

Upcoming Classes

Price: $975 Click for Discounts

  • 18 hours of Hands-On Training
  • Custom Written Workbook Included
  • Mac or PC

We Literally Wrote the Book!

Web Development Level1 Workbook

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

Section 2
Intro to Cascading Style Sheets (CSS)

Topics

  • The Style Tag
  • Tag Selectors
  • Class Selectors
  • The Class Attribute
The Div Tag & Basic Page Formatting

Topics

  • Div Stands for Division
  • Setting a Div Width
  • Adding Padding Inside a Div
  • CSS Background-Color
  • CSS Borders
  • CSS Shorthand and the DRY principle
Revolution Travel: Real World Layout

Topics

  • Content Structure with Multiple Divs
  • Assigning IDs to Divs
  • Adding Images
  • Organizing Content Into Divs
  • Tagging Headings
The Box Model and Background-Images

Topics

  • Using ID Selectors
  • The Background-Image Property
  • What Is the Box Model?
  • Padding and Margin Spacing
  • Setting Div Width
  • Setting Page Defaults for Font Styles
Section 3
Floats and Images

Topics

  • Adding Images
  • Adding an Image Title
  • Floating Images
  • Class Selectors
  • Margins
Links

Topics

  • Anchor Tags and Relative URLs
  • External Links (Using the Target Attribute)
  • Spambot Resistant Email Links
  • Linking Within a Page (Named Anchors)
Styles for Links and Navigation

Topics

  • Styling the Anchor Tag
  • Refining your Styles: the Hover Pseudo-Class
  • Creating CSS Navigation Styles
  • Using Descendent (Nested) Selectors
  • Managing White-Space & Wrapping Issues
Section 4
Shared CSS & Centering Content

Topics

  • Moving Embedded Styles into an External CSS File
  • Sharing Styles Across a Site
  • Text-Align
  • Centering Divs
  • Fixing “Page Shift” with Overflow-y
NY Solar: More Complex Page Layout

Topics

  • Planning Out a Two-Column Layout
  • Content Structure with Multiple Divs
  • Assigning IDs to Divs
  • Adding Images
  • Organizing Content Into Divs
Two-Column Layout: Floats and Clearing

Topics

  • Linking to an External Style Sheet
  • Using Floats to Position Divs
  • Using a Content Wrapper Div
  • Clearing Floated Elements
More Box Model: Margins & Padding

Topics

  • Margins Vs. Padding
  • CSS Shorthand: TRBL

Section 5
NY Solar Navigation Styles

Topics

  • Styling the Anchor Tag
  • Styling the Hover Pseudo-Class
  • Using Descendent Selectors
  • More CSS Borders
  • Managing White-Space & Wrapping Issues
NY Solar Heading Styles

Topics

  • Fixing Spacing Around Images
  • Moving Borders with Padding
Fine-Tuning Lists, Paragraphs and the Footer

Topics

  • More Descendent (Nested) Selectors
  • Styling Lists
  • Organizing Styles
Using Browser Developer Tools

Topics

  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements Tab
  • Enabling, Disabling and Editing CSS in the DevTools
  • Using DevTools to Fine-Tune Your CSS
Section 6
FTP Uploading to a Live Website

Topics

  • What is FTP?
  • Using an FTP Client
  • Going Live
Creating a Form

Topics

  • The Form Tag
  • The Input and Label Elements
  • Name and ID Attributes
  • Fieldset and Legend Elements
  • Select, Option & Optgroup
  • Input Types: Text, Checkbox, Radio & Submit
Submitting Form Data to a Server-Side Script

Topics

  • Reviewing the PHP Script
  • Setting the Form Action
  • Uploading and Testing the Form