Create a responsive website from scratch Simple Template

by
  • The code begins with the <!DOCTYPE html> declaration, specifying that the document is an HTML5 document.
  • Inside the <head> section, there are <meta> tags that define the character encoding and viewport settings for the website. The <title> tag sets the title of the webpage.
  • The <style> section contains CSS code that defines the visual styles for various elements of the webpage, such as the navigation menu, header, main content, and footer.
  • Inside the <body> section, the website structure is defined.
  • The <header> element represents the header section of the website. It contains the <nav> element, which represents the navigation menu.
  • The navigation menu consists of a logo section (<div class="logo">), a menu toggle (<div class="menu-toggle">), and the actual menu items (<ul class="menu">).
  • The logo is represented by an <a> tag within the logo section.
  • The menu toggle is created using a checkbox input (<input type="checkbox" class="bar" />) and three <span> elements, which visually represent the toggle button.
  • The actual menu items are listed within <li> elements, and each menu item is represented by an <a> tag.
  • The <main> section represents the main content of the website, containing a heading (<h2>) and a paragraph (<p>).
  • The <footer> section represents the footer of the website, displaying a copyright notice.
  • Finally, the <script> section contains JavaScript code that adds functionality to the menu toggle. When the menu toggle is clicked, it toggles the ‘active’ class on the menu toggle itself and the menu, allowing the menu to be shown or hidden.

Overall, this code sets up a responsive

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Responsive Website</title>
    <style>
        .bar {
            display: none;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #333;
            padding: 20px;
            position: relative;
        }

        nav .logo a {
            color: #fff;
            font-size: 1.5rem;
            text-decoration: none;
        }

        nav .menu {
            display: flex;
        }

        nav .menu li {
            margin: 0 10px;
        }

        nav .menu li a {
            color: #fff;
            text-decoration: none;
        }

        nav .menu-toggle {
            display: none;
        }

        nav .menu {
            display: flex;
            list-style: none;
            /* remove the list style */
            margin: 0;
            /* remove the default margin */
            padding: 0;
            /* remove the default padding */
        }


        main {
      padding: 20px;
    }
    
    footer {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
        @media screen and (max-width: 768px) {
            nav .menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                background-color: #333;
                z-index: 1;
            }

            nav .menu li {
                width: 100%;
            }

            nav .menu li a {
                padding: 10px;
                color: #fff;
                display: block;
            }

            nav .menu-toggle {
                display: block;
            }

            nav .menu-toggle span {
                display: block;
                width: 30px;
                height: 5px;
                background-color: #fff;
                margin: 5px 0;
            }

            nav .menu-toggle.active span:nth-of-type(2) {
                transform: rotate(45deg);
                top: 12px;
            }

            nav .menu-toggle.active span:nth-of-type(3) {
                transform: rotate(-45deg);
                top: 12px;
            }

            nav .menu-toggle.active span:nth-of-type(2),
            nav .menu-toggle.active span:nth-of-type(3) {
                position: absolute;
            }

            nav .menu-toggle.active span:nth-of-type(1) {
                opacity: 0;
            }

            nav .menu-toggle.active+.menu {
                display: flex;
            }
        }

    </style>
</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <a href="#">Logo</a>
            </div>
            <div class="menu-toggle">
                <input type="checkbox" class="bar" />
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Welcome to our website!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum justo a turpis efficitur, id gravida justo volutpat.</p>
      </main>
      
      <footer>
        <p>&copy; 2023 Website Name. All rights reserved.</p>
      </footer>
    <script>
        const menuToggle = document.querySelector('.menu-toggle');
        const menu = document.querySelector('.menu');

        menuToggle.addEventListener('click', function () {
            menuToggle.classList.toggle('active');
            menu.classList.toggle('active');
        });
    </script>
</body>

</html>

To link a stylesheet (CSS file) to an HTML document, you can use the <link> element in the <head> section of your HTML document. Here’s an example of how to do it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Your webpage content here -->
</body>
</html>

In the above code snippet:

  • The <link> element is used to establish a link between the HTML document and the external CSS file.
  • The rel attribute specifies the relationship between the HTML document and the linked resource. In this case, rel="stylesheet" indicates that the linked resource is a stylesheet.
  • The href attribute specifies the path to the CSS file. In the example, href="styles.css" assumes that the CSS file named “styles.css” is located in the same directory as the HTML file. If the CSS file is in a different directory, you need to specify the correct relative or absolute path.

By linking the CSS file to your HTML document, the styles defined in the CSS file will be applied to the HTML elements, allowing you to control the appearance and layout of your webpage.

The viewport meta tag is used in HTML documents to control the layout and behavior of the webpage on different devices, particularly on mobile devices. It tells the browser how to adjust the webpage’s dimensions and scaling to fit the screen of the device.

The viewport meta tag typically includes the width and initial-scale properties. Here’s a breakdown of what they do:

  • width=device-width: This property sets the width of the viewport to the width of the device’s screen. It ensures that the webpage’s content adjusts to the device’s screen width and prevents the content from appearing too large or zoomed out.
  • initial-scale=1: This property sets the initial zoom level or scaling factor of the webpage. A value of 1 indicates that the webpage should be displayed at a 1:1 ratio, which means no zooming or scaling is applied by default.

Including the viewport meta tag with these properties ensures that the webpage is responsive and adapts to different screen sizes. It enables a consistent and user-friendly experience across various devices, such as smartphones, tablets, and desktops.

