How to Implement Animations with CSS and JavaScript

Animations can bring a website to life, adding dynamic interactions that enhance user experience and engagement. Whether you’re looking to create simple hover effects or complex sequences, CSS and JavaScript offer powerful tools to achieve your goals. This article will guide you through the process of implementing animations, from basic techniques to advanced strategies, ensuring your web projects are both visually appealing and performant.

Basics of CSS Animations

Understanding CSS Animations

CSS animations allow you to animate the transition of an element from one state to another. They are defined within your CSS code using keyframes, which describe the starting and ending states of the animation, as well as any intermediate steps.

Keyframes in CSS

Keyframes are the foundation of CSS animations. They define the specific points in the animation where changes occur. A keyframe rule is created using the @keyframes at-rule followed by a name and a series of percentage values or keywords like from and to.

Example:

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

Applying Animations to Elements

Once you’ve defined your keyframes, you can apply the animation to an element using the animation property. This property combines several sub-properties, such as the name of the animation, duration, timing function, delay, iteration count, and direction.

Example:

.element {
  animation: slideIn 1s ease-in-out;
}

In this example, the element will slide in from the left over the course of one second, easing in and out smoothly.

Transition Property

CSS transitions are another way to create animations, particularly for simple changes triggered by user interactions like hovering. Unlike keyframe animations, transitions occur over a specified duration whenever a CSS property changes.

Example:

.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: green;
}

In this case, the button’s background color will transition from blue to green over 0.3 seconds when hovered over.

Advanced CSS Animations

Combining Animations

You can combine multiple animations to create more complex effects. This involves defining multiple keyframes and applying them to the same element using the animation property.

