Sie sind auf Seite 1von 18

 

CodeHS  
Web Design Course Syllabus  
Dali: One Quarter for Middle School, 30-40 hours 
 
Course Overview and Goals 
In today's world, web pages are the most common medium for sharing ideas and information. Learning to design 
websites is an incredibly useful skill for any career path. 
The CodeHS Web Design course is a project-based course that teaches students how to build their own web 
pages. Students will learn the languages HTML and CSS, and will create their own live homepages to serve as 
portfolios of their creations. 
 
Learning Environment: ​The course utilizes a blended classroom approach.​ ​The content is fully web-based, with 
students writing HTML and CSS in the browser. Teachers utilize tools and resources provided by CodeHS to 
leverage time in the classroom and give focused 1-on-1 attention to students. Each unit of the course is broken 
down into lessons. Lessons consist of video tutorials, short quizzes, example web pages to explore, and web 
design exercises in which students develop and publish their own websites. 
 
Development Environment: ​Students write HTML and CSS code in the browser using the CodeHS online editor. 
Classes can choose to write code using either blocks or text. Due to the fact that different browsers treat HTML 
and CSS differently, we highly recommend that all student computers use an up-to-date version of the Chrome 
browser. You can download an up-to-date version of Chrome for free here: 
https://www.google.com/chrome/browser/ 
 
Quizzes: ​Each lesson includes at least one formative short multiple choice quiz. At the end of each unit, students 
take a summative multiple choice unit quiz that assesses their knowledge of the concepts covered in the unit. 
 
Prerequisites: ​There are no official prerequisites for the CodeHS Web Design course. The course is designed 
for complete beginners with no previous background in computer science. The course is highly visual, dynamic, 
and interactive, making it engaging for new students. In the broader course pathway, the Web Design course is 
a great starting place. However, students that have taken other CodeHS courses will be able to apply concepts 
learned in earlier courses to Web Design, making Web Design a great second or third course in the pathway. 
 
More information: ​Browse the content of this course at​ https://codehs.com/course/6274 
 
Course Breakdown 
Unit 1: HTML - Structuring Websites (3 weeks/15 hours) 
Objectives / Topics  ● How do we build web pages? 
Covered  ● Markup Languages 
● HTML 
● HTML tags 
● HTML attributes 
● HTML elements 
● The Anatomy of an HTML page 
● Formatting text 
● Hyperlinks 
● Images 
● Lists 
● Nesting tags 
● Tables 
● Styling with HTML 

Assignments / Labs   ● Students create several web pages to practice each of the concepts above 
● Example exercises: 
○ Modify existing web pages using formatting tags to make text more 
readable 
○ Use links to create a web page linking to your 5 favorite websites 
○ Use links and images to create a personal library web page showing 
your favorite books 
○ Use lists and images to create a flashy list article 
○ Use tables to create a personal calendar web page 
○ Use styling attributes to add style to your web pages 
 
 
Unit 2: CSS - Styling Websites (2 weeks/10 hours) 
Objectives / Topics  ● How do we style web pages? 
Covered  ● CSS Selectors 
● Selecting by tag 
● Selecting by class 
● Selecting by id 

Assignments / Labs   ● Students create several web pages to practice each of the concepts above 
● Example exercises: 
○ Use CSS selectors to style your previous web pages 
○ Use CSS selectors to style new web pages 
○ Create a music library web page and use CSS to style each song in 
your table 
○ Use CSS styling to make several images fit together properly 
○ Explain the benefits CSS provides over styling with only HTML 
○ Identify CSS selectors and rules used on example web pages 
 
 
Unit 3: Project - Create Your Homepage (1-3 weeks/5-15 hours) 
Objectives / Topics  ● Combination of the concepts learned thus far 
Covered  ● Allow students to think creatively about the applications of the concepts they 
have learned 
● Designing a web page from scratch 

