NOTE: The content on this page is somewhat out of date, as Code.org has made many changes since last year.
I will have it updated shortly.
NOTE: When you get to CSD Unit 2 - Web Development ('22-'23) save that page with a bookmark so you can jump back to it anytime. Otherwise it can be difficult to go back and jump to another lesson.
NOTE: The text in these lessons mentions partners. It is best if you do this on your own using your own ideas.
NOTE: As you go through this exercise, there will be a list of questions, in the upper right, on many of the pages. Click on them to see the answer to each.
NOTE: In addition to finishing each of these lessons, you are to put the Shared link to the personal website you will be creating throughout these lessons. Instructions on how to do that are at the bottom of this page.
This lesson covers the purposes that a website might serve, both for the users and the creators. You will explore a handful of the most-used websites in the United States and discusses how each of those sites is useful for users and how it might also serve its creators.
This lesson introduces to HTML as a solution to the problem of how to communicate both the content and structure of a website to a computer. The lesson begins with a brief unplugged activity demonstrating the challenges of effectively communicating the structure of a web page. You will look at an HTML page in Web Lab and discusses how HTML tags help solve this problem, then uses HTML to write the first web pages of the unit.
HTML Discussed in this unit:
(Be sure to click on each element in yellow, and note the w3schools reference when you do)
<p></p>
<html></html>
<head></head>
<!DOCTYPE>
<body></body>
Web Lab
This is the introduction to the online HTML demonstrator called Web Lab. There are three sections to Web Lab. The first is a files list of the documents you are working on. The middle is where you enter your HTML markup. And the third is called the "Preview Area", and it's what your HTML markup looks like when viewed on a browser like Chrome.
Be sure to watch the videos.
This lesson continues the introduction to HTML tags, this time with headers. You will practice using header tags to create page and section titles and learns how the different header elements are displayed by default. Next, you will plan how to organize their content on the personal web pages that will be built across the unit and begins the first page of your website project.
HTML Discussed in this unit:
<h1></h1>
Follow the instructions to start making your own web page using HTML with Web Lab.
This lesson introduces ordered and unordered lists and the associated <ul>, <ol>, and <li> HTML tags. You will practice using the tags, and then go back to the personal web page project to add a new HTML page that includes these new tags.
HTML Discussed in this unit:
(Be sure to click on each element in yellow, and note the w3schools reference when you do)
<ul></ul>
<ol></ol>
<li></li>
This lesson takes a step back from creating the personal website to talk about personal information people choose to share digitally. You will discover what types of information are good to share with other people, and then look at several sample social media pages to see what types of personal information could be shared intentionally or unintentionally. Finally, you will come up with a set of guidelines to follow when putting information online.
The Social Sleuth Worksheet is optional, but it is useful in showing how valuable information about you can get put on the Internet.
This lesson introduces CSS as a way to style elements on the page. Students learn the basic syntax for CSS rule-sets and then explore properties that impact HTML text elements. They work on a HTML page about Guinness World Record holders, adding their own style to the provided page.
In this optional mini-project, students use what they have learned to create their own styled web page on a topic of their choice. The lesson starts with a review of the CSS that students have learned. They then begin their project by designing a web page and identifying which properties they will use to implement it. They create their web pages in Web Lab and share with the class. After engaging in a formal feedback process, they make final changes to their websites before reflecting on their process. This project can be completed in one day or expanded over several days, depending on the scheduling needs of the class.
This lesson covers how to use media such as images, video, or music created by others a website while respecting the rights of the creator of that media. After first studying Creative Commons licensing, you will learn how to add images to web pages, and how to give proper attribution when doing so.
Students start the class by considering the ethical implications of using images on their websites, specifically in terms of intellectual property. They then learn how to add images to their web pages using the <img> tag and how to cite the image sources appropriately.
HTML Discussed in this unit:
<img> and the <src> attribute.
Your personal web page:
You will be asked to download a picture to use on the website you are working on.
This lesson introduces websites as a means of personal expression. The class first discusses different ways that people express and share their interests and ideas, then looks at a few exemplar websites made by students from a previous course. Finally everyone brainstorms and shares a list of topics and interests to include, creating a resource for developing a personal website in the rest of the unit.Lesson 8 - Clean code and debugging
This lesson covers common issues that arise when designing web pages in HTML. You will correct errors in a sequence of increasingly complex web pages found on Code Studio and learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read.
HTML Discussed in this unit:
<!-- -->
Formatting HTML:
You will learn about whitespace, indentation, and commenting.
NOTE: Check with me if you have problems with the final debugging exercise on "Growing Cranberries".
This lesson covers hyperlinks, which allow web developers to connect pages together into one website. You will link together all the previous pages into one project, and create navigation bars for each page before publishing the entire site to the Web.
HTML Discussed in this unit:
<a></a> and the href attribute
Your personal web page:
You will continue working on your personal website.
On Step 11 of Lesson 9, be sure to click the SHARE button at the top left of the page.
Click on the link once to highlight it, and copy it to your clipboard (hold down the CTRL key and press the letter C).
Save that link in your Google Drive in the folder labeled "5. Code.org" so it can be graded.
To save the link, open up File Explorer and navigate to the Learning Web Design folder.
Open the folder labeled 5. Code.org.
On the right-hand side of file explorer in the 5. Code.org folder, right-click your mouse.
In the menu that appears, select New.
Select Shortcut.
Paste the link to your personal website that you previously copied (CTRL and V).
Click the Next button.
Enter a title for the shortcut (this is just a hyperlink). Call it "Lesson 9" or whatever.
Click Finish, and you are done.
Deadline is 11 October no later than 11:59 pm.