Journalists' Toolkit

Icon

A training site for multimedia and online journalists

HTML and CSS templates for learning, teaching

I have made a GitHub repo containing HTML and CSS templates for beginners.

An entire GitHub repo can be downloaded by clicking the “Download ZIP” button on the right-hand side of the main page.

As a teacher, I find it’s very handy to have files ready to open and show to students who are having trouble with one aspect of CSS or HTML. I show them the code, we talk about it, they usually get a clearer idea of how it works. But digging around for files on my hard drive is time-consuming and not always successful. Writing a new stylesheet from scratch takes time.

So this collection of simple problem-solving (and problem-illustrating) files will be useful to me in many situations. You can use it too.

Typography for the Web

In your CSS, you can specify typefaces (font families) to be used for the headings, paragraphs, etc., in your HTML.

However, what you see on your computer is not always going to be the same thing your audience sees. Why? Because different people have different fonts installed on their individual computers, phones, and other devices. If they do not have the font you specified, their device will automatically substitute … some other font.

It could be ugly. Very ugly.

There are two ways to ensure that the typeface you see on your pages will be seen by everyone else. The first and simplest way is to use Google Web Fonts. Just click that link, and you’ll be on your way.

The other way is more complicated to set up, initially, and you’ll have to upload the fonts to your own Web host. (That is not necessary if you use the Google fonts.) If you want to try it, go to Font Squirrel.

You should also read this helpful article from Six RevisionsCSS Typography: Techniques and Best Practices.

The article explains the techniques used for fonts in present-day Web design.

Comparison of Google Web fonts and @font-face

I chose three different fonts from the Google Web fonts collection. I made a simple page that uses all three fonts (view that page).

Then I uploaded those same three fonts to Font Squirrel’s generator page and used it to create the complete package of files that one needs to upload to the server (when using @font-face instead of the the Google Web fonts). I used the same simple page and its original CSS in combination with the @font-face CSS to make a comparison. If you view that page side-by-side with the other, you can check for differences in different Web browsers.

The two pages should look the same, but understand that the coding is different on each one. For the Google Web fonts version, there’s just one line in the HEAD of my HTML page. For the @font-face version, there is a separate additional stylesheet and also 590 KB of files on my Web server to make the fonts work.

Good tutorial sites for HTML, HTML5, CSS, jQuery

There are a zillion sites out there offering free tutorials, but many are pure junk. So here are a few that I recommend, in no particular order:

And some handy lists of many recent tutorials:

If you know of any others, please leave a comment.

Updates to design, HTML, CSS resources

The latest updates here:

Design Resources: Links for typography, color, Web browser statistics, screen resolution, page layout and usability.

HTML Basics: Essential tags to know, tutorials, HTML5.

CSS Basics: Shortlist of need-to-know items. “Reset” stylesheet. CSS3 information. Tutorials.

New resource: Page Design Basics

This resource — Page Design Basics — provides a very simple overview of how to lay out a Web page.

Students new to using CSS often make a mess of it because they do not grasp the utility of DIVs. By introducing these four regions of a Web page, an instructor can help students understand a basic structure that can be created with four DIVs. Font families, colors, and other design elements can be specified independently for each DIV.

For more information about CSS, see the the HTML and CSS Resources page.

Use Kuler, Photoshop to make a quick palette

What’s the quickest way to whip up a beautiful color palette for a new website?

1. Start with Kuler, a free online tool from Adobe.

2. Register and sign in so you can download a color swatch for your chosen palette(s). Not signed in? Then you can’t download. (Pay attention to WHERE you save the file!)

3. Open Photoshop and find the Swatches panel.

4. Open the Swatches panel menu and select Load Swatches.

5. Find that file you downloaded in step 2 and select it.

6. The last colors in your Swatches list will be the new ones from Kuler (open the Swatches panel menu and select Small List to see the hexadecimal color codes as shown below).

There you have it! To learn more about using Kuler, watch this video at Adobe TV (6 min. 34 sec.).

It’s useful to finalize a color palette in Photoshop before you start coding your CSS. Test all text and link colors against the background colors where they will appear to ensure that the contrast is okay.

Smart Tip: Save the palette as a PNG-24 file and upload to a Web server or Dropbox. Then test it by opening that file on every computer you can get your hands on. Hues and contrast can vary widely on laptops and desktops, Mac and Windows. Make sure your palette will work for all users!

Learn more about Web color and Photoshop: The Mysterious “Save For Web” Color Shift, by Doug Avery.

HTML and CSS resources updated

Most journalists do not need to become code jockeys — but it can be quite useful to know the basics of the language of the Web: HTML. It’s not hard at all to learn a few basic tags, and with those few you can have the ability to create and format hyperlinks, fix silly errors in a CMS in the newsroom, and understand the underpinnings of a technology you use every day.

I have updated the HTML and CSS Resources page here, with an eye toward keeping it short and simple.

Why not take a moment to look under the hood and see the engine of the Web? Oh, and I have some links to get you up to speed on HTML5 and CSS3 too.