Assignments / Labs   ● Students will build their own website about themselves. This site will be 
accessible on their own custom url on the CodeHS site, 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. 
Pair Programming Guide

Discussion
Innovation can occur when people work together or independently. People working
collaboratively can often achieve more than individuals working alone. Learning to collaborate
effectively includes drawing on diverse perspectives, skills, and the backgrounds of peers to
address complex and open-ended problems. In this activity, you will be ​pair programming​ with
a partner to create a program.

Make a Plan
Get a link to the programming exercise from your teacher. With your partner, read the exercise
description. When you feel that you understand the problem, make a plan with your partner.

1. Explain your understanding of the problem to your partner. What is the exercise asking
you to do? Does your partner agree? (If there is a conflict between you and your partner’s
understanding of the problem, reread the exercise description and discuss. Come to an
agreement before moving on.)

2. Describe how you plan to divide your work (it helps to break the large problem down into
solvable subproblems!)

3. Who will be responsible for completing which pieces?

Implement Your Plan


● Choose roles!
○ When pair programming, one person will be the ​driver​, and one person will be the
navigator​.
■ The ​driver​ types out the code, focusing on the details of implementing the current
goal.
■ The ​navigator​ observes the code being written, points out any immediate quick fixes,
and thinks about the big picture.
○ Agree on one person to start as the driver, and one person to start as the navigator. ​You
should switch roles every 15 minutes.
● Set goals!
○ Agree on one tiny goal to achieve at a time. Something you can solve in less than 15
minutes. State the goal out loud to your partner to clarify the goal and ensure you both
know what you are working on ​right now.​
● Support your partner!
○ When you’re the driver, complete the tiny goal quickly, ignoring larger issues. Trust the
navigator to be your safety net.
○ When you’re the navigator, stay focused and read the code your partner is writing. Bring up
errors and code that you find unreadable right away. Jot down larger issues that you will
tackle later, so that the driver can stay focused on the current tiny goal.
● Talk a lot!
○ Say what you are about to do, ask for an implementation idea, ask for a better way to solve
the current problem, bring up alternative ideas, point out possible situations that the code
doesn't cover, suggest clearer names for variables and functions, suggest ways to
implement the code in smaller steps.
○ “Does that look right?” “What’s next?” “What would you do?” “Here’s what I would do...”
○ Continually ask for input from your partner. You should facilitate contributions from your
partner and make sure they are appreciated.
● Resolve conflicts!
○ It’s okay if you and your partner disagree! Take the time to let both sides make their case.
Discuss the pros and cons of each side and come to an agreement on what should be done.
○ It’s okay to ask for help, you and your partner are not alone! If you cannot come to an
agreement, ask a classmate or your teacher to hear both sides and facilitate a compromise.
● Celebrate!
○ Take time to celebrate as you complete goals and overcome problems. Make sure to tell
your partner when they’ve done a good job!

Reflection
1. What smaller problems did you solve as you developed a solution to the large problem?

2. What is one conflict that you and your partner encountered? How did you resolve this
conflict?

3. Provide three pieces of feedback to your partner:


a. What is one thing you enjoyed about working with your partner?

b. What is one way in which your partner can improve?

c. What is one thing you learned from your partner?

Pair programming tips sourced from ​http://www.wikihow.com/Pair-Program


Human Links

Discussion
Links provide a way for some web pages to route you to another web page. Links connect the
pages in a website, and connect that website to other websites. Think about if links didn’t exist
to connect websites to each other. How would you ever find other websites?

Why do you think links are important within a website? What pages should be connected to
every other page on the website?

Class Exercise
Your classroom will become a living website, and your classmates will become living hyperlinks!

Certain places in the room will be the pages of the website. Each page will have links on it. The
links will be your classmates. The links will link to other pages by using index cards. The page
written on the index card is the page that the student links to.

