The exercise files for HTML for Educators contain all of the HTML code written on screen. They have been designed to get you up and running quickly with the HTML language.
- [Teacher] If you have access to the exercise files used throughout this course, you'll want to download them to your desktop and follow along with me step-by-step. The exercise files for this course have one folder for each chapter that we cover. Inside of there, you'll find a folder for each movie. I've included the starting and ending states for every file that you see me edit on screen. To know exactly what file I'm working on, look for an overlay that looks like this and will tell you the exact location and name of the file that I'm working with.
In most folders, you'll find files with an _end added to the file or folder name. These files contain the completed code that I write during the movie. You can use these to check your work against. Throughout this course, I'll be using the brackets.io HTML editor and the Chrome web browser. Neither tool is required, but they're both free and available for both Windows and Mac. Brackets is available from brackets.io and Chrome is available from google.com/chrome.
A great way to follow along with this course is to install Brackets, then go to the File menu and select Open Folder. Then navigate to the Exercise Files folder on your desktop and click Open. You'll then be able to access all of the chapter and movie folders from the file browser on the left side. Code can be loaded by drilling down through the folders and clicking on the file noted in the overlay. You can preview your pages by clicking on the Live Preview button here in the upper right.
In my version of Brackets, I've clicked on the Plugins button, searched for and installed the Disable Autoclose Tags Completely plugin, version 1.0.0 to simplify the recording process. You do not need to install this plugin, but if you want your version of Brackets to work exactly like mine, feel free to install it. The last chapter of this course, Setting Up Web Infrastructure, can either be watched last or first.
In this chapter we walk through setting up your own 30-day, free trial web hosting account on stateu.org, and then install a WordPress blog on Moodle Learning Management System and a personal web hosting site complete with SFTP access. We will periodically use some of that infrastructure throughout the course. To set up the infrastructure with me, you'll need a LinkedIn, Google, or Facebook account. You are welcome to use your own web host and campus learning management system when we touch on those skills in the course.
Just be aware that your screen and options may not look exactly like mine, but the concepts and general techniques will all be the same. I've uploaded the entire completed site that we build in this course to the publicly-available URL of chrismattia.stateu.org/env432. You can also find that code here in the Finalenv432 folder located in the exercise files. If you do not have access to the exercise files, you can still follow along with your own files and all the activities on stateu.org.
In the CSS chapter, I show you how to inspect any web page on the internet with the web developer tools built into Chrome. Feel free to use the techniques that I show you in that movie to inspect the finished site at the public URL.
- Coding a site, a page, or parts
- Managing digital assets
- Formatting headings and paragraphs
- Creating links to pages
- Linking to a PDF or a Google Doc
- Inserting your own images into an LMS
- Embedding YouTube, Vimeo, and SoundCloud media
- Making pages responsive for mobile devices
- Working with CSS using web developer tools
- Overriding existing CSS
- Setting up your own domain
- Using FTP