Journalists' Toolkit


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.

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.