Web Development 101

A project-based introduction to web development for intermediate coders in upper middle or high school using HTML and CSS. Request Quote

  • Grades 7 - 8
  • 10 lessons
    • Web
  • Advanced Course
Course includes
  • 10 lessons
  • 134 activities
  • Enhanced Creativity Tools
  • Automatic Assessment
  • Tutorials and Reviews
  • Coding Puzzles
  • DIY Projects
  • Quizzes
  • Teacher Guides
  • Answer Keys
Prerequisites
No previous coding experience required.

Web Development 101

Lesson: Pixel Art
Time: 50+ mins

Introduction

Let’s get ready to create fun pixel art shapes by using CSS and divs! Before getting started, point out to students that this lesson is more project-focused than previous lessons and includes three modules: Pixel Art; Project 11: Space Invaders Art; Project 12: Game World Creator. Activities include making a grid using div elements; coloring and sizing the grid elements; creating a Space Invaders-style gallery of characters using divs; and creating a game world with square grids. Note: Puzzle answers (3 total) are located below the “Standards” section in this teacher guide.

New HTML Elements

  • None

New HTML Attributes

  • None

New CSS Styles

  • None

Vocabulary

  • Pixel art: A type of digital art that was born from the color and pixel limitations of old computers. It uses square grids to draw the art.

Objectives

Students will...
  • Apply coding concepts to create a Space Invaders Art project and Game World Creator project

Materials

  • Computers or laptops (1 per student) with student account access to Tynker.com

Warm-Up (5 minutes)

  • Tell students that they’re going to create fun pixel art shapes today using the Text Code Editor. Next, show them some examples of pixel art. Here’s an example of Wonder Woman and Batman from Tynker’s Hour of Code Superhero Masks lesson:

  • Optional: Provide students with an RGB chart so they have a list of different colors to use in their project. You can find the chart here:
    https://www.w3schools.com/colors/colors_picker.asp

Activities (45 minutes)

Facilitate as students complete the Pixel Art modules on their own:
1. Pixel Art (Document)
  • Students are introduced to pixel art, which is a type of digital art that’s created using grids (squares).
  • This module includes three different pixel art activities. Note: Puzzle answers (3 total) are located below the “Standards” section in this teacher guide.
    • Step 1 - 4 Squares with Borders: Students will need to create a column of four squares. Struggling students might realize that they do not have an example of completed code to refer to, so they might need help getting started with their code. Their art should look similar to this:

    • Step 2 - Floating Elements Inside Container: Students will need to expand on their code from the previous step by adding color to their pixel art. Their art should look similar to this:

    • Drawing Your First Pixel Art: Students will need to copy the code from the previous step and then read the provided instructions to create a grid that has two rows and two columns:

2. Project 11: Space Invaders Art (DIY)
  • In this DIY (do-it-yourself) project, students will use the Text Code Editor to create a pixel art creation of six different Space Invaders-style characters. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
  • Ask students to read through the tutorial before they start coding.
  • Tell students that the comments (noted with the “ < ! --- " symbols) are there to help them understand the given code. Here is an example:

  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? Direct their attention to “Step 5” of the Tutorial, which includes two different Bonus challenges.
3. Project 12: Game World Creator (DIY)
  • In this DIY project, students will use the Text Code Editor to create a game world with square grids. Note: Students are provided step-by-step directions in the Text Code Editor “Tutorial” tab, which will guide them through the project.
  • Ask students to read through the tutorial before they start coding.
  • Here’s a screen image sample of what their project might look like:

  • Did students finish early? Direct their attention to “Step 4” of the Tutorial, which encourages students to change the size of their grid. Can they create a world using a 10x10 grid?
  • Are students struggling to get started? Hand them a piece of paper that has a 6x6 grid, and have them color their design before they start coding. Here’s what the 6x6 grid should look like:

Extended Activities (20 minutes)

More Practice
  • Give students a piece of paper that has a 5x5 grid (or larger) and ask them to sketch their own design. Then, ask them to recreate their pixel art using the Text Code Editor. Here’s an example of a 5x5 grid:

U.S. Standards

  • CCSS-Math: MP.1, MP.2, MP.4, MP.7
  • CCSS-ELA: RI.7.4, RI.8.4, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  • CSTA: 2-AP-13, 2-AP-16, 2-AP-17
  • CS CA: 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
  • ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

U.k. Standards

Key Stage 3 (Years 7-9)
  • Understand several key algorithms that reflect computational thinking [for example, ones for sorting and searching]; use logical reasoning to compare the utility of alternative algorithms for the same problem.
  • Create, re-use, revise and re-purpose digital artefacts for a given audience, with attention to trustworthiness, design and usability.
  • Understand a range of ways to use technology safely, respectfully, responsibly and securely, including protecting their online identity and privacy; recognise inappropriate content, contact and conduct and know how to report concerns.

Answer Key

Step 1 - 4 Squares with Borders


Step 2 - Floating Elements Inside Container

Step 3 - Drawing Your First Pixel Art