Course I: Creating Web Pages

There are 12 units of study

Getting Started

In this lesson, you'll get started by learning where the Web is and how it works. We'll cover some important concepts and terminology, and hopefully clear up some buzzwords you may have heard but not quite understood. Then we'll go hands-on and get started creating your first website.

Create Your First Web Page

Today, you'll create your first Web page. You'll learn how to add tags and content to your page, view your page in a browser, reopen it in an editor to make additions and changes, save those changes, and then view the updated page in a Web browser. These skills will apply to every Web page you ever create, and they'll get you started on creating any page you can imagine.

Formatting Text

In today's lesson, you'll learn to beef up your pages with the design elements that you see in most websites. We'll discuss how to add headings, paragraphs, numbered lists, and bulleted lists to your pages, and we'll also talk about the secrets to adding special characters like © and &trade. Finally, you'll discover how to add links to other peoples' pages and to other pages within your own site.

Fun With Pictures

Here's your chance to add some visual excitement to your website! Today, we're going to learn the basics about adding pictures to your Web pages. You'll discover how to download pictures right off the Web, and you'll also learn how to prepare and use your own pictures from a digital camera.

Creating Tables

Tables are a terrific way to neatly organize content into rows and columns. You've no doubt seen tables used in other websites and countless other forms of publication. In today's lesson, you'll learn how to use HTML to create tables in your own Web pages!

HTML, XHTML, and CSS

If you've been involved in Web development at all during the last 20 years, you may have heard about HTML, XHTML, HTML5, and CSS. If you're new to all of this, it's a confusing mess of alphabet soup. In this lesson, you'll learn the who, how, what, when, where, and why of these technologies—and what you should use now so your website is in sync with current specs and future trends.

Getting Started With CSS

Virtually all modern websites use CSS style rules for all their website styling. In today's lesson, you'll learn what a style rule is, and you'll get some hands-on practice creating your own styles rules. You'll learn how to center and align pictures and text, and you'll discover the secrets to jazzing up your site with colors (and how to choose from the millions of color options available to you).

Creating a Page Layout

Today's lesson will introduce you to more advanced HTML and CSS topics, including how to create a page layout with a navigation bar. You'll learn how to create a page layout using div tags to put named page divisions in a Web page, and we'll discuss how to style your page divisions by adding an internal style sheet and some style rules.

Building Your Site

Most websites consist of multiple pages with some common content on each page. Today's lesson will teach you to use a layout page as template so you can build multipage websites more quickly. We'll cover liquid versus fixed layouts, how design a layout, and how to easily build additional pages from your layout page. This will help you to develop more professional-looking pages using the same modern coding techniques that seasoned professionals use!

Getting Noticed

Getting a site on the Internet is one thing. Getting people to notice it is quite another. In today's lesson, you'll learn about Internet directory services, search engines, Web-crawling infobots (not as creepy as they sound), and things you can do to make your own site stand out in the crowd!

Publish Your Website

In today's lesson, you'll learn how to publish your website for the whole world to see—well, at least anyone on the Internet. And best of all, you'll learn how to keep your site on the Internet, for free, forever!

Authoring Systems

In today's lesson, you'll learn about authoring systems like Dreamweaver and Expression Web, and how they can make Web development quicker and easier. You'll also learn a couple of ways to get an online presence without creating your own website!

Course II: Introduction to CSS3 and HTML5

There are 12 units of study

 Getting Started

In this first lesson, you'll learn whom this class is for and what it's all about. We'll get hands-on right away, creating a folder and adjusting some settings in your operating system and editor so you're ready to start creating a website. We'll discuss the basics of what HTML5 and CSS3 are all about, as well as why you'll want to learn to use them. And finally, you'll learn to save time by creating an HTML5 page template that you can use as the starting point for each new page you create in this course and later on your own.

Styling Your Website

Today, you'll grow to appreciate the beauty and practicality of using CSS to style your entire website. You'll discover how CSS lets you create design elements that give your site a consistent look, feel, and unique identity. And if you ever decide to change something in your styling, you won't have to go digging through all the pages individually to make changes. You just change your style sheet in one place, and all the pages in the site update instantly and automatically.

Styling Backgrounds

Background colors, photos, textures, patterns, and gradients can really add some pizzazz to your website. In today's lesson, you'll learn to do them all, and you'll have a lot of fun doing so.

Borders, Corners, and Shadows

In today's lesson, you'll learn how to add some real professional polish to your design with borders, rounded corners, and drop shadows. And better yet, they're easy to do, thanks to some simple CSS properties.

Styling Text

Today, you'll learn about the many ways you can style your text with CSS, including fonts, text shadows, and more. We'll start with an overview of the primary tags for text markup in HTML. Then we'll look at the many properties CSS offers for making your text look great!

Spice It Up With Pictures

Pictures add a lot of visual interest to any website, and in today's lesson, you'll learn all about using pictures in your site. We'll start with an overview of the types of pictures you can use, and we'll go over how to insert them using HTML tags. Then we'll talk about ways you can float, position, and size pictures using CSS

Mastering Style Classes and Link Styles

In today's lesson, you'll learn about style classes and links. Style classes are a great tool for defining styles that you can use freely wherever you want throughout your site. They can be a real boon to your creativity and a real time-saver for managing your styles. You'll also learn about pseudo-classes, which are a special type of class for styling links and mouse-over effects. And as an added bonus, you'll learn some advanced techniques for links including opening pages in a new window, using jump links within a page, adding tooltips to your links, using pictures as links, and creating email links.

Fun With Sound and Video

