Blogging Website Landing Page using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a Blogging Website Landing Page using HTML, CSS, and JavaScript. Easy steps for beginners to build a beautiful and responsive blog layout.

Join us on Telegram
blogging-website-landing-page-using-html-css-javascript.webp
Read Alsostep-by-step guide creating a stunning marquee with html css.jpgStep-by-Step Guide: Creating a Stunning Marquee with HTML/CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Are you planning to start a blog and want a great first impression? A Blogging Website Landing Page is the best way to showcase your blog's purpose, topics, and highlights. In this tutorial, we’ll create a simple, clean, and responsive blog landing page using HTML, CSS, and JavaScript.

This guide is perfect for beginners who want to learn how to design a beautiful front page for their blogging website.

Prerequisites

Before you start, make sure you have:

  • A basic understanding of HTML, CSS, and JavaScript
  • A code editor like VS Code
  • A modern browser like Chrome to test your design.

Source Code

Step 1 (HTML Code):

We will start with HTML, the base of every website. In this step, we will create the structure of our blog landing page. It includes the header, hero section, article section, and footer.

Copy the code below and paste it into your index.html file.

Read AlsoDevelop Flappy Bird Game Using HTML, CSS, and JavaScript.jpgStep-by-Step Guide: Develop Flappy Bird Game Using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

After HTML, let’s move to CSS, which will make your blog layout look modern and beautiful. We will style the header, buttons, text, and content cards to give your page a clean look.

Copy the code below and paste it into your style.css file.

/* ===== CSS RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #f59e0b;
    --accent-color: #ec4899;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-dark: #111827;
    --border-color: #e5e7eb;
    --success-color: #10b981;
    --error-color: #ef4444;

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'Playfair Display', serif;

    /* Spacing */
    --section-padding: 5rem 0;
    --container-padding: 0 1rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* ===== UTILITY CLASSES ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--container-padding);
}

.section {
    padding: var(--section-padding);
}

.section-title {
    font-family: var(--font-secondary);
    font-size: 2.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4rem;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
}

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-medium);
    font-family: var(--font-primary);
    font-size: 0.95rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}

