kdmc web development tutorials

KDMC produces a wealth of digital media tutorials to support our training sessions and classes. While the focus of some tutorials is on technology and journalism, most are general enough to be of use to anyone.

Hover for tutorial descriptions, or see all tutorial categories
  • Web Development Building Web Sites
    • Storytelling Apps and Tools
       
      Description
      photo description

      There are many free applications and online tools journalists can use to make different types of stories, from interactives and graphics to data visualiztions and maps. These are links to many of the most useful and popular ones and tutorials on how to use them.

      READ
       
    • JavaScript for Journalists JavaScript, a coding language used in webpages.
       
      Description
      photo description

      JavaScript is a coding language used in webpages. It enables you to do things like add interactivity to a website, build applications, retrieve data from other sites and so much more.

      READ
       
    • FreeDive tips and tricks Get the most out of freeDive searchable databases.
       
      Description
      photo description

      Get the most out of freeDive searchable databases.

      READ
       
    • CSS Layout with HTML5 Learn how web pages are structured with CSS
       
      Description
      photo description

      If you've got basic HTML and CSS skills and are ready to learn how to structure a web design with CSS layout techniques, this tutorial will help you take your skills to the next level.

      READ
       
    • CSS 101 The essentials of cascading style sheets
       
      Description
      photo description

      HTML is for setting the logical markup of documents on the web, but has nothing to do with how those documents appear - that's a job for Cascading Style Sheets, or CSS. This tutorial provides an introduction to the fundamentals of document decoration with CSS.

      READ
       
    • Search Engine Optimization — Basics Improve your Google ranking
       
      Description
      photo description

      Search Engine Optimization (SEO) is the process of making the content you publish appear near the top of the Search Engine Result Page (SERP). Your SEO skills make it easier for your audience to find and connect to your content. This tutorial presents the foundation tools and techniques for incorporating good Search Engine Optimization techniques into your publication workflow.

      READ
       
    • WordPress: Getting Started Power your site with a simple but powerful CMS
       
      Description
      photo description

      New to WordPress? This tutorial will guide you through the basic steps of publishing with the world's most popular content management system. Learn how to post and mange your content, manage tags and categories, upload media and more.

      READ
       
    • Build 960 design grids in Photoshop A fundamental element of good Web design
       
      Description
      photo description

      Most modern Web sites are designed and built on a fixed, 960-pixel grid. Building on a grid creates page layouts that are visually consistent and easier for users to navigate. This tutorial will teach you how to build a 960-grid template using Photoshop.

      READ
       
    • Building an Ad Platform with DFP Getting started with DoubleClick for Publishers.
       
      Description
      photo description

      Serving ads isn't as easy as it sounds, but Google's Double-Click for Publishers goes a long way toward streamlining the process, maximizing revenue, and keeping performance high. This tutorial explains how to get started building an ad platform of your own with DFP.

      READ
       
    • PHP 101 Learn a useful web programming language
       
      Description
      photo description

      PHP has emerged as the most widely used server-side web programming language in use today. PHP makes it easy for web pages to interact with databases, present different kinds of content to different users, manipulate text, send email, process forms, perform advanced mathematics, or do most anything else that involves delivering dynamic data into web pages.

      READ
       
    • Using Free Web Designs How to use free HTML design templates
       
      Description
      photo description

      Multimedia web sites often take the form of mini sites that don't utilize your publication's design templates. Coming up with fresh, professional-looking web designs for multimedia projects can be tedious and time-consuming. Fortunately, there are literally thousands of downloadable free web designs out there, ready to be customized and modified. In this tutorial, we point to some of the best resources for free web design templates, and also provide detailed instructions for modifying our own freely downloadable web design.

      READ
       
    • FTP Made Simple How to transfer files to your website
       
      Description
      photo description

      Once you've created a web site, you'll need to upload it to a public web server, where the rest of the world can enjoy it. If you're not working with a content management system, you'll need to use one of the internet's oldest protocols, FTP (which stands for File Transfer Protocol). This tutorial includes a video screencast illustrating the FTP process step-by-step.

      READ
       
    • Build an animated ad in PhotoShop CS4. Create revenue for your site
       
      Description
      photo description

      Independent bloggers and journalists may find that they need to build an ad to support their work. This tutorial will provide some basic guidelines and instruction on how to build an animated ad in Photoshop.

      READ
       
    • Soundslides Interactive multimedia made easy
       
      Description
      photo description

      Soundslides has become one of the industry standards in creating audio slideshows due to its simple interface, low cost and its devotion to journalistic storytelling.

      READ
       
    • Flash Templates Assemble content into a well-designed story shell
       
      Description
      photo description

      A tutorial on how to create and use templates for creating news projects using Adobe Flash. A general understanding of the basics of Flash is required for this instruction on implementing the templates.

      READ
       
    • Creating a Publication Widget Build and install widgets on personal sites
       
      Description
      photo description

      Widgets are bits of code that when embedded into a website, blog or personal page on a social network, can display different kinds of content from other websites, such as a feed of news stories.

      READ
       
    • HTML 101 Learn to use the language of the web
       
      Description
      photo description

      Hypertext Markup Language (HTML) is simple document markup languaged used for creating Web pages and other information viewable in a Web browser. This tutorial is a crash course in basic HTML - enough to get you up to speed and help you feel comfortable with general HTML syntax and structure.

      READ
       
    • Photoshop The standard for working with digital images
       
      Description
      photo description

      Adobe Photoshop is the industry standard for working with digital images of any kind. This tutorial will take you through the entry-level steps of using the program to open, crop, resize, adjust and save a photographic image. While applicable to earlier versions, this tutorial uses Adobe Photoshop version CS3.

      READ
       
    • Dreamweaver Automatic conversion of text and graphics to HTML
       
      Description
      photo description

      Dreamweaver is a Web page design program that lets you type text and add media elements directly into a page, much as you would with a word processing program like Microsoft Word. Dreamweaver converts your text and graphical page design into the HTML code read by a Web browser.

      Note: This tutorial covers an older version of Dreamweaver. However, most instructions and screenshots are still relevant to the current version.

      READ
       
    • WordPress: Beyond the Basics Deep dive on themes, plugins, menus and more
       
      Description
      photo description

      Now that you've found your footing with WordPress, it's time to roll up your sleeves and dig deeper. In this tutorial we cover building menus and sidebar widgets, installing and working with themes and plugins, batch post management, using the Links manager, and more.

      READ
       
    • Embedding Multimedia How to put multimedia on your site
       
      Description
      photo description

      This is where your skills come together - Web page creation skills, interview skills, audio and video editing skills, and storytelling skills all converge at this point. Inserting media into Web pages is a bit more difficult than creating plain old HTML with graphics, but if you've mastered the other tutorials in this site, you'll do fine.

      READ
       
    • WordPress: Managing Settings Exploring the options in the WP Settings panel
       
      Description
      photo description

      This is a companion to the WordPress: Beyond the Basics tutorial. It takes a deep dive into all the options found in the Settings section of the WordPress Dashboard.

      READ
       
    • Installing WordPress Get your WordPress installation up and running
       
      Description
      photo description

      Depending on your existing web experience, the most complex aspect of running a WordPress site may be the installation process. In this tutorial, we demystify the process of using WordPress installers at popular web hosts, and offer pointers on first post-installation steps.

      READ
       
    • WordPress: Photo Galleries WordPress photo galleries that work
       
      Description
      photo description

      Learn how the WordPress Media Library and galleries work, how to set up and use the NextGen plugin to improve photo management and create slideshows and galleries that can be rated or contributed to by users.

      READ
       
    • WordPress: Modifying Themes Tweaking the look and feel of WordPress sites
       
      Description
      photo description

      Learn how themes are constructed and how to get your chosen theme to work exactly the way you want it to.

      READ
       
    • WordPress: Building a "Topics" Site Search Engine Optimize your WordPress site
       
      Description
      photo description

      A news site often publishes many related articles on the same topic, such as "Healthcare Reform." While these disparate articles may be linked to one another through a tagging or category interface, it's ideal if a site can maintain a single, stable URL that gathers related content under a single umbrella. Having a "topic page" system helps both readers and the publication to locate and target related information, and improves SEO value. This tutorial demonstrates how KDMC fellows can use our demonstration "Topic Central" system, as well as how developers can create such a system with WordPress.

      READ
       

