Course Title: Web Development
Course Code: IRM1005 / ITEC1005
Semester: Fall 2023
Date: 2:00 PM on December 13, 2023
Assessment: This assignment is worth 20% of your final grade and marked out of 100.
- Build a one page website that looks like the screenshots found below and works in both mobile and desktop modes.
- Commit your code to your repository in GitHub.
- Turn on GitHub Pages in your repository to host your web page online.
- Description
- Content and design requirements
- Desired outcome
- Acceptance criteria
- Grading rubric
- Late submissions
- Checklist
- Submitting your work
- Frequently Asked Questions (FAQ)
- Helpful Links
This final exam will assess both your ability to structure content with semantic HTML tags, format text, include images and links, and apply avdanced CSS concepts such as Grid and Flex box.
Students will also be assessed on their ability to commit their code to GitHub and activate the GitHub pages service.
Create and host a web page that meets the following requirements:
- Build and style one (1) web page with a file name
index.html - Web page must render well in both desktop and mobile mode (only two viewports)
CSSmust be stored in a seperate file and not be embedded in yourHTML- Web page must meet the content and design requirements identified within this document
- Web page must have valid and compliant HTML and CSS as assessed by the
W3C Validator - You must use the GitHub Repository generated by GitHub Classrooms for the final exam
- Web page must be hosted using GitHub Pages service
- Web page must be reachable by a browser on the public internet
You are building a one page website for Amy, an aspiring web developer. You are to use HTML and CSS that works in both desktop and mobile mode.
The design you are building can be found below. For your convenience, both mobile and desktop screenshots have been provided.
Please review these screenshots thoroughly while building your web page.
All of the images and content have been provided to you.
The images can be found in the ./images folder, and the text content for the page has been provided for you in the index.html file.
You are absolutely allowed to modify the colours, image, sizing, spacing, and design elements (like background colour, border radius) to acheive your custom design. Your product card should look like this, but it deosn't have to be exactly like this.
You are also permitted to add your own unique design element such as a link hover state, background gradient, shadow effect, or other unique design element.
- Publish your code on GitHub using the GitHub classrooms generated repository
- Use the GitHub Pages service to host your web page
- Ensure you have a license file in your repository (recommend MIT license) (already provided)
The creation and posting of this web page is worth 20% of your final grade and marked out of 100.
| Criteria | Total Marks | How we define excellence |
|---|---|---|
| Overall code quality | 10% | The HTML code submitted is well formed, and structured. Appropriate semantic elements are used throughout the document. Correct use of headings <h1-h6> and heading structure. The web page has the appropriate meta tags in the <head> to set the charset and viewport values. The CSS code submitted is well formed, and implements the Web page as specified in the content and design requirements. |
| Header and Footer | 10% | The Header and Footer areas are implemented per specification |
| Hero | 10% | The Hero section is implemented per specification |
| Skills | 10% | The Skills section is implemented per specification |
| About | 10% | The About section is implemented per specification |
| My Work | 10% | The My Work section is implemented per specification |
| CTA | 10% | The Call to action section is implemented per specification |
| Moment of charm | 10% | Unique design elements have been added to elevate the product card. For example, a background gradient, box shadow, hover state for link, border radius (or lack thereof), changes to spacing, or any unique design elements. |
| W3C Compliance | 10% | There are no validation errors found in the code for either the HTML or CSS. |
| GitHub submission | 10% | The HTML content is added to the index.html file and CSS is added to the style.css file. The repository has both the assignment README.md file and a LICENSE file that contains the MIT license. GitHub Pages services has been correctly activated. |
- If you miss the final exam you may apply for a deferred final exam
To help with your submission, make sure that you have reviewed the following items
- Your code is committed and pushed to the GitHub repo that GitHub Classrooms created for you
- The web page fulfills the minimum content and design requirements
- The web page works in both mobile and desktop views
- GitHub Pages is activated for your repo and your web page is live and accessible.
- The web page passes W3C validation for both
HTMLandCSS
Your work must be submitted to your Assignment GitHub repository, which is automatically generated when you accept the assignment through GitHub Classrooms.
When you complete your work, commit and push your code to your repository. There is nothing else that you need to do to mark your assignment as completed.
There are a few ways that you can submit your work to your Assignment repository:
- Clone your GitHub repository, work off of your local machine, and commit your changes through VSCode (recommended)
- Use the GitHub code editor web interface to paste your completed code right into GitHub
- Use a developer container such as GitHub Code Spaces, StackBlitz or replit
- What type of content should I include in the page that I am building?
- The content has already been provided for you. You are permitted to add or slightly modify the content if your design warrants it.
- Does the web page have to work in both mobile and desktop
- Yes! You need to make your web page work in both desktop and mobile mode.
- Can I use my code from Assignment 01 or Tutorials
- Yes. Absolutely. You are permitted to use any code from any source. External sources (work that you didn't do) must be cited.
- Can I use trademarked or copywritten material on my page?
- Yes! As this is for educational purposes, all of the source is open, and no one is trying to sell their design or code you can absolutely use trademarked or copywritten material. Just add a comment in your code where you got the material.
- How do I cite my sources
- Just add a
HTMLcomments in yourindex.htmlfile and describe where you got the information from. If you use GitHub Copilot identify which lines in your files were generated and for ChatGPT make sure you include the prompt that you used.