Introduction to Web Programming - Midterm Study Guide

Midterm Format

The midterm will be administered through Canvas on Wednesday Oct 20th. It will be available all day but you will have 3 hours to complete the exam once you start. It is open book and open computer but all work must be completed independently. It will contain a mix of freeform concept questions, JavaScript function writing, "find the bug" type problems, and "recreate this target web page" problems similar to what you've seen on quizzes so far.

What is not on the test?

  • Regular Expressions
  • Specific CSS frameworks. I won't ask questions about Bootstrap specifically but you should know how and why CSS frameworks are included in a web page.
  • Multivariable Calculus

Advice

The slides are your friends and some of the interactive slides / code examples will be really helpful. For the examples in particular, try to make sure you understand how they work. Test your understanding by trying to modify parts of the code and seeing if things change in the way you expect. Also, if you have missed any labs, it would be a good idea to try to knock those out before the midterm. The labs are meant to stretch your understanding of the concepts we learn in class. For many people, applying their skills to a particular challenge or problem is more beneficial than just trying to memorize topics.

Topics

This may not be a 100% complete list of topics but it should get you most of the way to what you need.

HTML Topics

  • Structure and Syntax. How do you write valid HTML? Know the verbiage (elements, attributes, classes, IDs, etc)
  • Purpose / Goal - Structure over presentation. Using the right tags
  • Know how to use the developer tools to inspect a given web page's HTML
  • Some Elements - You don't need to know every single HTML element for the test. A good "toolbox" of tags includes:
    • html: parent element for your page
    • body: where the page content goes
    • head: where the page metadata (title, stylesheets, etc) goes
    • script: include JavaScript
    • style: include CSS in your HTML directly
    • link: include CSS via external files
    • p: paragraph
    • a: link
    • span: inline text
    • div: generic container
    • section: another container type
    • ul: unordered list
    • table: like it sounds (also includes tbody, tr, td, thead, th)
    • input: user input field (often a textbox)
    • button: a component for users to click on and trigger an action
    • h1-h6: headings, titles of sections

CSS Topics

  • CSS Selectors - You should know the basic selector parts (.something for class, #something for id, plain text for tags). You should also understand basic combinations of the selector parts (eg. div #my-input looks for an element with an id of my-input somewhere inside a div)
    • You do not need to memorize all the weird possible selector types but you should be able to look them up if needed
  • Purpose of CSS - Why do we use CSS? Advantages over inline styles?
  • Selector Specificity - If two selectors try to apply the same style to an element, which wins?
  • How to include CSS in HTML
  • Responsive Design
    • What is a breakpoint?
    • Media queries
    • Using media queries to change a grid / flexbox layout
    • Flexbox properties: parallel and perpendicular position, direction
    • Grid properties: grid-template-rows, grid-template-columns, grid-area, and grid-template-areas
  • How to include CSS Frameworks in your page. What kinds of things do they provide?
  • Some CSS Styles - You don't need to know every single possible CSS Style. Here are a few important ones
    • color, background-color
      • guessing a few named colors will be fine for the exam if you're trying to match a color. You should know what the other color types are though
    • border
    • margin, padding: margin is outside the border, padding is inside
    • display: inline, block, inline-block, flex, grid
    • position: absolute, fixed, relative
    • width, height

JavaScript Topics

  • Data Types
  • Variables (const vs let)
  • Variables are labels and not buckets to store data. Understand the evil twin example
  • if/else if/else Conditions
  • Loops
  • Functions - Know the syntax and the difference between defining a function and calling a function
    • 95% of the time you'll want to return a value. Unless the question asks otherwise, return rather than console.log
    • Returning ends the function. Returning a value too early will stop your code. Maybe you need to store something in a variable rather than just returning?
  • Arrays - Know how to read elements in a loop. Know how to add to the end. Know how to look at specific positions (myArray[0])
  • Objects - Defining an object and reading properties
  • Practice writing functions
  • Know how to include JavaScript in HTML
  • Know what document.querySelector does
    • It uses a CSS selector and returns a reference to an element from your HTML
  • Know a few things you can do once you get a reference to an HTML element in JavaScript
    • Change element text: myElement.innerText = "something"
    • Get the value from an input: const username = myInputElement.value
  • Know how to respond to user input:
    • Add an onxyz attribute to an element. A couple handlers to know for now are onclick, onchange, oninput

Tips

  • Make sure your tools are working before the midterm (Visual Studio Code, Live Server, Chrome)
  • Make sure you know how to run your function in your browser's developer tools. The midterm is open book / open computer so you should be able to try out any functions you write
  • Use Visual Studio Code to write your code. It might feel easier to write code directly into Canvas but VSCode's syntax highlighting will help you know if you've made JavaScript errors
  • The exam is 3 hours long. Hopefully it doesn't take that long for everyone to complete. That said, remember to skim over all the problems and make sure you're not spending a huge amount of time on hard problems if you know the answers to easy problems right off the bat.