Additionally, the viewport meta tag can include other properties to further customize the behavior of the webpage on different devices. For example, the maximum-scale and minimum-scale properties can limit the zooming capabilities, while the user-scalable property can control whether the user can manually zoom in or out of the webpage.

Overall, the viewport meta tag is crucial for creating mobile-friendly and responsive webpages, allowing developers to optimize the display and usability of their websites on different devices.

CSS

.bar { display: none; } nav { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 20px; background-color: #333; } nav .logo a { color: #fff; font-size: 1.5rem; text-decoration: none; } nav .menu { display: flex; list-style: none; margin: 0; padding: 0; } nav .menu li { margin: 0 10px; } nav .menu li a { color: #fff; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } @media screen and (max-width: 768px) { nav .menu { display: none; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background-color: #333; z-index: 1; } nav .menu li { width: 100%; } nav .menu li a { padding: 10px; color: #fff; display: block; } nav .menu-toggle { display: block; } nav .menu-toggle span { display: block; width: 30px; height: 5px; background-color: #fff; margin: 5px 0; } nav .menu-toggle.active span:nth-of-type(2) { transform: rotate(45deg); top: 12px; } nav .menu-toggle.active span:nth-of-type(3) { transform: rotate(-45deg); top: 12px; } nav .menu-toggle.active span:nth-of-type(2), nav .menu-toggle.active span:nth-of-type(3) { position: absolute; } nav .menu-toggle.active span:nth-of-type(1) { opacity: 0; } nav .menu-toggle.active + .menu { display: flex; } }

  1. .bar: This class selector is used to target elements with the class name “bar” and applies the following style:
    • display: none;: It hides the elements with the class “bar” by setting their display property to “none”. This effectively removes them from the layout.
  2. nav: This selector targets the <nav> element and applies the following styles:
    • display: flex;: It establishes a flex container, allowing its children elements to be laid out in a flexible box model.
    • justify-content: space-between;: It distributes the child elements horizontally with equal space between them, pushing the first and last elements to the edges.
    • align-items: center;: It vertically aligns the child elements in the center of the flex container.
    • position: relative;: It sets the positioning context of the <nav> element as relative.
    • padding: 20px;: It adds 20 pixels of padding on all sides of the <nav> element.
    • background-color: #333;: It sets the background color of the <nav> element to a dark gray color (#333).
  3. nav .logo a: This selector targets the <a> element within the <nav> element that has the class “logo” and applies the following style:
    • color: #fff;: It sets the text color of the <a> element to white (#fff).
    • font-size: 1.5rem;: It sets the font size of the <a> element to 1.5 rem.
  4. nav .menu: This selector targets the <ul> element with the class “menu” within the <nav> element and applies the following styles:
    • display: flex;: It establishes a flex container for the <ul> element and makes its child elements display as flexible boxes.
    • list-style: none;: It removes the default bullet points from the list items (<li> elements).
    • margin: 0;: It removes the default margin of the <ul> element.
    • padding: 0;: It removes the default padding of the <ul> element.
  5. nav .menu li: This selector targets the <li> elements within the <ul> element with the class “menu” and applies the following style:
    • margin: 0 10px;: It adds 10 pixels of margin on the left and right sides of each <li> element, creating spacing between them.
  6. nav .menu li a: This selector targets the <a> elements within the <li> elements of the menu and applies the following styles:
    • color: #fff;: It sets the text color of the <a> elements to white.
    • text-decoration: none;: It removes the underline decoration from the <a> elements.
  7. main: This selector targets the <main> element and applies the following style:
    • padding: 20px;: It adds 20 pixels of padding on all sides of the <main> element.
  8. footer: This selector targets the <footer> element and applies the following style:
    • background-color: #333;: It sets the background color of the <footer> element to a dark gray color.
    • color: #fff;: It sets the text color of the <footer> element to white.
    • padding: 20px;: It adds 20 pixels of padding on all sides of the <footer> element

The provided code is an HTML document with associated CSS styles. When rendered in a web browser, it produces a responsive webpage with a navigation bar, main content section, and footer. Here’s a breakdown of the output:

  1. Navigation Bar:
    • The navigation bar appears at the top of the webpage and has a dark gray background color.
    • It contains a logo on the left side, represented as a link (<a> element) with white text and a font size of 1.5rem.
    • On the right side, there is a menu represented as an unordered list (<ul>) with list items (<li>) containing links (<a> elements) for navigation.
    • The menu items are horizontally aligned with equal spacing between them and have white text color. They also have a margin of 10px on the left and right sides for spacing.
  2. Responsive Behavior:
    • When the screen width is 768 pixels or less (media query condition), the navigation menu changes its layout for better mobile experience.
    • The menu items are hidden and displayed as a vertical list when the menu toggle button (hamburger icon) is clicked.
    • The menu toggle button consists of three horizontal lines (<span> elements) with a white background color.
    • When the menu toggle button is active (clicked), the middle line rotates to form an “X” shape, indicating the menu is expanded.
    • The expanded menu is displayed below the navigation bar, occupying the full width of the screen.
  3. Main Content:
    • The main content section appears below the navigation bar and has a padding of 20 pixels on all sides.
    • It contains a heading (<h2>) and a paragraph (<p>) of text, which can be modified or extended according to the webpage’s content.
  4. Footer:
    • The footer section appears at the bottom of the webpage and has a dark gray background color and white text color.
    • It contains a copyright notice (<p> element) with the current year and the name of the website.

Overall, the code produces a responsive webpage with a navigation bar, content section, and footer, providing a basic structure for a website. The CSS styles define the appearance, layout, and responsiveness of the elements within the HTML document.