Header Image
Thumbnail Image
Javascript

Create a Stunning Single-Page Website with HTML, CSS, and JavaScript: A Step-by-Step Tutorial

By Cristian Quiñones, Published on February 2nd 2025 | 23 mins, 4562 words

In todays tutorial , we will guide you through the process of building a stylish and responsive Single Page Website utilizing HTML, CSS, and JavaScript technolofgies. After finishing this tutorial, possess a fully functional website that features customized fonts, css animations, gradients, and additional elements!





Step 1: Setting Up the Front End Structure


HTML structure is the foundation of any website. Here’s a basic command to get you started:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create a Stunning Single-Page Website with HTML, CSS, and JavaScript: A Step-by-Step Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="dark">
    <div class="ads-con">
        <div class="ads">Ad$ here</div>
    </div>
    <nav class="navbar">
        <ul class="navbar-nav">
            <li class="logo">
                <a href="#" class="nav-link">
                    <span class="link-text logo-text">MTL</span>
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right"
                        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
                        class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                </a>
            </li>

            <li class="nav-item">
                <a href="#custom-font" class="nav-link">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cat" role="img"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                        class="svg-inline--fa fa-cat fa-w-16 fa-9x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <span class="link-text">Custom Fonts</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="#responsive" class="nav-link">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="alien-monster" role="img"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
                        class="svg-inline--fa fa-alien-monster fa-w-18 fa-9x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M560,128H528a15.99954,15.99954,0,0,0-16,16v80H480V176a15.99954,15.99954,0,0,0-16-16H416V96h48a16.00079,16.00079,0,0,0,16-16V48a15.99954,15.99954,0,0,0-16-16H432a15.99954,15.99954,0,0,0-16,16V64H368a15.99954,15.99954,0,0,0-16,16v48H224V80a15.99954,15.99954,0,0,0-16-16H160V48a15.99954,15.99954,0,0,0-16-16H112A15.99954,15.99954,0,0,0,96,48V80a16.00079,16.00079,0,0,0,16,16h48v64H112a15.99954,15.99954,0,0,0-16,16v48H64V144a15.99954,15.99954,0,0,0-16-16H16A15.99954,15.99954,0,0,0,0,144V272a16.00079,16.00079,0,0,0,16,16H64v80a16.00079,16.00079,0,0,0,16,16h48v80a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V432a15.99954,15.99954,0,0,0-16-16H192V384H384v32H336a15.99954,15.99954,0,0,0-16,16v32a16.00079,16.00079,0,0,0,16,16h96a16.00079,16.00079,0,0,0,16-16V384h48a16.00079,16.00079,0,0,0,16-16V288h48a16.00079,16.00079,0,0,0,16-16V144A15.99954,15.99954,0,0,0,560,128ZM224,320H160V224h64Zm192,0H352V224h64Z"
                                class="fa-secondary"></path>
                            <path fill="currentColor" d="M160,320h64V224H160Zm192-96v96h64V224Z" class="fa-primary">
                            </path>
                        </g>
                    </svg>
                    <span class="link-text">Responsive</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="#animations" class="nav-link animations">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="space-station-moon-alt"
                        role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                        class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M501.70312,224H448V160H368V96h48V66.67383A246.86934,246.86934,0,0,0,256,8C119.03125,8,8,119.0332,8,256a250.017,250.017,0,0,0,1.72656,28.26562C81.19531,306.76953,165.47656,320,256,320s174.80469-13.23047,246.27344-35.73438A250.017,250.017,0,0,0,504,256,248.44936,248.44936,0,0,0,501.70312,224ZM192,240a80,80,0,1,1,80-80A80.00021,80.00021,0,0,1,192,240ZM384,343.13867A940.33806,940.33806,0,0,1,256,352c-87.34375,0-168.71094-11.46094-239.28906-31.73633C45.05859,426.01953,141.29688,504,256,504a247.45808,247.45808,0,0,0,192-91.0918V384H384Z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M256,320c-90.52344,0-174.80469-13.23047-246.27344-35.73438a246.11376,246.11376,0,0,0,6.98438,35.998C87.28906,340.53906,168.65625,352,256,352s168.71094-11.46094,239.28906-31.73633a246.11376,246.11376,0,0,0,6.98438-35.998C430.80469,306.76953,346.52344,320,256,320Zm-64-80a80,80,0,1,0-80-80A80.00021,80.00021,0,0,0,192,240Zm0-104a24,24,0,1,1-24,24A23.99993,23.99993,0,0,1,192,136Z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <span class="link-text">Animations</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="#gradient" class="nav-link">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="space-shuttle" role="img"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
                        class="svg-inline--fa fa-space-shuttle fa-w-20 fa-5x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M32 416c0 35.35 21.49 64 48 64h16V352H32zm154.54-232h280.13L376 168C243 140.59 222.45 51.22 128 34.65V160h18.34a45.62 45.62 0 0 1 40.2 24zM32 96v64h64V32H80c-26.51 0-48 28.65-48 64zm114.34 256H128v125.35C222.45 460.78 243 371.41 376 344l90.67-16H186.54a45.62 45.62 0 0 1-40.2 24z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M592.6 208.24C559.73 192.84 515.78 184 472 184H186.54a45.62 45.62 0 0 0-40.2-24H32c-23.2 0-32 10-32 24v144c0 14 8.82 24 32 24h114.34a45.62 45.62 0 0 0 40.2-24H472c43.78 0 87.73-8.84 120.6-24.24C622.28 289.84 640 272 640 256s-17.72-33.84-47.4-47.76zM488 296a8 8 0 0 1-8-8v-64a8 8 0 0 1 8-8c31.91 0 31.94 80 0 80z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <span class="link-text gradient-txt">Gradient
                    </span>
                </a>
            </li>
            <li class="nav-item">
                <a href="#box-shadow" class="nav-link">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="french-fries" role="img"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
                        <g class="fa-group">
                            <path class="fa-secondary" fill="currentColor"
                                d="M105.57.29a16.16 16.16 0 0 0-6.72 3l-28.51 21.6a16 16 0 0 0-6.07 15.68l36.9 197.22c5.3 7.59 14.49 14.87 26.83 20.75V33.18l-3.76-20.11A16 16 0 0 0 105.57.29zm109.59 17.4l-32-16A16 16 0 0 0 160 16v252.78a160.37 160.37 0 0 0 64 0V32a16 16 0 0 0-8.84-14.31zm-194.55 63A16 16 0 0 0 .25 98.77L16.55 192H50c3.6 0 7 1 10.35 1.75l-20-107.16zm286.13-48.43a16.23 16.23 0 0 0-7.33.43l-34.28 10.25c-4.24 1.27-7.17 4.51-9.13 8.33v207.27c17.55-8.38 29.15-19.54 31.54-30.39.4-1.79 1.46-3.22 2.06-4.92l30.15-172.46a16 16 0 0 0-13.01-18.51zm64 48a16.23 16.23 0 0 0-7.33.43l-17.31 5.17-18.75 107.26c2.24-.32 4.33-1.12 6.63-1.12h33.47l16.3-93.23a16 16 0 0 0-13.01-18.51z">
                            </path>
                            <path class="fa-primary" fill="currentColor"
                                d="M0 240a16 16 0 0 1 16-16h34c6.92 0 13.7 4.24 15.19 11 8.6 39 62.09 69 126.79 69s118.19-30 126.79-69c1.49-6.73 8.27-11 15.19-11h34a16 16 0 0 1 15.61 19.47l-54.1 243.47a32 32 0 0 1-31.2 25.06H85.73a32 32 0 0 1-31.25-25.06L.38 243.47A16.11 16.11 0 0 1 0 240z">
                            </path>
                        </g>
                    </svg>
                    <span class="link-text">
                        Box Shadow
                    </span>
                </a>
            </li>

            <li class="nav-item">
                <a href="#filter" class="nav-link">
                    <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="crow" role="img"
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
                        <g class="fa-group">
                            <path class="fa-secondary" fill="currentColor"
                                d="M447.27 487.67a12 12 0 0 1-7.17 15.38l-22.55 8.21a12 12 0 0 1-15.38-7.17l-44.65-120.17a192 192 0 0 0 48.73-7.7zM312.87 384H261l45.22 120.1a12 12 0 0 0 15.38 7.17l22.55-8.21a12 12 0 0 0 7.17-15.38zM640 96c0-35.35-43-64-96-64h-16a79.67 79.67 0 0 1 16 48v32z">
                            </path>
                            <path class="fa-primary" fill="currentColor"
                                d="M464 0a80 80 0 0 0-80 80v21L12.09 393.57a30.22 30.22 0 0 0 31.64 51.2L165.27 384H352c106 0 192-86 192-192V80a80 80 0 0 0-80-80zm0 104a24 24 0 1 1 24-24 24 24 0 0 1-24 24z">
                            </path>
                        </g>
                    </svg>
                    <span class="link-text">
                        Filters
                    </span>
                </a>
            </li>

            <li class="nav-item" id="themeButton">
                <section href="" class="nav-link">
                    <svg class="theme-icon" id="darkIcon" aria-hidden="true" focusable="false" data-prefix="fad"
                        data-icon="moon-stars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                        class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <svg class="theme-icon" id="lightIcon" aria-hidden="true" focusable="false" data-prefix="fad"
                        data-icon="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
                        class="svg-inline--fa fa-sun fa-w-16 fa-7x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M502.42 240.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.41-94.8a17.31 17.31 0 0 0-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4a17.31 17.31 0 0 0 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.41-33.5 47.3 94.7a17.31 17.31 0 0 0 31 0l47.31-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3a17.33 17.33 0 0 0 .2-31.1zm-155.9 106c-49.91 49.9-131.11 49.9-181 0a128.13 128.13 0 0 1 0-181c49.9-49.9 131.1-49.9 181 0a128.13 128.13 0 0 1 0 181z"
                                class="fa-secondary"></path>
                            <path fill="currentColor" d="M352 256a96 96 0 1 1-96-96 96.15 96.15 0 0 1 96 96z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <svg class="theme-icon" id="solarIcon" aria-hidden="true" focusable="false" data-prefix="fad"
                        data-icon="sunglasses" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
                        class="svg-inline--fa fa-sunglasses fa-w-18 fa-7x">
                        <g class="fa-group">
                            <path fill="currentColor"
                                d="M574.09 280.38L528.75 98.66a87.94 87.94 0 0 0-113.19-62.14l-15.25 5.08a16 16 0 0 0-10.12 20.25L395.25 77a16 16 0 0 0 20.22 10.13l13.19-4.39c10.87-3.63 23-3.57 33.15 1.73a39.59 39.59 0 0 1 20.38 25.81l38.47 153.83a276.7 276.7 0 0 0-81.22-12.47c-34.75 0-74 7-114.85 26.75h-73.18c-40.85-19.75-80.07-26.75-114.85-26.75a276.75 276.75 0 0 0-81.22 12.45l38.47-153.8a39.61 39.61 0 0 1 20.38-25.82c10.15-5.29 22.28-5.34 33.15-1.73l13.16 4.39A16 16 0 0 0 180.75 77l5.06-15.19a16 16 0 0 0-10.12-20.21l-15.25-5.08A87.95 87.95 0 0 0 47.25 98.65L1.91 280.38A75.35 75.35 0 0 0 0 295.86v70.25C0 429 51.59 480 115.19 480h37.12c60.28 0 110.38-45.94 114.88-105.37l2.93-38.63h35.76l2.93 38.63c4.5 59.43 54.6 105.37 114.88 105.37h37.12C524.41 480 576 429 576 366.13v-70.25a62.67 62.67 0 0 0-1.91-15.5zM203.38 369.8c-2 25.9-24.41 46.2-51.07 46.2h-37.12C87 416 64 393.63 64 366.11v-37.55a217.35 217.35 0 0 1 72.59-12.9 196.51 196.51 0 0 1 69.91 12.9zM512 366.13c0 27.5-23 49.87-51.19 49.87h-37.12c-26.69 0-49.1-20.3-51.07-46.2l-3.12-41.24a196.55 196.55 0 0 1 69.94-12.9A217.41 217.41 0 0 1 512 328.58z"
                                class="fa-secondary"></path>
                            <path fill="currentColor"
                                d="M64.19 367.9c0-.61-.19-1.18-.19-1.8 0 27.53 23 49.9 51.19 49.9h37.12c26.66 0 49.1-20.3 51.07-46.2l3.12-41.24c-14-5.29-28.31-8.38-42.78-10.42zm404-50l-95.83 47.91.3 4c2 25.9 24.38 46.2 51.07 46.2h37.12C489 416 512 393.63 512 366.13v-37.55a227.76 227.76 0 0 0-43.85-10.66z"
                                class="fa-primary"></path>
                        </g>
                    </svg>
                    <span class="link-text">Themify</span>
                </section>
            </li>
        </ul>
    </nav>
    <main>
        <div class="socials">
            <div class="social">

                <a href="https://github.com/codesmith445" target="_blank">
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em"
                        width="1em">
                        <path
                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z">
                        </path>
                    </svg>
                </a>
                <a href="https://www.linkedin.com/company/merakitechlabs/?viewAsMember=true" target="_blank">
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em">
                        <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.66 0 53.79A53.79 53.79 0 0 1 107.57 53.8c0 29.88-24.09 54.31-53.78 54.31zM447.92 448h-92.88V302.4c0-34.67-.67-79.29-48.3-79.29-48.3 0-55.7 37.76-55.7 76.83V448h-92.88V148.9h89.1v40.8h1.3c12.43-23.55 42.74-48.3 87.96-48.3 94.04 0 111.41 61.89 111.41 142.27V448z"></path>
                    </svg>
                </a>
                <a href="https://web.facebook.com/profile.php?id=61563811293637" target="_blank">
                    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 320 512" height="1em" width="1em">
                        <path d="M279.14 288l14.22-92.66h-88.91V127.41c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S268.43 0 225.36 0c-73.21 0-121.15 44.38-121.15 124.72v70.62H22.89V288h81.32v224h100.17V288z"></path>
                    </svg>
                </a>
            </div>
        </div>
        <h1 class="title" id="css">CSS is Awesome!</h1>
        <div>
            <p> As a web developer, one of the most exciting aspects of working with HTML and <a
                    href="https://www.w3schools.com/css" target="_blank">CSS</a> is the endless
                possibility
                of
                creativity and customization. <a href="https://www.w3schools.com/css" target="_blank">CSS</a> (Cascading
                Style Sheets)
                is a powerful tool that allows us to control
                the
                look and
                feel of our websites, and there are so many cool features that we can use to make our websites stand out
                from the crowd.
                In this blog post, we’ll take a look at some of the most interesting and useful <a
                    href="https://www.w3schools.com/css" target="_blank">CSS</a> features (broken in
                to 2 parts) that are
                available to us as
                web developers.</p><br>
            <h1>Part One</h1>
            <ol>
                <li id="custom-font">
                    <h2>Custom fonts:</h2>
                    <div class="fonts">
                        <img src="https://res.cloudinary.com/liquidtime/image/upload/v1673444040/fonts_yxralc.gif" alt="" srcset="">
                    </div><br> of the first things that people notice when they visit a website is
                    the font.
                    The
                    font can set the tone for the
                    entire website and can either make it look professional and trustworthy, or unprofessional and
                    untrustworthy. With <a href="https://www.w3schools.com/css" target="_blank">CSS</a>,
                    we have the ability to use custom fonts that are not available on the user’s computer. This can be
                    especially useful if
                    you want to use a unique font that is not widely available or if you want to use a font that is not
                    supported by the
                    default system fonts. To use a custom font, we simply need to use the @font-face rule in our <a
                        href="https://www.w3schools.com/css" target="_blank">CSS</a>
                    file
                    and specify the
                    font file that we want to use.
                </li><br>

                <li id="responsive">
                    <h2>Responsive Design:</h2>
                    <div class="responsive">
                        <img src="https://res.cloudinary.com/liquidtime/image/upload/v1673351013/responsive_gsul5q.gif" alt="" srcset="">
                    </div><br>In today’s world, it’s important for websites to be accessible on a
                    variety of
                    devices, including laptops, tablets, and
                    smartphones. Responsive design allows us to create websites that adapt to the size of the user’s
                    screen, ensuring that
                    our websites look good no matter what device they are being viewed on. With <a
                        href="https://www.w3schools.com/css" target="_blank">CSS</a>, we can use media
                    queries to specify
                    different styles for different screen sizes, allowing us to create websites that are optimized for
                    different devices.
                </li><br>

                <li id="animations">

                    <h2>Animations:</h2>
                    <div class="animation">

                        <div class="loading-container">
                            <!-- <div class="circle"></div>
                                                <div class="circle"></div> -->
                            <div class="circle"></div>
                        </div>
                    </div><br><a href="https://www.w3schools.com/css" target="_blank">CSS</a> animations
                    allow us to add
                    movement and interactivity to our websites,
                    making
                    them more engaging and dynamic. With
                    the @keyframes rule, we can specify the stages of an animation and control how the element changes
                    over time. We can
                    also use the animation properties, such as animation-duration and animation-delay, to control the
                    timing of our
                    animations.
                </li><br>
                <li id="gradient">
                    <h2 class="gradient">Gradient:</h2>
                    <div class="gradient-txt">
                        <h2>Gradient Text</h2>
                    </div> <br>Gradients are a great way to add a
                    bit of visual
                    interest to our websites, and
                    with
                    <a href="https://www.w3schools.com/css" target="_blank">CSS</a>, we have the ability to create
                    gradients with ease. We can use the linear-gradient function to create gradients that transition
                    from one color to
                    another in a straight line, or the radial-gradient function to create gradients that transition from
                    the center of an
                    element outwards.
                </li><br>

                <li id="box-shadow">
                    <h2>Box Shadows:</h2>
                    <div class="box-shadow">box-shadow</div><br>Box shadows are a simple but effective way to add depth
                    and
                    dimension to
                    our
                    websites. With <a href="https://www.w3schools.com/css" target="_blank">CSS</a>, we can use the
                    box-shadow property to specify the color, size, and direction of a shadow on an element. We can also
                    use the inset
                    keyword to create inner shadows, which can be used to give the illusion of depth on flat elements.
                </li><br>

                <li id="filter">
                    <h2>Filters:</h2><br><a href="https://www.w3schools.com/css" target="_blank">CSS</a> filters allow
                    us to alter the
                    appearance of an element in a number of ways,
                    including adjusting the brightness,
                    contrast, and saturation of an image. We can also use filters to create special effects, such as
                    blurring or grayscaling
                    an element. Filters can be a great way to add visual interest to our websites without having to rely
                    on heavy graphics
                    or large images.
                </li><br>
            </ol>
        </div>
        <div class="part-2">
            <h1>Part Two</h1>
            <p>
                <a href="https://www.w3schools.com/css" target="_blank">CSS</a>, or Cascading Style Sheets, is an
                essential element of
                web development. It is a language used to
                style
                and layout
                web pages, and it is the foundation upon which modern web design is built. Without <a
                    href="https://www.w3schools.com/css" target="_blank">CSS</a>, web pages would
                be
                static and
                lifeless, lacking the visual appeal and interactivity that make the internet such a powerful and
                engaging
                platform.

            </p>
            <p>
                One of the primary benefits of <a href="https://www.w3schools.com/css" target="_blank">CSS</a> is its
                ability to
                separate the content of a web page from its
                presentation. This
                separation of concerns allows web developers to focus on the structure and meaning of the content, while
                leaving the
                visual design to <a href="https://www.w3schools.com/css" target="_blank">CSS</a>. This makes it easier
                to create and
                maintain web pages, as it allows for the
                creation
                of reusable
                styles and layout patterns that can be applied across multiple pages.
            </p>
            <p>
                <a href="https://www.w3schools.com/css" target="_blank">CSS</a> also makes it possible to create web
                pages that are
                responsive and adaptable to different devices
                and
                screen sizes.
                By using <a href="https://www.w3schools.com/css" target="_blank">CSS</a> media queries, developers can
                create styles
                that are tailored to specific devices or screen
                sizes, ensuring
                that a website looks great no matter how it is accessed. This is particularly important in today's
                world,
                where people
                use a variety of devices to access the internet, including smartphones, tablets, and laptops.
            </p>
            <p>
                <a href="https://www.w3schools.com/css" target="_blank">CSS</a> is also essential for creating
                interactive and
                engaging web pages. With <a href="https://www.w3schools.com/css" target="_blank">CSS</a>, developers can
                create
                hover
                effects,
                animations, and other dynamic features that make a website more interactive and immersive. These types
                of
                features are
                increasingly important in today's digital world, where people expect a high level of interactivity from
                websites and
                apps.
            </p>
            <p>
                In addition to its many functional benefits, <a href="https://www.w3schools.com/css"
                    target="_blank">CSS</a> is also
                important for the overall performance and speed
                of
                a website.
                By using <a href="https://www.w3schools.com/css" target="_blank">CSS</a> to create efficient layouts and
                optimize
                image sizes, developers can create websites that
                load
                quickly and
                perform smoothly, improving the user experience and increasing the likelihood that people will return to
                the
                site
            </p>
        </div>
        <div class="conclusion">
            <h1>conclusion</h1>
            <p>In conclusion, <a href="https://www.w3schools.com/css" target="_blank">CSS</a> is a powerful tool that
                allows us to
                customize the look and feel of our websites in a
                variety of
                ways. From custom fonts and responsive design to animations and filters, there are so many cool features
                that we can use
                to make our websites stand out from the crowd. As web developers, it’s important to stay up-to-date on
                the latest <a href="https://www.w3schools.com/css" target="_blank">CSS</a>
                features and to continuously learn and</p>
        </div>
    </main>
    <script src="main.js"></script>