If you are chosen to be the web traffic, navigate through the website like this:
1. You will start out with an index card telling you what page you will begin at.
2. When you get to that page, hand your index card to the student who is the link on that
page.
3. The link will hand you another card.
4. Go to the page written on your new index card.

If you are chosen to be a link, these are your duties:


1. Stand at attention at your designated web page. It’s your responsibility to direct the web
traffic!
2. Your teacher will give you a stack of index cards.
3. When a student “clicks” on you, take his/her card and put it on the bottom of your stack
of index cards. Then hand him/her the top card on your stack.
Pair Programming Guide

Discussion
Innovation can occur when people work together or independently. People working
collaboratively can often achieve more than individuals working alone. Learning to collaborate
effectively includes drawing on diverse perspectives, skills, and the backgrounds of peers to
address complex and open-ended problems. In this activity, you will be ​pair programming​ with
a partner to create a program.

Make a Plan
Get a link to the programming exercise from your teacher. With your partner, read the exercise
description. When you feel that you understand the problem, make a plan with your partner.

1. Explain your understanding of the problem to your partner. What is the exercise asking
you to do? Does your partner agree? (If there is a conflict between you and your partner’s
understanding of the problem, reread the exercise description and discuss. Come to an
agreement before moving on.)

2. Describe how you plan to divide your work (it helps to break the large problem down into
solvable subproblems!)

3. Who will be responsible for completing which pieces?

Implement Your Plan


● Choose roles!
○ When pair programming, one person will be the ​driver​, and one person will be the
navigator​.
■ The ​driver​ types out the code, focusing on the details of implementing the current
goal.
■ The ​navigator​ observes the code being written, points out any immediate quick fixes,
and thinks about the big picture.
○ Agree on one person to start as the driver, and one person to start as the navigator. ​You
should switch roles every 15 minutes.
● Set goals!
○ Agree on one tiny goal to achieve at a time. Something you can solve in less than 15
minutes. State the goal out loud to your partner to clarify the goal and ensure you both
know what you are working on ​right now.​
● Support your partner!
○ When you’re the driver, complete the tiny goal quickly, ignoring larger issues. Trust the
navigator to be your safety net.
○ When you’re the navigator, stay focused and read the code your partner is writing. Bring up
errors and code that you find unreadable right away. Jot down larger issues that you will
tackle later, so that the driver can stay focused on the current tiny goal.
● Talk a lot!
○ Say what you are about to do, ask for an implementation idea, ask for a better way to solve
the current problem, bring up alternative ideas, point out possible situations that the code
doesn't cover, suggest clearer names for variables and functions, suggest ways to
implement the code in smaller steps.
○ “Does that look right?” “What’s next?” “What would you do?” “Here’s what I would do...”
○ Continually ask for input from your partner. You should facilitate contributions from your
partner and make sure they are appreciated.
● Resolve conflicts!
○ It’s okay if you and your partner disagree! Take the time to let both sides make their case.
Discuss the pros and cons of each side and come to an agreement on what should be done.
○ It’s okay to ask for help, you and your partner are not alone! If you cannot come to an
agreement, ask a classmate or your teacher to hear both sides and facilitate a compromise.
● Celebrate!
○ Take time to celebrate as you complete goals and overcome problems. Make sure to tell
your partner when they’ve done a good job!

Reflection
1. What smaller problems did you solve as you developed a solution to the large problem?

2. What is one conflict that you and your partner encountered? How did you resolve this
conflict?

3. Provide three pieces of feedback to your partner:


a. What is one thing you enjoyed about working with your partner?

b. What is one way in which your partner can improve?

c. What is one thing you learned from your partner?

Pair programming tips sourced from ​http://www.wikihow.com/Pair-Program


Layers of HTML

Discussion
An HTML document is a hierarchical structure. Each part of an HTML page can be thought of as
nested under the previous part. For example, everything on the page is inside of the ​html​ tag.
The ​title​ tag is a part of the ​head​ tag. Every ​p,​ ​h1,​ or ​ul​ tag in the main part of the web page
is part of the ​body​ tag.

