Most web developers out there start out just coding regular HTML. Hell, many web developers only knows how to code in HTML! But if you want to learn a new set of skills, learning how to put your site in a CMS solution, like WordPress, Drupal or Joomla, is the next logical step. But aside from learning an entirely new programming language, you also have to rethink the way you code HTML.

This is the first part in a series of articles that will teach you how to code dynamic HTML. Are you ready? Let’s go!

Step 1 – be mentally prepared

Wow, that sounds dramatic, doesn’t it? Just wanted to get your attention first. I wont be teaching you new skills or anything, but I will be teaching you how to think different!

Dynamic is the keyword here. By now, you should have realized that there are many methods of doing the same thing. Right now, you have to code with the intention of everything being dynamic. With an interface, every single piece of text and every image should be dynamic.

Step 2 – make the content look good, no matter what!

Here’s the next keyword for you – content! The very first thing you should do is identiy what the content is on your site. And what I mean by that is the actual body text. In this area, the user will be able to insert text (obviously), images, lists, tables, anything you can imagine. He will be able to insert an essay and he will be able to insert just two lines. And both of those have to look AGAP (as good as possible!)

And here is the first value for you to use:

div.content {
  min-height: 400px;
}

Putting a min-height on the actual content-div (that is, if you use a div and not a HTML5-friendly <section> or <article>) ensures that there won’t be too much of a difference between a page with two lines of text and one with a hundred lines of text.

Moving on:

div.content, div.content p, div.content ul, div.content ol, div.content table {
  font-size: 12px;
  font-family: Arial;
}

In order to avoid confusion, make sure that the div and the content inside the div has the exact same look as inside the actual CMS. In face, extend it to lists and tables – copy the same margin and padding.

Also, pro-tip:

div.content p {
  margin-bottom: 1em;
}

1em is a dynamic value. It essentially means one line-break that is as big as the actual font-size of the p-tag.

Step 3 – blurbs

The CMS solution gives the user the ability to add images to the content area. But there’s also a second way to add images – through blurbs!

So, what are blurbs? Blurbs are essentially an area inside a design that’s reserved for an image or a Flash movie. They often have a fixed width and height. But sometimes, the height can be dynamic, making only the width fixed. So, how do you code the HTML for that?

First of all – here’s the HTML:

<div class="index_blurb">
  <!-- BLURB GOES HERE -->
</div>

Simple enough, right? And here’s the CSS:

.index_blurb
{
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.index_blurb img
{
  display: block;
  margin: 0;
  padding: 0;
}

This is simple enough, right? The overflow value is only there to fool-proof the design – if the user accidently inserts a image with different dimensions, it won’t break the design.

Conclusion

So there you have it. This is about two different things – making the design fool-proof and making it easier to understand and use for the user. Stay tuned for the next part!