Please enable JavaScript to use CodeHS

Web Design (Picasso) [2022]

Description

In this lesson, students will learn about the fundamentals of web design, and consider the ways that they already interact with web sites in their daily lives.

Objective

Students will be able to:

  • Identify what web design is and articulate the difference between web design and development
  • Identify how websites have changed education, arts and commerce
  • Reflect on why they are taking this course and develop their own learning objectives for the course
Description

In this lesson, students will explore what the internet is and how it can be used for socially beneficial activities, as well as how the internet can be used in potentially harmful ways. Students will examine how computers are connected with local and global networks to create a very large web of networks we know as “the internet”.

Objective

Students will be able to:

  • Describe how they are able to get specific webpages to their computers
  • Explain that the internet is a network of networks
  • Compare and contrast the different levels of censorship that different organizations or countries impose on the internet
Description

In this lesson, students will explore the program that allows them to use the internet at all – the browser. They will explore what a browser is capable of doing, and compare several different browser programs.

Objective

Students will be able to:

  • Identify what a browser is
  • Identify what a browser is not
  • Explain the purpose of a browser
  • List several kinds of browsers
Description

In this lesson, students learn what a URL is, and what is happening when they visit a URL.

Objective

Students will be able to:

  • Describe the process of visiting a webpage, from typing the URL to viewing the page
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of the basic of the internet through a multiple choice quiz
Description

In this lesson, students will be introduced to HTML: the language for building web pages. Students will discover why HTML is important and how it works in order to start building their own web pages.

Objective

Students will be able to:

  • Identify the purpose and applications of HTML
  • Create their first simple web page
Description

In this lesson we upgrade from simple tags to full HTML documents. We learn some new tags that let us put information in different places on the web page, and we learn about the nested tree structure of an HTML document.

Objective

Students will be able to:

  • Discern the various parts of an HTML page
  • Create fully formed HTML pages
Description

In this lesson, students learn about formatting tags that let them modify the appearance of text and make their web pages look clear and aesthetically pleasing.

Objective

Students will be able to:

  • Apply formatting tags in order to modify the appearance of text and make web pages look clear and aesthetically pleasing
Description

In this lesson, students learn how to add hyperlinks to their web pages using the <a> tag.

Objective

Students will be able to:

  • Add and utilize hyperlinks on their webpages
Description

In this lesson, students learn how to add images to their own web pages using the <img> tag!

Objective

Students will be able to:

  • Embed an image in HTML
Description

In this lesson, students will learn what copyright laws are and how to avoid copyright infringement. They will explore why copyright laws are important and how they protect the creators. They will practice finding and citing online images.

Objective

Students will be able to:

  • Explain what copyright laws are and why they are important
  • Find images they are legally allowed to use in their projects
  • Accurately attribute images they find and want to use
Description

In this lesson, students learn how to add lists to their web pages and practice making different kinds of lists.

Objective

Students will be able to:

  • Incorporate different kinds of lists to their web pages
Description

In this lesson, students learn how to create and add tables to their web pages!

Objective

Students will be able to:

  • Create tables in their web pages
  • Explain the benefits of including tables on web pages
  • Compare various ways of displaying information and choose the appropriate format
Description

In this lesson, students will use HTML styling to make their pages visually appealing and unique.

Objective

Students will be able to:

  • Apply HTML styling to make their web pages more visually appealing and unique
Description

In this lesson, students will dissect how colors are represented on a webpage. They will learn about how red, green, and blue are mixed to create colors, and how the levels of red, green, and blue are specified using rgb values and hex values.

Objective

Students will be able to:

  • Explain how colors are created on webpages
  • Create their own colors by mixing red, green, and blue
  • Make use of the color wheel to choose coordinating colors for their webpages
Description

This lesson is a summative assessment of the unit’s learning objectives.

Objective
  • Assess student achievement of the learning goals of the unit
Description

In this lesson, students will begin using CSS to add styling to their HTML pages.

Objective

Students will be able to:

  • Describe how CSS adds styling to HTML pages
Description

In this lesson, students will learn CSS superpowers! CSS tag selectors can be used to select all elements of the same kind (<table>, or <h1> for example) and give them all the same style.

Objective

Students will be able to:

  • Use CSS tag selectors to select all elements of the same kind and give them all the same style
Description

In this lesson, students will learn how to use CSS class selectors to apply CSS styling to all HTML elements that share a specified class. This allows for more specific styling.

Objective

Students will be able to:

  • Use CSS Class selectors to apply CSS styling to all HTML units that share a specified class
Description

Using CSS to select an element by ID helps to select a single element to format on a webpage. This is helpful when there is a need to be very specific in applying the CSS rules for the webpage.

Objective

Students will be able to:

  • Use CSS Selectors by ID to select a single element to format on a webpage
Description

In this lesson, students will learn how CSS rules are applied when more than one rule applies to an element.

Objective