Example:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes moveUp {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

.element {
  animation: fadeIn 2s ease-in-out, moveUp 2s ease-in-out;
}

Animation Timing Functions

The timing function determines how the intermediate values of the CSS properties being animated are calculated. Common timing functions include ease, linear, ease-in, ease-out, and ease-in-out.

For more precise control, you can use a cubic-bezier function, which allows you to define your own timing curve.

Example:

.element {
  animation: slideIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Animation Delays and Iteration Counts

You can delay the start of an animation using the animation-delay property and control how many times the animation should repeat using the animation-iteration-count property.

Example:

.element {
  animation: slideIn 1s ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: 3;
}

In this example, the animation will start after a 0.5-second delay and repeat three times.

Basics of JavaScript Animations

Why Use JavaScript for Animations?

While CSS animations are powerful, JavaScript provides more control and flexibility, particularly for complex sequences and interactions. JavaScript can dynamically adjust animations based on user input, perform calculations, and interact with other elements on the page.

The requestAnimationFrame Method

The requestAnimationFrame method is a key tool for creating animations in JavaScript. It tells the browser to execute a specified function before the next repaint, ensuring smooth and efficient animations.

Example:

function animate() {
  // Animation logic
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

This code sets up a loop where the animate function is called repeatedly, allowing you to update properties on each frame.

Basic JavaScript Animation Example

Here’s a simple example of animating an element’s position using JavaScript:

<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

const box = document.getElementById('box');
let pos = 0;

function move() {
  pos += 1;
  box.style.left = pos + 'px';
  if (pos < 200) {
    requestAnimationFrame(move);
  }
}

requestAnimationFrame(move);

In this example, a red box moves 200 pixels to the right, one pixel at a time.

Advanced JavaScript Animations

Using Libraries for JavaScript Animations

While you can create animations from scratch using vanilla JavaScript, libraries like GSAP (GreenSock Animation Platform) and Anime.js provide powerful tools that simplify the process and offer more capabilities.

GSAP

GSAP is a popular JavaScript library for creating high-performance animations. It is highly flexible and works across all major browsers.

Example:

<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

gsap.to("#box", { duration: 2, x: 200, rotation: 360 });

In this example, GSAP animates the red box, moving it 200 pixels to the right and rotating it 360 degrees over two seconds.

Anime.js

Anime.js is another versatile animation library. It supports a wide range of animations and provides an easy-to-use API.

Example:

<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

anime({
  targets: '#box',
  translateX: 250,
  rotate: '1turn',
  duration: 2000
});

This code snippet uses Anime.js to translate the red box 250 pixels to the right and rotate it one full turn over two seconds.

Sequencing and Synchronizing Animations

JavaScript makes it easy to create complex sequences and synchronize multiple animations. This is particularly useful for interactive animations that respond to user actions.

Creating Sequences with GSAP

GSAP provides a Timeline feature that allows you to create sequences and control the timing of multiple animations.

Example:

const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.to("#box", { duration: 1, x: 100 })
  .to("#box", { duration: 1, y: 100 })
  .to("#box", { duration: 1, x: 0 })
  .to("#box", { duration: 1, y: 0 });

In this example, the box moves to the right, down, left, and then back up in a loop, reversing direction after each complete sequence.

Synchronizing Animations with Callbacks

JavaScript animations can also be synchronized using callbacks. Callbacks are functions that execute when an animation reaches a certain point, allowing you to trigger subsequent animations or other actions.

Example:

function moveRight() {
  gsap.to("#box", { duration: 1, x: 100, onComplete: moveDown });
}

function moveDown() {
  gsap.to("#box", { duration: 1, y: 100, onComplete: moveLeft });
}

function moveLeft() {
  gsap.to("#box", { duration: 1, x: 0, onComplete: moveUp });
}

function moveUp() {
  gsap.to("#box", { duration: 1, y: 0, onComplete: moveRight });
}

moveRight();

Here, each animation triggers the next using the onComplete callback, creating a continuous loop of movements.

Performance Considerations

Optimizing CSS Animations

CSS animations are generally more efficient than JavaScript animations because they can be hardware-accelerated. To ensure optimal performance, keep the following tips in mind:

1. Use Transform and Opacity: Animations that involve transform and opacity are usually smoother because they can be offloaded to the GPU.
2. Avoid Layout Thrashing: Minimize animations that trigger layout changes (e.g., width, height). These can cause reflows and repaints, leading to jank.
3. Optimize Keyframes: Use as few keyframes as possible. Excessive keyframes can increase computational overhead.

Optimizing JavaScript Animations

JavaScript animations offer more flexibility but can be more performance-intensive. Here are some tips to optimize them:

1. Use requestAnimationFrame: Always use requestAnimationFrame for smooth animations. It synchronizes with the display refresh rate and provides better performance than setTimeout or setInterval.
2. Debounce and Throttle: For animations based on user input (e.g., scroll or mouse movements), debounce or throttle event handlers to reduce the frequency of animation updates.
3. Minimize DOM Manipulations: Reduce the number of DOM updates during animations. Batch updates and avoid querying the DOM repeatedly.

Measuring Performance

Use browser developer tools to measure and optimize animation performance. The Performance tab in Chrome DevTools, for instance, allows you to record and analyze animations, helping you identify bottlenecks and areas for improvement.

Example Performance Analysis

1. Record an Animation: Open the Performance tab, start recording, and trigger your animation.
2. Analyze the Timeline: Look for long-running tasks, layout thrashing, or excessive repaints.
3. Optimize Based on Findings: Make necessary adjustments based on the analysis, such as reducing the complexity of animations or optimizing CSS rules.

Combining CSS and JavaScript Animations

When to Use CSS vs. JavaScript

Choosing between CSS and JavaScript for animations depends on the complexity and requirements of the animation. CSS animations are generally better for simple transitions and effects, while JavaScript is more suitable for complex sequences and interactive animations.

Use CSS Animations When:

• You need simple transitions like hover effects, fades, and slides.
• You want to leverage hardware acceleration for better performance.
• You have predefined animations that don’t require runtime changes.

Use JavaScript Animations When:

• You need to create complex, interactive, or sequential animations.
• You need fine-grained control over the timing and playback of animations.
• You need to respond to user input in real-time.

Combining Techniques for Enhanced Effects

Sometimes, the best results come from combining CSS and JavaScript animations. You can use CSS for the core animations and JavaScript to trigger or control these animations based on user interactions or other conditions.

Example: Triggering CSS Animations with JavaScript

You can use JavaScript to add or remove CSS classes that define animations. This approach allows you to start animations in response to user actions or other events.

HTML:

<div id="box" class="box"></div>

CSS:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  transition: transform 1s ease-in-out;
}

.animate {
  transform: translateX(200px) rotate(360deg);
}

JavaScript:

const box = document.getElementById('box');

box.addEventListener('click', () => {
  box.classList.toggle('animate');
});

In this example, clicking the box toggles the animate class, triggering the CSS animation.

Advanced Control with JavaScript

JavaScript can enhance the control and interactivity of CSS animations. For example, you can use JavaScript to pause, play, or reverse CSS animations dynamically.

Example: Controlling CSS Animations with JavaScript

HTML:

<div id="box" class="box"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="reverse">Reverse</button>

CSS:

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: slide 2s linear;
  animation-play-state: paused;
}

JavaScript:

const box = document.getElementById('box');
const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const reverseButton = document.getElementById('reverse');

playButton.addEventListener('click', () => {
  box.style.animationPlayState = 'running';
});

pauseButton.addEventListener('click', () => {
  box.style.animationPlayState = 'paused';
});

reverseButton.addEventListener('click', () => {
  box.style.animationDirection = box.style.animationDirection === 'reverse' ? 'normal' : 'reverse';
});

This code allows you to play, pause, and reverse the animation using buttons.

Creating Responsive Animations

Adapting Animations to Different Screen Sizes

Responsive design ensures that animations look good on all devices, from mobile phones to large desktop monitors. CSS media queries and JavaScript can be used to adapt animations based on the viewport size.

Using Media Queries with CSS Animations

CSS media queries allow you to apply different animations based on screen size.

Example:

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

@media (min-width: 600px) {
  .box {
    animation: slide 2s linear;
  }
}

@media (max-width: 599px) {
  .box {
    animation: slide 1s linear;
  }
}

In this example, the animation duration changes based on the screen width.

Using JavaScript for Responsive Animations

JavaScript can provide more dynamic control over animations in response to screen size changes.

Example:

const box = document.getElementById('box');

function updateAnimation() {
  const screenWidth = window.innerWidth;
  if (screenWidth > 600) {
    box.style.animation = 'slide 2s linear';
  } else {
    box.style.animation = 'slide 1s linear';
  }
}

window.addEventListener('resize', updateAnimation);
updateAnimation();

This script adjusts the animation duration based on the window size, ensuring the animation is responsive.

Accessibility Considerations

Ensuring Accessible Animations

Animations can enhance user experience but can also be distracting or harmful to some users, such as those with vestibular disorders. It’s important to implement animations in a way that respects user preferences and accessibility guidelines.

Prefers-Reduced-Motion Media Query

The prefers-reduced-motion media query allows you to detect if the user has requested reduced motion and adjust animations accordingly.

Example:

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: slide 2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .box {
    animation: none;
  }
}