.grid {
    display: grid;
    gap: 2rem;
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ===== HEADER & NAVIGATION ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    transition: var(--transition-medium);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-md);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    font-family: var(--font-secondary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 500;
    transition: var(--transition-fast);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    transition: var(--transition-fast);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* ===== HERO SECTION ===== */
.hero {
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,');
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero h1 {
    font-family: var(--font-secondary);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    animation: slideInUp 1s ease;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    animation: slideInUp 1s ease 0.2s both;
}

.hero .btn {
    animation: slideInUp 1s ease 0.4s both;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ABOUT SECTION ===== */
.about {
    background: var(--bg-secondary);
}

.about-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.about p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ===== FEATURED POSTS ===== */
.featured-post {
    position: relative;
    height: 400px;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
}

.featured-post-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
}

.featured-post h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.featured-post p {
    opacity: 0.9;
    margin-bottom: 1rem;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ===== BLOG POSTS ===== */
.blog-post {
    background: var(--bg-primary);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.blog-post-image {
    height: 200px;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    position: relative;
    overflow: hidden;
}

.blog-post-content {
    padding: 1.5rem;
}

.blog-post h3 {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.blog-post p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.read-more {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
}

.read-more:hover {
    color: var(--primary-dark);
}

/* ===== CATEGORIES ===== */
.categories {
    background: var(--bg-secondary);
}

.category-card {
    background: var(--bg-primary);
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.category-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.category-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.category-card .count {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ===== SEARCH BAR ===== */
.search-section {
    padding: 3rem 0;
    background: var(--bg-primary);
}

.search-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: 2px solid var(--border-color);
    border-radius: 2rem;
    font-size: 1rem;
    transition: var(--transition-fast);
    background: var(--bg-secondary);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

/* ===== AUTHOR BIO ===== */
.author-bio {
    background: var(--bg-secondary);
    text-align: center;
}

.author-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    font-weight: 700;
}

.author-bio h3 {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.author-bio p {
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== NEWSLETTER ===== */
.newsletter {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    text-align: center;
}

.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 1rem;
}

.newsletter-input {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* ===== TESTIMONIALS ===== */
.testimonials {
    background: var(--bg-secondary);
}

.testimonial-card {
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.testimonial-text {
    font-style: italic;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.testimonial-author {
    font-weight: 600;
    color: var(--text-primary);
}

.stars {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

/* ===== QUOTE OF THE DAY ===== */
.quote-section {
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.quote-content {
    position: relative;
    z-index: 2;
}

.quote-text {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 1rem;
}

.quote-author {
    font-weight: 500;
    opacity: 0.9;
}

/* ===== SOCIAL MEDIA ===== */
.social-media {
    background: var(--bg-secondary);
    text-align: center;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.social-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    transition: var(--transition-medium);
}

.social-icon.facebook {
    background: #1877f2;
}

.social-icon.twitter {
    background: #1da1f2;
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-icon.linkedin {
    background: #0077b5;
}

.social-icon.youtube {
    background: #ff0000;
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: var(--shadow-lg);
}

/* ===== COMMENTS ===== */
.comments {
    background: var(--bg-primary);
}

.comment-form {
    background: var(--bg-secondary);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    font-family: var(--font-primary);
    transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ===== CONTACT FORM ===== */
.contact {
    background: var(--bg-secondary);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
}

/* ===== FAQ SECTION ===== */
.faq {
    background: var(--bg-primary);
}

.faq-item {
    background: var(--bg-secondary);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-question {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: var(--transition-fast);
}

.faq-question:hover {
    background: var(--border-color);
}

.faq-icon {
    transition: var(--transition-fast);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-medium);
}

.faq-item.active .faq-answer {
    padding: 0 1.5rem 1.5rem;
    max-height: 200px;
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-medium);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
}

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-dark);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-family: var(--font-secondary);
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.footer-section p,
.footer-section a {
    color: #d1d5db;
    text-decoration: none;
    margin-bottom: 0.5rem;
    display: block;
    transition: var(--transition-fast);
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #374151;
    color: #9ca3af;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg-primary);
        flex-direction: column;
        padding: 2rem;
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        transition: var(--transition-medium);
        opacity: 0;
        visibility: hidden;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .hamburger {
        display: flex;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .social-icons {
        gap: 1rem;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .section {
        padding: 3rem 0;
    }

    .back-to-top {
        bottom: 1rem;
        right: 1rem;
    }
}

Step 3 (JavaScript Code):

This is our final step. We will use JavaScript to add smooth scrolling and more functions.

Copy the code below and paste it into your script.js file.

// ===== MOBILE NAVIGATION =====
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
});

// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        navMenu.classList.remove('active');
    });
});

// ===== STICKY HEADER =====
const header = document.getElementById('header');

window.addEventListener('scroll', () => {
    if (window.scrollY > 100) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

// ===== SMOOTH SCROLLING =====
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// ===== ACTIVE NAVIGATION LINKS =====
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-link');

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop - 150;
        if (scrollY >= sectionTop) {
            current = section.getAttribute('id');
        }
    });

    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === `#${current}`) {
            link.classList.add('active');
        }
    });
});

// ===== SEARCH FUNCTIONALITY =====
const searchInput = document.getElementById('search-input');
const blogPosts = document.querySelectorAll('.blog-post');

searchInput.addEventListener('input', (e) => {
    const searchTerm = e.target.value.toLowerCase();

    blogPosts.forEach(post => {
        const title = post.querySelector('h3').textContent.toLowerCase();
        const content = post.querySelector('p').textContent.toLowerCase();
        const category = post.querySelector('.post-meta span:last-child')?.textContent.toLowerCase() || '';

        if (title.includes(searchTerm) || content.includes(searchTerm) || category.includes(searchTerm)) {
            post.style.display = 'block';
            post.style.animation = 'slideInUp 0.5s ease';
        } else {
            post.style.display = 'none';
        }
    });
});

// ===== CATEGORY FILTERING =====
const categoryCards = document.querySelectorAll('.category-card');

categoryCards.forEach(card => {
    card.addEventListener('click', () => {
        const category = card.getAttribute('data-category');

        blogPosts.forEach(post => {
            const postCategory = post.querySelector('.post-meta span:last-child')?.textContent.toLowerCase();

            if (postCategory && postCategory.includes(category)) {
                post.style.display = 'block';
                post.style.animation = 'slideInUp 0.5s ease';
            } else {
                post.style.display = 'none';
            }
        });

        // Update search input to show active filter
        searchInput.value = category;
    });
});

// ===== QUOTE OF THE DAY =====
const quotes = [
    { text: "The best way to predict the future is to create it.", author: "Peter Drucker" },
    { text: "Innovation distinguishes between a leader and a follower.", author: "Steve Jobs" },
    { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
    { text: "Code is like humor. When you have to explain it, it's bad.", author: "Cory House" },
    { text: "First, solve the problem. Then, write the code.", author: "John Johnson" },
    { text: "Experience is the name everyone gives to their mistakes.", author: "Oscar Wilde" },
    { text: "In order to be irreplaceable, one must always be different.", author: "Coco Chanel" }
];

function updateQuote() {
    const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
    document.getElementById('quote-text').textContent = `"${randomQuote.text}"`;
    document.getElementById('quote-author').textContent = `- ${randomQuote.author}`;
}

// Update quote every 10 seconds
setInterval(updateQuote, 10000);
updateQuote(); // Initial load

// ===== FORM SUBMISSIONS =====

// Newsletter Form
const newsletterForm = document.getElementById('newsletter-form');
newsletterForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = e.target.querySelector('.newsletter-input').value;

    // Simulate form submission
    alert(`Thank you for subscribing with email: ${email}`);
    e.target.reset();
});

// Contact Form
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const name = document.getElementById('contact-name').value;
    const email = document.getElementById('contact-email').value;
    const subject = document.getElementById('contact-subject').value;
    const message = document.getElementById('contact-message').value;

    // Basic validation
    if (!name || !email || !subject || !message) {
        alert('Please fill in all fields.');
        return;
    }

    // Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return;
    }

    alert(`Thank you for your message, ${name}! We'll get back to you soon.`);
    e.target.reset();
});

