Level 2 CSS in Perspective

Enhance the look and feel of your projects

Course Length: 2 Days

What You’ll Learn

Bring CSS to life in your projects. This class covers styling a project in Perspective using basic CSS and common design principles, as well as more advanced concepts like using the Advanced Stylesheet. This class takes an existing project and applies CSS to increase its visual appeal and functionality. By the end of this class, students will be able to use CSS, Advanced Styles sheets, standardize fonts and component transforms (resizing) to greatly improve an existing project.

Highlights From This Class

Get a snapshot of the main concepts and skills you’ll learn:

  • Setup and project introduction
  • Classes overview and building styles
  • Element states
  • Conditional styling, animation, and advanced stylesheet
  • Web fonts
  • Using the CSS Grid

Explore the full curriculum below.

Who is This Class For?

This class is designed as Level 2 class in our curriculum. It has been designed with intermediate-level users in mind.

Prerequisites

This is a level 2 class, prior experience with Ignition is required and Core certification is recommended.

Suggested Preparation

    • Some familiarity with CSS.
css

Daily Schedule

Arrive on Day 1: 7:30 AM – 8:00 AM

  • Morning Session: 8:00 AM – 12:00 PM
  • Lunch: 12:00 PM – 1:00 PM
  • Afternoon Session: 1:00 PM – 5:00 PM

We recommend booking departing flights no earlier than 6:00 PM.

lunch-ignition-class

Level 2 CSS in Perspective

TOPICS COVERED

Class Setup

Restoring the Database Backup

Restoring the Class Gateway

Activating the Gateway License

Introduction to the Solar Farm Project

Reviewing the Project Specs

Reviewing the Acme Solar Farm Branding Guidelines

Basic Styles and Classes

Applying Local CSS

Applying Styles via Classes

Understanding Style vs Text Style

Styling Parts of Components

Applying Multiple Classes

Building Styles

Formatting Text

Working with Colors

Adding Spacing and Alignment

Adding Borders

Adding Images

Fixing Contrast Issues

Adding Additional Classes

Element States

Working With the Hover State

Adding the Focus State

Conditional Styling & Animation

Applying Styling via Scripting

Fixing Naming Issues Through Scripting

Adding CSS Animation

The Advanced Stylesheet

Enabling the Advanced Stylesheet

Reviewing Basic CSS Syntax

Applying Hand-Coded Styles

Inspecting Styles

Overriding Default Styles

Digging Into Components

Styling LEDs

Accessing Web Fonts

Adding New Fonts

Using Web Fonts

Overriding Fonts in Components

Using the CSS Grid

Refactoring a View in Grid

Applying CSS Grid to the Markdown Component

Have questions?

For more information, please contact us by clicking “Send Us A Message!”

SEND US A MESSAGE!