Category: 20221_itp104

Lecture 12: Intro to CSS Frameworks, Bootstrap

Posted on | by nayeon

To-do for today’s class

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

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)

Lecture 8: Meta Tag, Responsive Web Design

Posted on | by nayeon

To-do for today’s class

Recording

This lecture was not live. Watch the recording here (from Spring 2021): https://www.youtube.com/watch?v=QSZGJEFNaR4

Note: recording refers to a dropbox link for the starter code, but this semester we have been using google drive. Use the google drive link above instead.

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 7: Fonts, Position Property

Posted on | by nayeon

To-do for today’s class

Slides

View Slides
Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 6: Compound CSS Selectors, Display, Pseudo-Classes

Posted on | by nayeon

To-do for today’s class

Slides

View Slides

Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 5: Tables, Forms

Posted on | by nayeon

To-do for today’s class

  • Create a brand new HTML file.

Slides

View Slides

Link to download PDF version.

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 4: Page Layouts

Posted on | by nayeon

To-do for today’s class

Slides

View Slides

Link to download PDF version.

Helpful Readings

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 2: HTML & CSS

Posted on | by nayeon

To-do for today’s lecture

  1. Attendance is taken starting today. Go to Blackboard -> Tools -> Qwickly Attendance to enter the code for today’s attendance. If you are taking this class asynchronously, watch the lecture recording and fill out this google form.
  2. Copy and paste the following text when prompted:

Pikachu is a species of Pokémon, fictional creatures that appear in an assortment of media of the Pokémon franchise by The Pokémon Company. Pikachu is a yellow mouse-like Pokémon with powerful electrical abilities. Pikachu is the best-known species of Pokémon, largely due to its appearance in the anime series as the starter Pokémon of the protagonist, Ash Ketchum. Pikachu is a major character of the Pokémon franchise as well as its mascot, and has become an icon of Japanese pop culture in recent years, as well as one of the major mascots for Nintendo.

Pikachu’s design was conceived by Atsuko Nishida and finalized by Ken Sugimori. Pikachu first appeared in Pokémon Red and Green in Japan, and later in the first internationally released Pokémon video games, Pokémon Red and Blue, for the Game Boy.

Slides

View Slides
Link to download PDF version.

Helpful Readings

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.

Lecture 1: Course Overview, Intro to HTML

Posted on | by nayeon

Slides

View Slides
Link to download PDF version.

Helpful Readings Before Next Class

Completed Files

Completed files are stored in a GitHub repository. Links below will take you to a list of file(s) from today’s lecture. You can view the code via the browser through GitHub’s UI or clone/download the repo to open the code from your computer.