Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Create Animated Breaking News Graphics with HTML, CSS and JavaScript

via Zero To Mastery Path

Go to class Write review

Overview

Learn to build custom broadcast-style overlays and animated graphics using HTML, CSS, and JavaScript, just like you see on the news! The perfect addition for live streams, digital signage, and TV graphics.
  • Design and position elements for on-screen video graphics
  • Style overlays and lower-thirds with CSS
  • Add animations to make graphics feel dynamic
  • Use JavaScript to trigger and update visuals
  • Create countdown timers and news tickers
  • Build overlays for live streams and broadcasts
  • Work with responsive design for various screen sizes
  • Deliver graphics using only a browser and basic code

Syllabus

  •   Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Course Resources
    • Developer Setup
  •   Creating Broadcast Graphics
    • Bruno
    • Introduction
    • Broadcast Graphics Project
    • Broadcast Graphics - Styling - Part 1
    • Broadcast Graphics - Styling - Part 2
    • Broadcast Graphics - Dynamic Width JS
    • Broadcast Graphics - CSS Animations
    • Broadcast Graphics - JS Controls
  •   Where To Go From Here?
    • Review This Project!
    • Let's Keep Learning Together!
  •   Appendix - Developer Setup
    • Introduction
    • Mac / Linux Device Setup
    • Windows Device Setup
    • VSCode Setup & Template
    • VSCode Extensions
    • DevTools
    • GitHub

Taught by

Jacinto Wong

Reviews

Start your review of Create Animated Breaking News Graphics with HTML, CSS and JavaScript

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.