In this example, if the user prefers reduced motion, the animation is disabled.

Providing Alternatives for Screen Readers

Ensure that important content is not conveyed solely through animations. Use ARIA (Accessible Rich Internet Applications) roles and properties to provide accessible alternatives for screen readers.

Example:

<div id="box" class="box" aria-live="polite">Moving Box</div>

This markup ensures that screen readers announce the content of the animated box.

Allowing Users to Control Animations

Provide options for users to control animations, such as toggling them on or off, to enhance accessibility.

Example:

<button id="toggleAnimations">Toggle Animations</button>
<div id="box" class="box"></div>

JavaScript:

const box = document.getElementById('box');
const toggleButton = document.getElementById('toggleAnimations');

toggleButton.addEventListener('click', () => {
  if (box.style.animation) {
    box.style.animation = '';
  } else {
    box.style.animation = 'slide 2s linear';
  }
});

This script allows users to toggle animations on and off, improving accessibility for those who may be sensitive to motion.

Debugging and Testing Animations

Tools for Debugging Animations

Debugging animations can be challenging, but modern browsers provide tools to inspect and debug CSS and JavaScript animations.

Chrome DevTools

Chrome DevTools offers a robust suite of tools for debugging animations. The “Animations” panel allows you to inspect, slow down, and replay animations frame by frame.

1. Open Chrome DevTools: Right-click on the page and select “Inspect” or press Ctrl+Shift+I.
2. Animations Panel: Navigate to the “Animations” tab. Here, you can see a timeline of all animations running on the page.
3. Inspecting Animations: Click on an animation in the timeline to view its details. You can replay the animation, slow it down, or inspect the elements being animated.

Firefox Developer Tools

Firefox also provides comprehensive tools for animation debugging. The “Inspector” tab includes an “Animations” section where you can control and examine animations.

1. Open Firefox Developer Tools: Right-click on the page and select “Inspect Element” or press Ctrl+Shift+I.
2. Animations Inspector: Go to the “Inspector” tab and then click on the “Animations” sidebar. Here, you can pause, replay, and analyze animations.

Testing Animations

Ensuring that animations work across all devices and browsers is crucial. Automated testing and manual checks help maintain animation quality and performance.

Manual Testing

Manually test your animations on different devices and browsers to ensure consistent behavior. Pay attention to performance, visual fidelity, and responsiveness.

1. Cross-Browser Testing: Use tools like BrowserStack or Sauce Labs to test animations on various browsers and devices.
2. Mobile Testing: Check animations on both iOS and Android devices to ensure they work smoothly on smaller screens and touch interfaces.