</body> 
</html>




Step 2: Styling the front end with CSS

CSS is the magic happens. We'll utilize it to form a visually appealing design with features like custom fonts, gradients, and animations. Here’s a code of the CSS:


style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
:root,
* {
  font-size: 16px;
  font-family: "poppins";
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  --transition-speed: 600ms;
}

.dark {
  --text-primary: #abaaaa;
  --text-secondary: #ececec;
    --bg-primary: #04142c;
    --bg-secondary: #002051;
/*  Lights out mode */
/*   --bg-primary: #050506;
  --bg-secondary: #242425; */
  --link: #00d8d8;
  --box: #474747;
  --link-border: #3d3d3d;
}

.light {
  --text-primary: #1f1f1f;
  --text-secondary: #000000;
  --bg-primary: #ffffff;
  --bg-secondary: #e4e4e4;
  --link: #0037ff;
  --box: #474747;
  --link-border: #acacac;
}

.solar {
  --text-primary: #576e75;
  --text-secondary: #35535c;
  --bg-primary: #ffdbc4;
  --bg-secondary: #f5e5b8;
  --link: #f2826e;
  --box: #9d9c9c;
  --link-border: #f2af96;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.5s;
  min-width: 360px;
}

svg {
  width: 40px;
}

h2 {
  font-size: larger;
  text-transform: uppercase;
}