Nothing brings a site to life better than sound and video. In today's lesson, you'll learn all the newest and most modern techniques for playing sounds and showing videos on your site. You'll learn the secrets of embedding YouTube videos on your pages so you don't have to upload video files to your own site. And you'll learn about all the modern file formats and HTML5 tags for embedding sound and music into your pages without using YouTube or any other site.

Styling Tables

HTML tables are the perfect tool for displaying information in rows and columns, like tables you see in print. In today's lesson, you'll learn techniques for styling tables with traditional CSS, as well as brand new CSS3 techniques that really make tables shine with minimal coding!

Mastering the CSS Box Model

Getting control of the size and location of things and the gaps between them can be a real challenge for Web designers. Most of the mystery and frustration that designers experience stems from not understanding the CSS Box Model, which defines how things behave and provides a rich set of tools for managing widths, heights, margins, and padding. Today's lesson is all about solving the mysteries and overcoming the frustrations by exposing the secrets of the ever-important CSS Box Model.

Creating Modern Page Layouts

Modern business websites often use page layouts that include a header, footer, sidebar columns, and a navigation bar. Historically, these layouts were done using HTML tables or div tags. Now and in the future, we'll be using a new set of layout tags in HTML5 to define our layout sections. In today's lesson, you'll learn what those tags are, how to make them work in new and older browsers alike, and some professional-grade techniques for styling them with CSS.

Making a Multi-column Layout

Today's lesson will be all about adding side columns to your layout, be it a left column, a right column, or both left and right columns. As an added bonus, we'll add a vertical navigation bar to a side column with the links large enough that they're easy to work with a mouse, as well as a fingertip or stylus on a mobile touch screen.

Course III: Introduction to Javascript

There are 12 units of study

What Is JavaScript?

In today's lesson, you'll get right into it and learn what JavaScript is, where it came from, who uses it, and why you want to learn it. Most important, you'll learn how and where to write JavaScript. And we're not talking about just history, theory, or concepts. You'll go hands-on, and by the time you finish this first lesson, you will have already created, tested, and edited some real JavaScript code.

Executing Scripts

Successful JavaScript programming requires controlling not just what a bit of JavaScript does but also when it performs its task. Today's lesson will show you how that works and introduce you to the concept of event handling, which allows you to write code that responds to various events, such as clicking an item on the screen.

The Document Object Model

Today's lesson is all about the Document Object Model (DOM), a set of rules and words you use to access and manipulate the elements of a Web page. You'll also learn about variables in today's lesson, which are temporary placeholders for information that can vary. While such terms and concepts are often scary to the new developers, they actually turn out to be quite easy to understand once you remove the shroud of mystery.

Dates, Numbers, and Decision-Making

Code that makes decisions is the hallmark of all modern interactive websites and applications. In today's lesson, you'll learn about JavaScript's ability to make if . . . else decisions (If this happens, dothis, or else do this). You'll also learn about data types, strings, numbers, and dates, and how and why programming languages treat these types of information differently.

Search My Site Code

Today's lesson will give you some Search My Site code. This is particularly handy for larger multipage sites, where users may want to search for a particular word or phrase within your site without having to go through the site one page at a time. And unlike some services that charge you money for this sort of thing, the method you'll learn here is free of charge. And as an added bonus, you'll learn how to add drop-down list controls to your pages.

Fun With Music

In today's lesson, you'll learn to use JavaScript to add sound effects, background music, and custom music player controls to your Web pages. You'll also learn how to set HTML attributes and CSS styles through JavaScript and even to test the user's browsers for compatibility with modern HTML5 features.

Building a Picture Carousel

In today's lesson, we'll start on a picture carousel that allows users to click or cycle through thumbnail images, seeing an enlargement of one at a time. These can be a fun and useful addition to any website. Along the way, you'll learn some tips and tricks for using JavaScript with pictures and some new programming concepts like global variables and string manipulation.

Fun With Arrays and Loops

Today's lesson is all about arrays and loops. As alien, boring, or scary as those things might sound, they're not that difficult. And they're the main constructs around which some of the best interactive elements, like slideshows and carousels, are built. In today's lesson, you'll learn how to create your own JavaScript arrays and loops and start getting a handle on how you can apply them toward building more interactive Web pages.

Timers and Transition Effects

Bringing motion to Web pages requires controlling the speed at which things happen. Today's lesson is about the two main ways you can control speed: JavaScript timers and CSS transitions. You'll also see how you can use JavaScript to trigger and control CSS transitions, which allows you to get some cool effects with minimal coding.

Introducing jQuery

JavaScript is such a popular language, people have written many libraries to extend and simplify its use. Perhaps the most widely used and well known is jQuery. In today's lesson, you'll learn what jQuery is, where to get it, and how to get started using it in your own websites.

Creating Collapsible Panels and Accordions

In today's lesson, you'll build on what you learned last time about jQuery to add some powerful new techniques to your arsenal. Specifically, you'll see how you can use jQuery to create collapsible panel and accordion controls. These are custom controls that allow you to create more modern-looking websites in which users can click to expand information, making your site more efficient, effective, and easier to use on touch screens.

Using jQuery Plug-ins

jQuery is more than just a JavaScript library. It's a complete ecosystem that includes lots of prewritten code commonly referred to as jQuery plug-ins. There are thousands of free plug-ins available, and they provide for all kinds of slideshows, carousels, touchscreen interfaces, and countless other features that you can add to your own creations, for free, with minimal fuss. In today's lesson, you'll learn how to find jQuery plug-ins and incorporate them into your own site.