Students will be able to:

  • Explain the order of precedence of CSS rules
  • Explain why CSS allows rules to cascade
  • Apply the order of precedence of CSS rules to achieve the desired styling of specific elements on the webpage
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of CSS styling through a multiple choice quiz
Description

This project is meant to be a challenge that touches multiple concepts from the course to produce a digital artifact. In this Practice PT, students will be developing their first digital artifact: their very own website! This website will start off as their own personal homepage, and as students progress through the course, they will keep adding links to their favorite projects. By the end of the course this homepage will serve as their own personal portfolio website showcasing their work!

Objective

Students will create their own website from scratch, hosted at their own custom domain.

Description

In this lesson, students will preview some of the advanced HTML/CSS features they will be learning how to use in this module!

Objective

Students will be able to:

  • Reflect on what they have learned so far in this course
  • Preview what they will learn in the advanced HTML/CSS module
Description

In this lesson, students will learn why multi-file websites are important and how they can create them.

Objective

Students will be able to:

  • Articulate why multi-page websites make sense from a user experience perspective and from a development perspective
  • Create multi-file websites that are divided for clarity and organization
Description

In this lesson, students will learn how to embed content from other websites into their own websites using IFrames.

Objective

Students will be able to:

  • Define what an IFrame is, and explain how they might be used in websites
  • Use IFrames to embed other websites into their own website
Description

In this lesson, students will learn how to use divs to group and style multiple elements.

Objective

Students will be able to:

  • Use divs to group and style multiple elements at once
Description

In this lesson, students will learn how to use spans to group and style multiple elements of inline text.

Objective

Students will be able to:

  • Use the <span> tag to style multiple elements of inline text
Description

In this lesson, students wlll learn how to combine CSS selectors so they can style multiple selectors and combinations, or specific parent/child selectors.

Objective

Students will be able to:

  • Combine CSS selectors to style multiple selectors, parent/child selectors, and specific combinations of classes, ids, and tags
Description

In this lesson, students will learn the Don’t Repeat Yourself (DRY) principle.

Objective

Students will be able to:

  • Articulate the importance of the DRY Principle
  • Cut down on the amount of repeated code in their programs by combining selectors and using divs
Description

In this lesson, students will learn about special selectors such as :hover and :focus, and how these selectors can be used to style elements as the user interacts with them on the page.

Objective

Students will be able to:

  • Use special selectors to style their website as the user interacts with elements on the page
Description

In this lesson, students will learn how to use the visibility property to make elements visible or invisible on their page.

Objective

Students will be able to:

  • Use the visibility property to make elements visible or invisible on their page.
  • Articulate the difference between visibility and display properties (visibility still takes up space when it’s not visible, display does not)
Description

In this lesson, students will learn how they can use documentation as a resource to learn more about HTML and CSS features.

Objective

Students will be able to:

  • Use documentation to explore HTML and CSS features that are not covered in the course
Description

In this lesson, students will learn how to use the inspector tool to explore and modify code inline.

Objective

Students will be able to:

  • Use the inspector tool to modify styling and content inline
Description

In this lesson, students will learn what the box model is and how they can use it to add a border around elements and to define space between elements.

Objective

Students will be able to:

  • Name the different components that wrap around an HTML element
  • Modify the margins, borders, and padding of an HTML element
Description

In this lesson, students will learn how to include images in their programs and manipulate their pixels using WebImage. Students will learn how image filters manipulate stored pixel data.

Objective

Students will be able to:

  • Include images in their programs
  • Manipulate the stored pixel data arbitrarily
Description

In this lesson, students will learn how to add simple animations to their websites.

Objective

Students will be able to:

  • Add simple animations to their websites, such as transitions, transition delays, color changes, size changes, and rotations
Description

In this lesson, students will combine special selectors like :hover with animations to create sites that respond to the user’s actions.

Objective

Students will be able to:

  • Add simple interactions to their websites, so that parts of the website change if the user hovers or clicks on parts of the site
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of advanced HTML and CSS styling through a multiple choice quiz
Description

This project enables students to unleash their creativity to design and implement an informational website. Students should go BIG on this project, using the new CSS and HTML tricks they’ve learned throughout the last lesson to make an interactive and beautiful website. They should be encouraged to try out new elements, using documentation to help them.

Objective

Students will create their own website from scratch with an emphasis on project planning and iterative creation.

Description

In this lesson, students will be introduced to Bootstrap, including who uses Bootstrap and why people would want to use Bootstrap.

Objective

Students will be able to:

  • Explain what Bootstrap is
  • Explain why a web developer would want to use Bootstrap
  • Compare and contrast responsive vs. unresponsive sites
Description

In this lesson, students will learn how to add Bootstrap to a webpage and create the basic structure using Bootstrap’s container classes.

Objective

Students will be able to:

  • Enable Bootstrap on a webpage
  • Create a basic Bootstrap page using container to gather the pieces of the site
  • Explain the difference between container and container-fluid
Description

In this lesson, students are introduced to the jumbotron class to create a heading for their webpages.

Objective

