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.
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.
This project introduces the concept of <div> elements and CSS classes. Knowing about these will help you complete Comic Creator more easily.
This project will help you navigate Coder and introduces some of the fundamentals of HTML and CSS that this project will build on.
If you don’t have your own images or don’t know what kind of comic you want to create, you can download these 5 images and follow along as we make our comic below. All the images are from the Smithsonian Institute's collection.
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.
Now that you have the Comic Creator app installed let’s look around (but don’t mess with anything just yet!)
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:
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.
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.
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:
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:
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:
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.
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.
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:
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:
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.
Alright let’s do the next panels! This is shaping up to be an interesting adventure.
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:
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.
Now tell the rest of the story. Position and tweak the remaining images and text blocks to wrap-up your comic adventure.
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?
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.
We made one page, why not make a whole book! Try adding more frames and/or widening the page to tell and even bigger story.
There are way more ways to talk than just narration and big white letters. Try creating new speech and text styles knowing what you do about CSS styles so far.
Reading is fun but clicking is exciting. See if you can make some of the panels interactive. Try using the :hover or jQuery and commands from the Night & Day exercise to make make panels, text, and images react to your mouse.
Did you enjoy making a comic with code? Try some of these other projects to and learn to make interactive things.
What time is it? You’ll finally be able to answer that question after you’ve built this simple clock.
Open Project
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