Advanced Web Design

This course introduces students to advanced concepts and skills in web development.

Topics include:

  • Using the new HTML5 and CSS3 features and Javascript
  • The importance of web page & browser validation
  • Selective styling with CSS
  • Implementing page enhancements & visual effects with CSS
  • The box model
  • Building responsive web pages
  • Advanced techniques for page layout
  • How to incorporate client-side scripting using JavaScript
  • Implementing drag & drop capabilities

Students will also complete numerous assignments requiring application of advanced techniques, and will develop a fully functional website as a course project.

The Advanced Web Development course assumes students have mastered all content in the Web Development course.

Course Details

Introduction

  • Introduction to HTML5 & CSS3
  • Validating Web Page & Browser Compliance
  • Testing & Debugging Tips

Web Development Guidelines

  • Basic & Advanced Web Development Principles
  • Designing Website Organization
  • Designing Website Structure
  • Designing Website Navigation
  • More Website Design Tips

Working With HTML5 Page Layout and APIs

  • Semantic Page Layout in HTML5
  • Additional HTML5 Page Markup
  • Directly Editing Web Page Content
  • Spell-Checking User Content
  • Spell-Checking User Content File
  • The Summary & Details Layout Elements

Working With CSS3 – Selective Styling

  • Selective Styling with CSS
  • Inheritance & Cascading Rules
  • Styling Page Elements Using Combinators
  • Styling Page Elements Using Pseudo-Classes
  • Styling Page Elements Using Pseudo-Elements
  • Selective Styling Based On Attributes
  • Selective Styling Based On Media Type

Enhancements & Visual Effects with CSS

  • Implementing Drop Shadows
  • Gradients & Rounded Borders
  • Opacity & Multiple Backgrounds
  • Transforming Object Dimensions
  • CSS Transitions
  • CSS Animations

Visual Design & Implementation – Part 1

  • The Box Model – Part 1
  • The Box Model – Part 2
  • Styling Page Element Width & Height
  • Positioning Page Elements

Visual Design & Implementation – Part 2

  • Floating Page Elements
  • The Z-Index
  • The Flexible Box Model
  • Multi-Column Layout

Building Responsive Web Pages

  • Introduction to Responsive Page Design
  • Making Images & Media Flexible
  • Designing Flexible Layouts
  • Media Queries
  • A Responsive Web Page Design Strategy

Introduction to Client-Side Scripting – Part 1

  • Introduction to JavaScript
  • Comments & Code Placement
  • Variables & Functions
  • Making Decisions
  • Looping Statements
  • The Document Object Model (DOM)

Introduction to Client-Side Scripting – Part 2

  • Events & Event Handlers
  • The Document Object Model (DOM)
  • Using Map & Geolocation Features
  • Using Drag & Drop

Going Live With Your Website