Students will be able to:

  • Create webpages that utilize a Jumbotron to create a nice header for the webpage
  • Divide the content of a page into a header and main content
Description

In this lesson, students will learn how to use Bootstrap’s grid system to create the layout of their webpages.

Objective

Students will be able to:

  • Use Bootstrap’s grid system to structure their webpages
  • Explain the parts of Bootstrap’s grid system
  • Explain how the grid system enables Bootstrap sites to be responsive
Description

In this lesson, students are introduced to page headers, buttons, and Glyphicons. They will use different typographies to style the header and sub-header of their webpages. They will use and style buttons to increase interactivity on their webpage.

Objective

Students will be able to:

  • Add title to their webpages by creating page headers
  • Use Glyphicons to add widely recognized icons to their webpages to improve usability
  • Create and style buttons
Description

In this lesson, students will learn how easy it is to create beautiful and interactive tables using Bootstrap classes. Students will create galleries of images and links using Bootstrap’s thumbnail class.

Objective

Students will be able to:

  • Create professional looking tables using Bootstrap’s CSS rules for tables
  • Create a gallery of thumbnail images
Description

In this lesson, students will learn how to add a navbar (navigation bar) to their websites.

Objective

Students will be able to:

  • Create a navbar that sits at the top of a webpage
  • Add links to a navbar
Description

In this lesson, students will learn how to make dropdown menus. They will apply dropdown menus to navbars as well as a way of choosing an option elsewhere on the page.

Objective

Students will be able to:

  • Create dropdown menus in a navbar
  • Create dropdown menus as part of the website to redirect to another part of the same page
Description

In this lesson, students will explore the official Bootstrap templates. They will modify an existing webpage to create their own webpage.

Objective

Students will be able to:

  • Use a Bootstrap template and modify the page content
  • Use a Bootstrap template and modify the styles
Description

In this lesson, students will use everything they have learned so far to complete a few web design challenges.

Objective

Students will be able to:

  • Look up Bootstrap documentation to help them accomplish a task
  • Combine several pieces of Bootstrap to create a non-standard webpage component
Description

In this lesson, students complete a summative assessment of the unit’s learning objectives.

Objective

Students will be able to:

  • Prove their knowledge of Bootstrap through a multiple choice quiz
Description

This project enables students to unleash their creativity to design and implement a responsive website using Bootstrap. Students should go BIG on this project, using Bootstrap to make a responsive and beautiful website. They should be encouraged to explore new elements, using documentation to help them. They should be encouraged to use templates and examples to get them started.

Objective

This project enables students to unleash their creativity to design and implement a responsive website using Bootstrap.

Description

In this lesson, students learn the basics of Design Thinking. Design Thinking is a step by step process that helps developers and entrepreneurs develop their products while considering their end-users and testing out products before releasing them. Students will get an opportunity to practice Design Thinking in all subsequent lessons in this unit.

Objective

Students will be able to:

  • Describe and define the steps of Design Thinking.
  • Implement Design Thinking to create a product.
  • Practice interviewing students and generating ideas through peer feedback.
Description

In this lesson, students learn in more depth about the first principle of Design Thinking: Empathy. Empathy is the ability to understand and share the feelings of another, and is the most important tenet of Design thinking. Students will practice building empathy by interviewing classmates and evaluating the accessibility of existing web pages.

Objective

Students will be able to:

  • Define and use Empathy in creating products
  • Successfully interview peers and users
  • Identify accessibility issues in web design products
Description

In this lesson, students will take the information that they gathered in their interviews with peers to define a specific problem that needs to be solved. Students will create Point of View statements and composite characters to make a profile of the users who are in need of a fix to the problem that students define.

Objective

Students will be able to:

  • Define a problem related to user needs
  • Create a composite character
  • Create and articulate Point of View Statements
Description

In this lesson, students will learn strategies to help them ideate solutions to the problems they have been exploring throughout the Design Thinking module. Students will spend class time brainstorming with classmates, and encouraging one another to come up with out of the box solutions.

Objective

Students will be able to:

  • Ideate solutions to a problem relevant to their lives
  • Articulate the purpose of ideating, and strategies to make the ideation process work
Description

In this lesson, students learn the basics of prototyping. Students will create a prototype based on ideas they came up with for their design project, and present prototypes to classmates for critiquing.

Objective

Students will be able to:

  • Create prototypes
  • Narrow brainstorms to just a few concrete and realistic ideas
Description

In this lesson, students will test one another’s prototypes and provide constructive feedback about its usability and aesthetic appeal. Students will also ask thoughtful questions of the testers to get a better understanding of their experience interacting with the prototype.

Objective

Students will be able to:

  • Provide appropriate feedback after testing prototypes
  • Ask users thoughtful questions about their user experience
  • Articulate how to best test products on users
Description

In this lesson, students review content with a 10 question End-of-Unit Quiz.

Objective

Students will be able to:

  • Prove their knowledge of control structures and coding concepts through a multiple choice quiz