Yelp Facebook LinkedIn YouTube Twitter Instagram

Step-by-Step Training Workbook

Web Development Level 2 Book

CSS Intensive

Web development level2 v2.1 2x

Buy the workbook

This book comes free with our Web Development Level 2 class

In this book you’ll learn how to use CSS for more complex page layouts You’ll learn about best practices as you gain a deeper understanding of CSS selectors and the various CSS properties available. You’ll create multi-column layouts using floats and inline-block. Gain a deeper understanding of how block and inline elements work. Master the positioning of elements (relative, absolute, fixed) and target elements with advanced CSS selectors. Learn about newer CSS3 transitions, transforms, and animations as well as create parallax scrolling effects using only CSS. This course workbook can be completed in any code editor.

Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-18-1

Download Sample Exercise
Setup & Introduction
Downloading the Class Files
HTML vs. XHTML Syntax
  • Differences between HTML & XHTML syntax
Before You Begin
  • Supported browsers
  • Recommended software
Section 1
Setting Up: Do This Before Other Exercises!
  • Setting up your class files
Minimalist Blog: The Box Model
  • Using normalize.css
  • Linking CSS & setting page defaults with CSS
  • Fluid, hi-res images
  • Constraining the width of content
  • Adding margins, padding, & borders
  • Visualizing the box model in Chrome’s DevTools
  • Fixing spacing issues around images
Background Images & CSS Shorthand
  • Adding flair to the design with background-image
  • Modifying background-repeat
  • Managing background-size with keywords contain & cover
  • CSS shorthand for the background property
Minimalist Blog: Refining CSS Typography
  • Differentiating text with font-style
  • Unitless line-height
  • Grouping selectors using a comma separator
  • Numeric font-weight: beyond normal & bold
Creating Columns with Floats
  • Creating a 2-column layout with floats
  • Using the clear property
  • Adding a border between the columns
  • Setting the overflow property to hidden
Section 2
Introduction to Media Queries
  • Finding an appropriate breakpoint
  • Introduction to the media query
  • Using a media query to create an alternate layout
  • Max-width media queries
  • Sizing down the headings on smaller screens
The Display Property: A Deep Dive
  • Display types: block, inline, & inline-block
  • Styling the header & footer navigation the DRY way
  • Changing the display property to increase tappable area
  • Displaying the navigation side-by-side on wider screens
  • Using inline-block as an alternative to float
The Position Property: The Key to Complex Layouts
  • The static value & the normal document flow
  • The relative value
  • The absolute value
  • The dynamic duo: relative parent, absolute child
  • The fixed value
Acme Shipping: Fixed Header
  • Moving the Contact list item to the navbar’s far right
  • Creating a fixed header on wider screens
Section 3
Image Replacement
  • Replacing HTML text with CSS background images
  • Removing text with a negative text-indent value
  • Using overflow: hidden;
  • Removing text with a zero height
  • Creating a fluid image container by using proportional top padding
Using Sprites
  • CSS font shorthand
  • Writing a media query for larger screens
  • Adding a sprite
  • Resizing sprites
  • Repositioning the sprite to show different images
  • Repositioning the sprite on hover
  • Writing a media query for smaller screens
RGBA & Background Gradients
  • Adding a background image
  • Adding borders
  • RGBA values
  • Background gradients
  • Adding alpha transparency to gradients
  • Fixed backgrounds
3 Column Layout with Inline-Block
  • Displaying content in columns
  • Fine-tuning design with nested selectors
Section 4
Advanced CSS Selectors
  • Targeting with adjacent selectors
  • Targeting elements using first-child
  • Targeting with first-of-type
  • Using nth-child
  • Using nth-child & last-child
  • Pseudo-elements & the content property
  • Direct child/descendant selectors
CSS Attribute Selectors
  • Linking the links
  • Adding the link icons
  • Optimizing the background property declaration
  • ,
  • Targeting with attribute selectors
Styling Forms with Attribute Selectors
  • Styling input elements
  • Input type attributes
  • Targeting inputs using attribute selectors
  • Altering the CSS box model using box-sizing
  • The :focus pseudo class
Section 5
Using Clearfix
  • Creating columns
  • Styling the page for two columns
  • Floating the aside images
  • Adding & positioning the new badge
  • Using clearfix
  • Using border-radius to round the images
Relative Font Sizes
  • Intro to em units
  • Using em units to scale down text on large screens
  • Simplifying the code with rem units
Box-Shadow, Text-Shadow, & the Z-Index
  • Using the CSS box-shadow property
  • Changing an element’s default stack order with z-index
  • Inset shadows & multiple shadows on one element
  • Adding drop shadows to text with CSS text-shadow
  • Layering text-shadows for a detached outline effect
Hiding & Showing: Display, Visibility, & Opacity
  • Removing an element from the normal document flow with display: none
  • Hiding/showing elements with the visibility property
  • Hiding/showing elements by manipulating the opacity
  • How display, visibility, & opacity differ
Section 6
CSS3 Transitions
  • Required info: transition-property & transition-duration
  • To delay or not to delay
  • Transition shorthand & the all keyword
  • CSS vendor prefixes
  • Transitioning position coordinates
  • Adding easing with transition-timing-function
  • Adding delight to the transition with Ceaser
CSS3 Transforms with Transitions
  • Testing transforms in isolation using the DevTools
  • Adding a scale transform & transitioning it
  • Modifying the transform origin
  • Testing the rotate & skew transforms
  • Using the translate transform to nudge elements
  • Fixing anchor “flutter” by translating a child element
You Are Here: Indicating the Current Page
  • Adding a hover style to all navigation links
  • Targeting the New York page’s navigation link
  • Inserting a square before the New York link using CSS
  • Using CSS borders to create a triangle
  • Tweaking the triangle’s positioning
  • Removing the hover style from the current page’s link
Bonus Material
CSS Specificity
  • Advanced CSS specificity
  • The specificity hierarchy
  • How attribute selectors & pseudo-classes are weighted
  • Inline styles: the highest priority
  • The ultimate trump card: the !important rule
Reference Material

How our eBooks Work Buying eBooks for Someone Else

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s iBooks app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • iBooks (EPUB)
Windows PC
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for teacher pricing).
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

  • Learn to write media queries to create websites that work across multiple devices.

  • Build multi-column layouts using a number of different techniques.

  • Learn how to code fixed navigation for desktops, but stacked navigation for a better mobile experience.

  • Optimize form styling with advanced CSS selectors.

  • Replace text with images to get elegant graphics and maximum SEO.

  • Use CSS Transforms and Transitions to hide, show and animate elements.

Why Our Books Are Unique

Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.

Buy the Web Development Level 2 Book

This book comes free with our Web Development Level 2 class