This is CodeSimba’s Web Design course, perfect for students ages 8+.
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