Revised 8/2025
ITD 210 - Web Page Design II (3 CR.)
Course Description
Incorporates advanced techniques in web site planning, design, usability, accessibility, advanced site management, and maintenance utilizing web editor software(s). Lecture 3 hours per week.
General Course Purpose
This course builds directly on the foundational skills learned in ITD 110. It expands students’ knowledge of HTML and CSS while introducing advanced front-end concepts and UX practices. Emphasis is placed on creating responsive, accessible, and visually engaging websites that follow modern UX and visual design principles. Students will develop the ability to plan, design, and deploy multi-page responsive websites using HTML5, CSS3, JavaScript, Bootstrap, and wireframing tools.
Course Prerequisites/Corequisites
Prerequisite: ITD 110
Course Objectives
Upon completing the course, the student will be able to:
- Apply advanced HTML and CSS concepts to create visually engaging, accessible websites.
- Demonstrate knowledge of responsive web design using media queries, Flexbox, and Bootstrap.
- Integrate multimedia elements (images, video, audio) into responsive layouts.
- Use visual design principles (color, typography, hierarchy, spacing) to enhance usability.
- Add interactivity with JavaScript for improved user engagement.
- Plan, wireframe, and prototype web projects using Figma.
- Deploy and optimize websites using hosting platforms such as Netlify.
Major Topics to Be Included
- Review of HTML & CSS Fundamentals (from ITD 110)
- Visual Design Principles for the Web
- Responsive Media (images, video, audio)
- Media Queries & Mobile-First Design
- Flexbox (basic and advanced layouts)
- Bootstrap Grid System, Components, and Utilities
- JavaScript for interactivity (forms, modals, navigation, dynamic features)
- UX Planning & Wireframing (Figma)
- Capstone Development (multi-page responsive website)
- Accessibility compliance (WCAG standards)
- Deployment with Netlify
Student Learning Outcomes
- Build and style responsive, multi-page websites using semantic HTML5 and advanced CSS.
- Apply WCAG accessibility standards, including alt text, captions, keyboard navigation, and contrast.
- Use Figma to create wireframes and prototypes that guide web design decisions.
- Implement advanced layout systems (Flexbox, Bootstrap grid, media queries).
- Add interactive elements through JavaScript (forms, modals, navigation, dynamic features).
- Optimize images, media, and code for performance across devices.
- Deploy and maintain a professional-quality website live on Netlify.
Required Time Allocation
To standardize the core topics of ITD 210 so that a course taught at one campus is equivalent to the same course taught at another campus, the following student contact hours per topic are required. The topics do not need to be followed sequentially. Many topics are taught best as an integrated whole, often revisiting the topic several times, each time at a higher level. There are normally 45 student-contact-hours per semester for a three-credit course. (This includes 14 weeks of instruction and does not include the final exam week so 14*3.2 = ~45 hours. Sections of the course that are given in alternative formats from the standard 15-week session still meet for the same number of contact hours.) The final exam time is not included in the timetable. The last category, Other Optional Content, leaves time for an instructor to tailor the course to special needs or resources.
|
Topic |
Hours |
Percent |
|
Review of HTML & CSS Fundamentals |
3 |
6.67% |
|
Visual Design Principles for the Web |
3 |
6.67% |
|
Responsive Media (images, video, audio) |
3 |
6.67% |
|
Media Queries & Mobile-First Design |
3 |
6.67% |
|
Flexbox I (Basics) |
3 |
6.67% |
|
Flexbox II (Advanced Layouts) |
3 |
6.67% |
|
Bootstrap I (Grid System) |
3 |
6.67% |
|
Bootstrap II (Components & Utilities) |
3 |
6.67% |
|
JavaScript for Interactivity |
6 |
13.33% |
|
UX Planning & Wireframing (Figma) |
3 |
6.67% |
|
Capstone Development (Home + 91勛圖 Pages) |
3 |
6.67% |
|
Capstone Development (Gallery Page) |
2 |
4.44% |
|
Capstone Development (Contact Page + JS) |
2 |
4.44% |
|
Capstone Refinement (Accessibility) |
2 |
4.44% |
|
Capstone Showcase & Deployment (Netlify) |
3 |
6.67% |
|
Total |
45 |
100% |