MAD9013

# Exercise List

# Overview

Over the course of the semester, we will be building a website broken down into small chunks as weekly exercises. Each week's exercise will add a piece to our site and will directly apply something learned in that week as well as adding a few extra pieces of content as review and further learning. All of the exercises will be completed within the same GitHub repository and submissions will be handled through specifically named commits that you will push to the repository. The specific instructions for creating the repository are handled in exercise Week 2A. The professor will review and mark the exercises by pulling directly from your repository, so it is important to keep your commits clean, organized, and properly named.

The content and assets required to complete the exercises can be found at create-starter-files-repository (opens new window).

# Exercise Website Common Feedback

Check out the common feedback page to review common pieces of feedback that many students are receiving to make sure your site is all good to go!

# Keep Your main.css File Organized!

You are going to be adding lot's of CSS code to your main.css file over the course of the semester, so it is important you keep your file organized with comments and dividers in the code. Here's an example:

/* ----- Button Styles ----- */

.button {
  background-color: #00f;
  color: #fff;
  padding: 1rem;
  border-radius: 0.25rem;
}

/* ----- Typography ----- */

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.75rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Notice the divider titles that clearly label what the next lines of code are for? Including these labels are a must to insure your code remains organized an readable. There will be a mark on each exercise for proper code organization, so make sure you keep things organized!

# Exercise Grading

Unless otherwise stated, each exercise will be marked out of 5 points based on the following marking scheme:

  • 3 Points: Code Quality - use of proper HTML semantics, CSS is implemented correctly as instructed in exercise, no bugs
  • 1 Point: Design - completed work matches design of provided screenshots
  • 1 Point: File Organization & Commits - files are well organized, proper use of comments, final commit message for exercise matches correct exercise

The exception are the Week 1A, Week 1B, and Week 2A exercises. These are 1 point pass or fail exercises.

# Extra Exercise Challenges

A couple of the exercises feature an extra challenge to include some of the provided javascript to add additional functionality to the exercises. Some examples include a toggle-able mobile navigation and expanding accordion FAQs. Completing these extra challenges and using the provided JS is not required and will not impact your grade on the exercise. They are included as an extra option to challenge yourself and to explore common patterns you will frequently use during your career.

# Frequently Asked Questions

Q: Do I have to use the exact content, photos, design, and colours that are provided or can I personalize my website?

A: You may personalize your website, but you must get it approved by the professor first. You may alter colours, content, and photos if you like. However, the layouts must remain the same as they are specifically designed to practice specific skills. Also keep in mind that changing colours may cause accessibility issues affecting your grade in Week 10: Colour Schemes & Accessibility.

Q: Can I make my site live on GH Pages?

A: Definitely! You are encouraged to do so. Keep in mind that your repository must be private, which can limit the use of GH Pages on free accounts. You will likely need to activate your GitHub Student Developer Pack (opens new window) in order to get full access.

Q: Will I be graded lower if I complete the Javascript free version of an exercise?

A: Nope! As this course does not involve any direct JS learning, it is not required as part of the exercises. The JS versions of some of the exercises are simply their as extra challenges and because they reflect common design patterns you will frequently use during your careers.

Q: Can I add my own JS?

A: Our focus in this course is on HTML & CSS and the exercises only require use of HTML & CSS to be completed. If you want to add your own JS you may, however it should just be bonus functionality, not required to function. Meaning, your website should still function with pure HTML & CSS.

# Week 1A: Install VSCode

Download and install VSCode (opens new window) on your MacBook Pro.

Then install the list of recommended extensions (opens new window).

Take a screenshot that shows your VSCode installed and the extensions panel open showing the installed extensions.

# Submission

WARNING

Due Monday September 13 @ 11:59pm

Open BS LMS and go to the Activities > Exercises page. Go to the VSCode exercise and submit the screenshot.

# Week 1B: GitHub & CodePen Account

Create a Github and a CodePen.io account using your @algonquinlive.com email address. Submit links to both accounts profile page. For example:

  • GitHub: https://github.com/coolexample123
  • CodePen: https://codepen.io/coolexample123

# Submission

WARNING

Due Monday September 13 @ 11:59pm

Open BS LMS and go to the Activities > Exercises page. Go to the GitHub & CodePen Accounts exercise and submit the URL.

# Week 2A: Create exercise repository and invite professor.

Create a private Github repository called mad9013-exercise-website and invite the professor arobillard as a collaborator. You can invite the professor via the Manage Access link on the left side of the settings page of the repository.

