What Is Advanced Web Design?
If you want to take your Web pages from okay to "wow," it’s time to move up to Web 2.0. In this lesson, you’ll explore the core elements of advanced Web design: interaction, animation, and page design that’s flexible and accessible to visitors on any device.

Creating Your First CSS Style Sheet

Today, you’ll enter the world of advanced Web design by building your first CSS style sheet. When you’re done, you’ll link this style sheet to an HTML page and discover how you can instantly make changes to that page—or even to a thousand pages at the same time. In addition, you’ll explore some key elements of Web page design.

Formatting Your Text

Your website text isn’t just a collection of words—it’s also a design element that can tell your visitors what you’re all about! In this lesson, you’ll find out how to specify the appearance of your text using your CSS style sheet. We’ll talk about setting your font size, color, line spacing, alignment, background, borders, margins, and padding.

Designing and Formatting Links

Links are a key part of any Web page, and there’s more to designing them than you might think. In this lesson, you’ll learn how to create links that suit the purpose of your site, the technological sophistication of your audience, and the image you want to portray. In addition, we’ll raise that controversial question when it comes to link design: to underline, or not to underline?

Formatting Selected Text and Creating Content Boxes

Today, you’ll expand your horizons by learning how to format selected page content. After that, you’ll take a big step into advanced design by discovering how to use class styles to design content boxes. In the process, you’ll learn all about two powerful Web design tools: div tags and span tags.

Creating Containers, Headers, and Footers

Each Web page is unique, but three elements are almost universal: a container, a header, and a footer. In this lesson, you’ll build these three elements by combining a new tool—ID styles—with div tags. In addition, you’ll find out how to embed div tags within containers.

Adding Columns and Interactivity

Today, you’ll take your layout to a new level by adding columns to your Web page. You’ll discover how to place multiple columns on a page, how to pad your columns, and how to create an attractive column layout that’s easy to read. In addition, we’ll make your columns interactive!

Making Your Pages Look Great on Any Device

Do you use a mobile device to browse the Web? More and more people do—and to keep them happy, you’ll need to provide mobile-friendly content. But how can you do that, and still design a page that works on a big screen? Today, you’ll find out how to create Web pages that look different, but still great, on both full-sized monitors and mobile devices.

Designing With HTML5

Web designers always need to be thinking about the future—and that future will include HTML5. In this lesson, you’ll learn all about the advantages of this up-and-coming coding language, and you’ll add HTML5 elements to your own Web page. In addition, you’ll find out which environments currently support HTML5 and which ones don’t.

Embedding Video in Your Web Pages

A great video can increase your website traffic, sell your products, or even make you a superstar. But here’s the big issue you’ll face as a Web designer: Not all video formats work with all browsers. In this lesson, you’ll learn how to overcome that problem as you master simple tricks for embedding videos that will play in any browsing environment.

Creating Forms

What do you need to know about your website’s visitors—their names, their email addresses, or maybe even how they rate your site? Today, you’ll find out how to collect information like this (and much more) by adding forms to your pages. In these chapters, you’ll build your own form, add form fields, and define where your collected data will go.

Uploading and Fine-Tuning Your Pages

You’ve mastered it all—interactivity, animation, and accessibility—and you’re ready to call yourself an advanced Web designer. Now it’s time to take the next step and reveal your site to the world. Today, you’ll learn how to upload your site to the Web and how to check your spelling, links, accessibility, and bro

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!

Form Versus Function.

This course is a different from most Web creation courses you'll find because it's not designed to teach you the mechanics of creating a Web page or how to use a particular software program. Instead, it's designed to help you take your Web site creations to the next level by enhancing both design and functionality. Together, we'll discover what attracts visitors to a Web site, and how to use design tools such as typography, Cascading Style Sheets (CSS), and multimedia to captivate visitors and keep them coming back.

Web Site Planning Process.

Visitors are attracted by good design, but content is what keeps them at the site longer and motivates them to return. Learn how to use two tools to attract and retain visitors: design critiques and a content inventory. Explore the six major development stages that yield expert design and smart content. Then study the three parts of Web design and the skills you'll need for each.

