This lesson continues the introduction to CSS style properties, this time focusing …
This lesson continues the introduction to CSS style properties, this time focusing more on non-text elements. Students begin this lesson by looking at a website about Desserts of the World. They investigate and modify the new CSS styles on this website, adding their own styles to the page. After working on the Desserts page, students apply their knowledge of new CSS properties to do more styling of their personal websites.
This lesson encourages students to think more critically about how web searches …
This lesson encourages students to think more critically about how web searches work and how to find relevant and trustworthy information online. After viewing and discussion a video about how search engines work, students will search for information about several unlikely animals. They'll need to analyze the sites they find for reliability in order to identify which of the animals is actually a hoax.
In this lesson, students first learn how to specify custom colors using …
In this lesson, students first learn how to specify custom colors using their RGB (red, green, blue) values. They then apply these colors to a new Four Seasons web page, which uses CSS classes. CSS classes allow web developers to treat groups of elements they want styled differently than other elements of the same type. Using classes, students add more styles to the Four Seasons web page, then use them to style their personal websites.
Students have spent a lot of time throughout the unit working on …
Students have spent a lot of time throughout the unit working on their Personal Website. In the final couple of days students finalize their websites. They work with peers to get feedback, put the finishing touches on the websites, review the rubric and reflect on their process. To cap off the unit, they will share their projects and also a overview of the process they took to get to that final design.
Every website has a purpose, a reason someone created it and others …
Every website has a purpose, a reason someone created it and others use it. In this lesson, students will start to consider the purposes a website might serve, both for the users and the creators. Students will explore a handful of the most-used websites in the United States and try to figure out how each of those sites is useful for users and how they might also serve their creators.
This lesson introduces CSS as a way to style elements on the …
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 the last level, students apply what they have learned about styles for text elements to their personal web page.
In this lesson students investigate ways to use websites as a means …
In this lesson students investigate ways to use websites as a means of personal expression and develop a list of topics and interests that they would want to include on a personal website. To begin the lesson students brainstorm different ways that people express and share their interests and ideas. Students then look at a few exemplar websites made by students from a previous CS Discoveries course to identify ways they are expressing their ideas. Finally students brainstorm and share a list of topics and interests they might want to include on a personal website which they can reference for ideas as they progress through the unit.
In this lesson students are introduced HTML as a solution to the …
In this lesson students are introduced 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. Students then look at an exemplar HTML page in Web Lab and discuss with their classmates how HTML tags help solve this problem. Students then write their first HTML. A wrap-up discussion helps to solidify the understanding of content vs. structure that was developed throughout the lesson.
In this lesson, students continue to use HTML to structure text on …
In this lesson, students continue to use HTML to structure text on web pages, this time with headings. Students learn how the different heading elements are displayed by default and practice using them to create page and section titles. Students then start to decide how they will organize their content on their own personal web pages. In the last level, students begin the project that they will continue to work on throughout the unit.
As students have recently spent some time thinking about the actual content …
As students have recently spent some time thinking about the actual content that will go into their personal website, this lesson takes a step back from the unit-long project (publication of a personal website) to help students articulate what personal information they choose to share digitally and with whom. It also reinforces the notion that much of the information that they choose to share digitally falls largely out of their control the moment it is released.
Students begin by individually identifying appropriate audiences with whom they would be comfortable sharing given pieces of personal information. They then look at several social media pages to determine what sorts of information people are sharing about themselves or one another. Last, students reflect on what guidelines they think are appropriate for posting information online.
The ultimate point of this lesson is not to scare students, but rather to experientially bring students to realizing precisely what level of control they don’t have in releasing information into the web.
Students are introduced to ordered and unordered lists in HTML and work …
Students are introduced to ordered and unordered lists in HTML and work through a few levels in which they use the <ul>, <ol>, and <li> tags. They then go back to their project, where they add a new HTML page. Inside the new page, they write the HTML to display a recipe, top ten list, or any other content that uses the new tags that they have learned.
Starting with a discussion of their personal opinions on how others should …
Starting with a discussion of their personal opinions on how others should be allowed to use their work, the class explores the purpose and role of copyright for both creators and users of creative content. They then move on to an activity exploring the various Creative Commons licenses as a solution to the difficulty in dealing with copyright.
Finally, with a common understanding of the restrictions of various Creative Commons licenses, students learn how to add images to their web pages using the <img> tag.
Students deal with common issues that arise when designing web pages in …
Students deal with common issues that arise when designing web pages in HTML. Students will correct errors in a sequence of increasingly complex web pages. In the process they will learn the importance of comments, whitespace, and indentation as tools for making web pages easier to read. At the end of the lesson students create a list of strategies for debugging web pages and ensuring they are easy to read and maintain.
After learning about how to link web pages to one another, students …
After learning about how to link web pages to one another, students are finally able to publish the website they have been working on. In this lesson, they link together all the previous pages they have created into one project, create a new page, and add navigation between the pages before publishing the entire site to the Web.
Materials below are selected for a graduate level course, CSE 629: Web-based …
Materials below are selected for a graduate level course, CSE 629: Web-based Website Design. The course is intended for MSEd: Educational Technology students who require a course that gives them experience in developing a professional website or portfolio using web-based tools. A second goal is to offer hands on experience creating accessible content while practicing principles of good usability and user experience (UX). Additionally, this course is meant to help address a sore point for many educators by providing a basic understanding of project management (PM) practices. Thus planning the website (the project), time investment, resources, and how to accessibly and effectively deliver content are key components of this course.
Since different people teach this course, this collection of resources is meant to suggest a set of common resources for faculty to integrate into their courses while allowing them to personalize themes and emphases. Hopefully, faculty will also add materials to this content as well.
Please note: this course reading/assignment plan is an OER and can be remixed fit. All of the items linked, however, are not OERs. Many of the artifacts are videos from YouTube and are copyrighted by the individuals--that is why links are provided. When each resource is listed, the copyright status is provided so that you can make the most accurate determination possible about potential use in/for your classes and students.
The CSforCA CS Equity Guide is designed for administrators interested in implementing …
The CSforCA CS Equity Guide is designed for administrators interested in implementing equity-minded computer science (CS) in K-12 schools, districts, or counties.
Returning to loops, students learn to draw images by looping simple sequences …
Returning to loops, students learn to draw images by looping simple sequences of instructions. In the previous plugged lesson, loops were used to traverse a maze and collect treasure. Here, loops are creating patterns. At the end of this stage, students will be given the opportunity to create their own images using loops.
Events are a great way to add variety to a pre-written algorithm. …
Events are a great way to add variety to a pre-written algorithm. Sometimes you want your program to be able to respond to the user exactly when the user wants it to. That is what events are for.
In this online activity, students will have the opportunity to learn how …
In this online activity, students will have the opportunity to learn how to use events in Play Lab and to apply all of the coding skills they've learned to create an animated game. It's time to get creative and make a story in the Play Lab!
In collaboration with Common Sense Media, this lesson helps students learn that …
In collaboration with Common Sense Media, this lesson helps students learn that many websites ask for information that is private and discusses how to responsibly handle such requests. Students also find out that they can go to exciting places online, but they need to follow certain rules to remain safe.
No restrictions on your remixing, redistributing, or making derivative works. Give credit to the author, as required.
Your remixing, redistributing, or making derivatives works comes with some restrictions, including how it is shared.
Your redistributing comes with some restrictions. Do not remix or make derivative works.
Most restrictive license type. Prohibits most uses, sharing, and any changes.
Copyrighted materials, available under Fair Use and the TEACH Act for US-based educators, or other custom arrangements. Go to the resource provider to see their individual restrictions.