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.
READkdmc 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
-
JavaScript for Journalists JavaScript, a coding language used in webpages.
Description
- FreeDive tips and tricks Get the most out of freeDive searchable databases.
-
CSS Layout with HTML5 Learn how web pages are structured with CSS
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
-
JavaScript for Journalists JavaScript, a coding language used in webpages.
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.
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.
Subscribe to KDMC tutorials
