8293  Reviews star_rate star_rate star_rate star_rate star_half

CSS Boot Camp

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,...

Read More
By Request
Contact Us For Pricing
Duration 4 days
Course Code ACCEL-CSS-BOOT
Available Formats Classroom

Overview

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

  • 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

Training Materials

All students receive a copy of Peachpit Press's Practical CSS3: Develop and Design and related courseware.

Software Requirements

  • Windows or macOS with at least 8 GB RAM
  • 2 or more browsers of your choice (recent versions):
    • Google Chrome
    • Mozilla Firefox
    • Microsoft Edge
    • Safari
  • Web development tool of your choice (should support CSS syntax highlighting)

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 functions
    • CSS Scope
    • Critical CSS
    • CSS Keywords
  • 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
    • Introduction to the CSS box model
    • What is the CSS box model?
    • CSS border vs. Outline
    • Block vs. inline boxes
    • CSS Float property
    • Setting the box size
    • Challenge Exercise: Using the CSS box model
    • Z-Index and stacking orders
    • CSS logical properties
  • 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
      • Variable types
      • Variable use cases
      • Variable scope
    • Using a custom property
    • @property rule
  • CSS Typography
    • 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
    • CSS3 Transforms
      • What is a CSS transform?
      • CSS3 2D transforms
      • CSS3 3D transforms
      • CSS transform: properties and methods
    • CSS3 Transitions
      • What is a CSS3 transition?
      • How do I execute a CSS3 transition?
    • CSS3 Animations
      • CSS3 animation code
    • CSS3 3D Animations
      • 3D transformations
  • CSS Layout
    • Introduction to page layout with CSS
    • Position property values
      • position: static
      • position: relative
      • position: absolute
      • position: fixed
      • position: sticky
    • CSS display property
      • Introduction to the CSS display property
      • Hiding elements
      • Using the display property for layout
    • 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
      • What is a flexbox?
      • Creating a flexbox
      • The flex layout model
      • 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
    • Introduction to CSS columns
      • Creating multi-column layout
      • Column properties
      • Column-related design issues
  • Introduction to CSS Optimization
    • CSS minification
    • CSS color manipulation
    • Use resets
    • Sort CSS rules
    • Write object-oriented CSS
    • Make your CSS modular
    • Use CSS properties and functions
      • CSS calc()
      • CSS inherit
    • Use sprites
    • Using an online minifier
    • Add vendor prefixes
    • Check code quality
      • CSS lint
    • Identify unused CSS
    • Use an online CSS beautifier
    • CSS code organization
      • Code organization tips
      • Use a CSS style guide
      • Use a CSS preprocessor
      • CSS loading techniques        
  • Advanced CSS Optimization
    • Writing scalable, efficient, and maintainable CSS
    • Naming Conventions
    • Semantic CSS
      • BEM
      • OOCSS
      • SMACSS
      • Atomic
    • Formatting CSS
  • Understanding CSS Rendering and Performance
    • Browser rendering and optimization terms
      • Rendering stages
      • Guided Exercise: Understanding the browser’s rendering stages
    • Optimizing CSS
      • Optimize selectors
      • Remove unused CSS
      • Use testing tools
      • Avoid unnecessary DOM manipulations
      • Use a CDN
      • Minimize repaint and reflows
      • Paint cycles and compositor layers
      • CSS and JavaScript
      • More optimization tips
  • Conclusion
Read Less

Schedule

Upcoming Course Dates

There are currently no scheduled dates for this course. If you are interested in this course, contact us with the form below.

Contact Information
Address

FAQ

Does the course schedule include a Lunchbreak?

Classes typically include a 1-hour lunch break around midday. However, the exact break times and duration can vary depending on the specific class. Your instructor will provide detailed information at the start of the course.

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 Ascendient Learning deliver group training?

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

What does vendor-authorized training mean?

As a vendor-authorized training partner, we offer a curriculum that our partners have vetted. We use the same course materials and facilitate the same labs as our vendor-delivered training. These courses are considered the gold standard and, as such, are priced accordingly.

Is the training too basic, or will you go deep into technology?

It depends on your requirements, your role in your company, and your depth of knowledge. The good news about many of our learning paths, you can start from the fundamentals to highly specialized training.

How up-to-date are your courses and support materials?

We continuously work with our vendors to evaluate and refresh course material to reflect the latest training courses and best practices.

Are your instructors seasoned trainers who have deep knowledge of the training topic?

Ascendient Learning instructors have an average of 27 years of practical IT experience and have also served as consultants for an average of 15 years. To stay current, instructors spend at least 25 percent of their time learning new, emerging technologies and courses.

Do you provide hands-on training and exercises in an actual lab environment?

Lab access is dependent on the vendor and the type of training you sign up for. However, many of our top vendors will provide lab access to students to test and practice. The course description will specify lab access.

Will you customize the training for our company’s specific needs and goals?

We will work with you to identify training needs and areas of growth.  We offer a variety of training methods, such as private group training, on-site of your choice, and virtually. We provide courses and certifications that are aligned with your business goals.

How do I get started with certification?

Getting started on a certification pathway depends on your goals and the vendor you choose to get certified in. Many vendors offer entry-level IT certification to advanced IT certification that can boost your career. To get access to certification vouchers and discounts, please contact info@ascendientlearning.com.

Will I get access to content after I complete a course?

You will get access to the PDF of course books and guides, but access to the recording and slides will depend on the vendor and type of training you receive.

How do I request a W9 for Ascendient Learning?

View our filing status and how to request a W9.

Reviews

This course gave me a clearer understanding of the AWS cloud architecture.

ExitCertified provided us with a great opportunity to learn more about React and in easy to follow way.

Great training it covered the most importan topics if GitHub copilot with good explanation and good labs.

Class was easy to sign up for and ExitCertified provided very good communication

The instructor really took his time and made sure I was able to understand the concepts.