Assignment 4 HTML & CSS Template
Content
In this assignment, you will create a local website on you computer using HTML and CSS. This assignment is to ensure that you have enough knowledge of both HTML and CSS to create a simple website.
You will start this assignment by watching Jake Wright’s video: Learn CSS in 12 minutes. You will then create a similar website following his instructions and guidance. Once you are familiar with his work and template, you will modify the parameters to convert your template into a more modern looking one.
Once you are satisified with the look and feel of the site, you will then populate the site by adding in at least 4 pages with images and other HTML features.
This assignment is graded and contributes partially to CA1’s percentages. You should keep a copy of this site in a compressed folder, or in its original format to show your understanding of HTML and CSS.
I have provided approximate timings for you so that you do NOT spend all your time (doing something you like and neglecting other modules!)
| Time |
Task |
| 30 min |
Go through the course notes on HTML and CSS, follow the exercises on Mozilla |
| 30 min |
Watch Jake Wright’s video, duplicate his work to show that you can also create a similar site |
| 30 min |
Modify your site to the parameters below |
| 30 min |
Add at least 4 pages of content from prior class sessions |
Specifications
- Make a folder named “website” and save all files for this exercise there. You may need to create other folders e.g. images, documents etc for storage of data.
- Watch Jake Wright’s Video: Learn CSS in 12 minutes
- Sketch the template he creates on paper
- Create the base webpage
index.html and style.css.
- Check that you can create a similar webpage as in the video.
- Modify your HTML and CSS files to include the following:
- Change size of the website to 1200 pixels wide, making changes and accomodations to the sidebars and main content areas.
- Change all the fonts to Source Code Pro which can be found in Google Fonts. You may need to download this font and install it on your computer. Make the alternate font - Sans Serif.
- Change the color scheme of the page to have a single-colour scheme (e.g. shades of blue/green/grey or a colour befitting a technical site). The scheme should be consistent and should apply to differnt sections of your page.
- Change the copyright message to indicate your name/year
- Include the following pages:
- Main page should have the “EP1000 Digital Fabrication & Prototyping” title. Change other sections to reflact the topic. Write one or two paragraphs to introduce this topic and why this site was created.
- About page should introduce the author (you). You should include
- a selfie
- information about yourself (Use firstname and an intial for your lastname), the approximate location where you live, your course and year of study.
- your photo and information should be displayed side-by-side (use a table)
- write one or two paragraphs why you chose this module and what you expect to learn.
- Template which shows how you developed this template. It should serve as a how-to page to teach other students how you created this template from scratch.
- Project Page which gives your readers what you intend to do for your module project. The page should include
- a project title
- what you intend to build
- a sketch showing the prototype (remember Assignment 3?) and/or a cardboard prototype
- Sites you have researched on a similar project
- What you are going to do differently
- Any images or reference documents (e.g. PDF files) must be placed in their own folder e.g. Pictures, Docs and should not be mixed in with the HTML code
- Test your site, localy. When you are satisified, keep a compressed file (zip) of the folder so that you can include it in your submissions.
References
- This assessment is graded and is part of CA1
- You will be instructed where to place the compressed file (should be named “YOUR-ID_website.zip”) for marking.
October 2020