# Exercise List

# 1. Install VSCode

Download and install VSCode on your MacBook Pro.

Then install the list of recommended extensions.

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

# Submission

WARNING

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

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

# 2. CodePen Account

Create CodePen.io account using your @algonquinlive.com email address and the submit link to your profile page.

# Submission

WARNING

Section 1: Due Monday 14-Sep-2020 by 11:45PM
Section 2: Due Monday 14-Sep-2020 by 11:45PM

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

# 3. Basic HTML 1

Create an HTML file that has your algonquin username as the <title> in the <head>, a <header> with an <h1> that has your full name as the text.

# Submission

WARNING

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

Open BS LMS and go to the Activities > Exercises page. Go to the Basic HTML 1 exercise and copy paste your full HTML into the text field.

# 4. Basic HTML 2

Create an HTML file that has your algonquin username as the TITLE in the HEAD, a HEADER with an H2 that has your full name as text, and a MAIN element that contains an unordered list. Add 10 list items that each contain a link to a different YouTube tutorial about something about HTML or CSS.

# Submission

WARNING

Section 1: Due Monday 21-Sep-2020 by 11:45PM
Section 2: Due Monday 21-Sep-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Basic HTML 2 exercise and copy paste your full HTML into the text field.

# 5. HTML Dates and Times

Take your birthday and 3 other dates that are important to you, create an HTML file with four paragraphs, each paragraph needs a date or date and time along with a description of what this date or time means to you. Only one or two sentences per paragraph.

Wrap each date or date and time with a <time> element that has a datetime attribute. Write the datetime attribute value in the proper format but keep the text for the date in a more human-friendly way.

# Submission

WARNING

Section 1: Due Wednesday 23-Sep-2020 by 11:45PM
Section 2: Due Friday 25-Sep-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the HTML Dates exercise and copy paste your full HTML into the text field.

# 6. CSS Colours

Create a webpage with your algonquin username as the title in the head AND a series of 7 paragraphs with lorem ipsum text. Give each a different class name. In the HEAD add a STYLE element with each of the class selectors. Pick any CSS named colour and then apply that colour to each paragraph in a different method - RGB, RGBA, HSL, HSLA, Named, 6-digit HEX and 3-digit HEX.

# Submission

WARNING

Section 1: Due Monday 28-Sep-2020 by 11:45PM
Section 2: Due Monday 28-Sep-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the CSS Colours exercise and copy paste your full HTML into the text field.

Create a new folder called navigation-abcd0001. Replace the abcd0001 with your own username.

Create three HTML files inside your new folder. Name the pages after yourself and two members of your family. In the body, add a NAV element with three A tags with HREF attributes that make each page link to the other two pages. Add a MAIN element with a P and IMG. Use https://picsum.photos as the image sources.

When finished, keep all three HTML files in that folder and zip (compress) the folder to be submitted.

# Submission

WARNING

Section 1: Due Wednesday 30-Sep-2020 by 11:45PM
Section 2: Due Friday 02-Oct-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Navigation exercise and submit the single zipped folder that contains all three HTML files.

# 8. Font Stacks

Create a single HTML file with headings and paragraphs. Put Lorem Ipsum text in the paragraphs and your name, email, and student number in different headings.

Create an external CSS file and link it to your HTML file. In the CSS you need to create two full font-stacks - Google web font, fallback, generic. One serif, one san-serif.

All the headings should get the serif stack. All the paragraphs should get the sans-serif stack.

Put the HTML and CSS files into their own folder. Zip the folder for submission.

# Submission

WARNING

Section 1: Due Monday 05-Oct-2020 by 11:45PM
Section 2: Due Monday 05-Oct-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Font Stacks exercise and submit the single zipped folder that contains both files.

# 9. Contrast

Create an HTML file with your algonquin username as the title in the head AND a series of three paragraphs with lorem ipsum text. Create a CSS class name for each paragraph. Give a different background-color to each paragraph using the CSS hsl( ) method.

Add a <style> element to the head for your CSS.

Give a CSS color to the text of each paragraph which uses the same HUE as the background but different saturation and/or lightness values.

MAKE SURE that there is enough contrast to be accessible. Use https://webaim.org/resources/contrastchecker/ to check your colours

# 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 > Exercises page. Go to the Contrast exercise and copy paste your full HTML and CSS into the text field.

# 10. DESIGN EXERCISE

# Description

