- Course Title
- Introduction to CSS3 and HTML5
Learn how to create state-of-the-art websites using modern CSS3 and HTML5 techniques. Take your existing HTML skills to the next level and start building sites like the pros.
These powerful languages make it easier for you to build and manage large websites, plus give you more precise control over the appearance of every page you build. Almost every Web development tool, including Dreamweaver and Microsoft Expressions Web, offer support for CSS3 and HTML5.
This course will provide you with the foundation you'll need to master two critical and fast-growing new Web languages. Offered in partnership with ed2go.
- Understand what HTML5 and CSS3 are all about, and get your system ready to start creating with those languages.
- Discover the power of using CSS to style your website.
- Understand and use CSS background colors and images in your website.
- Enhance your designs with borders, rounded corners, and drop shadows.
- Jazz up your text with fonts, text shadows, and more.
- Master HTML and CSS techniques for using and styling pictures in your website.
- Master CSS style classes, pseudo-classes, and HTML links.
- Understand and use modern methods for embedding sound and video into your Web pages.
- Master modern techniques for styling HTML tables.
- Understand the CSS Box Model and the tools for controlling widths, heights, margins, and padding.
- Understand and use the new HTML5 page layout tags.
- Master the skills for creating sidebar columns and vertical navigation bars.
Wednesday - Lesson 01
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.
Friday - Lesson 02
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.
Wednesday - Lesson 03
Background colors, photos, textures, patterns, and gradients can really add some pizazz to your website. In today's lesson, you'll learn to do them all, and you'll have a lot of fun doing so.
Friday - Lesson 04
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.
Wednesday - Lesson 05
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!
Friday - Lesson 06
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.
Wednesday - Lesson 07
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.
Friday - Lesson 08
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.
Wednesday - Lesson 09
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!
Friday - Lesson 10
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.
Wednesday - Lesson 11
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.
Friday - Lesson 12
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.
Method of Instruction