In this book you’ll take your CSS skills to the next level. You’ll expand your knowledge of what CSS can do, enabling you to make more visually interesting and better coded webpages. You’ll take control over the layout of your webpages by learning about an alternate box-model called border-box, start using vector graphics (SVG), and create visual effects such as CSS gradients, shadows, transparent colors (with RGBA), and more. You’ll gain a deeper understanding of how positioning works (relative, absolute, fixed), target elements with advanced CSS selectors, and learn the power of CSS variables. You’ll better optimize your pages with responsive images using CSS media queries, img srcset, and the pixture element. This course workbook can be completed in any code editor.
Includes Downloadable Class Files (works on Mac & PC)
Setup & Introduction
Downloading the Class Files
Before You Begin
- Choosing a code editor to work in
- Supported browsers
- Recommended software
- Installing packages into Sublime Text to boost functionality
- Installing & using the iOS Simulator (Mac Only)
Setting Up: Do This Before Other Exercises!
- Setting up your class files
Normalize.css, Default Box Model, & More
- Using normalize.css
- Grouping CSS selectors using a comma separator
- Fluid, hi-res images
- Constraining the width of content
- Visualizing the box model (margin, padding, and border) in Chrome’s DevTools
- Fixing spacing issues around images
- CSS shorthand for the background property
Font-Weight, Font-Style, & Unitless Line-Height
- Adding custom web fonts from Google Fonts
- Using font-weight & font-style
- Unitless line-height
Box Model: Content-Box vs. Border-Box
- How border-box is different than content-box
- Best practice for applying border-box to everything
Intro to SVG (Scalable Vector Graphics)
- Adding SVG to a webpage
- Sizing SVG
- Web Servers: Configuring a .htaccess file for SVG & gzip
- Embedding SVG (instead of linking)
- Styling SVG using CSS ,
- Using currentColor
- Defining the SVG sprite
- Using a sprite
- Styling sprites
CSS Position Property
- The static value & the normal document flow
- The relative value
- The absolute value
- The dynamic duo: relative parent, absolute child
- The fixed value
Creating a Fixed Navbar & RGBA Color
- Creating a fixed navbar on wider screens
- RGBA color
CSS Background Gradients & Gradient Patterns
- CSS background gradients
- Creating a striped background using gradients
Multiple Backgrounds & Viewport Sizing Units (vw)
- Multiple backgrounds on a single element
- Colorizing a photo by overlaying a transparent gradient
- Using viewport sizing units (vw)
Creating Columns with Inline-Block & Calc()
- Displaying content as columns using inline-block
- Using CSS calc()
CSS Variables (Custom Properties)
- Defining & using CSS variables
- The power of inheritance
- Adjacent selectors
- Using first-child & last-child
- Using first-of-type
- Using nth-child
- Direct child/descendant selectors
Pseudo-Elements & the Content Property
- Using pseudo-elements
- The content property
- Seeing pseudo-elements in Chrome’s DevTools
- Adding link icons with attribute selectors
- “Ends with” attribute selector
- “Begins with” attribute selector
- “Contains” attribute selector
Styling Forms with Attribute Selectors
- Styling form elements
- Targeting inputs with attribute selectors
- The ::placeholder pseudo element
Relative Sizes: Em and Rem
- Em units
- Rem units
Flix: Creating a Scrollable Area
- Creating a horizontal scrollable area
- Optimizing the scrolling for iOS touch devices
Flix: Media Queries for Retina/HiDPI Graphics
- Using media queries to load hi-res images for Retina/HiDPI displays
- Img srcset
- The picture element
Off-Screen Side Nav Using Only CSS
- Responsive off-screen navigation
- Toggling the navigation with a checkbox
- CSS transitions
Box-Shadow, Text-Shadow, & Z-Index
- Using the CSS box-shadow property
- Changing an element’s default stack order with position and z-index
- Inset shadows
- Adding drop shadows to text with CSS text-shadow
- Layering multiple 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 visibility
- Hiding/showing elements with opacity
- How display, visibility, & opacity differ
- Transition-property & transition-duration
- Transition shorthand & the all keyword
- Transitioning position coordinates
- Adding easing with transition-timing-function
- Custom easing with Ceaser
CSS Transforms with Transitions
- Testing transforms using the DevTools
- Adding a scale transform & transitioning it
- Transform origin
- Rotate & skew transforms
- Using the translate transform to nudge elements
Slide-Down Top Nav Using Only CSS
- Creating a slide-down menu
- Making the logo & menu button slide down with the page content
Clearing Floats: Overflow Hidden & Clearfix
- Using overflow hidden to clear floats
- Using clearfix to clear floats ,
Features of Noble Desktop eBooks
- Searchable, with live text that you can copy and paste.
- 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).
- Amazon’s format for Kindle devices and Kindle app.
- 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
- iBooks (EPUB)
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.