See all courses

Create Animated Breaking News Graphics with HTML, CSS and JavaScript

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.

2.5 hours 0 projects 21 + lessons

Rated 4.9 out of 5 on Trustpilot

Rated 4.9 out of 5 on Trustpilot

5 Days

Average time students take to complete this course.

instructor
Taught by: Jacinto Wong
Last updated: April 2026
Our students are getting hired by top companies. We can help you too.

What you'll learn

  • 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

What's the bottom line?

This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!

This course will push you and challenge you to become someone that is able to build your own real-world projects that wow users and prospective employers 💪.

Who You Will Learn With

You're getting more than just a course

Our instructors, TAs, Mentors, Alumni, and fellow students go above and beyond to help guide you and ensure you're on the right path to achieve your goals. Our private ZTM Discord server is a key factor in taking your skills, confidence and career to the next level.

Check out our community

Course curriculum

To make sure this course is a good fit for you, you can start learning for free right now by clicking any of the PREVIEW links below.

4 sections21 lessons2.5 hours total length

Introduction

4 lectures · 2min
4 lectures · 2min

Introduction·2:46

2:46
PREVIEW

Exercise: Meet Your Classmates and Instructor

PREVIEW

Course Resources

PREVIEW

Developer Setup

PREVIEW

Creating Broadcast Graphics

8 lectures · 1hr 21min
8 lectures · 1hr 21min

Where To Go From Here?

2 lectures · 1min
2 lectures · 1min

Appendix - Developer Setup

7 lectures · 1hr 14min
7 lectures · 1hr 14min

Who is Zero To Mastery for?

You'll fit right in if:

You're struggling to make progress using free tutorials that aren't giving you the structure or clear path to achieving your goals.
You don't want to learn alone. You want personalized feedback, support, and motivation from instructors and mentors and want to be part of a supportive community of like-minded individuals.
You want to learn by doing. You're excited to embrace the struggle of making mistakes that comes with building fun real-world projects you'll be proud of.
You're sick of outdated & boring tutorials. We pride ourselves on having the most up-to-date (and fun!) courses in the industry so that you're not wasting your time and only learning what matters right now.
You can't afford to spend $8,000+ on over priced bootcamps and colleges. We got you. We'll help you go from zero to hired for less than the cost of a cup of coffee a day.

We're not for you if:

You're just going to watch the lessons and take no action. Our courses are all about getting your hands dirty with exercises and putting what you're learning into action by building fun and impressive real-world projects.
You're not ready to invest in yourself or just looking for the cheapest way to learn. If that's you, no problem, use our free Learn to Code + AI & Get Hired guide.
You don't think fundamentals matter anymore because AI can do everything for you. Understanding the fundamentals and how things really work will always be important.
You think AI is going to replace you and think there's nothing you can do about it. Well... if you keep wasting time not learning AI tools & skills, you're probably right. Or you embrace them, and 2x your productivity (and probably income too!).

Meet your instructor

Your instructor isn’t just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Jacinto Wong

Hi, I'm Jacinto Wong!

Jacinto, a Zero To Mastery Academy instructor, is a self-taught developer working as a Senior Developer. Having been in your shoes, he knows it is possible to upgrade your skills and switch careers without spending excessive time or money.

SEE MY BIO & COURSES

Jacinto Wong

Senior Developer & Designer

Frequently Asked Questions

Are there any prerequisites for this course?

  • Basic knowledge of CSS, JavaScript, and HTMl is required.

Who is this course for?

  • Anyone who feels like they can't build amazing CSS and JavaScript projects on their own
  • Anyone who wants to become a Web Developer, switch careers, or become a freelance Web Developer
  • Developers and Designers who feel like they have beginner or intermediate front-end skills but want to deepen their knowledge and improve their skills
  • Programmers who want to learn frontend web development
  • Anyone who needs to add more projects to their portfolio or resume
  • Aspiring and experienced web developers looking to master styling and layout techniques

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 6 different languages: English, Spanish, French, German, Arabic, and Hindi.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

What students are saying

Our courses and community have helped 1,000s of Zero To Mastery students go from zero to getting hired to levelling up their skills and advancing their careers to new heights.

Rated 4.9 out of 5 on Trustpilot

    Learn the skills to stand out and get hired. In the age of AI.

    Choose your currency:
    $ USD • US Dollar
    Risk Free Pricing

    100% Risk Free

    We know you'll love ZTM. That's why we provide a no-hassle, 30-day money-back guarantee.

    Convince Your Boss

    CONVINCE YOUR BOSS TO PAY

    If you’re looking to up skill then you should 100% get your employer to cover the cost of training.

    Teams

    Need a Team License?

    With a team license, you can buy a number of spots to allocate to employees.

    BEST VALUE

    PRO PLAN

    Pay yearly
    Pay monthly
    $25 / month

    Paid yearly at $299$588/y49% OFF

    Get Annual Plan

    Build a high-value, future-proof career. For less than $1/day.

    Unlimited access to all courses
    Guided career paths (beginner to job-ready)
    500,000+ member community (Discord)
    Live career coaching sessions with mentors
    Completion certificates for every course
    Personalized ZTM Passport
    Private LinkedIn networking group
    Priority support

    Lifetime PLAN

    $1,299
    Only pay once, ever
    Get Lifetime Access

    Invest in your future — pay once and you’re covered for whatever comes next.

    Includes everything in PRO
    All new courses and course updates automatically included at no extra cost
    No subscriptions. No renewals. Just unlimited learning for life.

    Students also take these courses

    Intermediate
    The CSS Bootcamp: Zero to Mastery

    The CSS Bootcamp: Zero to Mastery

    42 Hours •238 Lessons

    Learn everything from CSS basics to advanced CSS techniques by completing 100+ exercises and projects that will wow users and prospective employers. Become a CSS Pro and create beautifully designed apps.

    Jacinto Wong
    Start LearningCourse Details
    Beginner
    The Complete Web Developer in 2026: Zero to Mastery

    The Complete Web Developer in 2026: Zero to Mastery

    40 Hours •401 Lessons

    Learn to code from scratch and get hired as a Web Developer in 2026. This full-stack coding bootcamp will teach you HTML, CSS, JavaScript, React, Node.js, SQL, & more! You will also learn to use the power of A.I.!

    Andrei Neagoie
    Start LearningCourse Details
    Intermediate
    JavaScript Web Projects: 20 Projects to Build Your Portfolio

    JavaScript Web Projects: 20 Projects to Build Your Portfolio

    34 Hours •257 Lessons

    Get hired or your first client by building your dream portfolio of modern, real-world JavaScript projects. Never spend time on confusing, out of date, incomplete tutorials anymore!

    Start LearningCourse Details