Intermediate CSS3 and HTML5

Understand the viewport and its importance in Web design, and apply it to some advanced techniques for background images.

In this lesson, you'll learn how to take your web design skills to a whole new level with CSS static, relative, fixed, and absolute positioning. You'll also find out how to position things exactly where you want them, even stack and overlap them, just like the pros do.

Many of the more advanced interactive techniques for designing web pages require an understanding of the CSS properties and values necessary for controlling opacity, visibility, and scroll bars. Drop-down menus, pop-up thumbnail galleries, and scrolling textboxes are built from these things. This lesson introduces you to all the concepts, as well as the CSS properties and values you need to build such things. You'll then apply these techniques through the course to create ever more interactive pages.

In this lesson, you're going to learn how to apply advanced techniques like visibility, absolute positioning, and :hover to some fun things like thumbnail photo galleries and interactive facts. You'll go over some practical examples of the concepts, and the lesson will provide you with some code you can drop right into your own pages and use with minimal alteration. You'll also discover the secret to making the CSS :hover event work on devices like the iPhone, iPad, and iPod Touch, which don't always play nice with events that are designed to work with mouse pointers.

Web developers often feel shackled by the small selection of Web-safe fonts available on most computers. This lesson will free you from those shackles by teaching you about downloadable fonts and the modern Web Open Font Format (WOFF), as well as the CSS @font-face rule that make them possible. With this knowledge, you'll be able to choose from thousands of fonts for your website!

This lesson is all about creating cool-looking navigation bars and tabs like you see in professional sites. You'll learn different ways to size and position the buttons and tabs, how to use background images that change on mouse over, and how to highlight the tab that represents the current page to the user.

This lesson will help you use the skills you've gained so far to create some complex navigation tools with drop-down and flyout menus like the ones you may have seen in some large, professionally developed websites. Along the way, you'll learn how you can use the CSS rule of specificity to create complex designs with minimal code.

In this lesson, you'll step back from the fine details on which you've focused for the past few lessons, and look again at the bigger picture of the entire page layout. You'll see what web pages look like when using HTML5 and CSS3 and pick up some new tricks for making your pages better for the browsers and devices of today and tomorrow. Finally, you'll learn a new technique for making multi-column layouts easier than ever.

Responsive Web Design is a popular buzzword in the Web design business these days. It's all about designing your website so it looks good and works well on the wide range of devices people use to access the web these days, including smartphones, tablets, portable computers, desktop computers, gaming consoles, and television sets. In this lesson, you'll learn smart and relatively simple techniques that you can start using right now to ensure that your site looks and behaves its best across all those different media.

Despite their widespread use on the web today, HTML5 and CSS3 are still under development. The most important and most needed features of the languages received browser support very quickly. Some of the fancier tags and properties are being adopted more slowly, but they do represent some really cool animations and other fun stuff you'll want to know about now. This lesson will teach you all about those upcoming features.

This lesson will help you expand your horizons into other areas of Web development and app development. You'll discover the difference between front-end and back-end languages and learn the purpose of JavaScript and jQuery. You'll understand server-side technologies like PHP, MySQL, ASP.Net, and SQL Server—what they are, how you'd use them, and why you might want to learn them.