How to Create a Website with Fullscreen Sections in CSS and HTML

With the rise of full-screen sections on modern websites, it is important to understand how to create and implement these powerful design elements. At their core, hero sliders are simply sections of a page that take up the full height and width of the viewport. This allows users to focus all of their attention on this particular portion of the page, helping to draw their attention to important messages or calls to action.

One approach is to use viewport units (vh and vw). Viewport units are based on the size of the browser window, so they are ideal for creating full-screen designs. In addition, viewport units are supported by all major browsers, so you can be confident that your design will look great on all devices.

Another advantage of viewport units is that they are very easy to use. Simply specify the height or width of an element in vh or vw, and it will automatically resize to fill the available space.

<main>
    <section id="about">
        <h2>We are an app development team.</h2>
    </section>
    <section id="services">
        <h2>Our Services</h2>
    </section>
    <section id="contact">
        <h2>Contact Us</h2>
    </section>
</main>

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    section{
        font-family: sans-serif;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #about{
        background: #c5cae9;
    }
    #services{
        background: #3f51b5;
    }
    #contact{
        background: #283593;
    }
</style>