Project 01
Basic Webpage
Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.
Overview
This project focuses on HTML fundamentals and proper content organization. The goal is to create a clear, coherent, well-structured webpage that communicates information effectively.
Considerations
- Use semantic HTML elements to structure content correctly.
- Organize content logically with headings and paragraphs.
- Consider readability through font choices, alignment, and spacing.
- Maintain a consistent design and layout.
- Keep project files organized in a structured folder system.
Milestones
Step 1
Plan
Choose a page idea, gather text and images, and sketch the content hierarchy.
Step 2
Structure
Build the HTML with headings, paragraphs, lists, links, and image markup.
Step 3
Style
Add basic external CSS that improves readability, spacing, and consistency.
Step 4
Verify
Check file organization, links, image paths, alt text, and browser output.
Project Requirements
Headings and paragraphs
- Include at least three headings: h1, h2, and h3.
- Use paragraphs to provide content related to each heading.
Lists
- Include one ordered list with at least three items.
- Include one unordered list with at least three items.
Links
- Include a link to an external website or another page in your own site.
- External links should open in a new tab or window.
Images
- Include one image using the img element.
- Provide appropriate alt text for accessibility.
Basic styling
- Use an external stylesheet if you apply CSS.
- Styling may include font colors, background colors, or text alignment.
Starter Kit
Start with the right files.
A minimal HTML and CSS starter for Project 1 with folders, comments, and required content placeholders.
Submission Guidelines
- Organize files into a dedicated project folder with a clear naming convention.
- Include an index.html file as the main webpage.
- Place images in a subfolder inside the project directory.
Before You Submit
- I can explain the goal of the project and the design choices I made.
- I checked the work in the browser, not only in the editor.
- I verified links, images, responsive behavior, and accessibility basics.
- I committed the final version and can provide the repository or public URL when required.
Grading Criteria
- Proper use of semantic HTML elements.
- Logical organization with headings and paragraphs.
- Correct implementation of lists and links.
- Useful alt text for images.
- Bonus consideration for effective basic CSS styling.
- Clean, well-structured project folder.
Rubric
Use these quality levels to understand what stronger work looks like without tying the brief to a specific point scale.
HTML structure
- Strong
- Uses semantic elements and a clear heading hierarchy that makes the page easy to understand.
- Meets
- Includes required HTML elements with mostly logical structure.
- Needs Work
- Relies on unclear structure, missing headings, or incorrect element use.
Content organization
- Strong
- Content is organized into readable sections that communicate a clear topic or purpose.
- Meets
- Content is present and mostly organized with headings and paragraphs.
- Needs Work
- Content feels disconnected, hard to scan, or unsupported by headings.
Links and images
- Strong
- Links work, external links behave appropriately, images load, and alt text is useful.
- Meets
- Required links and images are present with minor issues.
- Needs Work
- Links or images are broken, missing, or inaccessible.
File management
- Strong
- Files are named clearly and organized in a project folder with sensible asset folders.
- Meets
- Files are present and mostly organized.
- Needs Work
- Files are scattered, confusingly named, or difficult to review.
Basic styling and readability
- Strong
- CSS choices improve readability, spacing, and consistency without distracting from the content.
- Meets
- Basic styling is present and generally readable.
- Needs Work
- Styling is missing, inconsistent, or makes the page harder to read.
Example Models
Use these low-fidelity models to calibrate what stronger, acceptable, and unfinished work can look like.
Strong Example
Recipe page with clear hierarchy
A focused page that uses headings, lists, an image, and links to guide the reader through one complete topic.
Possible Structure
- h1: Grandma's Chocolate Chip Cookies
- intro paragraph explaining the recipe
- h2: Ingredients with an unordered list
- h2: Instructions with an ordered list
- h3: Storage tips with a short paragraph
- image with useful alt text
- external baking resource link
What To Notice
- The topic is specific enough that all required elements feel connected.
- Lists are used because ingredients and steps naturally belong in lists.
- The image supports the content instead of acting as decoration only.
Meets Expectations
Travel page with most required pieces
A page that includes the required elements and mostly clear organization, but still needs refinement in hierarchy and readability.
Possible Structure
- h1: Weekend in New Orleans
- h2 sections for food, music, and places to visit
- paragraphs under each section
- one ordered list and one unordered list
- landmark image with alt text
- tourism website link
What To Notice
- The requirements are present and the topic is understandable.
- Some sections may need stronger paragraph writing or more consistent spacing.
- The page would improve with clearer visual hierarchy in CSS.
Needs Work
Disconnected content dump
A page that technically includes some required tags but does not yet communicate a clear topic or readable structure.
Possible Structure
- generic h1 like My Website
- headings that do not describe the content
- lists included only to satisfy the requirement
- image missing useful alt text
- broken or unclear link
- files saved in confusing locations
What To Notice
- The page needs a clearer topic before the HTML can feel organized.
- Required elements should support the content, not appear randomly.
- Broken paths and vague alt text make the work harder to review and use.
Idea Starters
Simple recipe page
- Recipe title
- Ingredients list
- Instructions list
- Image
- Related baking resource link
Travel blog post
- Trip title
- Getting there
- What to see
- Where to stay
- Landmark image
- Tourism link
Basic portfolio page
- Your name
- About me
- Projects
- Contact methods
- Optional image
- GitHub profile link