Please enable JavaScript to use CodeHS

Web Design and Development

View Syllabus Overview
Advanced HTML and CSS
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 learn about HTML5 semantic tags and create web pages that leverage these tags to enhance the structure of their HTML documents.

Objective

Students will be able to:

  • Identify HTML5 semantic tags primarily used for page layout and structure
  • Describe the benefits of using semantic tags in HTML documents
  • Create web pages using semantic tags aligned with best web design practices
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