Learn your way! Get started

Web Design, Part 3: CSS and Layouts

with expert John Wiley & Sons

Watch trailer

Course at a glance

Release date 4/3/2015
Level Beginner
Runtime 1h 59m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams N/A

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Master Web Design in this five part learning series, Web design requires knowledge of multiple software tools and coding languages, like Dreamweaver, Flash, Silverlight, Illustrator, Photoshop, HTML, and CSS, among others to craft truly unique, robust, and interactive websites that work across a variety of platforms. Now, you can learn the ins and outs of web design – from a working knowledge of popular design tools to bringing your vision online- with Web Design. Delve into the basics of good web design and get familiar with the most common web development tools. Conceptualize your site, outline its key features, and implement your design concepts. Incorporate user experience and solid interface design techniques into your site design to create a website that is both functional and attractive.


This course assumes some familiarity with HTML and CSS. This course is part of 5 courses; Web Design: Design and Tools; Web Design: HTML Intro and Web Images; Web Design: CSS and Layouts; Web Design: Advanced Layout and Web Design Essentials: JavaScript and jQuery. Please be sure to view the courses in order if you are new to the material.

Meet the expert

Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.

Course outline

Format Text & Work with Lists

Formatting Text with CSS (27:39)
  • Introduction (00:10)
  • Formatting Text Overview (00:23)
  • Adding Font Styles with CSS (01:42)
  • The Font Family Property (03:44)
  • Sizing Text with CSS (01:03)
  • Set Foundation of Font Sizing (02:09)
  • Using Percent Values (05:07)
  • Adding Space with Margins (03:32)
  • Controlling Space with Margins (02:17)
  • Text Styles and Line-Height (02:49)
  • Font Weight (01:56)
  • Text Transform Property (02:33)
  • Summary (00:10)
Working with Lists (19:36)
  • Introduction (00:10)
  • Unordered and Ordered Lists (05:01)
  • Definition Lists (03:18)
  • Styling HTML Lists (01:21)
  • Adding Background Colors (02:55)
  • Margins and Paddings (05:39)
  • Remove Background Colors (00:58)
  • Summary (00:10)

Introduction to CSS Layout

CSS Reset & HTML Div Element (18:08)
  • Introduction (00:10)
  • CSS Layout Overview (00:31)
  • Working with a CSS Reset File (04:27)
  • Attach a CSS Reset File (02:40)
  • HTML Div Element (02:11)
  • Style with Background Colors (03:56)
  • Add an Image (04:00)
  • Summary (00:10)
The Float Property (20:45)
  • Introduction (00:10)
  • Understand the Float Property (02:19)
  • Three Main Values of the Float (03:13)
  • Location of a Floated Object (03:12)
  • Columns with Float Property (05:29)
  • Work with the Clear Property (01:15)
  • Add Clear Property to a Footer (04:54)
  • Summary (00:10)
Nav Bar & Layouts with Padding (15:45)
  • Introduction (00:10)
  • List-based Navigation Bar (01:55)
  • Add Unordered List Items (01:32)
  • Float Property & Other Styles (04:34)
  • Column Layouts with Padding (03:16)
  • Effects of Adding Padding (04:06)
  • Summary (00:10)
Margin Layouts & Footer Styles (18:04)
  • Introduction (00:10)
  • Column Layouts with Margins (02:55)
  • Effects of Adding Margins (03:46)
  • Margins & Padding Differences (04:14)
  • Styling a Footer with CSS (00:35)
  • Add Background Image to Footer (01:54)
  • Define Footer Height & Width (04:16)
  • Summary (00:10)