Pixels: Follow-Along Activity

Follow the instructions to create a very simple pixel PAC-MAN!

Pixel Art Examples

Original Mario

All art for video games was once hand-coded, pixel-by-pixel!

Panda

(animated: https://i.pinimg.com/originals/ab/dd/7d/abdd7da2f2fd574cb5b92f61b01d625d.gif)

Now, some developers copy this style for their own art

Cityscape

Pixel art can be used for almost anything!

Setup

Start by forking this starter Glitch. There is some code already in the project:

index.html

<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="main">

    </div>
  </body>
</html>

style.css

#main {
  height: 100px;
  width: 100px;
  border: 2px solid orange;
}

Run the program to see how it looks! There should be a small orange square outline on the page. Notice that the #main selector is selecting the <div> with the id attribute of main, and that ruleset is doing the styling.

Make the following updates in the style.css file:

Set the height to 400
Set the width to 400
Set the border color to black

After updating, the CSS should look something like this:

#main {
    width: 400px;
    height: 400px;
    border: 2px solid black;
}

Rows and Columns for the Grid

The goal for the #main container <div> is for it to have a grid of 4x4 "pixel" squares. Doing some quick math, these "pixel" squares should actually be 100 pixels wide and 100 pixels tall (400/4=100). So there should be four row <div>s, and each one should have four cell <div>s!

Open the index.html file for editing
Within the <div id="main">, create four child <div> elements
- Each of these <div> elements represents one row
Add a class attribute with a value of horizontal for each "row" <div>
Within each of those child <div> elements, create four grandchild <div> elements
- Each of these <div> elements represents one cell
Add a class attribute with a value of cell for each "cell" <div>

Note: Copy/Paste will make this much faster!

The full <div id="main"> in the index.html file should look something like this:

<div id="main">
    <div class="horizontal">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="horizontal">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="horizontal">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="horizontal">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div>

Styling the Cells

Now that the HTML structure is there, it's time to style the grid with CSS!

Open the style.css file for editing
Under the existing contents, create a new ruleset for each cell
- Selector: .cell
- Curly brackets
Set the width and height properties of each cell to 100px
For testing purposes, set the background property to blue

The new ruleset in the style.css file should look something like this:

.cell {
    height: 100px;
    width: 100px;
    background: blue;
}

Aligning the Cells

Currently, each cell div will stack vertically. This is the default behavior for HTML div elements. Instead, the "cell" elements should display horizontally within each row. CSS Grid layout allows this style.

Resource: CSS Grid Layout

Open the style.css file for editing
Above the .cell ruleset, create a new ruleset for each row
- Selector: .horizontal
- Curly brackets
Set the display property of each row to grid
- This tells the webpage that each row will have the grid layout
Set the grid-template-columns property of each row to 1fr 1fr 1fr 1fr
- This will determine the number of columns in each row
- The 4 1fr mean that there are 4 columns, each taking one fraction of the available width (for real)
Remove the width from the .cell ruleset as it is no longer necessary

The updated rulesets in the style.css file should look something like this:

.horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.cell {
    height: 100px;
    background: blue;
}

Now, the entire main container should be blue, because each cell is 100x100 pixels and they stack properly!

Filling Out the Grid with Colors

Now that each cell block is in the right place, it will be possible to set each color in the grid!

Remember, this is what PAC-MAN should look like on the 4x4 grid:

Open the index.html file for editing
Add a class of black to each black cell
Add a class of yellow to each yellow cell
- Note that the div will now have two classes: cell and yellow
- Two classes can be set with a space between them: class="cell yellow"
Open the style.css file for editing
Remove the blue background from the "cell" elements
Create a new ruleset for "black" cells
- Selector: .black
In the .black ruleset, set the background color to black
Create a new ruleset for "yellow" cells
- Selector: .yellow
In the .yellow ruleset, set the background color to gold

That's it! Refresh the page and PAC-MAN should appear in the grid.

Final Code

At the end of the activity, the code should look something like this: