MAD9013

# Assignment List

# 1. Convert PDF to HTML

Download the attached PDF and recreate it as a webpage with HTML and CSS.

Algonquin Park

Download image here

You can copy and paste the text from the PDF into your HTML elements. Download the image from the link above to use in on your webpage. Here is the font stack used for the page.

font-family: Georgia, 'Times New Roman', Times, serif;
font-family: sans-serif;
1
2

Make sure that you have a folder for this assignment and that it contains a css and img folder. Your CSS file goes in the css folder. The image goes in the img folder. Your HTML file must be called index.html and be in the root folder.

# Submission

WARNING

Due October 10th @ 11:59pm

Create a private GitHub repository and invite your professor (arobillard) to be a collaborator. Submit a link to your repository on Brighspace.

# 2. Applied Design Fix

For this assignment you must improve the design of the Adventure Co. website by applying the design principles (CRAP, Gestalt, Colour Theory, Typographic Hierarchy, etc.) discussed in week 4.

The improvements should be made with CSS only and you may include or remove as much of the existing CSS as you want (you can even delete all of the CSS and start entirely from scratch if you like). You may change colours, fonts, etc. However, do not edit the HTML. This is a CSS only exercise.

When you assignment is completed, the website should...

  • Have consistent sizing and spacing of elements
  • Have a clear, consistent type hierarchy
  • Be responsive (layout will be tested at 360px and 1440px wide)
  • Have a strong colour scheme with sufficient colour contrast

# SET UP INSTRUCTIONS

Start by cloning this repo (opens new window) on to your computer by typing the following in the Terminal (REMEMBER to navigate to where you want the repo created):

git clone https://github.com/MAD9013/f2021-assignment2-starting-files applied-design-fix
1

Next DELETE the .git folder inside your applied-design-fix folder with the following commands:

cd applied-design-fix
rm -rf .git
1
2

Then create a Private GitHub Repo called applied-design-fix on your GitHub account, with NO README.md file. If you do add a README.md file then you will need to pull the repo before you add, commit, and push your files.

In your Terminal, you should be inside your applied-design-fix repo folder and type the following:

git init
git add -A
git commit -m "first files"
git remote add origin https://github.com/[YOUR USERNAME GOES HERE]/applied-design-fix.git
git push -u origin master
1
2
3
4
5

Remember that you have to do the pull before the push if you added a README.md file.

Every time you want to save your changes locally, you should update Git too. Use these commands to save your changes in the repos.

git status
git add -A
git commit -m "description of your changes"
git push -u origin master
1
2
3
4

Invite your professor arobillard to be a collaborator on the repository.

# Submission

WARNING

Due October 31st @ 11:59pm

Invite your professor (arobillard) to be a collaborator on your GitHub repository and then Submit a link to your repository on Brighspace.

# 3. GrrB&B for Pets

Here is the screenshot of a completed version of the form.

Screencast

In your version you may customize the colour(s), typography and header image. The layout must remain as shown above with a small, medium and large layout (breakpoints may be approximate to the gif). The Logo image is provided.

Pick an image from Unsplash Dog Search Results (opens new window). In your CSS add a comment about the source of your image. Then use a Chrome extension like ColorZilla or Photoshop to extract a two or three colours from your image. Use those colours as the background colour for your button plus the colours for the label and input text. Make sure that the button text and the button background have accessible contrast.

Make sure that all inputs, labels, and heading text use the same font.

Be consistent with your font sizes. Think about the typographic hierarchy.

Remember to put a text shadow on any text that is on top of a background image. Use two colours with high contrast. One for the text and one for the shadow.

Add a Google font with the @import syntax at the top of the CSS file.

You can use CSS Grid or Flexbox for your layout. Float should NOT be used.

You need to make the form responsive. There should be 3 different layouts, just like in the example image above.

WARNING

Do NOT edit the HTML. This is a CSS exercise.

# SET UP INSTRUCTIONS

Start by cloning this repo (opens new window) on to your computer by typing the following in the Terminal (REMEMBER to navigate to where you want the repo created):

git clone https://github.com/MAD9013/f2021-assignment3-starting-files grrbnb
1

Next DELETE the .git folder inside your grrbnb folder with the following commands:

cd grrbnb
rm -rf .git
1
2

Then create a Private GitHub Repo called grrbnb on your GitHub account, with NO README.md file. If you do add a README.md file then you will need to pull the repo before you add, commit, and push your files.

In your Terminal, you should be inside your grrbnb repo folder and type the following:

git init
git add -A
git commit -m "first files"
git remote add origin https://github.com/[YOUR USERNAME GOES HERE]/grrbnb.git
git push -u origin master
1
2
3
4
5

Remember that you have to do the pull before the push if you added a README.md file.

Every time you want to save your changes locally, you should update Git too. Use these commands to save your changes in the repos.

git status
git add -A
git commit -m "description of your changes"
git push -u origin master
1
2
3
4

# Submission

WARNING

Due November 14th @ 11:59pm

STEP 1 Open BS LMS and go to the Activities > Assignments page. Go to the GrrB&B exercise and submit the link to your private repo.

STEP 2 Invite your instructor to the Repo through the Repo Settings page.

You MUST do both steps to get any mark for the assignment.

# 4. Web Form

Create a private Git Repo with a webpage that has a registration form. The HTML and CSS files need to meet all the following requirements.

# HTML:

  • A heading that states what the user is doing (e.g. signing up for a service, etc.)
  • A short text block that gives a reason why the user should sign up (i.e. A compelling reason to join. Maybe this is a sign up form for a video streaming service, or a social media platform. Give a reason why the user should care)
  • Four form fields and four related label as follows:
    • An input and label for the user's full name - This input should be a optional field
    • An input and label for the user's email address - This input should be a required field
    • An input and label for the user's phone number - This input should be an optional field
    • An input and label for the user's password - This input should be a required field
  • Each label needs a 'for' attribute
  • Each input needs the following attributes:
    • 'type'
    • 'name'
    • 'id'
    • 'placeholder'
    • 'required' and/or 'autocomplete'
  • A submit input with 'type' and 'value' attributes

# CSS:

  • Using Flexbox or Grid, ensure that the form is stacked vertically into a single column
  • Create a wrapper for the form so that it is never more than 40em wide.
  • Create two CSS variables:
    • One that contains a dark blue hue
    • One that contains a light blue hue
  • Using a pseudo-class, change the form inputs' border colours to the dark blue hue, and the background color to light blue hue, whenever the user interacts (e.g. typing) with an input

# Submission

WARNING

Due November 29th @ 11:59pm

STEP 1 Open BS LMS and go to the Activities > Assignments page. Go to the Web Form exercise and submit the link to your private repo.

STEP 2 Invite your instructor to the Repo through the Repo Settings page.

You MUST do both steps to get any mark for the assignment.

Last Updated: 11/4/2021, 8:49:18 PM

← Project List →