Share
Explore
s24 MO1003 Lab Assignment : Creating a Themed Website with HTML, CSS, and JavaScript
Grading Rubric for Themed Website Assignment
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!
Hand in:
You will upload your assets to GitHUB pages:
You will upload a text file with your GITHUB Pages url to Dropbox (Link will be provided)
Follow our Class Lab Practices:
Use Visual Studio Code.
Make the file assets as directed below.
Preamble: {Any of this content could be Quiz Questions}
Understanding the Roles of HTML, CSS, and JavaScript in Web Development
Before diving into this assignment, it is crucial to understand the distinct roles that HTML, CSS, and JavaScript play in the development of a web application. This knowledge will help you effectively utilize each technology to build a well-structured, visually appealing, and interactive website.
#### HTML (HyperText Markup Language)
**Purpose:** HTML is the backbone of any web page. It provides the basic structure and content of the website.
**Role in This Assignment:**
- **Structuring Content:** Use HTML to create the essential layout of your website, including headings, paragraphs, lists, images, links, and forms.
- **Semantic Markup:** Utilize HTML5 semantic elements (`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`, etc.) to enhance the readability and accessibility of your content.
- **Linking Resources:** Embed links to CSS and JavaScript files to integrate styling and interactivity into your web pages.
#### CSS (Cascading Style Sheets)
**Purpose:** CSS is used to control the presentation, layout, and visual design of a website.
**Role in This Assignment:**
- **Styling:** Apply CSS to make your website visually appealing with colors, fonts, and spacing.
- **Layout Management:** Use CSS Grid or Flexbox to create a responsive layout that adjusts seamlessly to different screen sizes.
- **Theming:** Develop a consistent and cohesive theme that aligns with the chosen topic of your website.
#### JavaScript
**Purpose:** JavaScript is a programming language used to create dynamic and interactive elements on a web page.
**Role in This Assignment:**
- **Interactivity:** Implement JavaScript to enhance user experience through form validation, content updates, and event handling (e.g., button clicks, form submissions).
- **Dynamic Content:** Use JavaScript to manipulate the Document Object Model (DOM) and update the content without reloading the page.
- **Enhancing Usability:** Write scripts that respond to user inputs and actions, making your website more engaging and functional.
### Summary
In this assignment, you will leverage the power of HTML to structure your website, CSS to style and lay out your pages, and JavaScript to add interactivity and dynamic behavior. By integrating these technologies, you will create a complete, functional, and visually appealing web application. Remember, HTML provides the foundation, CSS decorates it, and JavaScript brings it to life. Good luck, and enjoy the process of building your themed website!
Objective:
The goal of this assignment is to design and develop a simple website themed on a topic of interest to you, using HTML, CSS, and client-side JavaScript.
You will practice structuring a webpage, styling it with CSS, and adding interactivity with JavaScript.
The final project will be uploaded to a Git repository, and you will present it using GitHub Pages.
Suggested Themes:
You can choose from the following themes or create a website based on your own interests:
1. **Personal Portfolio**
2. **Travel Blog**
3. **Recipe Book**
4. **Online Store**
5. **Sports Fan Page**
6. **Music Album Reviews**
#### Requirements:
1. **HTML Structure:**
- A clear, semantic structure.
- At least three different pages (e.g., Home, About, Contact).
- Use of HTML5 elements (`<header>`, `<nav>`, `<section>`, `<article>`, `<footer>`, etc.).
2. **CSS Styling:**
- External CSS file.
- Consistent and visually appealing theme.
- Use of CSS Grid or Flexbox for layout.
- Responsive design (media queries).
3. **JavaScript Interactivity:**
- Form validation (e.g., Contact form).
- Dynamic content updates (e.g., adding items to a list, filtering content).
- Event handling (e.g., button clicks, form submissions).
4. **Version Control and Deployment:**
- Use Git for version control.
- Upload the project to a GitHub repository.
- Deploy the website using GitHub Pages.
Workflow Steps:
1. Project Setup:
- Create a new directory for your project.
- Initialize a Git repository.
- Create the initial structure:
```bash
mkdir project-name
cd project-name
git init
mkdir css js images
make files:
index.html
css/style.css
js/main.js
```
2. HTML Structure:
- Create `index.html` and add the basic HTML structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Themed Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Main Content</h2>
<p>This is where your main content goes.</p>
</section>
</main>
<footer>
<p>© 2024 My Themed Website</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
```
3. CSS Styling:
- Add styles in `css/style.css` to enhance the look of your website:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 2rem;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 0.5rem 0;
}
}
```
4. JavaScript Interactivity:
- Add JavaScript in `js/main.js` to handle form validation and interactivity:
```javascript
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
function validateForm() {
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
const message = document.querySelector('#message').value;
if (name === '' || email === '' || message === '') {
alert('All fields are required.');
} else {
alert('Form submitted successfully!');
form.reset();
}
}
});
```
5. Additional Pages:
- Create additional pages (`about.html`, `contact.html`) with similar structure to `index.html`.
- Link them appropriately in the navigation.
6. Version Control and Deployment:
- Commit your changes:
```bash
git add .
git commit -m "Initial commit"
```
- Push to GitHub:
```bash
git remote add origin <your-github-repo-url>
git push -u origin main
```
- Deploy using GitHub Pages:
- Go to your repository on GitHub.
- Click on `Settings` > `Pages`.
- Select the source branch (usually `main`).
- Save and access your website at `https://<your-github-username>.github.io/<your-repo-name>/`.
Submission:
Following the instructions in the Lab Workbook linked at the top of this assignment:
- Submit the GitHub repository URL.
- Ensure the GitHub Pages URL is working and accessible.
#### Example Solution Code:
**`index.html`:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Themed Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Main Content</h2>
<p>This is where your main content goes.</p>
</section>
</main>
<footer>
<p>© 2024 My Themed Website</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
```
**`css/style.css`:**
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 1rem;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 2rem;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 0.5rem 0;
}
}
```
**`js/main.js`:**
```javascript
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
validateForm();
});
function validateForm() {
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
const message = document.querySelector('#message').value;
if (name === '' || email === '' || message === '') {
alert('All fields are required.');
} else {
alert('Form submitted successfully!');
form.reset();
}
}
});
```
By following these steps, you will create a well-structured, styled, and interactive website. Good luck, and enjoy the process of bringing your ideas to life!
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.