Creating a Publication Widget

Widgets are bits of code that when embedded into a website, blog or personal page on a social network, can display different kinds of content from other websites, such as a feed of news stories.

CSS 101

HTML is for setting the logical markup of documents on the web, but has nothing to do with how those documents appear - that's a job for Cascading Style Sheets, or CSS. This tutorial provides an introduction to the fundamentals of document decoration with CSS.

Flash Templates

A tutorial on how to create and use templates for creating news projects using Adobe Flash. A general understanding of the basics of Flash is required for this instruction on implementing the templates.

Soundslides

Soundslides has become one of the industry standards in creating audio slideshows due to its simple interface, low cost and its devotion to journalistic storytelling.

Using Free Web Designs

Multimedia web sites often take the form of mini sites that don't utilize your publication's design templates. Coming up with fresh, professional-looking web designs for multimedia projects can be tedious and time-consuming. Fortunately, there are literally thousands of downloadable free web designs out there, ready to be customized and modified. In this tutorial, we point to some of the best resources for free web design templates, and also provide detailed instructions for modifying our own freely downloadable web design.

FTP Made Simple

Once you've created a web site, you'll need to upload it to a public web server, where the rest of the world can enjoy it. If you're not working with a content management system, you'll need to use one of the internet's oldest protocols, FTP (which stands for File Transfer Protocol). This tutorial includes a video screencast illustrating the FTP process step-by-step.

