3 arrows

Summer-Ready Savings: Up To $500 Off Training 

closeClose

CSS Boot Camp

  • Contact Us For Pricing
  • Reviews star_rate star_rate star_rate star_rate star_half 4119 Ratings
  • Course Code ACCEL-CSS-BOOT
  • Duration 4 days
  • Available Formats Classroom

This in-depth CSS training course teaches attendees how to master Cascading Style Sheets to create visually appealing webpages using the latest CSS3 techniques for formatting text, laying out pages, adding transitions and animations, incorporating best practices, and more.

Skills Gained

All students will learn how to:

  • Style elements using the new selectors, pseudo classes, and pseudo elements
  • Use font and text effects, including @font-face
  • Use the new gradient, mask, and background image techniques
  • Implement animations, transitions, and 2D and 3D transforms
  • Render content appropriately for mobile and tablet devices using media queries
  • Understand vendor-specific prefixes and browser support for various CSS3 techniques
  • Incorporate CSS optimization
  • Understand CSS rendering and performance

Prerequisites

Prior hands-on experience with HTML and CSS is required.

Course Details

Software Requirements

  • Windows or Mac OS X with at least 8 GB RAM
  • 2 or more browsers of your choice (recent versions):
  • Google Chrome
  • Mozilla Firefox with the Firebug extension installed
  • Internet Explorer 10 or later [Windows users]
  • Safari 5 or later
  • Web development tool of your choice (should support CSS syntax)

CSS Training Outline

Introduction to Cascading Style Sheets (CSS)

  • CSS Introduction
  • What is CSS?
  • CSS Version Numbers and CSS Levels
  • Who is responsible for CSS?
  • Why should I be writing CSS?
  • When was CSS created?
  • Where is the official CSS specification?

CSS Syntax

  • Introduction to Writing CSS
  • CSS @rules
  • CSS Modules/Scope
  • What is Critical CSS?
  • Critical CSS Resources

Selectors and Specificity

  • Introduction to CSS Selectors and Specificity
  • Helpful definitions
  • Selectors
  • Simple selectors
  • Combinators
  • Compound selectors
  • Complex selectors
  • The CSS “key”
  • CSS Selector types
  • Tag or element selectors
  • Id Selectors
  • Class selectors
  • Specificity
  • Specificity Hierarchy
  • CSS Cascade Rules
  • CSS Specificity Rules
  • Logically-applied selectors

Feature Detection

  • Introduction to Feature Detection
  • What is Modernizr?
  • CSS Feature Queries
  • CSS @supports
  • CSS.supports

The CSS Box Model

  • Introduction to the CSS box model
  • What is the CSS box model?
  • Two Types of Boxes
  • Alternate box model
  • Z-index

The CSS Reset

  • Introduction to the CSS reset
  • Why use a CSS reset?
  • Why not use a CSS reset?

CSS Custom Properties

  • Introduction to CSS Custom Properties
  • What are custom properties?
  • How to declare a custom property
  • Using a custom property
  • CSS Variable Use Cases
  • CSS Custom Properties vs. Preprocessor Variables
  • CSS Environment Variables

CSS Typography: Font Sizes

  • Introduction to Typography
  • Units of Measurement
  • Fixed units of measurement
  • Relative units of measurement
  • Absolute vs. relative units
  • Font Sizes and browser rendering

CSS 3

  • Introduction to CSS3
  • What is CSS3?
  • Understanding the CSS Version numbers and CSS Levels
  • Examples of CSS Level 3 features
  • CSS3 Transforms
  • What is a CSS transform?
  • CSS3 2D transforms
  • CSS3 3D transforms
  • CSS transform: properties and methods
  • CSS3 Transitions
  • CSS3 Animations
  • CSS3 animation code
  • CSS3 3D Animations
  • 3D transformations

CSS Layout Fundamentals

  • Introduction to page layout with CSS
  • CSS position property
  • Introduction to the CSS position property
  • Position property values
  • position: static
  • position: relative
  • position: absolute
  • position: fixed
  • position: sticky
  • Introduction to the CSS display property
  • Values that determine if the element will generate a display box
  • The values that determine the elements role in document flow
  • Using Viewport units for layout
  • Introduction to Viewport Units
  • Viewport width
  • Viewport height
  • Viewport minimum and maximum