HTML Nesting
The nested structure of a web page determines how each piece is displayed and styled. The
tags are displayed in the browser in the order they are listed in the document. For example, if
you have a ​h1​ tag and then a ​p​ tag, the ​h1​ text will appear above the text contained in the ​p
tag. As you will see later, any colors that you set for a particular element will also apply to any
of the elements inside. If you set the background of the ​body​ to be blue, then all of the
elements in the ​body​ will also get a blue background. You can override this behavior, but the
structure of the page is important to remember and understand.

Parent Tags
Consider this simple web page that displays a grocery list:

<!DOCTYPE html>
<html>
​<head>
<title>​Grocery Shopping​</title>
​</head>
​<body>
​<h1>​Grocery List​</h1>
​<ul>
​<li>​Apples​</li>
​<li>​Bananas​</li>
​<li>​Milk​</li>
​<li>​Bread​</li>
​<li>​Cookies​</li>
​<li>​Butter​</li>
​</ul>
​</body>
</html>

Here, the ​html​ tag is the parent of every other element in this page. The ​head​ tag is the parent
of the ​title​ tag. The ​body​ tag is a parent of the ​h1​ and ​ul​ tag.

Do you see the pattern for what makes a tag a parent? A given tag is a parent to any tags that
are inside of it. We can see this relationship visually thanks to the indentation.
Class Exercise
In this exercise, you will create a physical version of a web page. When you build web pages on
the computer, parent tags are shown through indentation. On your physical version of a web
page, you will show the relationship between tags by using colored paper.

Your Tasks:
1. Write out a simple web page. It should have at least seven different tags in it, one of
which must be a ​ul​ or ​ol​ tag.
2. Build your web page layer by layer using colored paper. Each tag should get its own
container of a particular color. Then, each element inside should get a nested container of
a different color. The picture below shows what the example web page above would look
like.

By looking at the web page above, we can easily see that the ​html​ tag contains everything. The
ul​ tag contains each of the ​li​ tags. The ​title​ and ​li​ tags are not parents to any other tag.
Scavenger Hunt

Discussion
So far, we’ve been building web pages by putting together tags and
seeing what the result is. Now it’s time to think from the opposite
direction! Can you identify what tags look like in the output without
looking at the html?

Class Exercise
You will be analyzing finished web pages to see if you can label what
the parts of the web page are! Use the printed web page your teacher
provides.

Look through the web page. Color code what tags you see by
highlighting or circling them with colored pencils. Find a maximum of
five examples of each of the following tags, and color code them.
Highlight each of the tags below with the same color to act as a
legend. Keep in mind the web page may not have all of these tags.

● <title>
● <p></p>
● <a></a>
● <ul></ul>
● <ol></ol>
● <li></li>
● <img>
● any size of <h_></h_> tag, e.g. <h1> or <h2> or …
● <i></i>
● <b></b>
● <hr>
● <table></table>
● <th></th>
● <tr></tr>
● <td></td>
CSS Flyer

Discussion
CSS allows you to cleanly add styling to your web pages. By separating out the styling from the
structure, you can easily change the style whenever you want.

Class Exercise
Get in groups of two or three. Each group will design a flyer that advertises a grand opening of
a new museum and style it using CSS. It can be any kind of museum that you’d like.

Here are the requirements:


1. The flyer must contain at least ​four​ different HTML tags.
2. Each tag should be ​styled​ in a different way.

You should start by drawing out your flyer. After you’ve drawn your flyer, look at the elements
you’ve made. Which ones require CSS styling? Write out the CSS styles by listing the tags you
will use to style. Then list the kind of styling you would add. You can use the DOCS tab of a
CodeHS exercise for reference!  

Sample Solution
CSS Selectors

