Assessment 4: Two pages Project (Your creative space) Solution

Due: see the course outline for a specific date




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:



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).



The final product must have at least five sections (tag blocks) including header and footer.



At least one image, audio, and video included in the final project.



Fonts must be specified. You can use any fonts, but you must show it in your CSS code.



The website looks fine on two size screens. Here is the list you can choose from:



Mobile: minimum width is 600px.



Tables: minimum width is 768px.



Desktop: minimum width is 992px or 1200px.



Your code should work and look fine on Chrome and Firefox browsers.



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 1 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)




o images (subfolder)







o CSS (subfolder)







o media (subfolder)







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-amac-2260188



Free file compressor application for Mac: https://theunarchiver.com/



How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/theacademy/save-word-doc-pdf/ .



Page 2 of 6







Please refer to the rubric at the end of this document for evaluation details.




Submit




Name your folder yourname_project.



Right-click on the folder and choose ‘Send to - Compressed (zipped) folder.’



Upload the zipped folder to the two-page project Dropbox


















Project design and development plan (optional):




Week 4:



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.



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.



Week 5,6,7:



Start coding your layout for the main screen size you picked. Start with header and footer, then work on the body content.



Code the body content.



Check your code from errors and validate it



Week 8,9:



Make your layout responsive to fit the second screen size you picked.



Check on errors and validate your code. Then wrap up your project.






















































Page 3 of 6

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/


The web site has an














/5
Design/


exceptionally attractive


The web site has an


The web site has a
The web site has a










and usable layout. It is


attractive and usable


usable layout but
cluttered look and is










easy to locate all of the


layout. It is easy to


may appear busy or
confusing. It is often










important elements.


locate all of the


boring. It is easy to
difficult to locate










White space, graphic


important elements.


locate most of the
important elements.










elements and/or








important












alignment are used








elements.












effectively to organize
























material.


















Coding/


There are no errors in


There are 1-3 coding


There are 4-5
There are more than 6
/5
Markup


the XHTML, CSS or


errors on the site as


coding errors on
coding errors on the site




Validation


other coding errors on


found by me or an


the site as found by
as found by me or an










the site as found by


online validator.


me or an online
online validator.










me or an online








validator.












validator.


















Cascading


Student uses a style


Student uses a style


Student uses a
Student fails to use a
/5
Style Sheet


sheet to define


sheet, however there


style sheet;
style sheet within the










attributes (along with


are some


however, it is not
pages of the web site.










some inline style),


inconsistencies in


consistent on all












which makes all pages


relation to the styles


pages, which












attractive looking and


on each page in the


disrupts the












consistent.


web site.


consistency of
























pages within the
























web site.






Navigation


Links for navigation


Links for navigation


Links for navigation
Some links do not take
/5






are clearly labelled,


are clearly labelled,


are the reader
the reader to the










consistently placed,


allow the reader to


where expected,
sites/pages described.










allow the reader to


easily move from


but some needed
A user typically feels










easily move from a


page to page and


links seem to be
lost.










page to related pages


internal links take the


missing. A user












and take reader where


reader where he


sometimes gets












he expects to go. A


expects to go. A user


lost.












user does not become


rarely becomes lost.


















lost.


















Responsive


Layout and content


Layout and content


Layout and content
Layout and content are
/5






resize to fit the page


resize to fit the page


resize but does not
not resizing and does










width. There are no


width. There are


fit the page width.
not fit the page width.










overflow issues and


overflow issues and


There are a lot of
Elements overflow and










the page element


some of the page


overflow issues and
page elements do not










stayed position as


element stayed


a lot of the page
stay on position as










required. Images and


position as required.


element stayed
required. Images and










fonts are resized as


Some of the images


position as
fonts are not resized as










their containers.


and fonts are resized


required. Most of
their containers.
















as their containers.


the images and
























fonts are resized as
























their containers.




























TOTAL
/25





































4

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:



Images:

Unsplash: https://unsplash.com/



Gratisography: https://gratisography.com/



Pixabay: https://pixabay.com/



5

Lifeofpix: https://www.lifeofpix.com/



Videos:

Lifeofvids: https://lifeofvids.com/



Pexels: https://videos.pexels.com/



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/




6