// Comment Form
const commentForm = document.getElementById('comment-form');
const commentsList = document.getElementById('comments-list');

commentForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const name = document.getElementById('comment-name').value;
    const email = document.getElementById('comment-email').value;
    const message = document.getElementById('comment-message').value;

    if (!name || !email || !message) {
        alert('Please fill in all fields.');
        return;
    }

    // Create comment element
    const commentDiv = document.createElement('div');
    commentDiv.className = 'comment-card';
    commentDiv.style.cssText = `
                background: var(--bg-secondary);
                padding: 1.5rem;
                border-radius: 0.5rem;
                margin-bottom: 1rem;
                animation: slideInUp 0.5s ease;
            `;

    commentDiv.innerHTML = `
                <div style="display: flex; align-items: center; margin-bottom: 0.5rem;">
                    <div style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; margin-right: 1rem;">
                        ${name.charAt(0).toUpperCase()}
                    </div>
                    <div>
                        <strong>${name}</strong>
                        <div style="font-size: 0.9rem; color: var(--text-light);">${new Date().toLocaleDateString()}</div>
                    </div>
                </div>
                <p style="margin: 0; color: var(--text-secondary);">${message}</p>
            `;

    commentsList.insertBefore(commentDiv, commentsList.firstChild);
    e.target.reset();
});

Final Output:

blogging-website-landing-page-using-html-css-javascript.gif
Read AlsoCrafting a Responsive Product Showcase with HTML, CSS, and Open Props.jpgCrafting a Responsive Product Showcase with HTML, CSS, and Open Props

Conclusion:

Creating a blogging website landing page is a great start to your web development journey. With just HTML, CSS, and JavaScript, you can build a clean, attractive, and responsive layout for your blog.

Now it’s your turn! Add more sections like blog categories, a contact form, or even a newsletter sign-up.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create blogging website landing page, blogging landing page using html css javascript, step-by-step blogging website frontend design, responsive blog landing page for beginners, simple blog website layout using html and css, blog website, landing page, blog layout, blog website template
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