How to use the editor: Click on a colour from the palette to choose your pen colour then click on pixels to change their colour.
Step 1: Creating a grid of pixels
Let’s create a grid of pixels that you can use for creating pixel art. CSS provides table styles for grid and table layouts.
Tables contain rows which contain cells. You are going to create a table with a black background and then put white pixels into it.
Open this trinket: jumpto.cc/web-pixel.
The project should look like this:
Add the following html into the
index.htmlfile to create a
<div>as a container for your pixel art and give it an
artid so you can style it:
Now go to your
style.cssfile and add the table styling for the art
This creates a table with a border and sets the spacing inside the grid.
It doesn’t look very interesting yet, you need to put rows of pixels inside it.
Now go back to your
index.htmlfile and add a row of 3 pixels inside the art
Notice that the three pixel lines are the same. Type the first one and then use copy and paste to create the others.
This time you’re using classes to style the divs as there will be lots of them.
Add the following style for the rows and cells:
Now your pixels will line up in a grid with black lines around them.
Now add another two rows of pixels to create a 3 x 3 grid. Remember to use copy and paste to save time.
Challenge: Resize your grid
3x3 is quite a small grid for pixel art. Can you make the grid bigger? 8x8 is a good size for pixel art.
Try using cut and paste rather than typing everything out.
Save Your Project
Step 2: Colour the pixels
functionthat can be called when we want to run that code.
You’re going to create a function called
setPixelColourfunction needs to know which pixel to change the colour of, this is an
Add the following code to the
script.jsfile to set the background colour of a pixel:
backgroundColoruses the American spelling of colour.
Now we need to call that function when a pixel is clicked on.
onclickto call a function when an element is clicked on. You’ll need to pass in ‘this’ as the input so your function knows which pixel to change the colour of.
index.htmland add the following code to the first pixel:
Test your code by clicking in the first pixel. It should turn black:
You only added
onclickcode to the first pixel so this won’t work for the other pixels yet.
Challenge: Make all pixels clickable
Can you make all the pixels clickable? Use cut and paste to make it quicker.
Create a quick piece of pixel art.
Tip: You can click Autorun to clear all of the pixels.
Step 3: Add a colour palette
Did you find it annoying that you couldn’t change a pixel colour back to white if you made a mistake? Let’s fix that by creating a colour palette so that you can click on a colour to change the pen.
First create a pen style.
Add the following code at the bottom of your
Now create black and white pen colours that use that style.
Add the following code to your
style=allows you to add CSS inside your HTML which is convient here.
You want to be able to change the pen colour when a palette colour is clicked on.
Variables are used to store information. Let’s create a penColour variable in
Add the following code at the top of the file:
Then add a function to change the penColour:
You’ll also need use the pen colour when you change the colour of a pixel.
setPixelColourfunction to use the
penColourvariable instead of
Now you need to call the
setPenColourfunction when a pen colour gets clicked.
Add the highlighted
onclickcode to your pen colours:
Now test that you can switch the pen colour between black and white to fill in or delete pixels.
Save Your Project
Challenge: Add more colours to the palette
Can you add more colours to the palette? Choose the colours that you want to create pixel art with.
Then create some cool pixel art.
Hint: The bright green colour is called
Ask your club leader if you can use the Windows Snipping Tool or an alternative to save a copy of your pixel art as an image.