CSS Capstone Project: Styling a News Feed Website

Welcome to the final part of your CSS course! Congratulations on your progress and for reaching this point.

In this capstone project, you will apply what you've learned in CSS to style a simple news feed website.

If you’ve been following along since the HTML series, you should have created a simple HTML news site. We are now going to upgrade the project by adding some styles.

As a reminder of that project, you can find it here.

Project Overview

You will style a multi-page website:

  1. News Feed Page: A main page listing three articles with images, titles, authors, and posting dates.
  2. Article Pages: Individual pages for each article, displaying the full content along with the title, author, and posting date.

Project Structure

Here's the basic structure for your project:

├── index.html        (News Feed Page)
├── article1.html     (First Article Page)
├── article2.html     (Second Article Page)
├── article3.html     (Third Article Page)
└── styles.css        (CSS File)

As an example of what your site should look like, here is one I created: https://nialljoemaher.github.io/css-capstone/

Detailed Instructions

1. Set Up Your Project

  1. Create a Project Folder:

    • Ensure you have your news-website folder with index.html, article1.html, article2.html, article3.html, and add a new file styles.css.
  2. Link CSS File:

    • Link the styles.css file in each HTML file using the <link> tag inside the <head> section:
<link rel="stylesheet" href="styles.css">

2. Basic Styles for the News Feed Page (index.html)

  1. Create a Basic HTML Skeleton:

    • Ensure your HTML structure includes <!DOCTYPE html>, <html>, <head>, and <body> tags.
  2. Add CSS Styles:

    • General Styles:
      • Set default font, background color, and margins.
    • Article List Styles:
      • Use Flexbox to layout articles, add margins, and style images.

3. Detailed Styles for Each Article Page (article1.html, article2.html, article3.html)

  1. Basic HTML Skeleton:

    • Ensure your HTML structure includes <!DOCTYPE html>, <html>, <head>, and <body> tags.
  2. Add CSS Styles:

    • General Styles:

      • Apply the same general styles as in index.html.
    • Header with Navigation:

      • Style the header and link back to the news feed.
    • Article Content Styles:

      • Style the article title, author, date, and content.

4. Advanced Styling

  1. Media Queries for Responsiveness:

    • Ensure your site looks good on mobile devices.
  2. Hover Effects:

    • Add hover effects to article titles and images.

Final Project Checklist

  • Ensure Navigation Links Work:

    • Check that clicking on an article title in the news feed navigates to the correct article page.
    • Ensure a link on each article page to return to the news feed.
  • Validate CSS:

  • Test on Multiple Devices:

    • Ensure your site looks good and works well on different screen sizes and devices.

Submit Your Project

When you are finished, jump into the Discord and let me know (you get a free invite when you first sign-in to Codú. We have a channel called "Code Newbies" where you can share a link to your code.

You can share your code by uploading the files to GitHub. Here's how:

Well done on getting this far! Take a moment to celebrate before we move onto JavaScript.

Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.