Interface Design.

By now, you probably understand that an interface is the screen visitors see and use when they visit any page of your site. Designing an interface is easy. Designing an effective interface, however, is more challenging. There are four main elements that you'll need to consider to make your site user-centric: usability, visualization, functionality, and accessibility. Explore each of these elements to see the thought that goes into effective interface design.

Site Structure.

Even if your basic content is accurate, attractive, and well written, your site won't function well without a solid and logical organizational foundation. Review the five basic steps involved in organizing information and four essential structures that you can use to build a Web site. Then learn how to create a flowchart for the pages you want to include on your site.

Site Design.

Web sites exist to inform, educate, persuade, or entertain. Take this opportunity to concentrate on site design themes that pay attention to information delivery. Learn how to organize elements in order to enable visitors to accomplish their own goals. Explore usability, content, and design.

Page Design.

Discover how you can use visual and graphic design, page layout, and grids to take your designs to the next level. At the same time, become familiar with design considerations like visual hierarchy, page dimensions, and white space.

Typography on the Web.

Typography plays a dual role by providing both verbal and visual communication. Almost any type of font will do to transmit information to others. But to convey the right type of mood along with the information takes a special type and color of font. Learn all the secrets here!

CSS and Font Embedding.

Find out how you can use Cascading Style Sheets to modify fonts. Become familiar with inline, document-level, and external (linked) style sheets, and learn how to create an external CSS file to control the formatting of any or all pages on your site. For the more adventurous, we'll also take a look at some early font embedding techniques and explore two popular Flash-related options currently in use.

Writing for the Web.

Before you write for the Web, you should take the time to understand how people read online. Become familiar with the use of titles, headlines, and subheads to assist readers in navigating your site. Discover the advantages of using a Web content management system. Learn how you can communicate more easily and informally with Web visitors by adding a blog to your site.

Images, Colors, and Layers.

You can use images to add interest to your site and to help with navigation. Early designers were limited graphically by HTML attributes, and later designers discovered they could use tables to place images. Today's designers also have the option of using CSS to position images on the screen. But believe it or not, many people still use text-based browsers. So, you'll learn how to make the information you convey through your images accessible to those individuals as well.

CSS Positioning: More Layers

The combination of HTML, CSS, and JavaScript allows you to create intensely interactive Web applications similar to any game or presentation built with traditional programming languages. This interaction of HTML, CSS, and JavaScript is known as Dynamic HTML or DHTML. Become familiar with the basics of DHTML, including code you can use to enhance your designs by adding layers to your pages.

Web 2.0 and Beyond

Early Web sites were created by a few to be read by many. Over the years, developers added interactivity to Web sites through discussion forums, chat rooms, and shopping carts. These features are part of what I think of as Web 1.0. Today the focus has shifted from the sponsor of the site to the visitor, and sites like Flickr and YouTube are popular. They're examples of Web 2.0 sites. Examine several popular Web 2.0 sites, and take a look ahead to Web 3.0.

Lesson 01 - What Is Responsive Web Design?
Responsive Web design is about building websites that are accessible, functional, inviting, and fit well into the array of environments in which people view websites. In this first lesson, we'll take a look at exactly what responsive Web design is, why it's necessary, and the basic concepts in building responsive websites. We'll also examine some models of responsive design and see what we can learn from them.

Lesson 02 - Relative Units of Measurement
How do you make a photo look good on the large viewport of a laptop and the small screen of a smartphone? And will text readable on a normal computer screen appear microscopic on a phone screen? If you want to design responsive websites, these questions are central to your work. Luckily, there are answers in the form of relative units of measurement, such as percent, em, and multiples. In this lesson, you'll learn how to apply relative units of measurement to optimize the display of images and text in different viewports and environments.

Lesson 03 - Creating Responsive Menus With Media Queries
Navigation menus are the road maps that help users navigate a website. They provide access to the site content, and they allow designers to lead users to engage with site content. So how can you make menus adapt to different browsing environments? Make them responsive, of course! In this lesson, we'll investigate how menus function differently depending on the browsing environment, and you'll find out how to design responsive menus that adapt to full-screen desktop or laptop environments as well as smartphones and tablets. The key to creating responsive menus is applying CSS3's @media feature, which you'll learn how to do here.

