9.6. CSS topic presentation learning task#

9.6.1. Assignment#

Exercise 9.1

Create a web page that illustrates how to use a CSS feature.

  • Sign up for one of the following CSS topics.

  • Research the topic at the resources listed below (and other sources, if you find them) and then create a web page with embedded CodePens to illustrate your topic.

  • Prepare a 5- to 10-minute informal presentation on the topic. Topics will be presented in class.

I created a sample page, Background clip text to demo the what I’m looking for in this assignment. The focus on this assignment is an oral presentation, but give enough written description on your web page so that students can refer back to your topic as a refresher.

Find and read about your topic on each of these websites:

Tip

CSS to vertically center content on web page

For the CSS topic, if you would like to vertically center your page.

If your webpage is set up as:

<body>
  <main>
    <article>
      .....

To vertically center the <article> content, you can add the following to your <head> :

<style>

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

article {
  max-width: 48rem; /* choose whatever width you'd like.
                      "rem" can be viewed as the width
                       of a font's M character */
}

</style>

9.6.2. Rubric#

Rubric

Requirement

Points

Clean web page

Web page has a clean design, is easily readable, and pens are embedded correctly.

10

Basic information

Page includes information about the topic from the required websites

20

Clear Codepen examples

Page uses clear and informative Codepen examples to illustrate topic

10

Thoughtful presentation

Student obviously researched the topic well and thoughtfully created the page and Codepen examples.

10