Description
In this project, you will practice how to build a website or product from scratch and learn steps that will
help to turn an idea to an actual web page.
You can start working on your project from week 4 to week 10. Build your project part by part starting
from top to bottom (depends on a page outline). Anyway, the project should not exceed two pages. Feel
free to add more pages, but only two pages will be graded. The project simply is you come up with an
idea and code it. However, you must make sure your project meets the project requirements.
✓ Requirements:
1. The design should be organized, and your code is clear. Crumble, or broken code will be
rewarded with 0 (The broken system is a code that does not show a visual result or output).
2. The final product must have at least five sections (tag blocks) including header and footer.
3. At least one image, audio, and video included in the final project.
4. Fonts must be specified. You can use any fonts, but you must show it in your CSS code.
5. The website looks fine on two size screens. Here is the list you can choose from:
a. Mobile: minimum width is 600px.
b. Tables: minimum width is 768px.
c. Desktop: minimum width is 992px or 1200px.
6. Your code should work and look fine on Chrome and Firefox browsers.
7. You should design at least two pages that look consistent. That means they should have the same
colour and fonts style.
✓ Instructions (Optional but recommended)
o Step one: Set up a project folder:
It is a good idea to create a folder for this project. The HTML document “.html” should be in the root
folder (the main project folder). For extra resources such as images, create a subfolder called
Page 2 of 6
“images,” and for the style sheet files called it “class” or “style_sheet” …etc. Your final project folder
tree can look like this:
course_project (root/main folder)
images (subfolder)
CSS (subfolder)
media (subfolder)
o fonts (subfolder)
o Step two: create a page layout using HTML:
Now, you need to figure out how to structure the HTML page layout. Build the layout besides your
design. Best way to start a layout is:
– First, write the main tags. Also separate your code using comments when creating a section,
block or item/elements.
– Second, work in each section or item/element (header, middle, footer). Look closely at each
element structure.
o Step three: style and format HTML layout:
Now, you need to use CSS to style your HTML layout. Go back to your design details and translate
them to CSS code. Consider CSS properties and their values for each HTML elements.
o Step four: check code errors and validate your code:
Now, you need to check errors on your code.
– First, check syntax errors, if there is any, fix them.
– Second, check run-time errors, if there is any, fix them.
– Third, look if you have achieved the same result/output of this project, if not. Identify where is the
problem for example, if the layout is not on the same order as required, check your HTML code
first, then check your CSS code especially the position and display properties. If you have tried
everything and still not getting a good result, please feel free to email me.
– Validate your HTML code first, then Validate your CSS code. If you be able to get the validation
icons, please include them on your final HTML product.
o Step Five: Wrap up your project:
Now, check all project folders and files, make sure they all open fine. Next, zip your main/root folder
and only send that zip folder. Here are some links that may help with file formatting:
• How to zip a file in Windows 10: https://www.laptopmag.com/articles/how-to-zip-files-windows-10
• Free file compressor application for Windows: http://www.7-zip.org/download.html
• How to zip a file in Mac: https://www.lifewire.com/how-to-zip-and-unzip-files-and-folders-on-amac2260188
• Free file compressor application for Mac: https://theunarchiver.com/
• How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/theacademy/saveword-doc-pdf/ .
o
o
o
Page 3 of 6
Please refer to the rubric at the end of this document for evaluation details.
Submit
1. Name your folder yourname_project.
2. Right-click on the folder and choose ‘Send to -> Compressed (zipped) folder.’
3. Upload the zipped folder to the two-page project Dropbox
Project design and development plan (optional):
1. Week 4:
a. Brainstorm and build an idea or find a topic. If you need help, check the attached file called
“Web design brief document.pdf.” I would recommend that you start by writing everything
come to your mind on a list. Then review the list and only keep things that essential to
deliver your idea.
b. Sketch and collect content materials, e.g. images, media, icons… etc. Start by sketching
your idea on paper before start designing. I would recommend that you start with a basic
or general sketching structure. Keep on your mind to sketch a structure based on the
materials you have collected. So, the content would fit into the structure well. I would
advise you, never start coding without having a defined design of your idea. Once you
finalized your sketching, you can design it in detail using HTML and CSS.
2. Week 5,6,7:
a. Start coding your layout for the main screen size you picked. Start with header and footer,
then work on the body content.
b. Code the body content.
c. Check your code from errors and validate it
3. Week 8,9:
a. Make your layout responsive to fit the second screen size you picked.
b. Check on errors and validate your code. Then wrap up your project 😊.
4
Evaluation
This assessment is graded out of 25 points and will be evaluated using the following rubric. Learners may
receive partial scores or zero for unacceptable work.
Excellent: 5 point Good: 3 point Fair: 1 point Poor: 0 point Score
Layout/
Design/
The web site has an
exceptionally attractive
and usable layout. It is
easy to locate all of the
important elements.
White space, graphic
elements and/or
alignment are used
effectively to organize
material.
The web site has an
attractive and usable
layout. It is easy to
locate all of the
important elements.
The web site has a
usable layout but
may appear busy or
boring. It is easy to
locate most of the
important
elements.
The web site has a
cluttered look and is
confusing. It is often
difficult to locate
important elements.
/5
Coding/
Markup
Validation
There are no errors in
the XHTML, CSS or
other coding errors on
the site as found by
me or an online
validator.
There are 1-3 coding
errors on the site as
found by me or an
online validator.
There are 4-5
coding errors on
the site as found by
me or an online
validator.
There are more than 6
coding errors on the site
as found by me or an
online validator.
/5
Cascading
Style Sheet
Student uses a style
sheet to define
attributes (along with
some inline style),
which makes all pages
attractive looking and
consistent.
Student uses a style
sheet, however there
are some
inconsistencies in
relation to the styles
on each page in the
web site.
Student uses a
style sheet;
however, it is not
consistent on all
pages, which
disrupts the
consistency of
pages within the
web site.
Student fails to use a
style sheet within the
pages of the web site.
/5
Navigation Links for navigation
are clearly labelled,
consistently placed,
allow the reader to
easily move from a
page to related pages
and take reader where
he expects to go. A
user does not become
lost.
Links for navigation
are clearly labelled,
allow the reader to
easily move from
page to page and
internal links take the
reader where he
expects to go. A user
rarely becomes lost.
Links for navigation
are the reader
where expected,
but some needed
links seem to be
missing. A user
sometimes gets
lost.
Some links do not take
the reader to the
sites/pages described.
A user typically feels
lost.
/5
Responsive Layout and content
resize to fit the page
width. There are no
overflow issues and
the page element
stayed position as
required. Images and
fonts are resized as
their containers.
Layout and content
resize to fit the page
width. There are
overflow issues and
some of the page
element stayed
position as required.
Some of the images
and fonts are resized
as their containers.
Layout and content
resize but does not
fit the page width.
There are a lot of
overflow issues and
a lot of the page
element stayed
position as
required. Most of
the images and
fonts are resized as
their containers.
Layout and content are
not resizing and does
not fit the page width.
Elements overflow and
page elements do not
stay on position as
required. Images and
fonts are not resized as
their containers.
/5
TOTAL /25
5
✓ An example of a website:
✓ List of software you may need to complete the project:
o Sketching:
✓ Pencil (simple): https://pencil.evolus.vn/
✓ Gimp: https://pencil.evolus.vn/
✓ MS Office
✓ Google Draw (Online)
o Free text and code editor:
✓ Brackets: http://brackets.io/
✓ OpenOffice: http://www.openoffice.org/
✓ Google document (Online)
o Online file management:
✓ Google drive: https://www.google.ca/drive/
✓ One drive: https://onedrive.live.com/about/en-ca/
✓ Dropbox: https://www.dropbox.com/
✓ Free resources:
o Images:
✓ Unsplash: https://unsplash.com/
✓ Gratisography: https://gratisography.com/
✓ Pixabay: https://pixabay.com/
6
✓ Lifeofpix: https://www.lifeofpix.com/
o Videos:
✓ Lifeofvids: https://lifeofvids.com/
✓ Pexels: https://videos.pexels.com/
o Audio:
✓ Videvo: https://www.videvo.net/royalty-free-music/
o Icons
✓ icons8 (web friendly): https://icons8.com/
✓ Font awesome (web friendly): https://fontawesome.com/icons?from=io
✓ Flaticons: https://flaticons.net/
o Fake text:
✓ Lipsum: https://www.lipsum.com/
o Fonts:
✓ Google fonts: https://fonts.google.com/
✓ Tips: Tags cheat sheet. Feel free to use any tag that is not listed below:
To learn more about any tag, search W3C website.
https://www.w3schools.com/tags/
To learn more about any CSS property, search W3C website:
https://www.w3schools.com/cssref/