Automated Testing

Automated testing can catch regressions and ensure that animations perform as expected during continuous integration.

1. Visual Regression Testing: Tools like Percy or Applitools can capture screenshots and compare them against baselines to detect visual changes, including animations.
2. End-to-End Testing: Use frameworks like Cypress or Selenium to script interactions and verify that animations trigger and behave correctly.

Performance Profiling

Profiling your animations helps identify bottlenecks and optimize performance.

Using the Performance Tab in DevTools

1. Record a Session: In Chrome DevTools, go to the “Performance” tab, click the “Record” button, and interact with your page to trigger animations.
2. Analyze Results: Look for long-running tasks, reflows, and repaints. Identify any performance issues related to your animations and adjust your code accordingly.

Optimizing JavaScript Animations

Ensure your JavaScript animations are efficient. Avoid heavy computations and DOM manipulations inside animation loops. Use requestAnimationFrame to synchronize animations with the display refresh rate.

Real-World Use Cases and Examples

Interactive Elements

Interactive elements like buttons, menus, and forms can benefit from subtle animations that enhance usability without distracting users.

Animated Buttons

Add hover and click animations to buttons to provide visual feedback.

CSS:

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.button:hover {
  background-color: darkblue;
  transform: scale(1.1);
}

.button:active {
  transform: scale(0.9);
}

JavaScript:

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.add('clicked');
    setTimeout(() => button.classList.remove('clicked'), 200);
  });
});

Loading Animations

Loading animations keep users engaged while they wait for content to load, improving perceived performance.

CSS:

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid blue;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

HTML:

<div class="loader"></div>

Scroll Animations

Scroll animations can create a dynamic and engaging experience as users navigate through a page.

JavaScript:

const boxes = document.querySelectorAll('.box');

window.addEventListener('scroll', () => {
  const triggerBottom = window.innerHeight / 5 * 4;

  boxes.forEach(box => {
    const boxTop = box.getBoundingClientRect().top;
    if (boxTop < triggerBottom) {
      box.classList.add('show');
    } else {
      box.classList.remove('show');
    }
  });
});

CSS:

.box {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.box.show {
  opacity: 1;
  transform: translateX(0);
}

Parallax Effects

Parallax scrolling effects add depth to a website by making background images move slower than the foreground content.

JavaScript:

window.addEventListener('scroll', () => {
  const parallax = document.querySelector('.parallax');
  const scrollPosition = window.pageYOffset;
  parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`;
});

CSS:

.parallax {
  background-image: url('your-image.jpg');
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Animated Infographics

Infographics can be more engaging with animations that reveal data points in an interesting way.

JavaScript (using GSAP):

gsap.from('.bar', {
  duration: 1,
  width: 0,
  stagger: 0.2,
  ease: 'power1.out'
});

HTML:

<div class="infographic">
  <div class="bar" style="width: 75%;">75%</div>
  <div class="bar" style="width: 50%;">50%</div>
  <div class="bar" style="width: 90%;">90%</div>
</div>

CSS:

.bar {
  background-color: green;
  color: white;
  padding: 10px;
  margin: 10px 0;
  transition: width 1s ease;
}

Handling Animation States

Managing Animation States with JavaScript

Managing animation states effectively is crucial for creating interactive and dynamic animations. JavaScript can help you control the start, pause, resume, and end states of animations, allowing for a more engaging user experience.

To handle animation states, you can use variables to track the state and conditional logic to control the flow of the animation. For instance, you might have an animation that starts when an element is clicked, pauses when it’s clicked again, and resumes when clicked once more.

Here’s an example where a box moves across the screen and you can control its movement with a button:

<div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
<button id="toggleButton">Start/Stop</button>

const box = document.getElementById('box');
const toggleButton = document.getElementById('toggleButton');
let pos = 0;
let animationId;
let isRunning = false;

function move() {
  pos += 2;
  box.style.left = pos + 'px';
  if (pos < 400) {
    animationId = requestAnimationFrame(move);
  } else {
    cancelAnimationFrame(animationId);
    isRunning = false;
    pos = 0;
  }
}

toggleButton.addEventListener('click', () => {
  if (isRunning) {
    cancelAnimationFrame(animationId);
    isRunning = false;
  } else {
    requestAnimationFrame(move);
    isRunning = true;
  }
});

In this example, the animation moves the box across the screen. Clicking the button starts and stops the animation by toggling the isRunning state and using requestAnimationFrame and cancelAnimationFrame.

Using State Machines for Complex Animations

For more complex animations, using a state machine can help manage various states and transitions in a structured manner. A state machine allows you to define states, transitions, and actions in a clear and maintainable way.

A state machine library like XState can be used to manage complex animation states efficiently. By defining states and transitions, you can create robust and predictable animations.

import { createMachine, interpret } from 'xstate';

const animationMachine = createMachine({
  id: 'boxAnimation',
  initial: 'idle',
  states: {
    idle: {
      on: { START: 'moving' }
    },
    moving: {
      on: { STOP: 'paused', COMPLETE: 'idle' }
    },
    paused: {
      on: { RESUME: 'moving' }
    }
  }
});

const service = interpret(animationMachine).onTransition((state) => {
  console.log(state.value);
});

service.start();

document.getElementById('toggleButton').addEventListener('click', () => {
  if (service.state.matches('idle')) {
    service.send('START');
    move();
  } else if (service.state.matches('moving')) {
    service.send('STOP');
    cancelAnimationFrame(animationId);
  } else if (service.state.matches('paused')) {
    service.send('RESUME');
    requestAnimationFrame(move);
  }
});

Using a state machine like this helps you keep track of the animation states and transitions in a structured way, making it easier to manage complex animations.

Animating SVG Elements

Benefits of SVG Animations

Scalable Vector Graphics (SVG) offer a powerful way to create animations that are resolution-independent and scalable without losing quality. SVGs are particularly useful for creating intricate and detailed animations, such as logos, icons, and illustrations.

Animating SVGs can be done using CSS or JavaScript, depending on the complexity and interactivity required. CSS is great for simple animations, while JavaScript provides more control for complex interactions.

CSS Animations for SVG

You can animate SVG elements with CSS by targeting specific SVG properties. For instance, you can animate the stroke, fill, or transform properties to create engaging visual effects.

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle id="circle" cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="none" />
</svg>

#circle {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: draw 2s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

In this example, a circle is drawn over two seconds using CSS animation. The stroke-dasharray and stroke-dashoffset properties create a dashed stroke effect, and the animation transitions the stroke-dashoffset from its initial value to zero.

JavaScript Animations for SVG

For more advanced SVG animations, JavaScript libraries like GSAP or Snap.svg offer powerful tools. GSAP, in particular, provides extensive capabilities for animating SVG elements with ease.

<svg id="logo" width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="none" />
</svg>

gsap.from("#logo circle", {
  duration: 2,
  drawSVG: 0,
  ease: "power2.inOut"
});

Using GSAP, you can animate the SVG circle’s drawing path smoothly. The drawSVG plugin simplifies the process of animating SVG strokes, creating visually appealing effects with minimal code.

Animation Best Practices

Keep Animations Purposeful

Animations should enhance the user experience without being distracting. Always consider the purpose of each animation and ensure it adds value to the user’s interaction with the website.

Maintain Performance

Animations can impact performance, especially on lower-end devices. Optimize animations by minimizing the number of animated properties and leveraging hardware-accelerated properties like transform and opacity. Use tools like Chrome DevTools to profile and optimize your animations.

Ensure Accessibility

Ensure that your animations are accessible to all users, including those with disabilities. Use the prefers-reduced-motion media query to respect users’ preferences for reduced motion. Provide alternatives for screen readers and allow users to control or disable animations if needed.

Test Across Devices

Animations can behave differently across various devices and browsers. Thoroughly test your animations on multiple platforms to ensure consistent performance and appearance. Use tools like BrowserStack for cross-browser testing and test on actual devices whenever possible.

Documentation and Collaboration

Document your animation code and logic to ensure maintainability and ease of collaboration. Clear documentation helps team members understand the purpose and implementation of animations, making it easier to maintain and enhance them over time.

Conclusion

Implementing animations with CSS and JavaScript can greatly enhance the user experience on your website, making it more engaging and interactive. By understanding the basics of CSS animations and leveraging the power of JavaScript for more complex and interactive effects, you can create visually appealing and performant animations. Combining these techniques, considering performance optimizations, ensuring responsiveness, and prioritizing accessibility are key strategies for successful implementation. With these tools and knowledge, you can create animations that not only look great but also function smoothly across all devices and user needs.

Read Next:

• Make Your Website ADA and Section 508 Compliant
• Best Practices for Cross-Browser Compatibility
• How to Use CSS Grid for Complex Layouts
• Writing Efficient and Reusable CSS with BEM
• How to Integrate Frontend Testing into Your Workflow