HTML Example

<div class="blog-layout">
    <header class="blog-header">
        <h1>My Blog</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <main class="blog-main">
        <article class="featured-post">
            <img src="featured.jpg" alt="Featured Post">
            <div class="post-content">
                <h2>Featured Post Title</h2>
                <p>This is a featured post excerpt...</p>
                <a href="#" class="read-more">Read More</a>
            </div>
        </article>
        <div class="posts-grid">
            <article class="post-card">
                <img src="post1.jpg" alt="Post 1">
                <div class="post-content">
                    <h3>Post Title 1</h3>
                    <p>Post excerpt...</p>
                    <a href="#">Read More</a>
                </div>
            </article>
            <article class="post-card">
                <img src="post2.jpg" alt="Post 2">
                <div class="post-content">
                    <h3>Post Title 2</h3>
                    <p>Post excerpt...</p>
                    <a href="#">Read More</a>
                </div>
            </article>
        </div>
    </main>
    <aside class="blog-sidebar">
        <div class="widget">
            <h3>Recent Posts</h3>
            <ul>
                <li><a href="#">Recent Post 1</a></li>
                <li><a href="#">Recent Post 2</a></li>
            </ul>
        </div>
        <div class="widget">
            <h3>Categories</h3>
            <ul>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Design</a></li>
            </ul>
        </div>
    </aside>
</div>

Basic CSS Example

.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
.blog-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2rem;
}
.blog-header h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.blog-header nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.blog-header a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}
.blog-header a:hover {
    color: #764ba2;
}
.blog-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.featured-post {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.featured-post img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.featured-post .post-content {
    padding: 2rem;
}
.featured-post h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #333;
}
.read-more {
    display: inline-block;
    background: linear-gradient(90deg, #667eea, #764ba2);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s;
}
.read-more:hover {
    transform: translateY(-2px);
}
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.post-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.2s;
}
.post-card:hover {
    transform: translateY(-5px);
}
.post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.post-card .post-content {
    padding: 1.5rem;
}
.post-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #333;
}
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.widget {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.widget h3 {
    margin-bottom: 1rem;
    color: #333;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
}
.widget ul {
    list-style: none;
    padding: 0;
}
.widget li {
    margin-bottom: 0.5rem;
}
.widget a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}
.widget a:hover {
    color: var(--primary);
}
@media (max-width: 900px) {
    .blog-layout {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    .posts-grid {
        grid-template-columns: 1fr;
    }
    .blog-header nav {
        flex-direction: column;
        gap: 1rem;
    }
}

Pagination Example (HTML)

<div class="pagination">
    <a href="#" class="page-link">Previous</a>
    <a href="#" class="page-link active">1</a>
    <a href="#" class="page-link">2</a>
    <a href="#" class="page-link">3</a>
    <a href="#" class="page-link">Next</a>
</div>

Checklist

• Test on mobile, tablet, and desktop
• Check keyboard navigation and focus states
• Use semantic HTML for blog structure
• Ensure color contrast is accessible
• Validate your HTML and CSS