Skip Navigation

We are unable to take calls at this time, though your questions are important to us. Please send them to ctyinfo@jhu.edu for the quickest response. Thank you.

 
Home / Online Programs / Course Catalog / Computer Science & Technology

Advanced Web Design

Apply Now Arrow Image. Placement Test Available
Apply Now Arrow Image. Enroll in this Course

Open to: Grades 6-12

Eligibility: CTY-level or Advanced CTY-level math or verbal score required

Prerequisites: Completion of Intro to Web Design or equivalent (placement test available)

Course Format: Individually Paced

Course Length: Typically 3 months

Course Code: WD2

Course Description

Description

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

Topics include:

  • Using the new HTML5 and CSS3 features
  • 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. At the end of the course students will submit a comprehensive final examination.

Materials Needed

There are no required materials for this course.

Detailed Course Information

Course Details

Introduction

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

Web Design Guidelines

  • Basic & Advanced Web Design 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

 

Technical Requirements

This course requires a properly maintained computer with high-speed internet access and an up-to-date web browser (such as Chrome or Firefox). The student must be able to communicate with the instructor via email. Visit the Technical Requirements and Support page for more details.

Zoom online virtual classroom
This course uses an online virtual classroom for discussions with the instructor. The classroom works on standard computers with the Zoom desktop client and also tablets or handhelds that support the Zoom Mobile app. Students who are unable to attend live sessions will need a computer with the Zoom desktop client installed to watch recorded meetings. The Zoom desktop client and Zoom Mobile App are both available for free download.

Most course lectures may be viewed on mobile devices, but in some cases assignments and quizzes must be completed on a desktop or laptop computer.

Chromebooks are not recommended due to required downloading of specialized software.

This course uses Respondus LockDown Browser proctoring software for designated assessments. LockDown Browser is a client application that is installed to a local computer. Visit the Respondus website for system requirements.

While Chromebook can be used to progress through the course, all exams must be completed on a PC or Mac.

 

 

CTY Online Programs Computer Science - Comments and Feedback from Students, Parents, and Teachers

Reviews

Quotes:

"CTY Online Programs has put together a wonderful introduction to web design course. The instructor was very responsive and patient. The course was clear and well thought out. My son has had a whole new world opened up to him. I believe it has changed him for the better, specifically as a thinking person, especially in relationship to computers."

"My son’s instructor has a great ability to interact with kids. He was able to teach a technical subject to my son amazingly well. He kindled interest in the subject. He is very dedicated and provided good feedback."

"The instructor helped my son learn how to independently complete the course successfully. She gave helpful and timely feedback and guidance to me and my son. By the end of the course, my son was corresponding with the instructor and managing the course all on his own-- what a great skill to learn above and beyond material she helped him through, which he loved. He can't wait to take the next course."