li::marker {
  font-size: x-large;
}

.ads-con {
  display: none;
}

main {
  margin-left: 5rem;
  padding: 1rem;
  transition: margin var(--transition-speed);
  position: relative;
}
main .socials {
  position: absolute;
  height: 100vh;
  top: 0;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .socials .social {
  height: fit-content;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  background: var(--text-secondary);
  padding: 0.7rem 0;
  border-radius: 12px;
}
main .socials .social a {
  transition: scale 400ms;
  scale: 1.2;
  position: relative;
}
main .socials .social a:hover {
  scale: 1.4;
}
main a {
  text-decoration: none;
  color: var(--link);
  font-weight: bold;
  letter-spacing: 0.3ch;
}
main h1 {
  text-align: center;
  font-size: xx-large;
  text-transform: uppercase;
}
main .title {
  margin-bottom: 2rem;
  position: relative;
  text-align: unset;
  user-select: none;
  width: fit-content;
}
main .title::before {
  content: "";
  position: absolute;
  height: 4px;
  background: var(--text-primary);
  width: 80px;
  left: 0;
  bottom: 0;
  transition: width 1s ease;
}
main .title:hover::before {
  width: 197px;
}

.part-2 p {
  margin-bottom: 1rem;
}

.nav-item:last-child {
  cursor: pointer;
}
.nav-item:last-child .fa-primary {
  color: #00eaff;
}
.nav-item:last-child .fa-secondary {
  color: #049d8e;
}
.animations svg {
  animation: rotate 3s linear infinite;
}
.navbar {
  position: fixed;
  background: var(--bg-primary);
  transition: width 400ms ease;
  border-right: 1px solid var(--bg-secondary);
}
.navbar .navbar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.navbar .nav-link {
  display: flex;
  align-items: center;
  height: 5rem;
  color: var(--text-primary);
  text-decoration: none;
  filter: grayscale(1) opacity(0.7);
  transition: var(--transition-speed);
}
.navbar .nav-link svg {
  min-width: 2rem;
  margin: 0 1.5rem;
}
.navbar .nav-link:hover {
  filter: grayscale(0) opacity(1);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.navbar .link-text {
  display: none;
}

.fa-primary {
  color: #006f64;
}

.fa-secondary {
  color: #00eaff;
}

.fa-primary,
.fa-secondary {
  transition: var(--transition-speed);
}

.theme-icon {
  display: none;
}

.dark #darkIcon {
  display: inline;
}

.light #lightIcon {
  display: inline;
}

