Introduction to Web Programming - Midterm Study Guide
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.
This may not be a 100% complete list of topics but it should get you most of the way to what you need. The slides are your friends and some of the interactive slides / code examples might be really helpful.
- 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
- link: include CSS files
- style: include CSS in your HTML directly
- 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)
- h1-h6: headings, titles of sections
- CSS Selectors - You should know the basic selector parts (. for class, # for id, plain text for tags) as well as combinators (eg.
div #my-inputlooks 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
- How to include CSS Frameworks. 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
- margin, padding: margin is outside the border, padding is inside
- display: inline, block, inline-block, flex, grid
- position: absolute, fixed, relative
- width, height
- 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
- 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 (
- Objects - Remember the evil twin example
- Practice writing functions
- Know what
- It uses a CSS selector and returns a reference to an element from your HTML
- Change element text:
myElement.innerText = "something"
- Get the value from an input:
const username = myInputElement.value
- Change element text:
- Know how to respond to user input:
- Add an
onxyzattribute to an element. A couple handlers to know for now are
onclick, onchange, oninput
- Add an
- Can you build this into a user input validation web page?
- Read some of the examples at https://github.com/RyanKadri/cis1052-fall2020-examples/tree/master/c7-reacting-to-input
- Know how to use the developer tools console to run and test your JS functions
- Set up a template web page in Visual Studio Code. Make sure you can get Live Server working with your template before the midterm. This will help shorten setup time during the test
- 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
- 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.