HTML Capstone Project: Building a News Feed Website

Welcome to the final part of your HTML course! Congrats on starting the journey and getting this far.

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

This project will help you understand how to combine different HTML elements and structures.

Project Overview

You will create 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:

news-website/
│
├── index.html        (News Feed Page)
├── article1.html     (First Article Page)
├── article2.html     (Second Article Page)
└── article3.html     (Third Article Page)

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

Detailed Instructions

1. Set Up Your Project

  1. Create a Project Folder:

    • Create a new folder on your computer named news-website.
  2. Create HTML Files:

    • Inside the news-website folder, create the following HTML files:
      • index.html
      • article1.html
      • article2.html
      • article3.html

2. Structure for the News Feed Page (index.html)

This page will list three articles with the following details:

  • Image
  • Title
  • Author
  • Date
  1. Create a Basic HTML Skeleton:

    • Include <!DOCTYPE html>, <html>, <head>, and <body> tags.
  2. Add a Header:

    • Add a header with a main title for your news feed.
  3. Create a List of Articles:

    • Use HTML tags to create a list of three articles. Each article should include:
      • An image (<img> tag)
      • A title (<h2> tag) that links to the respective article page (<a> tag)
      • The author's name (<p> tag)
      • The posting date (<p> tag)

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

Each article page should display the full content of the article along with the title, author, and posting date.

  1. Create a Basic HTML Skeleton:

    • Include <!DOCTYPE html>, <html>, <head>, and <body> tags for each article page.
  2. Add a Header with Navigation:

    • Add a header with the title of the article.
    • Include a link back to the news feed page (index.html).
  3. Display Article Details:

    • Add the article title (<h1> tag).
    • Include the posting date and author (<p> tags).
    • Add the full content of the article (<p> or <div> tags).

Example Outline for the News Feed Page (index.html)

  1. Basic HTML Structure:

    • Set up the basic HTML document structure.
  2. Header:

    • Include a header with a title for your news feed.
  3. Article Listings:

    • For each article, include an image, a title that links to the full article page, the author's name, and the posting date.

Example Outline for an Article Page (e.g., article1.html)

  1. Basic HTML Structure:

    • Set up the basic HTML document structure.
  2. Header with Navigation:

    • Include a header with the article title and a link back to the news feed.
  3. Article Details:

    • Display the title, author, posting date, and the full content of the article.

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 there is a link on each article page to return to the news feed.
  • Validate HTML:

    • Use an HTML validator to check your code for errors.
    • You can use this Markup Validation Service by copying and pasting your code directly into this site.

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 CSS.

HtmlBeginner
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.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.