Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 8: Multimedia — Images, Audio, Video & Embeds

📘 Day 8: Multimedia — Images, Audio, Video & Embeds

Multimedia makes pages engaging. Today you’ll learn how to add images, audio, and video correctly and how to embed third-party content (YouTube, maps) responsively and accessibly.

1. Images — best practices

  • Always include alt text describing the image for accessibility.
  • Use appropriate formats (JPEG for photos, PNG for transparency, SVG for icons).
  • Set width/height or use CSS aspect-ratio to avoid layout shifts (CLS).
  • Use <picture> and srcset for responsive images (covered in Day 9 more thoroughly).

2. Audio

Use the native <audio controls> element for accessibility and fallback text.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

Provide transcripts for audio content to support deaf/hard-of-hearing users and for SEO.

3. Video

Use the <video> element with multiple sources and captions (<track> + WebVTT format) for accessibility.

<video controls width="640" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support HTML video.
</video>

Captions and transcripts are essential. Use preload carefully (metadata is often best) and avoid autoplay with sound.

4. Embedding third-party content (YouTube, maps)

Use an <iframe> but wrap it responsively to preserve 16:9 aspect ratio. Prefer privacy-enhanced YouTube URLs (youtube-nocookie.com) where possible.

<div class="video-wrap">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Video title" allowfullscreen></iframe>
</div>

<style>
.video-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;}
</style>

Try it yourself — Video + captions + responsive embed

Edit and run the sample. The demo includes a responsive YouTube iframe example and an HTML5 video using a public sample file.


Practical tips & accessibility checklist

  • Provide alt for images, captions & transcripts for audio/video.
  • Avoid autoplay with sound; if autoplay is needed, mute by default and provide controls.
  • Use responsive wrappers for iframes (videos/maps) so embeds scale on mobile.
  • Use <track> for subtitles and ensure caption files (VTT) are correct.

Project of the Day

Build a media section for a blog: include a featured image (with caption), an embedded YouTube video (responsive), and an audio clip with transcript. Ensure all media have accessible alternatives.

Comments

Post a Comment