CSS Flexbox

  • Introduction to the display: flex property
  • The flex layout model
  • The flex display properties
  • Flex Grow, Shrink and Basis

CSS Grid Layout

  • Introduction to the CSS grid layout
  • What is a grid?
  • Features of a grid layout
  • Grid glossary
  • Placing items on the grid
  • Grid properties

CSS Multi-Column Layout

  • CSS Multi-column layout
  • Introduction to CSS columns
  • Creating multi-column layout
  • Column properties
  • Column-related design issues

Introduction to CSS Optimization

  • What does CSS Optimization mean?
  • Tips for writing optimized CSS
  • CSS Minification
  • Writing shorter CSS Code
  • Limit the user of colors
  • Using CSS Resets
  • Why use a CSS Reset
  • Sorting CSS Rules
  • Object-oriented CSS
  • Non-Object-Oriented CSS
  • Making your CSS modular
  • Using CSS properties and functions
  • Using Sprites
  • Using an online minifier
  • Adding vendor prefixes
  • Checking the code quality of your CSS
  • Identifying unused CSS
  • Knowing where unused CSS comes from
  • Using a CSS Beautifier
  • What is clean CSS?
  • Code organization techniques
  • Using a CSS preprocessor
  • Using SASS
  • Preprocessor variables
  • Preprocessor functions
  • Nested styles
  • Mixins

Advanced CSS Optimization

  • Writing scalable, efficient and maintainable CSS
  • Naming Conventions
  • History of naming conventions in CSS
  • Naming Conventions: BEM
  • What are Elements?
  • What are Blocks?
  • What are Modifiers?
  • BEM Best practices
  • Pros and Cons of BEM
  • Naming Conventions: SMACSS
  • Scalable and Module Architecture for CSS
  • Organizing CSS
  • Formatting CSS

Understanding CSS Rendering and Performance

  • Optimizing your CSS
  • Browser Rendering Triggers
  • Paint Cycles and Composite layers
  • Using a Content Delivery System

CSS and JavaScript

Conclusion

When does class start/end?

Classes begin promptly at 9:00 am, and typically end at 5:00 pm.

Does the course schedule include a Lunchbreak?

Lunch is normally an hour long and begins at noon. Coffee, tea, hot chocolate and juice are available all day in the kitchen. Fruit, muffins and bagels are served each morning. There are numerous restaurants near each of our centers, and some popular ones are indicated on the Area Map in the Student Welcome Handbooks - these can be picked up in the lobby or requested from one of our ExitCertified staff.

How can someone reach me during class?

If someone should need to contact you while you are in class, please have them call the center telephone number and leave a message with the receptionist.

What languages are used to deliver training?

Most courses are conducted in English, unless otherwise specified. Some courses will have the word "FRENCH" marked in red beside the scheduled date(s) indicating the language of instruction.

What does GTR stand for?

GTR stands for Guaranteed to Run; if you see a course with this status, it means this event is confirmed to run. View our GTR page to see our full list of Guaranteed to Run courses.

Does ExitCertified deliver group training?

Yes, we provide training for groups, individuals and private on sites. View our group training page for more information.

Does ExitCertified deliver group training?

Yes, we provide training for groups, individuals, and private on sites. View our group training page for more information.

ExitCertified was a great. They gave me all the materials and information I needed ahead of time to prepare for the course.

Great and very intuitive. Better than the traditional hit the wrong button/lose points.

Class was very informative, although one lab didnt but will try again later

The training was good but needed the basic skills of maximo before getting deep in the configuration of it.

Thank you for training on AWS development. Course was good and encouraging but labs need to be improved and provide more information and ask students to more work than provide solutions.

0 options available

There are currently no scheduled dates for this course. If you are interested in this course, request a course date with the links above. We can also contact you when the course is scheduled in your area.

Contact Us 1-800-803-3948
Contact Us
FAQ Get immediate answers to our most frequently asked qestions. View FAQs arrow_forward