Add the following following file structure and starter files and commit the changes with the following commit message: Set up basic exercises starter files.

  • index.html
  • /css
    • main.css
  • /images
    • [...include all provided images from starter files in their folders]
  • /js (optional)
    • main.js (optional)

# Submission

WARNING

Due Friday September 17 @ 11:59pm

Invite the professor to be a collaborator and then paste a link to your repository in the Brightspace submission.

Helpful Resources & Guides

# Week 2B: HTML Content

Create the HTML markup for the home page based on the provided content and screenshots in the index.html file. Begin with setting up the basic <html>, <head>, and <body> tags to create the base structure of the web page, including the DOCTYPE, <title>, and appropriate <meta> tags (hint, Emmet can help with this !).

Next, focus on applying the semantically appropriate HTML tags for the content. Tags you will need to include are:

  • <header>
  • <main>
  • <footer>
  • <section>
  • <h1>
  • <h2>
  • <p>
  • <img>
  • <nav>
  • <ul>
  • <li>
  • <a>

Refer to the screenshot week-2b.png for how your site should look when completed. Note that some images and decorative elements seen in the final version are not included. Those will be added in later weeks when we reach the appropriate lessons. Also, there is a gap of white space between the two "Sign Up" links near the bottom. The logo-polished-white.svg logo should go there. Use the technique practiced in class for sketching out and labelling chunks of content with the proper HTML tags.

# Submission

WARNING

Due Friday September 17 @ 11:59pm

When you have completed the exercise, create a commit called HTML Content and push your changes to your exercise repository on Github.

# Week 3: Hero & Call-to-Action Banners

Let's style our banners! Recreate the Hero Banner (main page banner) and the Call-to-Action Banner (located just above the footer) as shown in the Week 3 screenshots. You will need to alter your HTML created in last week's exercise in order to complete assignment. Some things to keep in mind:

  • the image should be applied as a background image in CSS, not an <img> element
  • try and use CSS classes to reuse styles across your banners

# Submission

WARNING

Due Friday September 24 @ 11:59pm

When you have completed the exercise, create a commit called Hero & Call to Action Banners and push your changes to your exercise repository on Github.

# Week 4: Type Hierarchy

# Part 1

Create a new HTML page called stylesheet.html. Recreate the typographic hierarchy for the website based on the screenshot hierarchy.png from week-4 and using the following content:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. In blanditiis a dolor quasi illo eius pariatur saepe quibusdam quisquam mollitia libero amet neque velit nisi aspernatur, tempora eos. Modi, odio?
1
2
3
4
5
6
7

Head to type-scale.com (opens new window) to get the type scale values for the headings. Play around with the different scales until you find one that fits!

# Part 2

Complete the styling for the platform preview section on the home page based on the screenshots platform-preview-360px.png and platform-preview-1440px.png.

# Submission

WARNING

Due Friday October 1st @ 11:59pm

When you have completed the exercise, create a commit called Type Hierarchy and push your changes to your exercise repository on Github.

# Week 5: Responsive Design with Float

# Part 1

Style the header and footer so they match the screenshots found in week-5 at 360px and 1440px wide. For this exercise, you should use the float property. Although float is considered outdated, you will still run into it time to time, so you will need to know how it works. We will update the header and footer to flexbox in next week to better reflect modern best practices.

# Part 2

Update your type hierarchy to include responsive type scales.

  • Mobile: 1.125
  • Tablet (45em): 1.2
  • Desktop (60em): 1.25

# Submission

WARNING

Due Friday October 8 @ 11:59pm

When you have completed the exercise, create a commit called Responsive Design with Float and push your changes to your exercise repository on Github.

# Week 6: Responsive Design with Flexbox

# Part 1

Create the logo bar using flexbox so that it reflects the screenshots in week-6 at 360px, 600px, and 1440px. There are multiple ways you can complete this exercise, some require media queries, some don't. Experiment with different options!

# Part 2

Rework the header and footer code to use flexbox instead of float. You can make changes to both the HTML and CSS as needed. There should be no use of float leftover once the update is completed. Reference the screenshots at 360px and 1440px in the week-6 folder.

# Extra Challenge!

Use the provided JS to create a toggle-able navigation. In order to make it work, you will need to create styles for a closed and an open state. The JS will look for <a class="nav-toggle> to act as the toggle and will add an .open class to both the .nav-toggle and an element with the class of nav. Take a look at the screenshots labeled challenge-* in the week-6 folder!

Hint: you can probably find some clues in the in-class tutorial code for future weeks!

# Congrats! Your home page is now complete!

At this point your home page should be completed. Take a look at the home page screenshots to see how your site compares!

# Submission

WARNING