.solar #solarIcon {
  display: inline;
}

.box-shadow {
  height: 100px;
  width: 200px;
  border-radius: 12px;
  box-shadow: 0 0 20px var(--box);
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.gradient,
.gradient-txt {
  background: linear-gradient(90deg, #01fffb, #fb08ff, #ffb005);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}

.gradient-txt {
  background-size: 150% 150%;
  animation: motion 2s infinite;
  background-position: 0% 100%;
  font-weight: bold;
}
@keyframes motion {
  50% {
    background-position: 100% 0;
  }
}

@media (max-width: 400px) {
  p,
li {
    text-align: center;
  }
  svg {
    width: 25px;
  }
  .animation,
.gradient,
.gradient-txt,
.box-shadow {
    margin: 0 auto;
  }
  .box-shadow {
    margin-top: 1rem;
  }
}
@media (min-width: 601px) {
  .logo {
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    letter-spacing: 0.3ch;
  }
  .logo svg {
    transform: rotate(0);
    transition: transform 1.5s ease;
  }
  .nav-item {
    text-transform: uppercase;
  }
  body {
    overflow-x: hidden;
  }
  img {
    width: 500px;
    border-radius: 20px;
  }
  main {
    padding-left: 2rem;
    transition: background 1s;
  }
  p,
li {
    line-height: 2;
    font-size: large;
  }
}
@media (min-width: 601px) and (max-width: 1200px) {
  nav:hover ~ main {
    margin-left: 16.8rem;
  }
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }
  .navbar:hover {
    width: 16.8rem;
  }
  .navbar:hover .link-text {
    display: inline;
    transition: opacity var(--transition-speed);
  }
  .navbar:hover .logo .logo-text {
    left: 0;
    padding-left: 12px;
  }
  .navbar:hover .logo svg {
    margin-left: 8rem;
    transform: rotate(-540deg);
  }
  .nav-item {
    width: 100%;
  }
  .nav-item:last-child {
    margin-top: auto;
  }
}
@media (min-width: 1400px) {
  .ads-con {
    position: relative;
    display: block;
    width: 450px;
    background: url(https://res.cloudinary.com/liquidtime/image/upload/v1673351017/cyan-loader_yydrri.gif) no-repeat right;
    background-size: cover;
    position: fixed;
    right: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ads {
    font-size: xx-large;
    color: var(--link);
    background: linear-gradient(90deg, #01fffb, #fb08ff, #ffb005);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 10px;
    border: 1px solid var(--link);
    border-radius: 12px;
    text-transform: uppercase;
  }
  main {
    width: calc(100% - 800px);
    transition: background 1s;
  }
}
@media (max-width: 600px) {
  ol {
    margin-left: 10px;
  }
  svg {
    width: 25px;
  }
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
        z-index:999;
  }
  .navbar .logo {
    position: fixed;
    right: 1rem;
    top: 1rem;
  }
  .navbar .logo .logo-text {
    display: block;
    font-size: x-large;
    text-transform: uppercase;
    letter-spacing: 0.3ch;
    font-weight: bold;
  }
  .navbar .logo a {
    height: fit-content;
    padding: 4px;
    width: fit-content;
    border: none;
    border: 1px solid var(--text-primary);
    background: var(--bg-primary);
    filter: none;
  }
  .navbar .logo a svg {
    display: none;
  }
  .navbar .navbar-nav {
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--text-secondary);
  }
  .navbar .nav-link {
    justify-content: center;
    width: 50px;
    height: 60px;
    border-right: 1px solid var(--link-border);
  }
  main {
    margin: 0;
    margin-left: 0.2rem;
  }
  img {
    border-radius: 12px;
    width: 330px;
    height: 240px;
  }
  .conclusion {
    margin-bottom: 5rem;
  }
}
@media (min-width: 1200px) {
  .navbar {
    top: 0;
    height: 100vh;
    width: 16.8rem;
  }
  .navbar .link-text {
    display: inline;
    transition: opacity var(--transition-speed);
  }
  .navbar .logo .logo-text {
    left: 0;
    padding-left: 12px;
  }
  .navbar .logo svg {
    margin-left: 8rem;
    transform: rotate(-540deg);
  }
  .nav-item {
    width: 100%;
  }
  .nav-item:last-child {
    margin-top: auto;
  }
  main {
    margin-left: 16.9rem;
  }
}
.fonts,
.responsive {
  margin-top: 2rem;
}

.animation {
  border: 1px solid var(--text-secondary);
  width: 100px;
  margin-top: 1rem;
}
.animation .loading-container {
  width: 100px;
  height: 100px;
  scale: 0.8;
  animation: rotate 2s infinite;
}
.animation .circle {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 15px var(--text-primary), 0 0 20px var(--text-secondary);
  border-radius: 50%;
  background-color: var(--text-secondary);
}
@keyframes rotate {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

::-webkit-scrollbar {
  width: 0.25rem;
}

::-webkit-scrollbar-track {
  background: #1e1e24;
}

::-webkit-scrollbar-thumb {
  background: var(--text-primary);
}

::selection {
    background: var(--text-primary);
    color: var(--bg-primary);
}



Step 3: Make it more Interactive with JavaScript


JavaScript will help us add interactivity, such as a theme switcher (light, dark, and solar modes). Here’s the JavaScript Snippet:

main.js

let body = document.body
let themeBtn = document.querySelector('#themeButton')

let savedTheme = localStorage.getItem('theme')

if (savedTheme) {
    body.className = savedTheme
}
let themes = ['light', 'solar', 'dark']

let count = (savedTheme !== undefined || null) ? themes.indexOf(savedTheme) : 0;

themeBtn.onclick = function () {
    count++
    let selected
    if (count === 0) {
        selected = themes[0]
    }
    if (count === 1) {
        selected = themes[1]
    } if (count === 2) {
        selected = themes[2]
    }
    if (count > 2) {
        selected = themes[0]
        count = 0
    }
    localStorage.setItem('theme', selected)
    body.className = selected
}



Final Output:

coolwebsite.PNG 146.85 KB


Creating a single-page site with HTML 🏗️, CSS 🎨, and JavaScript ⚡ may be a fun and fulfilling encounter.

By taking this tutorial, you've learned how to construct a responsive 📱 and visually appealing 👀 website.

Feel free to customize ✨ the design and add extra features 🛠️ to make it distinctly yours.
🎉 Enjoy coding! 👨‍💻👩‍💻



Next

Glowing Animated Login & Signup Card (Form) - A Step-by-Step...

Discussion (0)

Log in to comment!

No comments yet!