Welcome to Journalism 435 Web Design for Journalists! I'm excited to have you in the class. This will be the main site for our course and I'll keep this homepage updated with links to the latest resources throughout the semester. I'll also use our Canvas site (Section 1 | Section 2) to handle grades and send out the occasional email blast, but this page is what you should be checking regularly. We'll also keep in touch via the course Teams workspace (Section 1 | Section 2).

We're wrapping up our look at how Web applications work by installing and exploring one that's useful for journalists: WordPress. We'll learn a bit about how to work with and modify WordPress, for its own sake, but also use it as an example of how Web applications work more generally, so that you'll be able to explore install and explore other useful tools on your own.

• Download page at WordPress.org (not to be confused with WordPress.com).
• A list of WordPress template tags.
• A "cheat sheet" guide to the files associated with a WordPress theme.
• The enqueue_styles function for WordPress child themes.

• HTML Forms Reference Chart
• If you're interested in learning more about PHP, you can check out the PHP tutorials on W3Schools and the reference materials on PHP.net.
• If you'd like to know more about MySQL, there are tutorials for that, too. You can also learn more about the Structured Query Language independent of MySQL.
• You'll need to change some configuration settings in Cyberduck in order to ensure that any PHP files you create or upload run properly on the server. Here is a diagram showing where to go and what to change in Cyberduck's "Preferences" menu:

• A "robots.txt" generator
• More on the "robots" meta tag
• PDF of class FTP presentation

• For those interested, here's a guide to creating flexbox layouts in CSS. We'll be using Bootstrap to accomplish this, though, so you don't need to learn to do it from scratch.
• Here's the Bootstrap website.
• Here's a PDF of the guide to Bootstrap column layouts I showed in class.

Some common event handlers in JavaScript. These also work in jQuery if you just eliminate the "on" at the beginning (e.g., "onclick" becomes "click" in jQuery):

• onmouseover
• onmouseout
• onclick
• onkeypress
• onload

If you want to actually learn to program in JavaScript, Codecademy is a good free resource for beginners.

• jQuery.com is where you can download a copy of the jQuery library (JavaScript file) and discover more jQuery methods.
• Google Hosted Libraries is where you can find the link to Google-hosted copies of jQuery and related libraries like jQuery UI.
• jQueryUI.com is where you can find out more about jQuery UI features (shown in the tutorial video) and download a copy of the jQuery UI libary.

Plugins shown in class:

• Raptorize
• AnythingSlider

Resources for finding more jQuery plugins:

• The plugin directory on jQuery.com has more, though it's out of date.
• The npm website also has lots of jQuery plugins listed.
• Searching Google works a surprising amount of the time (e.g., try searching jQuery image gallery plugin)

• Make sure your HTML document contains a link to the jQuery library JavaScript file.
• Make sure your HTML document contains a link to the jQuery plugin or jQuery UI file(s). If you're adding a jQuery plugin to an existing site, you will have to copy these plugin files into the folder(s) containing your site files and make sure to provide the correct relative URLs to them in your webpages. Plugin files can include:
  • A JavaScript file (always)
  • A CSS file (often)
  • Other supporting files (e.g., images, audio files, etc) (sometimes)
• Now you're ready to write your own jQuery code that makes use of the plugin. Remember:
  • Make sure to place it inside the [[Resources#jQuery_Document_Ready_Function|"Document Ready"]] function.
  • Using a jQuery plugin typically involves selecting a tag in your jQuery code and adding whatever new method (e.g., raptorize() that the plugin has provided you with. For example:

    $("h1").raptorize();

or

    $("#slider").anythingSlider();

• In your HTML, make sure the tag(s) to be selected are what the plugin is expecting. For example, if the plugin only knows how to work with unordered lists, make sure the tag you're selecting is in fact a ul tag and that its contents are formatted in the way the plugin is anticipating.
• Finally, remember that you can find help by looking at the plugin documentation, which is typically included in one or more of the following three places:
  • The website you got the plugin from.
  • Example files contained in the plugin download.
  • Other files in the plugin download with helpful names like README or INSTALL.

We're learning how to move objects around our pages using CSS's position property, as well as the CSS grid system.

If you're interested in a deeper dive into CSS grid, here's an excellent resource for that.

We're wrapping up our first complete page design with CSS and learning about what's new and interesting in HTML5.

A list of the new semantic elements in HTML5.

We're learning how to work with files and folders and we're getting started with the styling language of the Web, CSS, which stands for "Cascading Style Sheets."

• CSS Terms Defined Handout
• CSS References: Mozilla CSS Properties Reference | W3Schools CSS Reference
• Color Resources: HTML Color Name Reference Chart | Colour Lovers | Adobe Color
• A List of Web-Safe Fonts
• Fonts and Typography CSS Handout
• Advanced CSS Selectors Exercise Answer Key
• Smashing Magazine's Guide to Advanced CSS Selectors
• Emmet Cheat Sheet (handy auto-completions based on CSS selectors)
• CSS Box Model Diagram (credit: U Washington):

We're learning how to write HTML markup and work with files and folders.

• Here's a link to the HTML validator tool we used in class. You can also find a link to it any time this semester in the "Useful Links" section below.
• HTML entities reference.

Be sure to install the Kate text editor if you haven't already. If you're a Mac user running an older version of MacOS and find that Kate is incompatible with your system, you can instead install TextMate.

If you're a Mac user who uses iCloud to back up your machine, see this note in Teams: Section 1 | Section 2.

We're going over the course syllabus and downloading and installing the Kate text editor for class on Wednesday. Note: Unless you don't mind software bugs, please install the "release" version, not than the "nightly" version of the software.

Below is the archived version of some of the material that was used during remote instruction, in the event it's useful to you.

• Getting Started and Introducing HTML
• Relative URLs and File Structures
• Introduction to CSS and the Document Object Model

• Lecture Recordings // Class lectures are recorded and will be viewable here (sign-in required).
• Resources // HTML skeletons and other code snippets we'll reuse repeatedly this semester.
• W3C HTML Validator // Validate your HTML markup.
• W3C CSS Validator // Look for errors in your CSS.
• Hastebin or PrivateBin // Share your code if you have questions about it.
• Lipsum.com // A lorem ipsum generator that will produce dummy text you can use as a placeholder if you're trying to style a page for which you haven't yet penned/received the written content.

• Course Syllabus
• Canvas Site (Section 1 | Section 2)
• Teams Workspace (Section 1 | Section 2)

While I'll be going over the subject matter for this course live in class, for at least some of the topics we touch on this semester I will also provide you with links to asynchronous instructional materials posted here on this wiki. These were originally developed for the remote version of this course. You do not need to look at them, since — as I just noted — I will be discussing the same material in class. However, they may serve as a good resource for students with different learning styles or those who wish to review material in a different format.

If you do look through the supplemental materials on the wiki, I encourage you to follow along with the text and videos by trying things out on your own computer as you go. Please raise any issues or questions you may have along the way on Teams or in class, where other students and I will be happy to give clarifications and share additional information.