Discussion
CSS allows you to cleanly add styling to your web pages. By separating out the
styling from the structure, you can easily change the style whenever you want.
Using CSS is also an effective way to get consistent styling on a website that
contains many, many web pages. Simply link to the CSS page, and your web page
is properly styled!

With great power, comes great responsibility, however. When you use CSS in your
web pages, you must think carefully about what exactly you ​do​ want styled. Do
you really want ​all​ of the paragraphs to have neon green letters? Do you really
want ​all​ of the links to be size 32 font? CSS classes come in handy in these
situations. By assigning a certain class to a tag, you can still quickly and easily
style elements.

Class Exercise
Get in groups of two or three. Each group will design a website for a museum and
style it using CSS. It can be any kind of museum that you’d like.

Here are the requirements:


1. The website must contain at least ​three​ different web pages
2. The website must use the ​same​ CSS styling on all of the web pages
3. Each web page must contain at least ​four elements​ in it

Your website should have the following pages in it:


1. Homepage
a. to describe what your museum is all about and the name of your
museum
2. Visit Us
a. to describe how to get to your museum, the hours, the price of
admission, or anything else visitors should know about before visiting
your museum
3. Special Exhibits
a. to describe any special events, attractions, or visiting items that are
currently at your museum

You should start by drawing out each page of your website. Each page should have
a common title area and navigation bar.

After you’ve drawn each page, look at the elements you’ve made. Which ones
should be styled similarly? Decide whether you will make a class or use tag
selection. Write out the CSS styles by listing the classes or tags you will use to
style. Then list the kind of styling you would add. For example, say I have a class
called “banner” for the top of my page. Part of my CSS page could say:

class banner: 
Size 24 font 
Tan background 
Capital black lettering 
Dotted border 
 
Color code the classes and the elements on your webpage.

Example Homepage
Yours should be done on paper. The colored borders and fonts correspond to CSS
classes and tag selectors (not shown).
Presenting Your Artifact Guide

Corresponding​ ​Material
This activity can be paired with any exercise in the course in
which students create a computational artifact (program,
website, presentation, audio recording, video recording, etc.)
This activity is a guide for summarizing and presenting the
purpose of a computational artifact.

Discussion
It is important to explain and justify the design and
appropriateness of your computational choices, and analyze and
describe both computational artifacts and the results or behaviors
of such artifacts.

This guide will help you present your artifact to your classmates.

Activity

Write out your answers to the following questions:

1. What did you create? Summarize the purpose of your


computational artifact.

2. Justify the appropriateness of your artifact. Explain how it


achieves its purpose.
3. If you wrote code to create this artifact, explain why your
code is correct. Give a top-down explanation, starting with an
explanation of how your start function works. Then explain how
each of the functions your start function calls works. Continue
this until each function has a logical explanation for why it is
correct.
4. Visual tools can help explain your code to your peers. Draw
out a ​flow chart​ for at least one of your functions here, this will
come in handy when presenting.
4. What was one design decision you made when creating this
artifact. Justify why you made this decision.

5. Present your answers to these questions to your classmates!


End of Unit Reflection 
1. For each statement, fill in a 1 if you disagree, 2 if you somewhat agree, and 3 if you 
strongly agree. 
I understand all of the concepts covered in this unit.   

I can make connections from what we learned in this unit to other units in   
this course. 

This unit was interesting.   

I can apply what I learned in this unit in the real world.   

I managed my time effectively during this unit.   

I feel my performance on quizzes and exercises in this unit reflects my   


true ability. 

The activities we completed in this unit helped me understand the   


concepts. 
 
2. What lessons or activities did you find most interesting in this unit? Explain your answer. 
 
 
 
 
 
3. What lessons or activities did you find most difficult in this unit? Explain your answer. 
 
 
 
 
 
4. What are you most proud of in this unit? Explain your answer. 
 
 
 
 
5. What skills do you feel you need to develop in the next unit? Explain your answer.