Learn how to use CSS to create more complex page layouts. You’ll learn best practices as you gain a deeper understanding of CSS selectors and the various CSS properties available.
Create multi-column layouts using floats and inline-blocks. Master the positioning of elements (relative, absolute, fixed) and target elements with advanced CSS selectors. Learn about newer CSS3 transitions, transformations, and animations, as well as create parallax scrolling effects using only CSS.
This course is offered at our design school, Noble Desktop. View upcoming dates and register for this course directly on Noble Desktop’s website.Register at nobledesktop.com
Video Training and Workbook Included
Students get a workbook and lifetime access to self-paced training videos, a $95 value.
Modern computer classroom with your choice of Mac or PC to work on.
Small In-Person Classes
Get personalized attention in small groups with an expert instructor in the classroom.
Refresh the course materials within six months for free as long as there's space in the class.
What You'll Learn
- Use media queries to create layouts that are responsive (optimized for all screens sizes, such as phones, tablets, and desktops)
- Dive deeper into CSS3 selectors and properties for more sophisticated styling
- Learn best practices to write cleaner, optimized CSS code
Full Course SyllabusDownload PDF Outline
Minimalist Blog: The Box Model
- Using normalize.css
- Setting page defaults with CSS
- Scaling down hi-res images to fit the browser width
- Constraining the width of content
- The box model: adding padding, margins, & borders
- Visualizing the box model in Chrome’s DevTools
- Fixing spacing issues around images
Minimalist Blog: Streamlined CSS
- Setting a scalable default line-height using a ratio
- Grouping selectors using a comma separator
- Numeric font-weight: beyond normal & bold
- Adding a background image to the h1
- Using shorthand with three values
Creating Columns with Float
- Creating a 2-column layout with float
- Solution #1: using the clear property
- Adding a border between the columns
- Solution #2: setting the overflow property to hidden
Introduction to Media Queries
- Finding an appropriate breakpoint
- Anatomy of a 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
- A nostalgic wanderer: the relative value
- The absolute value
- The dynamic duo: relative parent, absolute child
- The fixed value
Creating a Fixed Header
- Moving the Contact list item to the navbar’s far right
- Creating a fixed header on wider screens
- Positioning a background image next to the FAQ
- Replacing HTML text with CSS background images
- Removing text with negative text-indent value
- Using overflow: hidden;
- Removing text with a zero height
- Creating a fluid image container by using proportional top padding
- What are Sprites?
- Creating Sprites
- Image Replacement
Background Gradients & Transparent Colors
- Specifying colors are RGB
- Adding transparency (alpha) to colored backgrounds with RGBA
- CSS background gradients
- 3-column layout using inline-block
- Nested CSS Selectors
- child selector
- :before and :after
- Attribute selector syntax
- Caret (^) Operator
- Dollar ($) Operator
- Asterisk (*) Operator
- Using an attribute selector to target inputs
- Overriding default form element styling
- The CSS Clearfix class
- Working with REM
- REM versus EM
- Box shadow
- Text shadow
Hiding & Showing Elements
- display: none;
- Transition Shorthand & the Transition Stack
- The Scale Transform
- The Rotation Transform
- Transitioning Transforms
You are Here Indicator
- Navigation page marker
- CSS Shapes
CSS Responsive Scrolling Techniques Part 1
- Initial Page Styling
CSS Responsive Scrolling Techniques Part 2
- Creating an animated CSS transition for a YouTube video
CSS Responsive Scrolling Techniques Part 3
- Animating the panorama
- Making the layout responsive
Frequently Asked Questions
Do I need to bring a computer?
No. We provide a computer with the necessary software for each attendee. Choose a Mac or a PC during the checkout process.
Are discounts available for this course?
No. This course is not eligible for any discounts.
We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.
We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.
Does this course come with a book?
Yes. This course includes a complimentary book or manual at no additional cost.
What if I need to retake this course? May I retake it for free?
Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.