Create a basic paper wireframe based on the supplied content below at mobile size (360px wide) and at laptop size (1440px wide). Your wireframe should be hand-drawn on paper with a dark pencil or marker. If you have access to a printer, you can use the supplied dot paper.

Open BS LMS and go to the Activities > Exercises page. Go to the Wireframe exercise and upload a scan or CLEAR photo of both wireframes in a single zipped folder that contains both files.

# Content

Logo - Adventure Co. Nav Items - About, Download, Sign Up

Welcome to Adventure Co.! An app built for adventurers seeking fame, fortune, and a well organized gameplay experience! Download the app!

[image] Create a character! Get started with your very first character.

[image] Form a party! Connect with friends and team up.

[image] Find an item! Add fantastic items too boost your character.

About Adventure Co. Adventure Co. is a cooperative storytelling game that uses your imagination and invites you to adventure, battle, discover, and complete epic quests with your friends through an immersive RPG experience. Your first adventure is only a dice roll away! Learn more

Logo - Adventure Co. About, Download, Sign Up

Wireframe Related Video

# Submission

WARNING

Section 1: Due Monday 12-Oct-2020 by 11:45PM
Section 2: Due Monday 12-Oct-2020 by 11:45PM

# 11. Flexbox

Create a new folder and add an HTML and a CSS file to that folder.

Use Flexbox to recreate a layout shown in the reference image.

Reference Image

# Submission

WARNING

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

Open BS LMS and go to the Activities > Exercises page. Go to the Flexbox exercise and submit the single zipped folder that contains both files.

# 12. Responsive Images

Create a new folder and add an HTML and CSS file.

Download 2 images from UnSplash and then use Photoshop to crop them in 3 different ways and create 3 versions of each image. Save all six images in the same folder as the HTML and CSS files.

Use the <picture>, <source>, and <img> elements to render the images.

Only show one version of each image at a time. Use CSS media queries to change the display of the two images. Over 1000px wide, show the images stacked vertically and both filling 80% the width of the viewport. Between 600px and 1000px show the images beside each other horizontally taking up 40% of the viewport. Under 600px show the images stacked vertically and filling 100% the width of the viewport.

The picture and source elements should change between rendering the 3 versions of the images based on the same breakpoints.

# Submission

WARNING

Section 1: Due Monday 19-Oct-2020 by 11:45PM
Section 2: Due Monday 19-Oct-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Images exercise and submit the single zipped folder that contains both files.

# 13. Grid

Create a named CSS grid schema and sort placeholder text/images into a predetermined layout.

Your images can come from either Unsplash or Picsum.

Use Lorem Ipsum text for paragraphs. Write your own heading text. Make sure the headings include your name and student number.

Save your HTML, CSS, and images in the same folder.

Make sure you have a css folder and an img folder to contain the appropriate files.

# 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 > Exercises page. Go to the Grid exercise and submit the single zipped folder that contains all the folders and files.

# 14. BBC News

Edit the BBC news website with the Chrome Dev Tools and submit a screenshot.

Use the Chrome Dev Tools to take the screenshot of the ENTIRE page, not just what is visible on the screen.

Changes required:

Edit two page headings - their text, background colour, and text color;
Edit the text of a story title;
Change the name of the reporter to your own name;
Replace an image in the story.

# Submission

WARNING

Section 1: Due Monday 02-Nov-2020 by 11:45PM
Section 2: Due Monday 02-Nov-2020 by 11:45PM

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

# 15. Calc and Clamp

Create an HTML page with a <style> element in the <head>. Add basic placeholder content to the body.

Use a CSS calc() function to adjust the font-size for the html CSS selector based on viewport width/height.

Use a CSS clamp() function to set a min, max and default value for the width of the main element. Use three different units for the values inside the clamp function.

# Submission

WARNING

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

Open BS LMS and go to the Activities > Exercises page. Go to the Calc exercise and copy paste your full HTML and CSS into the text field.

# 16. Header Background

Create an HTML file with your algonquin username as the title in the head AND a header with a background image that comes from either Unsplash or Picsum.

Add an H1 element in the header that uses the CSS hsla( ) method to let the user read the text in the h1.

Accessibility / readability is key.

Header should be twice as tall as the h1. (min-height on the header). H1 text should be at the bottom of the header. Use padding and margin to create space around the text and h1 and header have the same bottom edge. H1 text should be your full name.

# Submission

WARNING

