Web Design

HTML & CSS Overview - CodeCademy

Set Up Your CodeCademy Account - Write Down Login Information
Go to Language Skills Section of CodeCademy
Quiz: HTML and CSS Quiz

Complete

Sign Up for CodeCademy - LINK

Tutorial - W3Schools - Excellent Resource - LINK

  • HTML Fundamental (Structure)
  • HTML Content (Common HTML Elements)
  • CSS Fundamental (CSS Setup, Basic Structure, and Syntax)
  • Styling with CSS (Colors, Fonts)
  • Organizing HTML and CSS (Classes, ID's, and Div's)
  • CSS Box Model (Understanding Box Model -- Borders -- Content -- Changing the Box Model)
  • CSS Positioning (Layout)
  • Images (Adding Images)
  • HTML Tables (Tables)

Introduction - The Dreamweaver CC User Interface

Assignment: Complete User Interface Questions
Quiz: Complete User Interface Quiz

  • Explore the Dreamweaver Interface
  • Understanding the Application Frame
  • Customizing Dreamweaver Behavior
  • Create a Saved Workspace
  • Explore the Dreamweaver Document Window
  • Preview Files in Dreamweaver Live View
  • Preview a File in a Browser
  • Remove a Site from Dreamweaver
  • Synchronizing Settings

Project #1 - Bistro Site Organization

Assignment: Complete Project Review Question (#1 - #10)
Assignment: Complete Bistro Site Organization (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete Bistro Site Organization Quiz

  • Exploring Site Structure
  • Organizing the Site Navigation
  • Naming and Titling Documents
  • Making Files Public

Project #2 - Digital Book Chapter

Assignment: Complete the Project Review Question (#1 - #10)
Assignment: Complete Digital Book Chapter (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the Digital Book Chapter Quiz

  • Preparing the Workspace
  • Working with Semantic Markup
  • Working with Special Characters
  • Creating Lists
  • Attaching an External CSS File

Project #3 - Arts Council Web Site

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete the Arts Council Website (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the Arts Council Website Quiz

  • Placing Static Foreground Images
  • Extracting Photoshop Assets

Project #4 - Museum CSS Layout

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete the Museum CSS Layout (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the Museum CSS Layout Quiz

  • Creating Layouts with Style Sheets
  • Working with a Template
  • Using CSS to Control Content

Project #5 - Music Festival CSS Site

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete Music Festival CSS Site (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the Music Festival CSS Site Quiz

  • Working with Classes
  • Creating Online Forms

Project #6 - Kayaking CSS3 Site

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete the Kayaking CSS3 Site (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the Kayaking CSS3 Site Quiz

  • Working with CSS3 Selector
  • Working with Web Fonts
  • Adding Video in HTML5
  • Creating a CSS3 Image Gallery

Project #7 - jQuery Mobile Site

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete the jQuery Mobile Site (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Needed)
Quiz: Complete the jQuery Mobile Site Quiz

  • Creating Mobile Friendly Website
  • Adding jQuery UI elements
  • Creating Javascript

Project #8 - Bootstrap Responsive Page

Assignment: Complete the Project Review Questions (#1 - #10)
Assignment: Complete the Bootstrap Responsive Site (Upload to Web Server)
Assignment: Complete the Portfolio Builder Project (No Brief Explanation Neede)
Quiz: Complete the Bootsrap Responsive Site Quiz

  • Working with Bootstrap
  • Creating CSS3 Transitions

Final Exam Project - Fan Site

  • Must Be a Bootsrap Responsive Page
  • Must Use JavaScript Behaviors
  • Must Have CSS3 Transitions
  • Must have a External CSS Page Attached
  • Must Include a Contact Form
  • Must Include a Image Carousel
  • Minimum of 3 Pages

Course Syllabus

Solutions