Best Practices

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />

    <meta name="description" content="A modern webpage following best practices." />
    <meta name="author" content="Your Name" />
    <meta name="robots" content="index, follow" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Best Practices for HTML</title>

    <!-- Local CSS -->
    <link rel="stylesheet" href="styles.css" />

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>

<body>
    <!-- Page content -->

    <!-- Main script as module -->
    <script type="module" src="script.js"></script>
</body>

</html>

CSS

/* 1️⃣ CSS Reset - Ensures consistent styling across different browsers */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2️⃣ Global Variables - Define common colors, typography, and transition speed */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #f8f9fa;
    --text-color: #333;
    --border-color: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --font-family: 'Arial', sans-serif;
    --transition-speed: 0.3s;
    --focus-color: #ffb703;
}

/* 3️⃣ Dark Mode Support - Automatically adapts to the user's system settings */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #181818;
        --text-color: #e0e0e0;
        --border-color: #444;
        --shadow-color: rgba(0, 0, 0, 0.5);
    }
    button {
        background-color: var(--secondary-color);
    }
    button:hover {
        background-color: var(--primary-color);
    }
}

/* 4️⃣ Base Styles - Apply global settings for text and layout */
html,
body {
    height: 100%;
    font-size: 16px;
    line-height: 1.6;
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

/* 5️⃣ Link Styles - Improve readability and add smooth transitions */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Focus Styles - for Accessibility */
a:focus,
button:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}  

/* 6️⃣ Button Styles - Ensures consistency across all buttons */
button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    border-radius: 5px;
}

button:hover {
    background-color: var(--secondary-color);
}

/* 7️⃣ Image Styles - Ensures images do not exceed their container */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 8️⃣ Layout Container - Centers content and limits maximum width */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* 9️⃣ Responsive Design - Adjustments for smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 10px;
    }
}

/* 1️⃣0️⃣ Extra Small Screens - Further padding adjustments for mobile devices */
@media (max-width: 480px) {
    .container {
        padding: 0 5px;
    }
}

JS

document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM is fully loaded and parsed!");
});