Clinical Professor, School of Information
Web Design for Everybody Capstone
What You'll Learn
- Create a series of wireframes for your site or portfolio.
- Implement concepts from this series that demonstrate the ability to apply web design theory or practice.
6 Modules
30 Hours
5 hrs per module (approx.)
Rating
About Web Design for Everybody Capstone
The capstone will develop a higher-quality web portfolio. Students will demonstrate the ability to design and implement a responsive site for a minimum of three platforms. Adherence to validation and accessibility standards will be required. The evolving student implementations will be reviewed each week by capstone peers and teaching assistants to make sure that the student keeps up with the agenda of the course.
Upon completion of this course students will feel comfortable creating and/or updating existing front-end sites, utilizing existing frameworks, and testing sites for accessibility compliance.
This course is only open to students who have completed the first four courses in the Web Design for Everybody specialization: Introduction to HTML5, Introduction to CSS3, Interactivity with JavaScript, and Advanced Styling with Responsive Design.
Skills You'll Gain
- Cascading Style Sheets (CSS)
- CSS Frameworks
- Pure JavaScript
- Responsive HTML
- Responsive Web Design
- Web Accessibility Initiative
- Web Accessibility Standards
- Web Design
What You'll Earn
- Certificate of Completion:
- Certificates of completion acknowledge knowledge acquired upon completion of a non-credit course or program.
Welcome Message
Welcome to the Web Design for Everybody Capstone, the culminating course in the Web Design for Everybody series. Learners design and implement a responsive, accessible web portfolio, receiving iterative peer feedback while demonstrating mastery of modern front-end web design practices.
This abbreviated syllabus description was created with the help of AI tools and reviewed by staff. The full syllabus is available to those who enroll in the course.
Course Schedule
Module 1: Introduction
- Video: Welcome
- Discussion Prompt: June 14th - Online office hour
- Reading: Office Hours follow-up
- Reading: Important FAQs
- Reading: Help us learn more about you!
- Reading: Portfolio Objectives
- Reading: Portfolio Requirements
- Video: Portfolio Options
- Reading: Building your site from scratch
- Reading: Building your site from a template
- Reading: Building your site using a framework
- Reading: Portfolio Grading Rubric
- Discussion Prompt: Template sources
- Discussion Prompt: Framework options
- Reading: How to Use Warpwire
- Video: Colleen Using WarpWire
- App Item: Introduce yourself
Module 2: Design Phase
- Reading: Wireframes/Design Sketches
- Discussion Prompt: What is the topic for your portfolio?
- Discussion Prompt: June 23rd - Online office hour
- Reading: Assessing the Design Sketches
Module 3: Design Phase: Lesson Choices
- Graded: Design Sketch demo for a site coded from scratch
- Graded: Design Sketch demo for a site coded from a template
- Graded: Design Sketch demo for a site coded using a framework
Module 4: Review and Preparation Phase
- Video: Using the W3 Validator
- Video: Using the WAVE Tool
- Reading: WebAIM quick reference
- Reading: OPTIONAL: Recent article on accessibility
- Video: Utilizing Developer Tools
- Reading: The Safari Web Inspector Guide
- Reading: Firefox Developer Tools
- Video: Sticky Footers
- Video: Embedding a Google Calendar
- Video: Using Bootstrap to Add a Carousel
- Video: Adding a Lightbox Plugin
- Video: Font Awesome
- Reading: Preparing your Images
Module 5: Coding Phase
- Discussion Prompt: July 5th - Online office hour
- Video: Setting Up a Byethost Account
- Video: Uploading Files to Your Account using Byethost
- Reading: Working "locally"
- Discussion Prompt: Hosting Options
Module 6: Validation and Review Phase
- Discussion Prompt: July 11th - online office hour
- Reading: Why Validate
- Reading: (Optional) Creating a screen capture video
- Discussion Prompt: Validation Issues?? Put them here!
- App Item: Demo your portfolio (coded from scratch)
- App Item: Demo your portfolio (designed from a template)
- App Item: Demo your portfolio (designed using a framework)
Grading Policy
The Peer Review: Design Sketch is 8% of your final grade and a peer review of the final portfolio demo worth 92%.
Lecturer
Course content developed by U-M faculty and managed by the university. Faculty titles and affiliations are updated periodically.
Beginner Level
No prior experience required
