Recreating a Tutorial Website Layout with HTML and CSS

CSS is essential for controlling the visual presentation of a webpage. While many projects may not require complex aesthetics, understanding layout fundamentals is crucial. This exercise involves recreating the core structure of a common tutorial site layout.

HTML Structure

The following HTML code sets up the basic page structure, including a header with search, a navigation bar, a main content area with sidebars, and a footer.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tutorial Site Layout</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container">
        <header class="site-header">
            <div class="search-container">
                <img src="logo.png" alt="Site Logo">
                <input type="search" id="site-search" placeholder="Search tutorials...">
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Python</a></li>
                    <li><a href="#">Java</a></li>
                </ul>
            </nav>
        </header>

        <main class="content-wrapper">
            <aside class="sidebar left-sidebar">
                <div class="sidebar-header">
                    <i class="fa fa-list"></i> HTML Tutorial
                </div>
                <div class="sidebar-links">
                    <a href="#">HTML Introduction</a>
                    <a href="#">HTML Editors</a>
                    <a href="#">HTML Basics</a>
                </div>
            </aside>

            <article class="main-content">
                <div class="content-header">
                    HTML Introduction
                </div>
                <section class="content-section">
                    <h1>HTML Tutorial</h1>
                    <p>HyperText Markup Language (HTML) is the standard language for creating web pages.</p>
                    <p>It structures content using elements and tags.</p>
                </section>
            </article>

            <aside class="sidebar right-sidebar">
                <div class="sidebar-header">
                    <i class="fa fa-list"></i> Categories
                </div>
                <div class="sidebar-links">
                    <a href="#">HTML/CSS</a>
                    <a href="#">JavaScript</a>
                    <a href="#">Server Side</a>
                </div>
            </aside>
        </main>

        <footer class="site-footer">
            <p>Copyright © 2023. All rights reserved.</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS Styling

The CSS provides the visual design using Grid for layout, basic styling for components, and interactive states.

/* Core Layout and Reset */
body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: #f6f6f6;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header and Search */
.site-header {
    background: white;
    padding: 1rem;
}
.search-container {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
#site-search {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}
#site-search:focus {
    outline: none;
    border-color: #96b97d;
    box-shadow: 0 0 5px rgba(150, 185, 125, 0.5);
}

/* Navigation */
.main-nav {
    background-color: #96b97d;
    padding: 0.75rem;
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}
.main-nav a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
}
.main-nav a:hover {
    color: #cde8b8;
}

/* Main Content Area */
.content-wrapper {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 1rem;
    margin: 1rem 0;
}

/* Sidebars */
.sidebar {
    background: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sidebar-header {
    background: #ececec;
    padding: 0.75rem;
    font-weight: bold;
    color: #64854c;
    border-radius: 5px 5px 0 0;
}
.sidebar-links {
    padding: 0.5rem;
    display: grid;
    gap: 0.25rem;
    max-height: 400px;
    overflow-y: auto;
}
.sidebar-links a {
    display: block;
    padding: 0.5rem;
    background: #f6f4f0;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
}
.sidebar-links a:hover {
    background: #e8e6e0;
}

/* Main Content */
.main-content {
    background: white;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.content-header {
    background: #d6d6d6;
    padding: 0.75rem;
    color: #666;
    text-align: right;
    border-radius: 5px 5px 0 0;
}
.content-section {
    padding: 1.5rem;
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 1rem;
    color: #999;
    background: white;
    margin-top: 2rem;
}

JavaScript for Interactive Search

A simple script to enhance the search input field with focus styles.

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('site-search');
    if (searchInput) {
        searchInput.addEventListener('focus', function() {
            this.classList.add('search-focused');
        });
        searchInput.addEventListener('blur', function() {
            this.classList.remove('search-focused');
        });
    }
});

Key Implementation Notes

• CSS Grid is used extensive for creating the responsive multi-column layout of the header, main content area, and sidebars. The grid-template-columns property defines the column structure.
• Font Awesome is integrated via CDN to provide scalbale vector icons (like the list icon) that are easily customizable with CSS.
• Visual feedback for the search input is managed through a CSS class (.search-focused) toggled by JavaScript on focus and blur events.
• Sidebar navigation links use a vertical grid layout with scrollable areas (overflow-y: auto) to handle long lists of items.
• The design uses a consistent color palete with greens (#96b97d, #64854c) for primary elements and neutral grays for backgrounds and text.