Search Engine Optimization — Basics

Search Engine Optimization (SEO) is the process of making the content you publish appear near the top of the Search Engine Result Page (SERP). Your SEO skills make it easier for your audience to find and connect to your content. This tutorial presents the foundation tools and techniques for incorporating good Search Engine Optimization techniques into your publication workflow.

Build an animated ad in PhotoShop CS4.

Independent bloggers and journalists may find that they need to build an ad to support their work. This tutorial will provide some basic guidelines and instruction on how to build an animated ad in Photoshop.

PHP 101

PHP has emerged as the most widely used server-side web programming language in use today. PHP makes it easy for web pages to interact with databases, present different kinds of content to different users, manipulate text, send email, process forms, perform advanced mathematics, or do most anything else that involves delivering dynamic data into web pages.

Build 960 design grids in Photoshop

Most modern Web sites are designed and built on a fixed, 960-pixel grid. Building on a grid creates page layouts that are visually consistent and easier for users to navigate. This tutorial will teach you how to build a 960-grid template using Photoshop.

Building an Ad Platform with DFP

Serving ads isn't as easy as it sounds, but Google's Double-Click for Publishers goes a long way toward streamlining the process, maximizing revenue, and keeping performance high. This tutorial explains how to get started building an ad platform of your own with DFP.

WordPress: Getting Started

New to WordPress? This tutorial will guide you through the basic steps of publishing with the world's most popular content management system. Learn how to post and mange your content, manage tags and categories, upload media and more.

CSS Layout with HTML5

If you've got basic HTML and CSS skills and are ready to learn how to structure a web design with CSS layout techniques, this tutorial will help you take your skills to the next level.

FreeDive tips and tricks

Get the most out of freeDive searchable databases.

JavaScript for Journalists

JavaScript is a coding language used in webpages. It enables you to do things like add interactivity to a website, build applications, retrieve data from other sites and so much more.

Storytelling Apps and Tools

There are many free applications and online tools journalists can use to make different types of stories, from interactives and graphics to data visualiztions and maps. These are links to many of the most useful and popular ones and tutorials on how to use them.

HTML 101

Hypertext Markup Language (HTML) is simple document markup languaged used for creating Web pages and other information viewable in a Web browser. This tutorial is a crash course in basic HTML - enough to get you up to speed and help you feel comfortable with general HTML syntax and structure.

Dreamweaver

Dreamweaver is a Web page design program that lets you type text and add media elements directly into a page, much as you would with a word processing program like Microsoft Word. Dreamweaver converts your text and graphical page design into the HTML code read by a Web browser.

Note: This tutorial covers an older version of Dreamweaver. However, most instructions and screenshots are still relevant to the current version.

Photoshop

Adobe Photoshop is the industry standard for working with digital images of any kind. This tutorial will take you through the entry-level steps of using the program to open, crop, resize, adjust and save a photographic image. While applicable to earlier versions, this tutorial uses Adobe Photoshop version CS3.

WordPress: Beyond the Basics

Now that you've found your footing with WordPress, it's time to roll up your sleeves and dig deeper. In this tutorial we cover building menus and sidebar widgets, installing and working with themes and plugins, batch post management, using the Links manager, and more.

Embedding Multimedia

This is where your skills come together - Web page creation skills, interview skills, audio and video editing skills, and storytelling skills all converge at this point. Inserting media into Web pages is a bit more difficult than creating plain old HTML with graphics, but if you've mastered the other tutorials in this site, you'll do fine.

WordPress: Managing Settings

This is a companion to the WordPress: Beyond the Basics tutorial. It takes a deep dive into all the options found in the Settings section of the WordPress Dashboard.

Installing WordPress

Depending on your existing web experience, the most complex aspect of running a WordPress site may be the installation process. In this tutorial, we demystify the process of using WordPress installers at popular web hosts, and offer pointers on first post-installation steps.

WordPress: Photo Galleries

Learn how the WordPress Media Library and galleries work, how to set up and use the NextGen plugin to improve photo management and create slideshows and galleries that can be rated or contributed to by users.

WordPress: Modifying Themes

Learn how themes are constructed and how to get your chosen theme to work exactly the way you want it to.

WordPress: Building a "Topics" Site

A news site often publishes many related articles on the same topic, such as "Healthcare Reform." While these disparate articles may be linked to one another through a tagging or category interface, it's ideal if a site can maintain a single, stable URL that gathers related content under a single umbrella. Having a "topic page" system helps both readers and the publication to locate and target related information, and improves SEO value. This tutorial demonstrates how KDMC fellows can use our demonstration "Topic Central" system, as well as how developers can create such a system with WordPress.

Web Development Links and Resources

Additional reading, related software, training and more.