Lesson 04 - Responsive Color Schemes and Custom Web Fonts
As a Web designer, you probably think consciously about the right color schemes and fonts for a project. After all, color schemes and fonts are critical to "branding" your site. And they're important if you want your site to be engaging and inviting. But do the rules you follow for full-size site design apply to mobile sites as well? Maybe not! In this lesson, we'll talk about responsive color schemes and fonts that will ensure visibility and readability in a wide range of viewing environments. You'll learn how to test color schemes for contrast value, and we'll explore Google Fonts as a source of downloadable Web fonts compatible with mobile devices. No longer will you have to wonder whether visitors can read your site's text in different devices and lighting environments —you'll have tried-and-true solutions to that challenge!

Lesson 05 - Responsive Page Layout
What should a responsive page look like? If you said it should look different in a tablet or smartphone than it does in a laptop, you're onto something! But how can we make pages display optimally in different viewports? In this lesson, we'll explore a basic strategy of applying a 3-2-1 framework with stacked columns. You'll learn how to use media queries, HTML5's semantic elements, and logical operators to build pages that are user-friendly in devices of all sizes.

Lesson 06 - Providing Collapsible Content for Mobile
Mobile screens are tiny. So how can we fit all our website content onto them without making users scroll and pinch too much? In this lesson, you'll learn a simple way to collapse content into expandable blocks for mobile users, but present an alternate page layout for full-sized viewports. We'll use the HTML5 and tags to make content that users can expand or collapse on a small screen. You'll also use media queries to present the content in full-size viewports in columns rather than the expandable and collapsible blocks that work in mobile devices.

Lesson 07 - Making Images and Videos Responsive
Images and video present real challenges when we're designing responsive websites. Not only do we need to think about how these potentially large files display on small mobile devices, but we also need to consider how long users on slow connections will have to wait for multimedia to download. In this lesson, you'll learn an array of strategies for making sure photos aren't slowing down your responsive sites. We'll talk about compressing images to reduce file size while maintaining image quality, building a cache file to make photos download more quickly for users on return visits, and managing image downloads with jQuery widgets. You'll also learn what video hosts work best when designing responsive sites.

Lesson 08 - Using SVG Artwork in Responsive Design
Wouldn't it be nice if you could create or acquire images for the Web that were infinitely scalable, small in size, and showed no degradation in quality no matter what size they were viewed at? In fact, you can! The SVG (Scalable Vector Graphics) format allows images to be displayed at any size without loss of resolution. SVG is not an appropriate format for photos (that's why we cover how to work with JPEG photos in Lesson 7). But SVG format is perfect for icons, logos, backgrounds, maps, illustrations—pretty much any artwork other than photos. In this lesson, you will learn to create and embed SVG images, and scale them responsively.

Lesson 09 - Designing Responsive Forms
When users visit our websites, we often want to collect something from them, be it contact information, a location, or order details. To accomplish any of those things, we need forms. Mobile and laptop/desktop users have very different requirements when it comes to accessible, inviting forms. In this lesson, you'll learn to recognize and appreciate those highly differing needs, and to design forms that are inviting and accessible in any environment. I'll show you how to use HTML5 input types to make forms easier to fill out in mobile environments, and we'll once again use media queries to customize the look and feel of our form depending on the viewport. The best part is, we can do all of this without any complicated scripting!

Lesson 10 - Adding Widgets With Bootstrap
You don't need to know any complicated coding languages to build responsive websites. But what if you want to add interactive, animated widgets based on JavaScript? You're in luck! Thanks to the Bootstrap framework, you can add these widgets and customize them within your pages even if you don't know JavaScript. In this lesson, you'll get an understanding of how JavaScript-based frameworks, libraries, and widgets work, and how to implement them in your website. We'll add custom buttons, navigation menus, and a carousel (automated slide show) using Bootstrap widgets—and yes, all of these components are responsive!

