Please enable JavaScript to use CodeHS

Web Design (Matisse)

In this project-based course, students learn how to build their own web pages using the languages of HTML and CSS. They will create their own live homepages to serve as portfolios of their creations. This is a one-year course for middle school students.

Overview & Highlights

Level
Middle School
Contact Hours
160
Timeframe
Year

Course Overview

To view the entire syllabus, click here or click to explore the full course.

MODULES - 7

  • Getting Started - What is the Web?

    Students are provided with a high-level introduction to the Internet and how it functions, investigate how the Internet has impacted society over time and set course goals for themselves.

  • HTML - Structuring Websites

    Students learn about the language behind all websites: HTML. Students learn about several different HTML tags as well as the basic structure of a web page. Students use HTML to develop several of their own creative web pages.

  • CSS - Styling Websites

    Students learn the language CSS and use it to style their web pages. Students learn about the benefits of styling with CSS and will use CSS to create several styled web pages of their own.

  • Project - Create Your Homepage

    Students build their own websites about themselves. This site will be accessible on their own custom domain and will be continually improved by the student as they continue on in the course. It will serve as a running portfolio of each creative project they create in the course.

  • Advanced HTML and CSS

    This module dives deeper into different things we can do with HTML and CSS. Students practice advanced topics in HTML and CSS, including visibility, image filtering, interaction, and animation, to develop more advanced websites.

  • Designing User Interfaces

    This module introduces students to the theory and practice of user interface design. Students learn about what makes an engaging and accessible user interface and will employ an iterative design process including rapid prototyping and user testing to design and develop their own engaging web pages.

  • Final Project

    In this project, students work in teams to design, prototype, test, and develop a final website.


57
Lessons
49
Videos
130
Exercises
4
Challenges
47
Offline Handouts

Demo Programs

Explore programs that your students will build throughout this course!

Course Resources

Here are a few examples of teacher resources and materials to use in the Web Design (Matisse) course

Professional Development

Teaching Web Design (2023)

In today's world, web pages are the main medium for sharing ideas and information. Learning to design websites is an incredibly useful skill for any career path. This Professional Development course prepares teachers to teach a successful Web Design course with CodeHS.

View Units CodeHS PD Options

Customizable Assignments

Create and organize Assignments in any CodeHS course that you're teaching. You can even add custom assignments to pre-existing CodeHS courses.

Learn More

Actions for Teachers

Didn't find what you were looking for? Here are a few links that might be useful to you.

FAQ

Frequently Asked Questions

Who is Web Design (Matisse) designed for?

This course is built for middle school students across a full year, at about 160 contact hours. It is the longest of the CodeHS Web Design courses, which makes it the one to pick when web design is a year-long class rather than a rotation.

Do students need prior coding experience for this course?

No prior experience is needed. The course is a project-based introduction to web design, starting from the fundamentals of HTML and building up from there. It assumes students have never written code before.

What do students build in this course?

Students build their own live web pages using HTML and CSS, and create homepages that serve as portfolios of their work. Because the course runs a full year, there is room for more projects and more depth than the semester and quarter versions allow.

Which CodeHS Web Design course should I choose?

There are five, and they differ by grade band and length rather than content. Matisse is middle school, a full year. Kahlo is middle school, one semester. Dali is middle school, one quarter. Monet is high school, one semester. Picasso is high school, a full year and the only one carrying certification alignment.

Do teachers need web development experience to teach this course?

No. CodeHS offers Teaching Web Design, a 40 hour professional development course that prepares teachers to run a Web Design class. It covers the content itself and how to teach it, and assumes no prior web development background.