Skip to content

Instantly share code, notes, and snippets.

@ashx3s
Last active January 20, 2022 20:46
Show Gist options
  • Select an option

  • Save ashx3s/7371f05b2deb3862eb4ca54e27c21299 to your computer and use it in GitHub Desktop.

Select an option

Save ashx3s/7371f05b2deb3862eb4ca54e27c21299 to your computer and use it in GitHub Desktop.
Wiki Article Activity

Wiki Article Activity

  • Due: Friday Jan 21 @ 11:59pm
  • Weight: 4%

Objectives

  • Replicate a wiki article in codepen
  • Familiarize yourself with html text and image tags
  • Practice nesting html elements
  • Pair Code

Instructions

  1. Find a wiki article that interests you on wikipedia
    • you will recreate this article using semantic html learned in class
  2. Create an <article></article> inside of main tags in codepen for your article
    • the main tag represents the entire ui of wikipedia you do not need to code the rest of the ui. In this case it is just being used as a container.
  3. Use semantic tags to organize your text
    • <header></header> for top level heading
    • <section></section> for the article content
    • <footer></footer> for a link to the original article (citation)
  4. Style content
    • text should be responsive (not create horizontal scroll)
    • article paragraphs should be a max of 75ch (characters)

Notes

  • You don't need to include all of the article content, 2 sections is sufficient.
  • This is a learning activity to help build skills for the heavier graded assessments. Use it for practice and to get feedback on your work quickly.

Rubric

  • 2pt for submission
  • 1pt for using semantic tags
  • 1pt for adding css styling

Submission Notes

  • Create activity in codepen with a partner
    • you will each have your own version of it by the end
  • export as a zip file (see the bottom right of codepen for the export option)
  • Submit your zipped file to brightspace along with a link to your codepen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment