Project 1: HTML Fundamental
Apply your knowledge to build something amazing!
Project One: HTML Fundamental Project
:clipboard: Project Overview
:information_source: Project Details Difficulty Level: :emoji: Beginner
Estimated Time: 45-60 minutes
Skills Practiced:
- HTML document structure
- Heading hierarchy (h1-h6)
- Creating paragraphs and lists
- Adding images with attributes
- Using HTML special characters
- Understanding attributes and values
In this project, you will learn the fundamentals of HTML by creating a webpage about understanding HTML structure. You'll practice using headings, paragraphs, lists, images, and HTML special characters while building a complete webpage.
:emoji:️ Project Roadmap
mermaid
graph TD
A[Start: Open Template] --> B[Phase 1: Basic Setup]
B --> C[Phase 2: Add Headings]
C --> D[Phase 3: Create Content]
D --> E[Phase 4: Build Lists]
E --> F[Phase 5: Special Characters]
F --> G[Phase 6: Add Images]
G --> H[Complete & Submit]
style A fill:#4CAF50,color:#fff
style H fill:#2196F3,color:#fff
style B fill:#FFF3E0
style C fill:#FFF3E0
style D fill:#FFF3E0
style E fill:#FFF3E0
style F fill:#FFF3E0
style G fill:#FFF3E0
Learning Objectives
This project focuses on:
- HTML Document Structure: Understanding the basic HTML document layout
- Heading Hierarchy: Using h1, h2, h3... h6 tags appropriately
- Text Content: Creating paragraphs and text content
- List Creation: Implementing ordered (ol) and unordered (ul) lists
- Image Integration: Adding images with proper src and alt attributes
- Special Characters: Using HTML entities to display code examples
- HTML Attributes: Understanding how attributes and values work
Before You Begin:
- Open the StackBlitz template: HTML Fundamental
- Other alternative: you can download the source code template from Stackblitz Download Project button if you want to use IDE.
- The template already includes kitten.png and nemo.png images
- Follow the expected output shown in the image below
:bulb: Tip [Pro Tip] Open the expected output image in a separate tab so you can reference it while building your webpage. This will help you match the exact structure and formatting!
:warning: IMPORTANT: Before You Start
:warning: Critical Files - Do Not Delete! DO NOT DELETE the existing files in the template:
- Package files (package.json, package-lock.json)
- Image files (kitten.png, nemo.png)
- Any other files you didn't create
ONLY EDIT the index.html file. Deleting other files will break your project!
AI Prompt Suggestions
Code with AI: Need some project inspiration?
Prompts:
- "Give me some ideas for a simple webpage I can build"
- "What are some common elements used on a webpage?"
- "Generate HTML for a simple webpage about my favorite hobby"
Expected Output
Project Guidelines
Learning Content to Include
Your webpage should include the following text content about HTML structure:
Expected Webpage Content:
Understand the HTML Structure
Get familiar with HTML elements, HTML attributes and its values.
HTML element
- h1, h1, ... , h6 for heading
- Google out "HTML Special Character" and try to type the paragraph tag as shown below:
<p> </p>- img stand for image
- ul(unordered list) and ol(ordered list) with li as list item
HTML attributes and value
- img tag have a "src" attribute with the actual image name as its value
I know how to put images on my web page after this exercise
Note: This is the content your webpage should display. You'll need to convert this into proper HTML structure using headings, paragraphs, and lists.
Implementation Steps
Step One: Basic HTML Setup
- Open the StackBlitz template provided
- Change the title of the webpage to match the expected output
- Set up the basic HTML document structure
- [Hint: Use
<title>tag in the<head>section to change the browser tab title]
:bulb: Tip[Best Practice] Always start by setting up your document structure correctly:
html
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
:white_check_mark: Milestone 1 Complete: You have a working HTML document with the correct title!
Step 2: Create Heading Structure
- Create a main heading (h1) for "Understand the HTML Structure"
- Create a secondary heading (h2) for the content sections
- Follow the heading hierarchy shown in the expected output
- [Hint: Use
<h1>,<h2>, etc. for different heading levels]
:warning: Common Mistake Don't skip heading levels! Always use headings in order (h1 -> h2 -> h3). Never jump from h1 directly to h3 or h4.
:white_check_mark: Milestone 2 Complete: Your webpage has a clear heading hierarchy!
Step 3: Add Content Sections
- Create paragraphs for the explanatory text
- Use the provided text content about HTML elements and attributes
- Include information about headings, images, and lists
- [Hint: Use
<p>tags to wrap paragraph content]
:white_check_mark: Milestone 3 Complete: Your content sections are in place!
Step 4: Implement Lists
- Create an ordered list (ol) for the main HTML concepts
- Create unordered lists (ul) within each ordered list item as needed
- Include list items about headings, paragraphs, images, and lists
- [Hint: Use
<ol>for numbered lists and<ul>for bullet points]
:bulb: Tip[List Structure] Remember to nest your lists properly:
html
<ol>
<li>First item
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
</ol>
:white_check_mark: Milestone 4 Complete: Your lists are properly structured!
Step 5: Add Special Characters and Code Examples
- Use HTML special characters to display
<p>and</p>tags in text - Research "HTML Special Character" to find the correct codes
- Display the paragraph tag example:
<p> </p> - [Hint: Use
<for < and>for > to display HTML tags as text]
:warning: Special Characters Challenge This can be tricky! To display HTML tags as text (not code), you need to use:
<instead of<>instead of>Example:
<p> </p>will display as<p> </p>
:white_check_mark: Milestone 5 Complete: You can now display HTML code as text!
Step 6: Insert Images
- Add the kitten.png image to your webpage
- Add the nemo.png image to your webpage
- Use proper
srcattributes with correct image names - Include
altattributes for accessibility - [Hint: Use
<img src="imagename.png" alt="description">syntax]
:bulb: Tip[Image Best Practice] Always include meaningful alt text for your images:
html
<img src="kitten.png" alt="A cute kitten playing with yarn">
This helps with accessibility and SEO! :dart:
:white_check_mark: Milestone 6 Complete: Your images are displaying correctly!
Step 7: Final Content
- Add the concluding statement about learning to put images on webpages
- Ensure all content matches the expected output
- Test that images display correctly
:white_check_mark: Milestone 7 Complete: Your webpage is complete! Great job! :tada:
:mag: Debugging Tips
Having trouble? Here are common issues and solutions:
:bulb: Tip [Common Issues & Fixes]
- Images not showing?
- Check that the image filename matches exactly (including capitalization)
- Make sure you didn't delete the image files from the project
- Verify your
srcattribute has the correct path- Special characters showing as code?
- Double-check you're using
<and>(not<and>)- Make sure there are no extra spaces in your HTML entities
- Lists not formatting correctly?
- Ensure all
<li>tags are inside<ol>or<ul>tags- Check that nested lists are properly placed inside
<li>elements- Verify all tags are properly closed
- Page looks different from expected output?
- Compare your heading levels (h1, h2) with the expected output
- Check that all required content is included
- Make sure you're using the correct list types (ordered vs unordered)
:rocket: Extension Challenges
Ready to go beyond the basics? Try these optional challenges:
:information_source: Bonus Challenges
- Style Enhancement (Intermediate)
- Add inline CSS to make your headings colorful
- Change the font size of your paragraphs
- Add borders around your images
- Content Addition (Beginner)
- Add a third image to your webpage
- Create a nested list with 3 levels of depth
- Add more HTML special characters (like copyright (c) or trademark (TM))
- Structure Challenge (Advanced)
- Add a navigation menu at the top
- Create a footer with your name and date
- Use semantic HTML5 elements like
<header>,<main>, and<footer>- Accessibility Boost (Intermediate)
- Add descriptive
titleattributes to your images- Use proper heading hierarchy for screen readers
- Add a
langattribute to your<html>tag
These challenges will help you practice additional HTML skills and prepare you for future projects!
Project Submission
When you have completed your "HTML Fundamental Project", submit it using the link below:
:warning: Final Reminders:
- Only edit
index.html- Don't touch other files - Don't delete
package.jsonorpackage-lock.json- They're needed for the project to work
:bulb: Tip[Before You Submit] Take a moment to celebrate your achievement! :emoji: You've just built your first HTML webpage from scratch. Make sure to:
- Test your webpage and verify that all images and content display correctly
- Compare your output with the expected result one more time
- Feel proud of what you've accomplished!
Remember: Every expert web developer started exactly where you are now. Keep practicing, and you'll be amazed at what you can create!