CF

Create Animated Breaking News Graphics with HTML, CSS and JavaScript

2h 40m 39s
English
Paid

"Animated News Graphics in HTML, CSS, and JavaScript" is a practical course where you will learn to develop your own dynamic overlays and animations in the style of television broadcasts. Such graphic elements are ideal for streams, digital scoreboards, and television graphics.

This course is not just "follow along". It is designed so that you understand the principles of animation and web technologies, rather than mindlessly copying code. After completing the training, you will be able to confidently create real projects that impress users and make you stand out to employers.

Additional

https://sweet-tellurium-e16.notion.site/Advanced-CSS-Handbook-5944ab3053984cc7847f1a4e87538d74

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 17 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 17 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (17)
#Lesson TitleDurationAccess
1
Introduction Demo
02:47
2
Bruno
01:29
3
Introduction
03:39
4
Broadcast Graphics Project
12:39
5
Broadcast Graphics - Styling - Part 1
10:04
6
Broadcast Graphics - Styling - Part 2
11:02
7
Broadcast Graphics - Dynamic Width JS
11:39
8
Broadcast Graphics - CSS Animations
17:31
9
Broadcast Graphics - JS Controls
13:42
10
Let's Keep Learning Together!
01:23
11
Introduction
05:02
12
Mac / Linux Device Setup
05:35
13
Windows Device Setup
06:58
14
VSCode Setup & Template
19:27
15
VSCode Extensions
09:11
16
DevTools
13:57
17
GitHub
14:34
Unlock unlimited learning

Get instant access to all 16 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for this course?
Prior experience with HTML, CSS, and basic JavaScript is recommended for this course. Familiarity with using a code editor such as VSCode and basic understanding of web development concepts will also be beneficial. The course includes lessons on setting up your development environment on Mac, Linux, or Windows, and configuring VSCode with the necessary extensions.
What projects will I build during the course?
The course focuses on building dynamic overlays and animations that replicate the style of television broadcast graphics. You will work on a Broadcast Graphics Project, which involves styling, dynamic width adjustments using JavaScript, and implementing CSS animations with JS controls. These projects are intended to help you create graphics suitable for streams, digital scoreboards, and television.
Who is the target audience for this course?
This course is tailored for web developers and designers who want to expand their skill set into creating animated graphics for broadcasting, streaming, and digital scoreboards. It's also suitable for those interested in enhancing their understanding of animation principles and web technologies, aiming to create projects that stand out to employers.
How does this course compare in depth and scope to similar courses?
Compared to other courses, this one emphasizes not just coding but also understanding the principles behind animations and web technologies. It aims to provide a solid foundation in creating practical, real-world projects. While some courses may focus on copying code, this course is designed to help you gain a deeper understanding of the tools and techniques used in broadcast graphics.
Which specific tools or platforms will I learn to use?
You will learn to use HTML, CSS, and JavaScript as the core technologies for creating animated graphics. The course also covers using VSCode as your development environment, including setting up the editor and using extensions. Additionally, you will work with DevTools for debugging and GitHub for version control.
What topics are not covered in this course?
The course does not cover advanced JavaScript frameworks like React or Angular, server-side programming, or the deployment of web applications. It focuses specifically on front-end technologies for creating broadcast-style graphics rather than full-stack development or back-end technologies.
What is the expected time commitment for this course?
While the total runtime of the course is not specified, it consists of 17 lessons that cover various aspects of creating animated graphics. The time commitment will depend on your prior experience and the pace at which you choose to work through the material. It is designed to be flexible, allowing learners to proceed at their own speed.