Section 1: Due Monday 09-Nov-2020 by 11:45PM
Section 2: Due Monday 09-Nov-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Header exercise and copy paste your full HTML and CSS into the text field.

# 17. Aria

Please add the missing ARIa attributes for the following HTML

<div id="txtboxLabel">Enter your userName</div>
<div></div> 

<div id="txtboxMultilineLabel">Enter the tags for the article</div>
<div></div>

1
2
3
4
5

# Submission

WARNING

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

# 18. Transitions

Create an HTML page with a <style> element in the <head>.

Add three buttons to the body.

In the CSS, create a transition for each button that gets applied for both the :active and :focus states. Apply a different speed curve and colour change to each (e.g. linear, ease, cubic-bezier).

# Submission

WARNING

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

Open BS LMS and go to the Activities > Exercises page. Go to the Transitions exercise and copy paste your full HTML and CSS into the text field.

# 19. Shorthand Transition

Create an HTML page with a <style> element in the <head>. Add two heading elements with placeholder text.

Add a transition to the headings that is triggered with the :hover state.

Use the long form of all the transition properties. Do NOT use the single transition CSS short-hand property. Be sure to add all 4 properties.

# Submission

WARNING

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

Open BS LMS and go to the Activities > Exercises page. Go to the Shorthand exercise and copy paste your full HTML and CSS into the text field.

# 20. Transform

Create an HTML page with a <style> element in the <head>. Add two img elements with placeholder images from either Unsplash or Picsum.

Use transform to rotate both images to a different orientation.

# Submission

WARNING

Section 1: Due Monday 23-Nov-2020 by 11:45PM
Section 2: Due Monday 23-Nov-2020 by 11:45PM

Open BS LMS and go to the Activities > Exercises page. Go to the Transform exercise and copy paste your full HTML and CSS into the text field.

# 21. SASS

Create a new folder for this exercise. Inside, create an HTML file, a css folder, and a sass folder.

Create an HTML page with a <style> element in the <head>. Add two heading elements with placeholder text and some paragraphs with lorem ipsum text.

Inside the sass folder create your sass file with at least 20 lines of SASS.

With SASS installed on your computer, run the sass command to generate the minified CSS file inside your CSS folder.

Take a screenshot of VSCode that shows the compiling of the SASS to minified CSS, as well as, the SASS and CSS files open side by side with the resulting files open in the editor.

# Submission

WARNING

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

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

# 22. Mixin

Use the html and css below. Do not alter the HTML. Only change the CSS to apply the mixin to each button using the color in its className.

<div>
  <a href="#" class="btn btn-green">Green Button</a>
  <a href="#" class="btn btn-blue">Blue Button</a>
  <a href="#" class="btn btn-yellow">Yellow Button</a>
  <a href="#" class="btn btn-red">Red Button</a>
</div>

1
2
3
4
5
6

@mixin button-bg($bg) {
  background: $bg;
  &:hover {
    background:darken($bg,8%);
    transition: all 0.3s ease;
  }
  &:active {
    background:darken($bg,25%);
  }
}

.btn {
 color:white;
 text-decoration:none;
 padding:5px 10px;
 border-radius:3px;
 font-size:2em;
}

.btn-green {
   
}

.btn-blue {
   
}

.btn-yellow{
   
}

.btn-red {
   
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

WARNING

Section 1: Due Monday 30-Nov-2020 by 11:45PM
Section 2: Due Monday 30-Nov-2020 by 11:45PM

← Week 14: Final Project Work Assignment List →

# Exercise List

# 1. Install VSCode

# Submission

# 2. CodePen Account

# Submission

# 3. Basic HTML 1

# Submission

# 4. Basic HTML 2

# Submission

# 5. HTML Dates and Times

# Submission

# 6. CSS Colours

# Submission

# 7. Navigation

# Submission

# 8. Font Stacks

# Submission

# 9. Contrast

# Submission

# 10. DESIGN EXERCISE

# Description

# Content

# Submission

# 11. Flexbox

# Submission

# 12. Responsive Images

# Submission

# 13. Grid

# Submission

# 14. BBC News

# Submission

# 15. Calc and Clamp

# Submission

# 16. Header Background

# Submission

# 17. Aria

# Submission

# 18. Transitions

# Submission

# 19. Shorthand Transition

# Submission

# 20. Transform

# Submission

# 21. SASS

# Submission

# 22. Mixin