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:
- 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)
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
Create a Project Folder:
- Create a new folder on your computer named
news-website.
- Create a new folder on your computer named
Create HTML Files:
- Inside the
news-websitefolder, create the following HTML files:index.htmlarticle1.htmlarticle2.htmlarticle3.html
- Inside the
2. Structure for the News Feed Page (index.html)
This page will list three articles with the following details:
- Image
- Title
- Author
- Date
Create a Basic HTML Skeleton:
- Include
<!DOCTYPE html>,<html>,<head>, and<body>tags.
- Include
Add a Header:
- Add a header with a main title for your news feed.
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)
- An image (
- Use HTML tags to create a list of three articles. Each article should include:
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.
Create a Basic HTML Skeleton:
- Include
<!DOCTYPE html>,<html>,<head>, and<body>tags for each article page.
- Include
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).
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).
- Add the article title (
Example Outline for the News Feed Page (index.html)
Basic HTML Structure:
- Set up the basic HTML document structure.
Header:
- Include a header with a title for your news feed.
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)
Basic HTML Structure:
- Set up the basic HTML document structure.
Header with Navigation:
- Include a header with the article title and a link back to the news feed.
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.