Due Friday October 15 @ 11:59pm

When you have completed the exercise, create a commit called Responsive Design with Flexbox and push your changes to your exercise repository on Github.

# Week 7: Platform Tour & CSS Grid

Create the Platform Tour page of the website. Most of the code for this page can be duplicated from the home page with the content and banner image swapped out for the new content. Make sure to update the <title> tag to be unique!

There is one unique section on this page which outlines how the platform works. This sections must be built using display: grid;. Use the screenshots provided in week-7 to determine how the design should look at 360px and 1440px wide.

# Submission

WARNING

Due Sunday October 31 @ 11:59pm

When you have completed the exercise, create a commit called Platform Tour & CSS Grid and push your changes to your exercise repository on Github.

# Week 9: Pricing & Tables

Complete the Pricing page as shown in week-9 screenshots. Remember, a lot of the code can be re-used from previous pages! This page includes two new sections, the pricing table and the Frequently Asked Questions. The pricing table should be created using a <table>! As discussed in class, tables struggle with responsiveness unfortunately. For this exercise, you should be using a combination of min-width and overflow-x: scroll; to create a scroll-able table.

Note: the original version of this exercise included a Frequently Asked Questions section on this page. It has been removed from this exercise and does not need to be completed. It has been included in the extra challenges as an optional extra step, but is not required.

# Extra Challenge!

Add a Frequently Asked Questions section. It provides a great opportunity to implement a common web pattern: the accordion! In order for the JS to work, the html will require a specific structure:

<parentElement id="faq-1" class="faqs__item">  <!-- Replace with semantically appropriate html tag-->
  <a class="faqs__button" href="#faq-2">
    content...
  </a>
  more content...
</parentElemet>
1
2
3
4
5
6

Clicking on the .faqs__button will toggle a class of .active on the <parentElement> of the button clicked and will remove .active from all other FAQs. You can use the .active class to style the active state.

# Submission

WARNING

Due Friday November 5 @ 11:59pm

When you have completed the exercise, create a commit called Pricing & Tables and push your changes to your exercise repository on Github.

# Week 10: Sign Up Form

Create the Sign Up page based on the screenshots at 360px and 1440px found in week-10. The header and footer can be reused from other pages, just don't forget to update the <title> and <h1> to be unique!

# Extra Challenge!

Use formspree to make your form fully functional!

# Submission

WARNING

Due Friday November 12 @ 11:59pm

When you have completed the exercise, create a commit called Sign Up Form and push your changes to your exercise repository on Github.

# Week 11: Accessibility

Implement basic accessibility best practices:

  • create skip links
  • add a To Top button
  • create proper :focus highlighting
    • links
    • sections [tabindex="0"]
    • form inputs
  • fix colour contrast issues

Follow this up by performing an accessibility audit on each page with the WAVE Web Accessibility Evaluation Tool (opens new window) browser extension to make sure you got everything!

# Extra Challenge!

Use the provided JS to show and hide your To Top button. The JS will look for an element with a class of .to-top and will add a class of .visible when the user scrolls down from the top of the page. Use the .visible class to style an active state! -->

# Submission

WARNING

Due Friday November 19 @ 11:59pm

When you have completed the exercise, create a commit called Accessibility and push your changes to your exercise repository on Github.

# Week 12: Animations, Transitions & Transforms

Add a list of social icons to the footer using the svg icon sprite sheet method learned in class. Add a hover/focus state with a transition to the icons so that they change to a different appropriate colour.

Add a transition property to all buttons and links that have a hover/focus state.

# Part 3 - Hero Animation

Add a brief animation to the hero text and button so that the animate in on page load and then remain static. Here is an example (opens new window) of what your hero animation could look like. Feel free to customize it as long as the text remains on screen when the animation finishes.

# Submission

WARNING

Due Friday November 26 @ 11:59pm

When you have completed the exercise, create a commit called Animations, Transitions & Transforms and push your changes to your exercise repository on Github.

# Week 13: SASS File Organization

Divide up your main.css into appropriate organized .scss files that follow the proper folder structure discussed in class. The breaks and comments used to organize your mains.css file will serve as a good guide for how to divide up your css. Remember, you should use sub-folders to group related files to keep everything well organized.

# Congrats!

Your exercise website is complete! Great job on completing your website, it was a lot of work, but hopefully you learned a lot along the way!

# Submission

WARNING

Due Friday December 3 @ 11:59pm

When you have completed the exercise, create a commit called SASS File Organization and push your changes to your exercise repository on Github.

Last Updated: 11/14/2021, 10:09:13 PM

← Assignment List →