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:
- News Feed Page: A main page listing three articles with images, titles, authors, and posting dates.
- 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:
news-website/ │ ├── 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
Create a Project Folder:
- Ensure you have your
news-websitefolder withindex.html,article1.html,article2.html,article3.html, and add a new filestyles.css.
- Ensure you have your
Link CSS File:
- Link the
styles.cssfile in each HTML file using the<link>tag inside the<head>section:
- Link the
<link rel="stylesheet" href="styles.css">
2. Basic Styles for the News Feed Page (index.html)
Create a Basic HTML Skeleton:
- Ensure your HTML structure includes
<!DOCTYPE html>,<html>,<head>, and<body>tags.
- Ensure your HTML structure includes
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.
- General Styles:
3. Detailed Styles for Each Article Page (article1.html, article2.html, article3.html)
Basic HTML Skeleton:
- Ensure your HTML structure includes
<!DOCTYPE html>,<html>,<head>, and<body>tags.
- Ensure your HTML structure includes
Add CSS Styles:
General Styles:
- Apply the same general styles as in
index.html.
- Apply the same general styles as in
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
Media Queries for Responsiveness:
- Ensure your site looks good on mobile devices.
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:
- Use a CSS validator to check your code for errors. You can use this CSS Validation Service.
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.
