chevron_left View All Deliverables

Project 1

Two Page Site

Create a two page website building upon the patterns created in our in-class activities and assignments.

Submission

Push your completed deliverable to GitHub, invite professor, and submit link on BrightSpace.

Due: Sun Nov 5, 2023

Starter Files

open_in_new

Content & Assets

Instructions

For this assignment, we will be creating a two page website using the provided content (opens new window). Take time to thoroughly review the content, comments, and instructions in the document. There are notes in brackets ( ) to help identify if a specific element or asset should be used. There are also notes in square brackets [- Start About Section -] to help identify different sections of the page and how the content should be organized.

When reviewing the content, also consider if any of the patterns we have previously created in the in-class activities or assignments can be used with the content (hint hint: a lot of the content is specifically intended to fit with certain patterns). At the same time consider if any adjustments need to be made to the existing patterns to fit the content. For example: there is a bit more footer content in this project than in the IC 05 - Basic Footer, however it is a good starting off point. Review the code and see what can be added/adapted to incorporate the extra links for this project.

Not all of the content will fit into one of the patterns we have already created, so be prepared to create new unique patterns and code. Also, the patterns we have created so far are all relatively simple in their design. You are encouraged to make design changes to improve on them and provide more stylistic design based on the content.

Example Site

Watch this short video where I give you a tour of a sample site.

Please note

You should be creating your own colour scheme and updated design. You should not be trying to copy my example exactly. Make it your own!

Assignment Requirements

• HTML should have proper semantics
• Use BEM (opens new window) for class names in combination with basic utility classes
• Website must be fully responsive with mobile first media queries
• Use CSS Variables for colors and fonts (you can define more variables if you like)
• Add a new Google Font (opens new window)
• Create a new colour scheme
• Create a new private GitHub repository
  • Name the repository mad9013-project-two-page-site
  • invite Professor Adam
  • make live with GitHub Pages

Making your site live on GitHub Pages

File Structure

Your files should be named and reflect the structure below:

• ./images
  • Whatever images you include in your project
• ./css/main.css
• blog-post.html
• index.html

When reusing code from previous deliverables, combine all of the CSS into a single main.css file. Don't forget to include the CSS Reset!

Frequently Asked Questions

Q: Can I use Javascript?

You can, however it is not required as this is an HTML/CSS only course. Using JS will not improve your grade. However, it you try to add JS and it causes bugs that negatively impact your website, it may reduce your grade.

Q: Can I use different photos or add more?

Yes, with exceptions.

• You must use the provided logo in the header/footer and the icons in the cards on the home page.
• You must include a photo in the banner and About sections on the home page. You can use different photos, but there needs to be photos there.

Other than that you are free to change the photos and/or add and remove.

Q: Can I add some extra design flair that isn't reflected in the content document?

Definitely! However, before adding anything extra, make sure all of the key assignment requirements are done first. But once the basics are covered, feel free to experiment and push the agenda. Some ideas:

• Add a hamburger nav on mobile
• Create some pull quotes in the blog post

Things to Keep In Mind

• Pay close attention to the content document. There are numerous clues for how the site should be built and what kinds of tags and headings should be used.
• It may seem that there is a tonne of content on the blog post page. But consider that the bulk of the article content will be built and displayed the same way, so once you figure out the basic design and code, filling out the rest will be really quick and easy.
• .container is your friend! Make sure when creating new patterns that you include containers and make them responsive.

Submission

Invite Professor Adam as a collaborator for your GitHub repository and submit a link to the GitHub repository on BrightSpace.