<project> steps(10)

Comic Creator

What's CODER?
Download Complete Project 1.6mb | .zip file


Got a story to tell? Have some great text and images you want to put together? This project will give you the pieces to turn them into a webcomic while teaching you some new skills along the way.

A great project for: Comic fans, writers, anyone that wants to use images and text in fun ways online.


Skills Needed: Basic HTML, Basic CSS.

Skills Learned: Intermediate CSS, Image Placement, Basic Positioning, Z-Index, Borders, Margins, Padding, Fonts.

Submitted By: Coder Team

A quick prologue…

Before we start building our comic it may be helpful to review some previous coder projects, especially if you’re not familiar with CSS and HTML. If you are cool with the code but not sure what you want to say you can download the images we used in our example.

Ready to think inside the box? Install the template

Alright, let’s start building our comic. This project is a little different than some of the other Coder projects. We won’t be starting from scratch. We’ve put together a kit with all the parts you need to make your own comic - all you need to do is add the words and pictures. We’ll walk you through how each piece works, introducing some new concepts along the way.

The first thing you need to do is download and install the Comic Creator app template onto your Coder. Installing an app on Coder as simple as creating a new one.

Step 1: Take a look around

Now that you have the Comic Creator app installed let’s look around (but don’t mess with anything just yet!)

Step 2: A quick tour of our panel

Now that we’ve seen the app. Let’s look at our panels and see how we can modify them.

Messing with the border.

It should look like this:

border:10px solid #2b2b2b;

This is adding a 10 pixel dark grey solid border around our #panel1 <div> giving this panel, and our other panels, that classic comic feel. You’ll also notice that we’ve defined a height of 280px and width of 780px for our panel.

Understanding overflow.

Next let’s see what overflow:hidden is doing.

This will be useful for making our comics. I allows us to use images of various sizes and dimensions in our preset panels.

Step 3: Add a new picture

Alright, let’s start adding our own images and text and making our comic. For these next steps we will be using images and from our “cool” image bundle, showing wintry mix of arctic and antarctic exploration photos from the Smithsonian Institution’s archive. We will be making up a story to go with along with them. If you want to, you can copy what we’re doing. If you have a different story or images of your own, feel free to use those.

Our IMG tag looks like this:

<img src= "/static/apps/comic_complete/media/running.jpg" id="image3" class ="inback">

Step 4: Position the picture in the panel

Now we’ve placed our picture but it doesn’t look quite right. The image we’ve put in there is bigger than the panel and the part we want to see isn’t showing up. Let’s scale it down and move it around to make it fit.

It looks like this right now:

#image1 { position: absolute; }

If you look at the #panel1 id you’ll see that it has the position: relative; property. These two things are part of the same system of CSS positioning.

CSS positioning properties help you place elements more precisely in relationship to one another then they would normally layout. Under normal circumstances HTML elements are positioned static which means they’re positioned according to the normal flow of the page.

Objects that are positioned absolute can be moved and placed relative to their first parent element (as long as that position is anything other than static, hence the need to apply it to our panel). So by applying a position: absolute property to our picture we can push it around, inside or panel. Let’s do that.

The first thing we need to do is just make the image smaller. The image we’ve added is pretty wide and we want it to fill the full width of the panel.

Now lets shift that image up a little bit. To do that we will give it a new positioning property and tell it how many pixels to move.

Our code looks like this:

#image1 { position: absolute; width: 100%; bottom: -110px; }

And that’s how we can position images within our panels no matter their original size or shape.

You can use the properties bottom, left, right, and top with pixel dimensions to move your images around.

Step 5: Write new text

Now that we’ve got a new picture let’s start writing our story.

Our template includes two different classes for comic text. One is designed with narration and scene setting in mind. The other is better for dialogue and sound effects.

Step 6: Padding and positioning your text

Alright so you’ve written the text for the first panel of your comic. Maybe you don’t like how the text boxes look or where the text is positioned? Maybe it’s blocking someone’s face? Let’s change that.

Padding and Margin

Let’s start with messing around with the .narration class’s margin and padding. These are the properties that keep our text from touching the edge of the panel and the edge of the box they are in.

It should look like this:

padding: 15px;

Change it to something bigger, like 40px.

See the way the overall box gets bigger? That’s because we’ve increased the distance between the text and the inside edge of the box.

Now find the margin property.

It should look like this:

margin: 20px;

You can use these properties to change the text boxes if you don’t like the ones we’ve made.

left, right, top, and bottom

Now that we’ve played around with margin and padding let’s explore how to change the place on the panel the text actually appears.

The Comic Creator template has four classes to help us position the text boxes quickly. They use the same absolute positioning principle that we used on our image.

Try using them to move your text into different corners of the panel. Find a placement that works for your image.

Step 7: Continue the the story on the next row

Alright let’s do the next panels! This is shaping up to be an interesting adventure.

Step 8: Stacking stuff

On our third panel we ran into a bit of a problem. We made a bunch of dialogue text and now its overlapping our narration text. It’d be nice if the dialogue was under the narration. Let’s change that.

Look at the very bottom of the CSS tab. Remember those classes called .inback, .inmiddle, .infront? We’re using them in our HTML. Let’s look at them in CSS.

p>It should look like this:

.inback { z-index: 1; } .inmiddle { z-index: 2; } .infront{ z-index: 3; }

The z-index property determines how objects that are positioned (like the one’s we’re using) will stack on top of one another. Here, we’ve created three options and assigned a number to each, 1 being closest to the back and 3 being in the front.

Let’s go back to the HTML and give the dialogue in that panel the .inmiddle class to set it behind our narration.

Step 9: Finishing your comic

Now tell the rest of the story. Position and tweak the remaining images and text blocks to wrap-up your comic adventure.

Step 10: Sign it off

The last step is to give your comic a title and give some credit to yourself, and anyone else that helped contribute to your story. That’s it! Nice work. How did it turn out? Is it as “cool” as ours?

Bonus Rounds

Five panels doesn’t leave a lot of room for a good story, does it? Now that you’ve started your comic, see if you can’t make it a little more interesting.

Coder Projects to Try Next

Did you enjoy making a comic with code? Try some of these other projects to and learn to make interactive things.


Digital Clock

What time is it? You’ll finally be able to answer that question after you’ve built this simple clock.

Open Project

Night and Day

Ever wish you could control the universe? Well now you can pretend with this project. Change day into night and back again with the click of a mouse and learn a whole new programming language along the way.

Open Project