Midterm Info & Study Guide

Posted on | by nayeon

Midterm Exam Information

When: Exam will open on Wednesday, 03/09 at 5:00pm Pacific Time and close on Friday, 03/11 at 5:00pm Pacific time.

Length: 80 minutes to complete the exam.

Where: Gradescope

Types of questions:

  • True/False
  • Multiple Choice
  • Fill in the blank
  • Short Coding

Topics: Topics covered in lecture from Week 1, Intro to HTML to Week 8. Meta Tags and Responsive Web Design

What to do BEFORE the exam:

  1. Check your email for an invite to Gradescope. You will need to create a new account if you have never used Gradescope before.
  2. Plan ahead to do your best to be in a quiet place during the time you choose to take the exam.
  3. Take the practice exam to get familiar with taking an exam on Gradescope. The practice exam is about half the length of the actual exam.
    1. Practice exam does not count toward your grade, it is purely for practice to help you get familiar with Gradescope and the types of questions asked in this exam.
    2. Practice exam is timed, at 40 minutes (half the actual exam time). You can only submit the exam once (a limiation of Gradescope, unfortunately) so take it when you are ready to take the exam.
    3. Solutions to the practice exam can be found here.

During the exam:

  1. Log in to Gradescope.
  2. Click on ITP 104 Spring 2022 section and you will see the Midterm Exam during the exam period.
  3. Click begin to start the exam. You will see a timer running on the top right corner.
  4. If you get kicked out of the exam for whatever reason, you can log back in and continue the exam by clicking “Resubmit.” Note the timer continues to run if you leave the exam so get back to the exam asap.

Important Notes:

  • This is an open book exam. You may use notes, slides, and the Internet. However, I highly recommend you still memorize and/or prepare a “cheat sheet” with common HTML tags and CSS properties to save precious time on the exam.
  • The exam closes promptly at 5pm. This means you must start the exam at the latest at 3:40pm on Friday to get the full 1h and 20 minute for the exam.
  • This is an individual exam – do not collaborate with others.

What you should know for the exam

Note: this is not meant to be an exhaustive list. Anything discussed in lecture can appear on the midterm exam. Refer to your lecture notes and assignments for a comprehensive review.

HTML basics
  • The basic HTML skeleton
  • Concept of opening and closing tags
  • What is a tag and what is an attribute? And what do they look like?
  • Common HTML tags and their function
    • <p>, <div>, <span>, <strong>, <em>, <h1>, <h2>, <h3>, <ul>, <li>, <ol>, <img>, <a>, <hr>, <table>, <form>, <label>, <select>, <option>, <input>, <textarea> and any other tags discussed in lecture
CSS Style Properties and Stylesheets
  • What is CSS? vs HTML?
  • Common CSS properties and their values
    • color, font-size, text-align, margin, padding, border, background-color, background-image, visibility, opacity, display, float, flex, position, and any other properties discussed in lecture
  • Inline styles vs Stylesheets
    • syntax on inline styling vs using a stylesheet
    • class vs id
    • how to create a stylesheet – <style>
    • compound CSS selectors
  • Centering things horizontally
  • Fonts
Create layouts and using div tags
  • How to use <div> tags along with specific style properties such as margin, padding, flex, width and height to create “boxes” that make up a page’s design and layout.
  • How to use flex to create <div>s that go horiziontally next to each other
  • Calculating column widths
  • Basic understanding of CSS positions (e.g. relative vs absolute vs fixed)
Form objects
  • HTML tags that create basic these form elements:
    • text
    • radio buttons
    • checkboxes
    • drop-down/select menu
    • textarea
  • You need to know how to implement the above form elements as well as know each of their functionality
  • How to “submit” a form
  • You need to know how to code a form from scratch
Tables
  • Basic understanding of tables
  • Basic knowledge on how to style tables
  • You need to know how to code a table from scratch.
Fonts
  • How to add custom fonts using @font-face
  • How to add fonts using google fonts
Positions
  • relative, absolute, fixed positions
  • using relative (parent) + absolute (child) positions
Meta Tags and Responsive Web Design
  • Media queries
Some terminology that would be helpful to know
  • tags vs elements
  • tag attributes
  • CSS selectors (ID, class, tag)
  • stylesheet vs inline style
  • CSS property and values
  • inline vs block elements (display property)