Intermediate Web Design

Course	Intermediate Web Design
Course Code	CEDA 332
Hours	24 ( 8 3-hour sessions, or 6 4-hour sessions)
Prerequisite	CEDA 232

course description                                                 

Building on the fundamental skills introduced in CEDA232 Introduction to Web Design, this course explores additional modern web design and development tools and techniques. Topics include modern JavaScript, advanced selectors, flexbox layout, preprocessors, transitions & animation, build tools, CSS blend modes, and more. At the conclusion of the course, students will be able to effectively create responsive, complex web applications.

course learning outcomes

By the end of the course, students should be able to:

1. Write effective CSS Selectors based on a range of DOM relationships and patterns.
2. Employ the CSS Flexible Box spec to responsively accommodate complex HTML output.
3. Effectively use JavaScript to respond to events and process data.
4. Utilize JavaScript and CSS transitions, transforms, and animation to create complex responsive layouts and interactions.
5. Author efficiently using preprocessors.

 

schedule of instructional delivery

module one

• Advanced Selectors
• Emmet
• JavaScript: Variables, Data Types

exercises

• Fela: Advanced Selectors
• Emmet Lab Exercise
• Emmet: HSL “Simple” Example
• Advanced Emmet Exercise (optional)

module two

• Flexbox 1
• JavaScript: Arrays & Objects

exercises

• Photo Blog Layout

module three

• Flexbox 2
• JavaScript: Conditions & Loops

exercises

• tba

module four

• transitions
• animations
• JavaScript: DOM Changes / Form Events

exercises

• Basic Transitions Exercise
• Walrus Article Layout Reconstruction

module five

• JavaScript: Form Events

exercises

• CSS Blend Modes Tester App

module six

• SASS: variables / partials / nesting
• Build Tools: Gulp.js

module seven

• WordPress Theme Build 1

module eight

• WordPress Theme Build 2