MAD9013

# Assignment List

# 1. Convert PDF to HTML

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

Algonquin Park
Document Picture

You can copy and paste the text from the PDF into your HTML elements.

Download the image from the link above and use that in your CSS as the background for the header.

Here is the list of colours used in the original

#222
1

Here is the list of font-sizes used in the original with a base font-size of 20px in the CSS html selector. Type Scale Creator

5.063rem
3.375rem
2.25rem
1.5rem
1.0rem
1
2
3
4
5

Here is the font stack used for the page.

font-family:
1

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.

Zip the root folder and all its contents for submission.

# Submission

WARNING

Section 1: Due Wednesday 07-Oct-2020 by 11:45PM
Section 2: Due Friday 09-Oct-2020 by 11:45PM

Open BS LMS and go to the Activities > Assignments page. Go to the PDF exercise and submit the zip file.

# 2. Applied Design Fix

Assignment for fixing layout, typographic hierarchy, vertical rhythm, colors, C.R.A.P.

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. Use the matching content from exercise 10 to wireframe and plan your design.

The improvements should be made with CSS only and you may include or remove as much of the existing CSS as you want. You may change colours, fonts, etc. However, do not edit the HTML. This is a CSS exercise.

Your design should include media queries and work well at mobile (360px wide) and desktop (1440px wide) screen sizes.

Click here to download the project

WARNING

Right click on the link and chose save link as...

# Submission

WARNING

Section 1: Due Wednesday 21-Oct-2020 by 11:45PM
Section 2: Due Friday 23-Oct-2020 by 11:45PM

Open BS LMS and go to the Activities > Assignments page. Go to the Design Fix exercise and submit the zip file.

# 3. GrrB&B for Pets

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

Screencast

In your version you will pick your own colour(s) and header image. The Logo image is provided.

Pick an image from Unsplash Dog Search Results. 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 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/prof3ssorSt3v3/grrbnb.git 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 the GitHub settings for your repo, set your master branch as the gh-pages branch.

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

Section 1: Due Wednesday 16-Nov-2020 by 11:45PM
Section 2: Due Friday 16-Nov-2020 by 11:45PM

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, ensure that the form is stacked vertically into a single column
  • Make sure that the form never takes up more than half the width of the viewport and never less than 400px.
  • Create two CSS variables:
    • One that contains a dark blue hue declared with HSL
    • One that contains a light blue hue declared with HSL
  • 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

Section 1: Due Wednesday 02-Dec-2020 by 11:45PM
Section 2: Due Friday 04-Dec-2020 by 11:45PM

STEP 1 Open BS LMS and go to the Activities > Assignments page. Go to the Reg 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/25/2020, 11:16:34 PM

← Project List →