Course Description
In this advanced course you will take your CSS knowledge to the next level. You learn to create complex page layouts as well as add new interactive features available in CSS3.
You will 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.
Objectives
Lesson objectives help students become comfortable with the course, and also provide a means to evaluate learning. Upon successful completion of this course, students will understand the following topics:
• Background Images and CSS Shorthand
• Creating Columns with Float
• Media Queries
• The Display Property
• The Position Property
• Creating a Fixed Header
• Image Replacement
• CSS Sprites
• Background Gradients & Transparent Colors
• Advanced CSS Selectors
• CSS Attribute Selectors
• Form Styling
• Clearing Floats
• Sizing Typography
• CSS3 Shadows
• Hiding & Showing Elements
• CSS Transitions
• CSS Transforms
• CSS Specificity
Office Policy: In fairness to all participants, anyone arriving more than 30 minutes late will be rescheduled for another class date. Cancellation Policy:No Shows: If you are registered for a class and do not attend and fail to contact our office to cancel or reschedule, a fee equivalent to your daily rate will be applied.Rescheduling: Productivity Point reserves the right to cancel or reschedule any training course.Should we reschedule a course, a full credit will be applied to the rescheduled course. Productivity Point cannot assume responsibility for any other costs to the student (i.e.non-refundable airline tickets). Class credits are redeemable for up to 1 years.Cancellations: There is no charge for cancellations that are made Ten (10) or more business days prior to the scheduled training date. Cancellations that are made nine (9) business days or less of the scheduled training date are considered “late cancellations” and the full price of the class will be charged.All training cancelled within 10 or more business days' notice will have a credit on account in the full amount of purchase. This credit can be applied to any Productivity Point products or services for up to 1 year from the date of original transaction. There are no refunds. Agenda
The Box Model
This is the first in a series of three exercises in which you will style a simple blog using foundational CSS styling techniques.
o Adding the Viewport Meta Tag
o Using normalize.css
o Linking our CSS File and setting page defaults
o Scaling down hi-res images to fit the browser width
o Constraining the width of content
o The box model: adding padding, margins, & borders
o Visualizing the box model in Chrome’s DevTools
o Fixing spacing issues around images
Background Images and CSS Shorthand
In this exercise we will take a deep dive into CSS background images and learn how to streamline the CSS with shorthand.
o Modifying the H1 Text Style
o Adding a background image to the h2
o Using shorthand for the Background Property
Redefining CSS Typography
In this exercise we will refine the look of our basic blog by fine-tuning the typography. We will examine font-style, font-weight, and improve legibility with line-height.
o Differentiating Text with Font-Style
o Unitless Line-Height
o Grouping Selectors Using a Comma Separator
o Numeric Font-Weight: Beyond Normal & Bold
Creating Columns with Float
CSS lets you "float" content next to other elements. The float property specifies whether or not an element should float. The clear property is used to control the behavior of floating elements.
o Creating a 2-column layout with float
o Solution #1: using the clear property
o Adding a border between the columns
o Solution #2: setting the overflow property to hidden
Introduction to Media Queries
In this exercise, we will introduce you to media queries which are useful overrides for alternative layouts such as phones. We will use media query to switch our design from a 1-column layout to a 2-column layout.
o Finding an appropriate breakpoint
o Anatomy of a media query
o Using a media query to create an alternate layout
o Max-width media queries
o Sizing down the headings on smaller screens
The Display Property: A Deep Dive
In this exercise, we will style the header and footer links using the elements' display properties making our pages totally responsive. You will use inline-block as a hassle-free alternative to floats.
o Display types: block, inline, & inline-block
o Styling the header & footer navigation the DRY way
o Changing the display property to increase tappable area
o Displaying the navigation side-by-side on wider screens
o Using inline-block as an alternative to float
The Position Property: The Key to Complex Layouts
In this exercise we will explore the layout options that the position property affords you. The position property is your best defense against a boring layout. Mastering this property and getting to know its relative, absolute, and fixed values opens up a world of "outside the box" possibilities.
o The static value & the normal document flow
o A nostalgic wanderer: the relative value
o The absolute value
o The dynamic duo: relative parent, absolute child
o The fixed value
Creating a Fixed Header
In this exercise, we will utilize the position property to make a website header more interesting. In the layout for wider screens, we will use fixed positioning to make a fixed header.
o Moving the Contact list item to the navbar’s far right
o Creating a fixed header on wider screens
o Positioning a background image next to the FAQ
Image Replacement
In this exercise, you will place a background image behind a heading, hiding the text, and create a fluid image container that scales well with all devices.
o Replacing HTML text with CSS background images
o Removing text with negative text-indent value
o Using overflow: hidden;
o Removing text with a zero height
o Creating a fluid image container by using proportional top padding
CSS Sprites
In this exercise, you will learn how to create a navbar using CSS sprites. The sprite technique allows you to create a search engine-friendly and accessible text-based navbar with the added luxury of using well-designed images.
o What are Sprites?
o Creating Sprites
o Image Replacement
Background Gradients & Transparent Colors
In this exercise, we will add content to the Tahoe Adventure Club page, including a background image. The image is a black & white photo that we will colorize using semi-transparent background gradients.
o Specifying colors are RGB
o Adding transparency (alpha) to colored backgrounds with RGBA
o CSS background gradients
Multi-Column Layout
In this exercise, we will continue adding to the Tahoe Adventure Club website. We will add three articles and investigate the ease of creating columns using inline-block instead of floats.
o 3-column layout using inline-block
o Nested CSS Selectors
Advanced CSS Selectors
In this exercise, we will finish styling the Tahoe Adventure Club page. Instead of adding a bunch of classes or IDs to our markup, we are going to rely on the relationships between elements in order to target them cleanly and efficiently with CSS selectors.
o first-of-type
o first-child
o last-child
o last-of-type
o nth-child
o child selector
o :before and :after
CSS Attribute Selectors
In this exercise, we will make the links at the bottom of each article functional. We will focus on using attribute selectors to add nifty little icons next to each link to let users know what kind of resources they are linking to.
o Attribute selector syntax
o Caret (^) Operator
o Dollar ($) Operator
o Asterisk (*) Operator
Form Styling
In this exercise, we will use attribute selectors to style forms, which is a more common and useful real-world scenario.
o Using an attribute selector to target inputs
o Overriding default form element styling
Clearing Floats
In this exercise, we layout content for narrow screens, which converts to a two column layout on large screens. We will run up against a new issue with clearing floats that will require us to learn how to use the CSS "clearfix" method.
o The CSS Clearfix class
Sizing Typography
In this exercise, we will look at how we can customize font sizes for different screen sizes. We will go over the difference between fixed pixel font sizes, em units, and rem units.
o Working with REM
o REM versus EM
CSS3 Shadows
A well-placed drop shadow can add depth and dimension to any design. In this exercise, you will use thebox-shadow and text-shadow properties to elements on our page. You will also learn how to adjust an element's stacking order on the page using the z-index property.
o Box shadow
o Text shadow
o z-index
Hiding & Showing Elements
In this exercise, we will investigate various ways to hide and show elements: setting the display property to none, the visibility to hidden, and setting opacity to 0. Many of these settings are designed to make content accessible to the visually impaired.
o display: none;
o Visibility
o Opacity
CSS Transitions
In this exercise, we will add CSS3 transitions that are triggered by users. We will add two transitions: a basic fade-in that animates the color and text-shadow in the links in the header.
o Transition-Property
o Transition-Duration
o Transition Shorthand & the Transition Stack
CSS Transforms
In this exercise, we will add 2D scale and translate transforms onto our preexisting transitions to make our page even more engaging to our users.
o The Scale Transform
o The Rotation Transform
o Transitioning Transforms
You are Here Indicator
In this exercise, we will work on a local city guide website that features travel info about a few U.S. cities. Our goal is to add an essential user experience feature: an indicator in the navigation that shows users the current page.
o Navigation page marker
o CSS Shapes
CSS Specificity
In this exercise, we will demystify CSS' specificity hierarchy so you can override styles with confidence.
o Advanced CSS Specificity
o The Specificity Hierarchy
o How Attribute Selectors & Pseudo-Classes Are Weighted
o Inline Styles: The Highest Priority
Comments
Office Policy: In fairness to all participants, anyone arriving more than 30 minutes late will be rescheduled for another class date.
Cancellation Policy: No Shows: If you are registered for a class and do not attend and fail to contact our office to cancel or reschedule, a fee equivalent to your daily rate will be applied.
Rescheduling: Productivity Point reserves the right to cancel or reschedule any training course.Should we reschedule a course, a full credit will be applied to the rescheduled course. Productivity Point cannot assume responsibility for any other costs to the student (i.e.non-refundable airline tickets). Class credits are redeemable for up to 1 years.
Cancellations: There is no charge for cancellations that are made Ten (10) or more business days prior to the scheduled training date. Cancellations that are made nine (9) business days or less of the scheduled training date are considered “late cancellations” and the full price of the class will be charged.All training cancelled within 10 or more business days' notice will have a credit on account in the full amount of purchase. This credit can be applied to any Productivity Point products or services for up to 1 year from the date of original transaction. There are no refunds.