HeadlinesBriefing favicon HeadlinesBriefing.com

freeCodeCamp HTML Media Player Workshop Review

DEV Community •
×

A developer recently completed two hands-on exercises from freeCodeCamp's Responsive Web Design certification: a workshop building an HTML video player and a follow-up lab creating a combined audio and video player. The video workshop broke the process into 13 guided steps. Starting with basic HTML boilerplate, the developer learned to use the poster element for thumbnails and the type attribute to specify media formats for browser compatibility.

This foundational work paved the way for the more complex lab. For the lab, the developer built a dual-player interface using lofi-style media files. The main challenge was sourcing compatible external links for both the video and audio elements.

The final code combined a standard video tag with an audio element set to loop, creating a study-focused media tool. After completing the freeCodeCamp exercises, the developer moved on to studying SVGs, preparing for an upcoming workshop to build a heart icon. All lab files are being saved to GitHub for future reference.