Embedding multimedia in web pages has become essential. Videos, audio, and interactive content make websites more engaging and informative. HTML5 makes this process simpler and more efficient. This article will guide you through the best practices for embedding HTML5 multimedia to ensure your website is attractive, user-friendly, and functional.
Understanding HTML5 Multimedia Elements
The <video> Element
The <video> element in HTML5 allows you to embed videos directly into your web pages. This is a powerful feature because it eliminates the need for third-party plugins like Flash, making your site more accessible and efficient.
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The <audio> Element
Similar to the <video> element, the <audio> element lets you embed audio files into your site. This is perfect for music, podcasts, or any other audio content you want to share.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Choosing the Right Formats
Video Formats
The most common video formats supported by HTML5 are MP4, WebM, and Ogg. MP4 is the most widely supported across all browsers and devices, making it the safest choice.
However, including multiple formats ensures maximum compatibility.
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Audio Formats
For audio, the primary formats are MP3, WAV, and Ogg. MP3 is widely supported and is typically the best choice. Like video, providing multiple formats ensures compatibility across different browsers.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Providing Fallbacks
Even though HTML5 is widely supported, some older browsers might not support the newer elements. Providing fallbacks ensures that all users can access your content.
Fallback for Video
You can provide a link to download the video if the browser does not support the <video> element.
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
Your browser does not support the video tag.
<a href="movie.mp4">Download the video</a>.
</video>
Fallback for Audio
Similarly, you can provide a link to download the audio file if the browser does not support the <audio> element.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
<a href="audio.mp3">Download the audio</a>.
</audio>
Optimizing Multimedia for Performance
Compressing Files
Large multimedia files can slow down your website. Compressing your video and audio files helps reduce their size without sacrificing quality.
Tools like HandBrake for video and Audacity for audio can be useful.
Using CDNs
Content Delivery Networks (CDNs) can help deliver your multimedia content faster by distributing it across multiple servers around the world. This reduces the load time for users who are far from your main server.
Lazy Loading
Lazy loading ensures that your multimedia content is only loaded when it is about to be viewed. This improves the initial load time of your web page. You can implement lazy loading using JavaScript libraries or the loading="lazy" attribute in the <img> tag.
Ensuring Accessibility
Providing Captions and Subtitles
Captions and subtitles make your videos accessible to a wider audience, including those who are deaf or hard of hearing. You can add subtitles using the <track> element.
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Adding Transcripts for Audio
Providing transcripts for audio content ensures that those who are deaf or hard of hearing can still access the information. Transcripts can also improve your site’s SEO.
Keyboard Controls
Ensuring that your multimedia content can be controlled via keyboard is crucial for accessibility. Most browsers support this natively, but testing is important to make sure it works as expected.
Enhancing User Experience
Customizing Controls
Customizing the controls of your video and audio players can improve the user experience. You can use JavaScript and CSS to create custom controls that match your site’s design.
Responsive Design
Ensure your multimedia content is responsive, meaning it looks good and functions well on all devices, from desktops to smartphones. Using percentage-based widths and heights can help make your videos and audio players responsive.
<video style="width: 100%;" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Autoplay and Muted Attributes
Using the autoplay attribute can automatically play videos or audio when the page loads, which can be useful for background media. However, autoplaying media should be muted by default to avoid disrupting the user.
<video width="600" autoplay muted controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Embedding Interactive Content
Using the <canvas> Element
The <canvas> element in HTML5 allows you to draw graphics on the web. It’s perfect for creating interactive content like charts, games, and animations.
<canvas id="myCanvas" width="600" height="400"></canvas>
You can use JavaScript to draw on the canvas:
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
// Draw a rectangle
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 150, 75);
Integrating with JavaScript Libraries
Libraries like D3.js and Chart.js can help you create complex visualizations easily. They use HTML5 canvas and SVG to render charts and graphs, making your data more interactive and engaging.
For example, using Chart.js to create a simple bar chart:
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
Embedding 3D Models with WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics within any compatible web browser. It allows you to embed complex 3D models and interactive scenes into your web pages.
Using a library like Three.js simplifies the process of working with WebGL:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let geometry = new THREE.BoxGeometry();
let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
Embedding Videos from Third-Party Platforms
Embedding videos from platforms like YouTube or Vimeo can be a great way to add rich multimedia content to your site without hosting the videos yourself.
This also ensures that your site benefits from the performance optimizations and streaming capabilities of these platforms.
For example, embedding a YouTube video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Using the <picture> Element for Responsive Images
The <picture> element allows you to define different sources for an image depending on the viewport size. This is useful for serving optimized images for different devices.
<picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="A descriptive alt text">
</picture>
This ensures that users on smaller devices do not download large images, improving load times and performance.
Best Practices for Multimedia SEO
Adding Descriptive Metadata
Adding metadata to your multimedia elements can help search engines understand and index your content better. Use the alt attribute for images and transcripts for videos and audio.
<img src="image.jpg" alt="A beautiful sunset over the mountains">
For videos, you can include descriptive text around the video or within the HTML:
<video width="600" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>This video shows a beautiful sunset over the mountains, captured during our last hiking trip.</p>
Optimizing Load Times
Fast load times are crucial for SEO. Compressing your multimedia files, using lazy loading, and leveraging CDNs can significantly improve your site’s performance and user experience.
Mobile Optimization
With the majority of users accessing websites from mobile devices, ensuring your multimedia content is mobile-friendly is essential. Use responsive design principles to make sure your videos and images look good on all screen sizes.
Legal Considerations for Multimedia Content
Copyright and Licensing
Always ensure that you have the rights to use any multimedia content you embed on your site. This includes images, videos, and audio. Use licensed content or content that you have created yourself.
Accessibility Compliance
Following accessibility guidelines, such as providing captions for videos and transcripts for audio, not only improves the user experience but also helps you comply with legal requirements.
Tools for Creating and Embedding Multimedia
Video and Audio Editing Software
Tools like Adobe Premiere Pro, Final Cut Pro, Audacity, and GarageBand can help you create and edit high-quality video and audio content.
Image Editing Software
Use tools like Adobe Photoshop, GIMP, or Canva to create and optimize images for your website.
Online Video Platforms
Platforms like YouTube, Vimeo, and Wistia provide easy ways to host and embed videos on your website. They also offer analytics to track how your videos are performing.
Advanced Techniques for HTML5 Multimedia
Interactive Videos with Annotations and Overlays
Interactive videos can engage users more effectively by adding annotations, clickable areas, and overlays. These elements can provide additional information, link to other parts of the site, or encourage user interaction.
Using JavaScript, you can add interactivity to your videos:
<video id="interactiveVideo" width="600" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="overlay" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;"></div>
<script>
let video = document.getElementById('interactiveVideo');
let overlay = document.getElementById('overlay');
video.addEventListener('timeupdate', function() {
if (video.currentTime > 5 && video.currentTime < 10) {
overlay.innerHTML = '<div style="background:rgba(0,0,0,0.5); color:white; position:absolute; top:50px; left:50px;">Click here for more info</div>';
overlay.querySelector('div').addEventListener('click', function() {
window.location.href = 'https://example.com';
});
} else {
overlay.innerHTML = '';
}
});
</script>
Using HTML5 for Virtual and Augmented Reality
WebVR and WebAR are emerging technologies that allow you to create immersive experiences using HTML5. These technologies leverage the power of WebGL and other APIs to bring virtual and augmented reality to the browser.
Using a framework like A-Frame, you can easily create VR content:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
This simple example creates a 3D scene that users can explore using a VR headset or even just a regular browser with mouse and keyboard.
Embedding Live Streams
Live streaming is a powerful way to engage with your audience in real-time. HTML5 makes it easy to embed live streams using the <video> element and various streaming services.
For example, embedding a live YouTube stream:
<iframe width="560" height="315" src="https://www.youtube.com/embed/live_stream?channel=YOUR_CHANNEL_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
For more advanced setups, you can use Media Source Extensions (MSE) to create custom live streaming solutions:
<video id="liveVideo" width="600" controls></video>
<script>
if ('MediaSource' in window && MediaSource.isTypeSupported('video/webm; codecs="vp8, vorbis"')) {
let video = document.getElementById('liveVideo');
let mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
let sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8, vorbis"');
fetch('your-live-stream-url.webm')
.then(response => response.arrayBuffer())
.then(data => sourceBuffer.appendBuffer(data));
});
} else {
console.error('Unsupported MIME type or codec: video/webm; codecs="vp8, vorbis"');
}
</script>
Creating Custom Video and Audio Players
Sometimes, the default controls provided by the browser do not match the design of your site. You can create custom video and audio players using JavaScript and CSS.
<div class="custom-player">
<video id="customVideo" width="600">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="controls">
<button id="playPause">Play</button>
<input type="range" id="seekBar" value="0">
</div>
</div>
<script>
let video = document.getElementById('customVideo');
let playPauseBtn = document.getElementById('playPause');
let seekBar = document.getElementById('seekBar');
playPauseBtn.addEventListener('click', function() {
if (video.paused) {
video.play();
playPauseBtn.textContent = 'Pause';
} else {
video.pause();
playPauseBtn.textContent = 'Play';
}
});
video.addEventListener('timeupdate', function() {
seekBar.value = (video.currentTime / video.duration) * 100;
});
seekBar.addEventListener('input', function() {
video.currentTime = (seekBar.value / 100) * video.duration;
});
</script>
<style>
.custom-player {
position: relative;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #000;
padding: 10px;
}
.controls button, .controls input {
background: none;
border: none;
color: #fff;
}
</style>
Embedding Multimedia in Email Campaigns
While embedding multimedia directly in emails can be tricky due to varying support across email clients, there are still effective ways to include multimedia content. Use static images that link to videos or animations hosted on your website.
<a href="https://example.com/video">
<img src="https://example.com/video-thumbnail.jpg" alt="Watch our video">
</a>
This approach ensures compatibility while encouraging recipients to engage with your content.
Troubleshooting Common Issues
Ensuring Cross-Browser Compatibility
Testing your multimedia content across different browsers and devices is crucial. Use tools like BrowserStack or CrossBrowserTesting to ensure that your videos and audio play correctly everywhere.
Handling Autoplay Restrictions
Many browsers have restrictions on autoplay to prevent unwanted audio and video from playing automatically. Make sure your media is muted if you want to use autoplay, and consider user preferences to provide the best experience.
<video width="600" autoplay muted controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Dealing with Performance Issues
Optimize your server and use CDNs to deliver content more efficiently. Compress your files to reduce their size. Use lazy loading to delay loading until the user is ready to view the content.
Advanced Multimedia Techniques and Considerations
Implementing Adaptive Streaming
Adaptive streaming adjusts the quality of a video stream in real-time based on the viewer’s internet connection speed and device capabilities. This ensures a smooth viewing experience, minimizing buffering and maximizing quality.
Using HLS and DASH
HTTP Live Streaming (HLS) and Dynamic Adaptive Streaming over HTTP (DASH) are popular adaptive streaming protocols.
HLS Example:
HLS streams are segmented into small files that the player downloads sequentially. You can use a video player like Video.js to handle HLS streams.
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="https://path/to/your/hls/stream.m3u8" type="application/x-mpegURL">
</video>
<script src="https://vjs.zencdn.net/7.11.8/video.js"></script>
DASH Example:
DASH is similar to HLS but uses the MPD format for manifest files. Players like Dash.js can handle DASH streams.
<video id="my-video" controls width="640" height="264"></video>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
let player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#my-video"), "https://path/to/your/dash/stream.mpd", true);
</script>
Optimizing Video Quality
Bitrate Selection
Choosing the right bitrate is crucial for delivering high-quality video without overloading the user’s bandwidth. You can use tools like FFmpeg to encode your video at multiple bitrates.
ffmpeg -i input.mp4 -b:v 1000k output_1000k.mp4
ffmpeg -i input.mp4 -b:v 500k output_500k.mp4
ffmpeg -i input.mp4 -b:v 250k output_250k.mp4
Resolution Adaptation
Provide multiple resolutions to accommodate different devices. Higher resolutions are suitable for desktops and tablets, while lower resolutions are better for mobile devices.
Embedding Multimedia in Progressive Web Apps (PWAs)
Progressive Web Apps (PWAs) combine the best of web and mobile apps. They provide offline access, push notifications, and more, making them a perfect platform for multimedia content.
Adding Multimedia to PWAs
To add multimedia to a PWA, follow the same HTML5 practices, but ensure your service worker caches the multimedia content for offline access.
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Service Worker Caching
In your service worker script, cache the multimedia files:
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll([
'/',
'/index.html',
'/video.mp4',
'/styles.css',
'/script.js'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Using WebRTC for Real-Time Communication
Web Real-Time Communication (WebRTC) enables real-time audio, video, and data sharing directly between browsers, making it ideal for live chats, video calls, and peer-to-peer file sharing.
Basic WebRTC Setup
To set up a simple WebRTC connection, you need to create an RTCPeerConnection and handle the signaling process.
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<script>
let localVideo = document.getElementById('localVideo');
let remoteVideo = document.getElementById('remoteVideo');
let localStream;
let peerConnection;
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
localVideo.srcObject = stream;
localStream = stream;
});
function startCall() {
peerConnection = new RTCPeerConnection();
peerConnection.addStream(localStream);
peerConnection.onaddstream = function(event) {
remoteVideo.srcObject = event.stream;
};
peerConnection.createOffer().then(offer => {
peerConnection.setLocalDescription(offer);
// Send the offer to the remote peer
});
}
</script>
Multimedia Security Considerations
Ensuring the security of multimedia content is crucial. Here are some key considerations:
HTTPS
Always serve multimedia content over HTTPS to ensure data integrity and privacy. Most modern browsers block multimedia content served over HTTP on HTTPS sites.
DRM Protection
For premium content, use Digital Rights Management (DRM) to prevent unauthorized access. HTML5 supports DRM through the Encrypted Media Extensions (EME).
Using EME for DRM
To use EME, you need a DRM service provider. Here’s an example using Widevine:
<video id="drmVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
let video = document.getElementById('drmVideo');
video.addEventListener('encrypted', (event) => {
let keySession = video.mediaKeys.createSession();
keySession.addEventListener('message', (event) => {
// Send the event.message to the license server
});
keySession.generateRequest(event.initDataType, event.initData);
});
navigator.requestMediaKeySystemAccess('com.widevine.alpha', [{
initDataTypes: ['cenc'],
videoCapabilities: [{ contentType: 'video/mp4' }]
}]).then((keySystemAccess) => {
return keySystemAccess.createMediaKeys();
}).then((createdMediaKeys) => {
return video.setMediaKeys(createdMediaKeys);
});
</script>
Content Delivery Network (CDN) Security
Using a CDN can improve the performance and security of your multimedia content. CDNs provide DDoS protection, secure token-based authentication, and HTTPS support.
Secure Token-Based Authentication
Token-based authentication ensures that only authorized users can access your multimedia content. This involves generating a secure token that is validated by the CDN before serving the content.
Improving User Experience with Multimedia
Preloading Multimedia
Use the preload attribute to hint to the browser about how aggressively it should preload the video:
<video width="600" controls preload="auto">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Custom Loading Indicators
Show a custom loading indicator while the multimedia content is buffering to improve user experience:
<div id="loadingIndicator">Loading...</div>
<video id="videoPlayer" width="600" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
let videoPlayer = document.getElementById('videoPlayer');
let loadingIndicator = document.getElementById('loadingIndicator');
videoPlayer.addEventListener('waiting', function() {
loadingIndicator.style.display = 'block';
});
videoPlayer.addEventListener('playing', function() {
loadingIndicator.style.display = 'none';
});
</script>
Using Metadata for Enhanced Experience
Add metadata to your multimedia files to enhance the user experience. Metadata can include titles, descriptions, thumbnails, and chapter markers.
Adding Thumbnails
Use the poster attribute for videos to show a thumbnail before the video plays:
<video width="600" controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Chapter Markers
Use the <track> element to add chapter markers to your videos:
<video width="600" controls>
<source src="video.mp4" type="video/mp4">
<track kind="chapters" src="chapters.vtt" srclang="en" label="English">
</video>
Final Thoughts on Embedding HTML5 Multimedia
Continuous Improvement and Updates
Web technologies are constantly evolving, and so are the best practices for embedding multimedia content. Stay updated with the latest advancements in HTML5 and related technologies.
Regularly check for updates in browsers’ capabilities and new multimedia formats to ensure your content remains compatible and performs well.
User Feedback and Testing
Always test your multimedia content across different devices, browsers, and internet speeds to ensure a consistent and smooth user experience.
Gather user feedback to understand how your audience interacts with your multimedia content and make necessary adjustments to improve their experience.
Leveraging Analytics
Use analytics tools to track how users engage with your multimedia content. Understand which videos or audio files are most popular, how long users stay engaged, and where they might drop off.
This data can help you refine your content strategy and deliver more of what your audience enjoys.
Balancing Quality and Performance
While high-quality multimedia content can be very engaging, it’s important to balance quality with performance. Ensure that your videos and audio files are optimized to load quickly without sacrificing too much on quality.
Use adaptive streaming and responsive design techniques to cater to a wide range of users with varying internet speeds and device capabilities.
Accessibility and Inclusivity
Make sure your multimedia content is accessible to all users, including those with disabilities. Providing captions, transcripts, and accessible controls can make a significant difference in user experience.
Following accessibility guidelines not only improves user satisfaction but also helps you comply with legal standards.
Embracing Innovation
Stay curious and open to new technologies and methodologies. Experiment with emerging technologies like VR, AR, and WebRTC to find new ways to engage your audience.
Keep an eye on trends in multimedia content and be ready to adapt your strategies to leverage these trends effectively.
Security and Compliance
Ensure that your multimedia content is served securely and that you have the necessary rights and licenses to use it. Use HTTPS, DRM, and secure token-based authentication to protect your content and your users.
Stay informed about legal requirements related to multimedia content to avoid any compliance issues.
Wrapping it up
Embedding HTML5 multimedia content on your website enhances user engagement and experience. By using the <video> and <audio> elements, selecting the right formats, optimizing performance, ensuring accessibility, and leveraging advanced techniques like adaptive streaming and interactive content, you can create a dynamic, user-friendly site.
Prioritize performance, security, and accessibility to ensure your multimedia content is accessible to all users. Stay updated with the latest technologies, gather user feedback, and continuously improve your multimedia strategy to keep your audience engaged and satisfied.
With these practices, you’ll be well-equipped to deliver exceptional multimedia experiences on your web projects.
READ NEXT:
