PUCD 2126
Assignment 1: Course Review Test

Complete and submit the following test by uploading it to your github before the end of class, 11:40 AM on May 13.




1. Please download this file and add it to your Github Pages in a folder called 'Test' without filling out any of the following questions. Create a link to it from your Github Pages homepage, and when it is online message Ian Glover a link to your test on Slack.


2. In your own words, explain what Git and Github are used for and the main differences between them.

Git is a version control system that is installed and maintained on your local system. Github is a cloud-based hosting service that allows you to manage Git repositories, such as the desktop software that we use to push any updated code.

3. In your own words, please explain what HTML is and its role in creating and designing webpages.

HTML is a basic mark-up language for documents and text to be displayed in a web browser. It can be used to achieve font, color, graphic, and hyperlink effects.

3. In your own words, please explain what CSS is and its role in creating and designing webpages..

CSS is a style sheet language that can be used for basic document text styling, such as changing the background color, creating a layout using flex box, or even effects such as animation and keyframe.

4. Create an external CSS Stylesheet and link it from this assignment. Use this stylesheet to:
  • Apply new colors for the Background of this HTML document.
  • Apply new colors to the text content of this HTML document.
  • Create distinct styles for the CSS Classes question and answer which are used in this HTML document.

5. Please embed a piece of external content from a source of your choice, such as Spotify or YouTube, below.

link to Space 1.8 by Nina Sinephro

6. Update your external CSS file to add Custom Typography to this page:

  • Import at least (1) custom font. This can be from Google Fonts, or from a local font of your choosing. For font resources, please refer to Assignment #2: Typography on the Web
  • Apply the custom font(s) to this HTML document.

7. Update your external CSS file to add Media Queries to make this webpage Responsive:

  • Create a media query which will change the colors of the background and the text when the screen is smaller than 768px.

8. Update your external CSS file to use the CSS Position property to remove the following element from the normal flow of the document and place it in the upper right hand corner of the screen:

Position This Div

9. Update your external CSS file to use CSS Flexbox or CSS Grid to place the item in the div with #id columns below into three columns.

Column 1

Column 2

Column 3


10. Create two links. The first should link to an assignment of your choice on your Github Pages, and the second should link to an external website of your choice.

Link to assignment #7

Link to one of my favourite designers


11. Will the following conditional statement return 'True' or 'False'.

return "Port of Tianjin" === "Port of Dubai"

The statement will return 'true'.


13. Create an external Javscript file and link to and load it into this file.


14. Use Javascript to create a reference to the div with id colored-element below and, using javascript, set it to have a distinct color from the rest of the page.

This text should have a distinct color.


15. Use Javascript to create a new HTML Element and append it as a Child Element to the div with id parent-element below.


16. Copy the following line of code containing a declaration of the variable forLoopArray into your Javascript.

Then, use a For Loop to log each item of the array to the Web Console.

const forLoopArray = ["Item One", "Item Two", "Item Three", "Item Four"]

17. Use Javascript to get a reference to the button with id event-listener-button below.

Then, add an Event Listener which will make it so that when the button is clicked it will log the string "Clicked" to the web console.


18. When finished, commit this completed HTML Document to your Github Pages and make sure that it is linked from your homepage.


Thank you! -- Thank you Ian for everything this semester! I never thought I would enjoy coding as much as I do now and you made it so much easier to learn.