6-Create a full screen div using vh and vw in HTML & CSS | Web Design Basics

In this video, you will learn how to create a fullscreen div using CSS viewport units — vh (viewport height) and vw (viewport width). This technique is useful for building responsive layouts, landing pages, hero sections, or any container that needs to cover the full screen.

We explain everything step by step, using simple HTML and CSS, so even beginners can follow along easily. You will understand what 100vh and 100vw mean, how they behave differently from percentage or pixel values, and how they adapt to different screen sizes. No JavaScript is needed — just clean, responsive design using CSS.

Whether you are just starting with front-end development or want to polish your web design skills, this tutorial will help you master the basics of fullscreen layouts. By the end, you’ll be able to use viewport units confidently in your own projects.
html css full screen div, vh vw units, full width full height css, css viewport units, responsive web design, beginner html css tutorial, 100vh 100vw, hero section design, fullscreen layout css