Minimum Expectations:
Present text and images for your Main Content on index.html
Present 3 additional html pages with content and images displaying the use of CSS.
All the pages should have the same Nav bar at the top and link to each other.
Use all the structural HTML tags we practiced in earlier labs:
The main HTML structural tags are:
<header>
The <header> tag contains introductory content or navigational aids for the page or section. It typically includes the site logo, title, and main navigation menu.
<nav>
The <nav> tag defines a section containing navigation links. It is usually found within the <header> or immediately after it, containing the primary navigation menu for the website.
<main>
The <main> tag represents the main content area of the document. It should contain the unique content for that specific page, excluding content repeated across pages like headers, footers, or navigation menus.
<article>
The <article> tag represents a self-contained composition, like a blog post or news article, that can be independently redistributed or reused.
<section>
The <section> tag defines a thematic grouping of content, typically with a heading. It divides content into sections like chapters, headers, footers, or any other content grouping.
<aside>
The <aside> tag holds content tangentially related to the main content, like sidebars, inserts, or brief explanations.
<footer>
The <footer> tag contains information about the author, copyright details, related links, etc., for either the entire page or just the <article> or <section> it is enclosed within. These structural tags help organize the content on a web page in a semantic and accessible way, improving the overall structure and usability of the document.
Total Points: 100
**1. HTML Structure (20 points)**
- **Semantic HTML (10 points):**
- Excellent (10 points): Uses HTML5 semantic elements correctly and consistently (e.g., `<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`).
- Good (8 points): Uses semantic elements correctly, with minor errors.
- Satisfactory (6 points): Some use of semantic elements, but with notable errors.
- Needs Improvement (4 points): Minimal use of semantic elements.
- Unsatisfactory (0 points): No use of semantic elements.
- **Content Organization (10 points):**
- Excellent (10 points): Clear, logical structure; easy to navigate.
- Good (8 points): Clear structure, but minor navigational issues.
- Satisfactory (6 points): Basic structure is present but not fully intuitive.
- Needs Improvement (4 points): Disorganized structure.
- Unsatisfactory (0 points): No clear structure.
**2. CSS Styling (30 points)**
- **Visual Appeal and Consistency (10 points):**
- Excellent (10 points): Visually appealing, consistent theme throughout.
- Good (8 points): Visually appealing, mostly consistent theme.
- Satisfactory (6 points): Some visual appeal, with occasional inconsistency.
- Needs Improvement (4 points): Lacks visual appeal and consistency.
- Unsatisfactory (0 points): No visual appeal or consistency.
- **Layout with Grid/Flexbox (10 points):**
- Excellent (10 points): Effective use of CSS Grid or Flexbox for layout.
- Good (8 points): Good use of Grid/Flexbox with minor issues.
- Satisfactory (6 points): Basic use of Grid/Flexbox.
- Needs Improvement (4 points): Minimal use of Grid/Flexbox.
- Unsatisfactory (0 points): No use of Grid/Flexbox.
- **Responsive Design (10 points):**
- Excellent (10 points): Fully responsive design across various devices.
- Good (8 points): Mostly responsive, minor issues on some devices.
- Satisfactory (6 points): Some responsiveness, but significant issues.
- Needs Improvement (4 points): Minimal responsiveness.
- Unsatisfactory (0 points): Not responsive.
**3. JavaScript Interactivity (30 points)**
- **Form Validation (10 points):**
- Excellent (10 points): Fully functional and user-friendly form validation.
- Good (8 points): Functional form validation with minor issues.
- Satisfactory (6 points): Basic form validation present.
- Needs Improvement (4 points): Minimal form validation.
- Unsatisfactory (0 points): No form validation.
- **Dynamic Content Updates (10 points):**
- Excellent (10 points): Dynamic content updates work seamlessly.
- Good (8 points): Dynamic content updates with minor issues.
- Satisfactory (6 points): Basic dynamic content updates.
- Needs Improvement (4 points): Minimal dynamic content updates.
- Unsatisfactory (0 points): No dynamic content updates.
- **Event Handling (10 points):**
- Excellent (10 points): Effective and user-friendly event handling.
- Good (8 points): Good event handling with minor issues.
- Satisfactory (6 points): Basic event handling.
- Needs Improvement (4 points): Minimal event handling.
- Unsatisfactory (0 points): No event handling.
**4. Version Control and Deployment (20 points)**
- **Git Usage (10 points):**
- Excellent (10 points): Regular and meaningful commits with clear messages.
- Good (8 points): Regular commits with generally clear messages.
- Satisfactory (6 points): Some commits with basic messages.
- Needs Improvement (4 points): Minimal commits or unclear messages.
- Unsatisfactory (0 points): No use of Git for version control.
- **GitHub Pages Deployment (10 points):**
- Excellent (10 points): Website deployed and fully functional on GitHub Pages.
- Good (8 points): Website deployed with minor issues on GitHub Pages.
- Satisfactory (6 points): Website deployed with significant issues.
- Needs Improvement (4 points): Attempt to deploy, but non-functional.
- Unsatisfactory (0 points): No attempt to deploy on GitHub Pages.
**5. Overall Presentation (10 points)**
- **Clarity and Professionalism (10 points):**
- Excellent (10 points): Clean, professional presentation; easy to navigate and understand.
- Good (8 points): Clear and professional, with minor issues.
- Satisfactory (6 points): Understandable, but with some clarity issues.
- Needs Improvement (4 points): Lacks clarity and professionalism.
- Unsatisfactory (0 points): Unclear and unprofessional presentation.
---
### Summary of Points:
- **HTML Structure:** 20 points
- **CSS Styling:** 30 points
- **JavaScript Interactivity:** 30 points
- **Version Control and Deployment:** 20 points
- **Overall Presentation:** 10 points
Total: **100 points**
Please ensure your project meets these criteria and review the rubric before submission. This will help you maximize your score and demonstrate your skills in web development effectively. Good luck!