Build Your Own Website: A Comic Guide to HTML, CSS, and WordPress

A lighthearted how-to guide puts students on a yellow brick road to setting up a website using basic HTML and CSS or a content system like WordPress.

From Weebly to Wix, students (and teachers) today are building their own websites to go along with school projects and assignments. With a wide range of available tools that hide the code behind push-button GUIs, it is easy enough to stake virtual ground, and information that was once shared via a poster or a PowerPoint presentation is now often handled with a student-made website. While more students are putting up websites, they are not necessarily learning more than how to put content on the web in the most surface-level, drag-and-drop way—similar to how content is formatted and saved in a word processing program.

Knowing more about what's going on under the hood of a basic web page offers more control and the ability to better fine-tune a generic website. A graphic novel introduction from No Starch Press takes a Wizard of Oz approach to helping the main character learn about HTML, CSS, and WordPress (where the Wizard lives). The result is an engaging introduction to web coding basics as a stepping-stone approach to understanding, using, and controlling a content management system like WordPress.

Not Really 'Coding'

There are levels of code, scripting, and markup used to develop websites and web-based applications. The pages that users see when they visit a site are typically created using HTML and CSS. HTML (hypertext markup language) is used to tell the browser about the structure of the material (e.g., this is a headline, and this is a list). CSS (cascading style sheets) is used in conjunction with HTML to tell the browser what the content should look like (color, size, placement, etc.).

Once upon a time, coding for the web required working directly with HTML and CSS in a text editor. The "tags" you wrap around content when "coding" (or, more accurately, "marking up") information to show on a web page are interpreted by a browser, and only the content is shown to the viewer. (You can see what these tags look like by using the "view source" option in a browser to look under the hood of a web page and see how these tags are used to denote headlines, paragraphs, lists, and more.)

Today, many, many web sites are created using tools that simplify the process of preparing web content. These tools make it easy for people to create websites using front end interfaces that let you type (or paste) content directly into an online editor and format it much as you would using a word processing tool. The information is then automatically marked up by the system and each page (or entry) is stored in a database. Within these environments, you can also control the site's overall look and feel.
While learning to use HTML markup isn't necessarily "computer coding" in the sense that learning a language like Python, C++, or Java is, learning to use basic HTML is, arguably, a good way for students to begin working with text files that use a required syntax to make something "show up" in a computer browser. A basic HTML error won't necessarily crash a page, but learning to debug HTML or CSS issues is good practice and helps young coders develop good habits and testing skills.

Build Your Own Website: A Comic Guide to HTML, CSS, and WordPress, written by Nate Cooper and illustrated by Kim Gee, takes a yellow brick road approach to learning about website development, beginning with HTML, adding in CSS, and then introducing WordPress, a popular content management system originally developed to make it easier for non-coders to create blogs. Today, WordPress is used by people to easily and quickly create and manage a wide range of websites (not just blogs). Much of the "code" that runs a website created using WordPress is already in place to make it easy to customize a site and publish your own content. But knowing the basics of HTML and CSS will help you have more control of how your content is displayed.

The more you know, the more you can tinker, which is why Kim, in Build Your Own Website gets a literal crash course in HTML.

The Comic Format

Build Your Own Website is presented, partly, in comic book (or graphic novel) format. The book tells the story of Kim (the illustrator), a young woman who has signed up for an evening class called Web Basics 101 because she wants to create an online portfolio website to share her art. Kim's teacher is Nate (the author).

Pretty quickly, we see that Kim, who does yoga and has a dog named Tofu, is confused about what she is learning in Nate's class and needs, you guessed it, a Wizard of Oz dream sequence to give her web skills a jolt. There is no tornado in site, but Kim crash lands a spaceship and discovers an HTML guru who is "learned in the ancient language of HTML."

The storyline of Kim's journey to learning basic HTML, CSS, and building her site with WordPress is simple to follow, funny in a roll-your-eyes, I-see-what-you-did-there way, and does a good job explaining concepts in a pared down, straightforward manner that fits inside dialog bubbles. The humor, be prepared, can be a bit forced (A tag like a shirt tag?), but the approach may especially capture the interest of students who think coding isn't something they can do and draw them into the story.

Each chapter contains a comic portion followed by traditional how-to instruction, information, examples, and lots more background information. (You will need to read both the comic vignette and the textbook portions! Not everything is covered in the graphic novel sections.)

From the guru, Kim learns about HTML tags and making, saving, and viewing files. With a few basic lessons from the guru, and armed with her site map, the Sword of Standards and Conventions (a few basic rules for file naming), and a healthy fear of the wild 404 dragon, Kim is sent off into the content forest to create her pages.

In Chapter 3, Glinda, the good witch, appears to teach Kim about CSS so that the site doesn't "look boring." With help from Glinda, Kim gets a look at how CSS can work with HTML to help her control the look and feel of her site.

In Chapter 4, Kim runs into Tin Man, Lion, and Scarecrow on her way to WordPress City. The man (a la Emerald City's Wizard?) at the entrance calls her HTML poppycock and says that WordPress City is a "modern, managed city that makes it easy to create web pages." Kim stays at the village inn, visits the library, learns about blogs, and sets up her first WordPress page. Later, she and the librarian "go shopping" in the Appearance Panel where Kim learns how themes work and how formatting can be taken on, off, and customized in WordPress (like an outfit).

In the end, Kim stumbles behind a curtain, and rather than finding the Wizard, she runs into the guru again, coming full circle and getting a reminder that HTML is still there, underneath it all.

With a supply of quarters to power her spaceship (rather than Dorothy's red shoes), Kim flies off, finds a host to set up her site, and puts what she has learned in action.

Build Your Own Website will appeal to a very specific audience looking to learn more about building a website, but for someone intimidated by the process, the book is a lighthearted and practical introduction. At the end of the book, a new web coder will have the skills needed to set up a free WordPress site and begin putting content in place and, if necessary, should be able to tweak the content directly using HTML and CSS.

You Might Also Enjoy These Related Posts:

• Book list for science-filled summer reading!
• New Series of Science Buddies Books
• Look Up: Bird and Astronomy Summer Reading
• Blending Science and Art with Paper Inventions
• Special Effects Fun with Nick and Tesla
• Nick and Tesla Build a Gadget Glove: Science Reading
• The Most Magnificent Thing: Science Reading
• Do Even More with Your Raspberry Pi Projects Kit