Lesson 11 - Providing an App-Like Experience With jQuery Mobile
A running theme in this course is that providing a truly responsive experience for users involves much more than scaling content to fit different viewports. In the final two lessons of this course, we'll expand our capacity to provide mobile users with an app-like experience. By that I mean integrating more styling and interactive animation. We'll do that by connecting with a set of widgets and animated elements from the jQuery Mobile framework. We'll also employ media queries to keep the full-sized viewport experience friendly—and best of all, we won't need to work with any complicated programming language to achieve an app-like experience in mobile devices!

Lesson 12 - Creating a Web App Interface for Mobile Users
What are mobile users looking for in a site's welcome page? Essentially, they want a set of navigation links that look and feel like an app. As we discussed in Lesson 11, native apps (custom-coded for specific operating systems) and Web apps look and feel very much the same to users, but Web apps are much easier to create. In this lesson, we'll continue to work with the jQuery Mobile framework to build a Web app welcome page that can serve as a mobile-friendly entryway into our site. We'll also define and apply a media query so that users coming from laptop- or desktop-sized viewports see a more traditional navigation bar that works well with large screens. As we go, we'll sum up what you've learned by building a home page to show off all the projects you've created in this class!

Getting Started With WordPress

In this first lesson, we'll explore the magic of WordPress! You'll discover how to use this free software to create an attractive, dynamic blog or website—without learning any special code. You'll find out what the two "flavors" of WordPress are and why we'll use the hosted WordPress.com version. Then you'll go online, sign up, and tour the WordPress Dashboard. You'll also plan your project and set goals for yourself.

Creating a Blog

What can a blog do that a website can't? Blogging's become a popular way to establish an online presence. We'll discuss how adding a blog can make a traditional website more effective. Then you'll build a blog with WordPress—by creating, refining, and categorizing posts. You'll also find out how to encourage and control visitor feedback.

Making a WordPress Website
Get the best of both worlds by combining a blog with a traditional website. In this lesson, you'll use WordPress to create and organize Web pages. And I'll show you how to convert your blog to a traditional website—or vice versa—with the click of a button.

Making Your Pages Look Great

This lesson's all about WordPress themes—the templates that give your website its look and feel. You'll discover how to choose a theme, install it, and tweak it.

Working With Images and Multimedia
Photos, drawings, charts, videos, and audio clips can make your website more appealing and understandable. In this lesson, I'll show you how to use WordPress to upload and insert images and multimedia files.

Functionality: Getting the Most Out of WordPress

Make your website or blog more informative and easier to navigate with some special WordPress tools. You'll learn how to use sidebar widgets, forms, maps, and syndicated newsfeeds to make your site more useful and usable.

Making a User-Friendly Website
If your online visitors have trouble understanding or navigating your website, they'll go somewhere else. This lesson helps you pinpoint and eliminate usability problems.

Polishing Our WordPress Website

In this lesson, we'll take a long, hard look at our class project and decide how to make it better. You'll create a front page featuring both static and dynamic content; add links to pages, documents, email, and other sites; and repair typos, grammatical errors, and other mistakes.

Getting Search Engines to Love Your Website
What if you launched a website and nobody came? This lesson will show you how to keep that from happening. You'll find out what makes search engines tick and how to get them to visit your pages.

Making the Most of Statistics and Social Networking

Statistics are just a bunch of numbers if you don’t know how to use them. We’ll focus on how to analyze stats so you can improve your site. You’ll also find out how to tie your WordPress pages into social sites like Facebook and Twitter.

Launching Your WordPress Website
It's time to put the finishing touches on your site. This lesson includes a prelaunch checklist, so your online guests won't find any mistakes. I'll also show you how to promote the site and manage contributors.

Getting the Most From WordPress

In our final lesson, you’ll learn how to build a sophisticated form, and I’ll review all the optional upgrades WordPress offers. You’ll discover how to personalize your domain name, use your mobile phone to update Web pages, and access the files that control your site’s appearance. I’ll also examine the pros and cons of moving to the self-hosted version of WordPress.