Advanced Web Design

Enroll in this Course

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.

This course does not have any synchronous class meetings, but students may schedule one-on-one virtual meetings directly with the instructor to answer questions or concerns.

Students may be invited to interact in CTY community spaces that include students and instructors and potentially specially invited guests that are not enrolled in their course. Students may be invited (but not required) to publicly post their work on outside sites (e.g., Scratch project database, YouTube, etc.). Student contributions (e.g., projects, forum posts, etc.) may remain in the course after the student completes the course. These artifacts may be preserved to showcase student work or to continue important conversations. Students must upload the files for their website project to the web server so that their site can be viewed from the Internet.

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 which can be used for instructor-student communication if the student has any questions about the course or curriculum. The classroom works on standard computers with the Zoom desktop client and also tablets or handhelds that support the Zoom Mobile app. Students will need a computer with the Zoom desktop client installed to watch any 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."