Explore

Web Application Project Requirements

Web Showcase Portfolio

Objective:

The purpose of this student project is to create a website using Visual Studio Code that showcases the student’s understanding and ability to apply HTML, client-side JavaScript, and CSS. The site should use all HTML5 elements where semantically appropriate and demonstrate good coding practices and design principles. The final website should be a personal portfolio that could be shown to potential employers or clients.

Requirements:

Use of HTML Elements: The website must use each HTML5 element at least once where semantically appropriate (e.g., <header>, <footer>, <article>, <section>, <nav>, <aside>, <figure>, <figcaption>, <main>, and form elements like <input>, <label>, <fieldset>, <legend>, <select>, <textarea>, <button>, etc.).

JavaScript Interactivity: At least three client-side JavaScript features must be implemented (e.g., a form validation, image carousel, a to-do list, interactive navigation).

CSS Styling: External CSS should be used to style the site, showcasing at least five advanced selectors, and use of flexbox or grid layout systems. The website must also be responsive and work on both desktop and mobile devices.

Code Commenting: All HTML, CSS, and JavaScript files must be well-commented.

Version Control: Students must use Git for version control and regularly commit changes to a GitHub repository.

ReadMe File: Create a README.md file in the repository that explains the project, how to run it, and lists all the HTML elements used.

Sample Code Snippet:

<!DOCTYPE html>

<head>

<title>My Portfolio</title>

</head>

<body>

<h1>Welcome to My Web Portfolio</h1>

<nav>

<ul>

<li><a href="#about">About Me</a></li>

<li><a href="#projects">Projects</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<h2>About Me</h2>

<p>This is a section about myself.</p>

</section>

</main>

</footer>

</body>

</html>

/* styles.css */

body { font-family: 'Arial', sans-serif; }

header { background: #333; color: white; padding: 10px 0; }

nav ul { display: flex; list-style: none; }

nav ul li { margin-right: 20px; }

nav ul li a { color: white; text-decoration: none; }

/* More styles */

// script.js

document.addEventListener('DOMContentLoaded', () => {

// JavaScript interactivity here

});

Grading Rubric:

| Criteria | Excellent (A) | Good (B) | Satisfactory (C) | Needs Improvement (D-F) | |----------|---------------|----------|------------------|-------------------------| | HTML Use | Uses > 90% of HTML5 elements correctly | Uses 70-89% of HTML5 elements correctly | Uses 50-69% of HTML5 elements correctly | Uses < 50% of HTML5 elements correctly | | JavaScript Features | Implements > 3 complex interactive features | Implements 3 interactive features | Implements 2 interactive features | Implements 0-1 interactive features | | CSS Styling | Has a consistent, responsive design, with advanced CSS usage | Has a good design, with some advanced CSS usage | Design is satisfactory, with basic CSS usage | Lacks consistent design and CSS is poorly used | | Code Commenting | Code is thoroughly commented and easy to understand | Code is generally commented and understandable | Code has some commenting, but parts are unclear | Code has minimal or no comments, making it hard to follow | | Version Control | > 10 meaningful commits with clear messages; No issues with repo organization | 5-10 meaningful commits; Minor issues with repo organization | 3-5 commits; Some issues with repo organization | < 3 commits; Poor repo organization | | ReadMe File | Informative, well-organized, includes all elements | Good, but missing some information or elements | Basic information included, poorly organized | Incomplete, lacks information, no listing of elements used |

Submission Instructions:

Create a new repository on GitHub to host your portfolio.

Develop your portfolio website locally using Visual Studio Code.

Commit and push your changes regularly to GitHub.

Make sure your repository is public and contains a README.md file with project details.

Submit the URL of your GitHub repository by the project deadline.

Notes:

Originality is encouraged—students should strive to make their portfolios unique.

Ensure cross-browser compatibility for Chrome, Firefox, and Safari.

Code should be clean, organized, and adhere to best practices.

This project will not only serve as a technical exercise but will also form part of your professional portfolio that you can share with potential employers. All work should be your own, and any external resources must be appropriately credited.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.