U1LA4.1: Focus on Design in HTML && CSS
What elements of HTML and CSS make a well-designed page?
Teacher Notes && Overview
When this lesson rolls around, students have engaged with many important elements of building webpages: they can add different elements to their page, they can adjust the style with CSS, and they can utilize CSS Grid or Flexbox within their CSS to arrange elements in an organized fashion.
This lesson serves as a chance to discuss more specifics around design so that students can start establishing their own rules for designing web pages. It is largely an opportunity to explore and discuss, with a little bit of time for experimentation before they move on to future topics.
Objectives
Students will be able to:
Identify and explain elements of good design in web pages
Identify and explain elements of bad design in web pages
Create a list of agreed-upon class guidelines for design
Suggested Duration
~1 class period (45 minutes)
NYS Standards
9-12.DL.1 Type proficiently on a keyboard.
9-12.DL.2 Communicate and work collaboratively with others using digital tools to support individual learning and contribute to the learning of others.
9-12.DL.5 Transfer knowledge of technology in order to use new and emerging technologies on multiple platforms.
Vocabulary
No new vocabulary is introduced during this lesson.
Planning Notes && Materials
| Planning Notes | Materials Needed |
|---|---|
We do our best to keep curriculum materials current, but please make sure all websites from the worksheet are working before beginning the activity. | You may want to have chart paper available to track student responses to design questions - you can hang this in the classroom year round. |
Suggestions for UDL
Coming Soon
Suggestions for Differentiation
Coming Soon
Resources
Assessments
Formative:
Discussion responses
Exploring Design Worksheet
Summative:
HTML/CSS Final Project (upcoming)
Do Now/ Warm Up (~3-5 min)
We've learned a lot in just the first half of this first unit! Today we will focus on making well-designed web pages. Write down the top three things (in your opinion) that you have learned so far that will help you to make a well-designed page.
After giving students time to write and think, ask them to share - first in small groups if you'd like, but definitely with the whole class. Keep a log of what students mention so you can loop back around to it after they've completed their activity.
Defining Design (~20 - 30 minutes)
Explain to students that while we have touched on some elements of design - they at one point tried to make an ugly webpage, and have made a few web pages themselves that they were decidedly trying to not make ugly - they have never worked to define what exactly 'good design' and 'bad design' are on their own terms.
Today, that's the goal. Share students on the Exploring Design Worksheet (through Google Classroom or another LMS works best, but you could also share via email or Slack) and make sure they have a copy to work on. Expain that they will take a few minutes to explore the websites, and then they will answer the questions. While they should scroll/click on the sites, they should not spend more than 1-2 minutes per site as we want them to have time to digest and answer the questions based on what they've noticed.
It is a best practice to ask students to complete this work in pairs or small groups, as having discussion partners may help them digest some of what they like or dislike about the design of the pages. While they work, be sure to circulate so you can encourage students to be as specific as possible as frequently as possible so they can lock down their ideas.
Wrap-Up && Discussion (~10 minutes)
To close, bring everyone back together. You may want to have chart paper or something else save-able in this section! Ask students to come up with what they believe are the 'rules' of good design from what they have looked at. Some students may gravitate towards naming what they saw in bad design - try to steer that towards good design rules. (E.g: If a student says 'Don't make the website too cluttered like on x site', try to frame it as 'Keep things simple, space things out' etc)
While students should generate the bulk of ideas, feel free to step in and nudge them towards anything you think they may have missed. Put these rules somewhere - hanging on the wall or visible in any virtual classroom space - where everyoen can see and remember what they discussed!
This is also a great time to loop around back to the Do-Now/Warm Up and connect some of what students are pointing out as good design to things that they have been learning about.
Extensions
If students complete the activity early, ask them to make another copy of the Ugliest Website in the World starter code from lesson U1LA2.1. This time, instead of trying to make an ugly website, ask them to attempt to make it as beautiful and well designed as possible!
Last updated