Intro to Web Design:

Photoshop - Thursday.
- Vector graphics
- Super clean and crisp made out of geography.
- Made up of points and paths. All based on mathematical equations.
- Very easy to convert a vector graphic to a Raster.

- Raster images:
- Instead of point and lines as in vector, it is made up of pixels.
- Within these pixels there is color information and resolution is based on how
many pixels per inch (ppi) the image is.
- Information is lost when scaled up, resulting in pixelation.

- Pixels & Resolution:

- Number of pixels per inch refers to its resolution.
- Resolution deals with image quality.
- Standard resolution for anything printed is 300 dpi (dots per inch) or higher.
Whereas a standard resolution for screen images is 72 dpi and still looks super
crisp.

- How computers store data:

- Patterns of binary digits are used to help store color in images.
- A bit (binary digit) is the basic unit of information in computing (0 or 1).
- More bits = more colors.
- A 1 bit image, the most basic it can be, is going to be pure black & white image
with no grey scale at all. 8-bit graphics are only able to hold 256 colors. Today we
have 24-bit graphics = 16.7 million colors.
- So now with graphics and video games etc. we are able to create things
with a lot more depth, detail, and variety in them.

- File Compression:
- When algorithms minimize your file size.
- Different file types use diff. Compression algorithms:
- 1. ​Lossy-​ some data is discarded and approximated to make smaller file
size. To the human eye the data being lost is not something noticeable.
- 2. ​Lossless-​ original data is reconstructed resulting in a more accurate
file, it tries to reconfigure the file but doesn't remove things out.
- There are 5 different file types-
- TIFF​: Tagged Image File Format- fantastic for high color depth
images. Can handle very very large file sizes, saved lossless
without any info. discarded. Originally created for large size print
like huge billboards.

1
 - GIF​: Graphics Interchanged Format- only holds 256 colors, great
for flat simple graphics, smaller file size with lossless saving. Can
have transparency and supports animation.
- JPG​: Joint Photographic Experts Group- can old millions of colors,
great for photographic images that will have smaller file size than
a tif. Lossy file saving but not a common problem as you need
repeated saving to view substantial changes.
- PNG​: Portable Network Graphics- cousin of the Gif. but can hold
millions of colors. Preserves transparency and gradients (like
when removing backgrounds of images in png. Reason is all
images are squares and if you want a circle image you would
need transparency to do so. One of the newest file formats.
- RAW​: Largest file sizes you can shoot in. Will allow you to change
all the settings of how the photo was taken when trying to edit it on
the computer. You can edit an original without compressing or
losing any info before saving. Purest file pre compression.
- File size is determined by 4 things:
- Bit depth, image dimensions (height and width), image resolution
(pixels crammed in the height and width), file type.
- 8 Bits = 1 Bytes
- 1024 Bytes = 1 Kilobyte (KB) -> Megabyte(MB) -> Gigabyte (GB)
-> Terabyte (TB).
- Standard images for the web should be as small as possible,
between 5 to 500 kilobytes.
- The smaller the file size the faster it’ll load. So ​in a photo heavy
page you wanna compress these photos as much as possible​ so
the page loads quickly without losing any quality.

- Color- four diff. Ways of representing color:

- RGB​: An additive color process, aka, we take a red light, green light, blue
light and shine them together combined to make while. Adding all colors
100% in the spectrum together creates white. Values of RGB are
specified between 0 and 255. Each pixel on how computer screen has an
RGB component. Every pixel on our devices is made up of RGB.
- CMYK​: Cyan, Yellow, Magenta, and Black (stands for Key Color). CMYK
is a subtractive color process, so 100% of CMYK becomes black but 0%
makes white (think of it as ink, when you keep adding ink on the paper it
turns black). Values are specified as % between 0-100. Color mode is
standard for anything that will be printed.
- HSV​: Hue: the similarity to a perceived color (RYGB) or combination of
these colors in degrees. You see the hue in the circumference of the
cone, it determines what kind of color we are looking at. Saturation: is
how much grey is in a color, making it less pure and desaturated.

2
 Colorfulness or purity of color relative to its brightness (%). Value: the
appearance of emitting more or less light (%), shows how much white or
black is in the color.
- HEX Codes:​ A mathematical way to represent all 256 color codes. A pair
of digits and letters that represent R, G, B values. Hex Codes are based
on a 16 digit system (0 to F- 0 to 9 on a finger scale followed by A to F).
- Converting HEX to RGB:
- R G B
- CC 66 0
- Start with the C = 12 on a finger and multiply by 16-
12 X 16 = 192. Then add the right number which is
also 12 in this case- 192 + 12 = 204.
- If two numbers repeat themselves you add a
hashtag so instead of FF FFF FF you write #FFF.
- HEX codes are considered web safe colors.

Photoshop- September 13th, 2016:

- Swatches, the background of any shape you will draw. Double click the swatch button on
bottom left to get the color picker.
- Holding down shift key allows you to create perfect shapes. Letting go will allow you to
create rectangles without retaining the height and width of an object.
- Shift also allows for rotating in perfect increments.
- Command + T to rotate and cover over the corner to get the rotate.
- Color mode changes the way colors in different layers interact with each other.
- To move layers you can use the select key or if you press shift and move with arrows it
will move it 10 pixels at a time.

Photoshop- September 15th, 2016:

- Making selections-
- Go to the picture, grab the single row marquee tool, copy and paste into document then
duplicate a bunch of times. Select all layers then click merge layers.
- To evenly distribute different layers, select all layers and move tool (top arrow), merge
layers.
- Quick lasso allows you to select in one continuous line, end it where it started to close
the loop and create selection
- To end the selection click command + D.
- When you have a selection tool chosen, there are two keys that can add or subtract from
selection. Holding ​shift with lasso tool​, it turns into a little plus, meaning you can add
things to the selection. Holding ​option key with lasso tool,​ allows you to subtract from
selection.
- Checking contiguous, it will just select pixels that are connected to each other. So when
using magic wand quick selection tool it will only pick the pixels touching each other not

3
 random ones inside the parts you don’t want selected. When selecting a background you
wanna make sure that it is checked.

Typography- September 20th, 2016:

- Glyphs - single typed letters
- Weight - the size of the typography
- You will not be tested on the anatomy of a font!!
- There are different categories of fonts that are used- (​WILL come in test!!​)
- SERIF​ fonts are the default in our computer, mainly defined by the little
embellishments around letters like g, y, H, extra fancy things on the edges of
fonts:
- TImes New Roman, Calson, Trajan, Cooper Black, Gothic…
- SANS SERIF​ fonts have less embellishments:
- Calibr, GOTHAM, Myriad, Comic Sans, Impact.
- Decorative Display​ fonts- weird designs.
- Script​ fonts- made to look like handwriting. Can elevate the level of design
making it look super fancy.
- Font Formatting:
- Tracking-​ the spacing between the overall letters of a word. The higher the
number the wider the spaces. This is stuff we can do in photoshop to design the
text layout.
- To change the spacing between two specific letters, you need to change the font
Kerning-​ the spacing between individual letters.
- Leading-​ the spacing between the lines of a paragraph. When you have close
leading they get closer to each other vs. open letting expands the space.

- Color Theory Basics:

- Hue- another word for a “color.”
- Saturation- describes a color’s strength or intensity. The more grey you add the more
desaturated it becomes.
- Brightness- determines how light or dark a color appears.
- Color scheme- a group of colors that are used in a project.
- The color wheel-​ helps you create color combinations. To create ​complementary color
schemes​, for ex, pick a color and go exactly across from it in the wheel.
- There a lot of color schemes you can create based on the color wheel-

- To select a layer and make a copy of a part of the layer, click Command + J and it will
create a layer out of the selection. Use eraser tool to erase any pixels from the layer that
you don’t need.
- Edit + fill or shift + delete will give you a dialogue box so you can fill certain colors. The
one we are using in content aware which fills the selection with what photoshop thinks
should be there based on what is surrounding it.

4
 - Edit + transform + warp allows you to completely edit a flat layer and create something
new.
- You can create your own drop shadow by creating duplicating layer and making black by
changing lightness. Step 2: make it fuzzy, applying filters- go to blue gallery
- The black and white looking cookie in the layers panel bottom allows you to make
changes to layers without permanently distorting them.
- Google free photoshop mockups
- Clone stamp tool- hold down option key to define area you want to copy then it will be
cloned anywhere else you want.

The science behind computers- September 27th, 2016:

Operating Systems & Intro to UNIX-
● Operating System​: the software that supports a computer’s basic functions such as
scheduling tasks, executing applications, and controlling peripherals. Like Mac OS X.
- The interface that allows you interact with the components underneath it, giving
you something to click to have something happen.
- OS allow us to perform more powerful tasks more efficiently.
● Early Computers:
- Didn’t have operating systems
- Ran one program at a time
- Operators would have to allocate computer resources and memory
- The first OS was developed in the late 1950s.
- Early computers could do something that was almost a kilobyte of size, which
took them a long time to complete.
● OS: Ua piece of software
● The Kernel​ is the main part of the OS that is the bridge between the
applications/peripherals and actual data processing. It determines how much resources
of memory need to be allocated for certain tasks.
● Application Software​, also known as an app is a piece of computer software designed to
help the user perform specific tasks- calendar, photoshop, mail etc..
○ Runs “on top” of OS
○ Depends upon the capabilities of the OS
○ Usually only works on one type of OS
○ Today apps are running away from desktop version and moving towards
clouds/online versions that allow you to run it off the web. Web/cloud based
software so you don’t need to install them on your computer anymore.
○ Gives you a lot of flexibility with being mobile.
● A ​peripheral​ is a device that is connected to a computer but not part of it. It expands the
computer’s capabilities but does not form part of the core computer architecture. It is
often completely independent. Like a hard drive, disk drive, monitor, mouse…
● Operating systems -- Applications <-> Kernel <-> CPU etc.
● Process Management-​ keeps applications running, scheduling applications so they
share the processor.

5
 ● A ​central processing unit​ (CPU), also referred to as a central processor unit, the
hardware within a computer that carries out the instructions of a computer program by
performing the basic arithmetical, logical, and input/output operations of the system.
● Storing Data in the COmputer’s Memory-​ retrieving data from the hard drive, caching
data, making sure the computer doesn’t run out of memory.
● Random-access memory (RAM)​ is a form of computer data storage. A random-access
device allows stored data to be accessed quickly in any random order. The higher the
RAM the faster the processing. It’s reserved memory for accessing stuff.
● Other types of data storage memory- hard disks, CD’s, flash drives, external hard drives.
● OS Usually have a file system where data is stored using the metaphor of a filing
cabinet:
○ Files, folders, applications that allow you to easily browse the file system.
● The Desktop Metaphor-
○ Monitor-> documents & folders-> opened up on your desk-> office accessories.
● CLI vs. GUI-
○ CLI: Command Line Interface = issues commands to an OS directly by typing
lines of code. That was the old way without today’s OS.
○ GUI (“gooey”): Graphical User Interface = interacting with the OS by manipulating
images rather than text commands. Putting a skin over our operating system to
allow us have a visual reference of what we want to do like drag and drop…
● UNIX:
○ Developed by AT&T Bell Labs in 1969
○ Uses a Command Line Interface (CLI)
○ Free distribution, Open System (open source) free for use and modification.
○ Portable, multi-tasking, multi-user
○ Servers, workstations, mobile devices
○ Basis of Linux and Mac OS, BSD Unix, AIX
● Why use CLI (Unix) over GUI?
○ Think of it as a car metaphor- manual vs. automatic transmission
○ With CLI you are working directly with the data, so non-data elements can’t get in
the way.
○ Allows for certain tasks to be more powerful. (ie: moving, copying, renaming 1000
files).
● Terminal​: ​a MAC application that works with the UNIx Shell programming (more info
missing).
● Using terminal-- Command Structure, we write a command, like make a folder, then we
have options for a given command like what would the name of the folder be, and
arguments which would add another option.
● Unix File System-
○ File and directory paths use the forward slash to separate the directory (folder)
names in a path. Ex: with a pic inside a photos folder it will be Desktop/photos
folder/file name.jpg

6
 ○ Use ​cd​ to change the directory/folder to your home delivery. Use ​cd..​ To get like
a back button and take you one level up.
○ If you want to reach a particular folder use cd <dir name> which will take you to
the specified directory.
● chmod​ is the command which sets permissions on your computer.
● Every file and directory has nine permissions associated with it
● Files and directories have three types of permissions (or none):
○ r(read)
○ e(write)
○ x(execute)
○ -(no permission)
● The above permissions occur for each of the following classes or users:
○ u(user/owner)
○ g(group)
○ o(other/world)
● The permissions can be altered by typing in specific codes in the Terminal. You won’t be
tested on what each code is from slide 19 but good to know.
● A command line interface cheat at the end of the PDF so you can try out terminal.
● What is a Web Page?
● An HTML of php file which sits in a folder with other photo, audio, video files which are
organized in a folder structure that uses web browsers, who’s job is to look through
these files and reading them. So the web page is really just files.
● Two languages we will be learning -
○ HTML (HyperText Markup LAnguage)​: used for organizing and formatting
content
○ CSS (Cascading Style Sheets)​: used to define and assign styles to all the
HTML organizing we have. HTML is the body and CSS is the outfit. Hard Coding
aesthetics into a web page using HTML requires it to be repeated to every single
page. Using CSS allows us to separate aesthetics into a different style which
cascades into every page.
○ HTML5 and CSS3​ are the most recent versions which we will be using.
○ Programs for Writing HTML/CSS - dreamweaver, adobe … we will be using
textwrangler​ but you can also use things like note pad.
● The Internet & Web:
● A network of connected computers vs. a system of hyperlinked documents on that
network.
● Everything works visa shared protocol free for everyone to use.
● Clients & Serves:​ all these files and documents live on servers, and our computers
communicate via ​Hypertext Transfer Protocol (HTTP)​ through a series of Requests and
Responses.
● Finding your way around the web-
○ 1. The IP (Internet Protocol) Addresses: 128.122.119.209

7
 ○ 2. Domain Names like nyu.edu, google.com, facebook.com. What you can
purchase and from that you can have as many URL’s you want on a specific
website.
○ 3. URL (Uniform Resource Locator) specific addresses to specific pages within
the domain name.
● Browsers- software application on a client machine. Sends requests and receive files.
Displays documents, images, sound and video.
● Each browser renders a website slightly differently.
● Download a text editing software-- textwrangler and ftp program Cyberduck or Fetch.

The Internet- September 29th, 2016:

- For the case of this class everything will be on the i6 server.
- This means you put stuff on server and when you log on your browser is asking to
receive the content living on the server
- Getting started-- Organization is key!
- Make a folder and give unique names.
- Open text editor and paste in content. DO NOT open an html page using a word
processing program like word/pages because the they edit your text.
- Save your file with .html extension (ie: home.html) in your folder. Naming is
case-sensitive, you can use capitalization but no spaces.
- Start by thinking of content so you can map things out.
- All html content is written inside a tag < >. For majority of html tags there is an opening
and closing. P stands for paragraph so <p> this is my first paragraph </p>. You close it
using the same opening tag but with a backslash. All content inside is whats marked up.
- So its opening tag <p> content </p> closing tag.
- Basic website structure--
- <!DOCTYPE> defines to the browser that we are writing an html file.
- <html>
<head>, content not rendered out by browser but it will read it. Like
keyword/search terms.
<title>, what you will see at the top.
</title>
</head>

<body>

</body>
</html>
- We access these files using FTP- File Transfer Protocol.
- Software application that allows you to add files to your web server.
- public_html is the main folder we will be uploading our work in. It is basically our
homepage.
- Inside this folder we will have lots of files and folders.

8
 - Cyberduck makes the phone call to access content while textwrangler is where we write
the code.
- Every website has the same name for a homepage in lower case- index.html. We can
have multiple index.html pages they just can’t be in the same folder. Assignment 1has
one assignment 2 has one etc.
- Our url is gonna be the i6.cims.nyu.edu/~lsk311
- <h#> tags are headliners. H1 through h6 is about hierarchy and importance, h1 are
biggest and most imp. While h6 will be smallest. Big pieces of copies will be h1 tags and
headers will usually be h2 or h3 tags.

The Internet- September 29th, 2016:

- Everything is case sensitive when naming files. So the index page has to be low case.
- One index html in our root public_html folder but you can have more than one in each
folder.
- New tags, link up index with tag page and link assignment one to the index page.
- Working on the server is good cause its more efficient however if you make any
mistakes it is live and there is no trash can, you can’t come back from deleting
something and saving.
- <!DOCTYPE> lets browser know which html type we are using, here we are using html5.
- <head> tag we will put key words, website description, links to our css style sheets, but
the info there doesn’t render into the page.
- Anything inside the <body> tag is what will render on our page.
- H tags-- h stands for header. By default they each have a style but once we get into css
we can start specifying how each header looks. But each h1 should always be the most
important headline on the page. The best thing is to have one h1 on a webpage for
search results to figure out the keywords of your page.
- P tags- paragraph tags
- Html doesn’t recognize hard breaks, if you want a line break you have to tell html to add
it, the tag is <br /> it is one of the few tags that don’t need opening and closing tags. Just
add the <br /> after each sentence you want to add a space between.
- <strong> and <em> will add bold and italics to text. But its best to use it for importance
and emphasis not merely decorative.
- Using lists <ol> ordered lists​ -- add <li> nested inside as list items. It will automatically
indent and numerate the list items in ascending order.
- If you want to jump one of these list items and force it to start higher up you can
add an attribute to the tag.
- The <ul> unordered lists.
- If you want to create multiple levels of indentation you can create lists within lists.
- You can even nest an ordered list inside an unordered list if you wanted to.
- To add comments in html and css files <!--This is a comment-->
- Comments also allow you troubleshoot what is not working by commenting out
certain sections of code to figure out where the break is happening.

9
 - The way to link things is with an <a> tag. You add attributes to link tags to tell it where to
go. Because our tags.html is in the same folder as index.html all we have to write is
tags.html to establish hyperlink.
- We can also link to external places! To link to our class website, just add the whole link
using the <a href=””> tag.
- To link to a picture just add the a tag with href. However, because we are only linking to
an image you can go back through a link on the image page. It is not an html page it is
only an image page.
- Assignment 3-- you need to make a two page website find list of requirements on our
class website. Include a logo/graphic that you make on photoshop on both pages. Add
paragraph, heading, and images in both pages. Hyperlinks that allow you to toggle back
and forth and hyperlink back to the root index.html page taking you to assignments.
Make one image a link. At least one list and one table.

HTML5- October 6th, 2016:

- Creating a table -
- <tbody>, <thead>, <tfoot>, <tr> ← to add rows.
- To specify values of columns and rows- you need to create three cells in the
head to specify what happening in each column. For that you use <th> which is
table header, that defines the column content. It automatically bolds the text.
- <th scope=”col”></th>, <td> = table division, divides the rows and
organizes the content.
- If you want a cell to have a specific width you add colspan and if you want
to change specific height of table you add rowspan like <td colspan="3">.
- To add an image inside the table-- the src”img” doesn’t need a closing
tag-- <td><img src="img/Yes.png"</td>
<table>
<caption> Pros and Cons of Bulldogs and Poodles</caption>
<thead>
<tr>
<th scope="col">Do They...</th>
<th scope="col">Bulldogs</th>
<th scope="col">Poodles</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

10
 - You need to really think about how you wanna organize your page to optimize it
for more formats.
- Use:
- <header>
- <nav>
- <section>
- <article>
- <footer>
- All of these go inside the body tag.
- We duplicated homepage and now just edit the other page so it has the same
layout but just change the info!
- Organize out the structure to look like header, nav, section, article, and footer.

CSS- October 11th, 2016:

- <header> we put an unordered list for the navigation here.
- <nav>
- <section> all the info inside the nav.
- Section subdivided into <article>
- <footer>
To go back one folder you put </p<a href=”../index.html”> Back to assignments page</a></p>
So basically based on the file outlay, the .. is telling you to go back one folder and look for the
page specified.

You need three pages, the first one is the index.html in public folder with links to assignments.
Other two pages about any topic you want. You should link them to each other and should also
link back to the home page. One home page for your website and one content page.
At least three hyperlinks, like linking to other pages or to wikipedia or other website.
Have one image as a hyperlink, like the logo or photograph.
Make your navigation a list. One table and properly formed html tags.

- CSS separates the aesthetics from the content.

- CSS stands for Cascading Style Sheets.
- It can live in its own document. Allows for flexible targeted application of style rules.
Allows you to work on the one separate file and only make changes once instead of
hardcoding every detail.
Applying CSS:
- External Style Sheet (preferred)
- Internal and
- In-line styling, can only do one at a time, you are working on each line specifically.
- To link html files to css you need to insert this code in the head of an HTML document,
where info doesn’t render into the website only gives info to the browser.
- <link rel=”stylesheet” type=”text/css”href=”styles/styles.css”/>
Writing styles:

11
 selector→ Body{padding:15px; background-color:#FFF000;} You can have as many
pairings as you want for a given selector. The property and value are always separated
with a ; and pairs are always separated using a :

To change all the p tags, you add the code to the top of the page under the head of the
document, below the title.
To have the background on everything and not have any gaps between paragraphs, you
need to

CSS- October 13th, 2016:

- Class vs. ID Tags
- Things we are defining in our CSS Style sheet but calling in our HTML
- Inline vs. Block
- Block automatically add space when you use them, create hard blocks like p
tags.
- Inline goes with the flow depending on the size of your browser, they flow next to
each other. Image tags are inherently inline.
- We can define in CSS if we want inline or block.
- Centering an image, if the margins are automatic it will center the image. img {
display:block; margin: auto; }
- The Box Model:
- Everything we create in HTML exists as a box/rectangle. Certain things we can
do in CSS:
- The Border, to outline the box.
- The panning, separating the content from the border.
- The margin creates the space in between two different boxes of content.
- Think of it as paintings-- the border is the picture frame, the padding is the
madding separating content from frame, and the margin is the distance between
each paintings.
- To give values to padding and margins (in pixels):
- Padding:15px; global
- padding -right:15px; just the right side.
- Padding:15px 40px 15px 40px; to assign four different values that move
clockwise around the content box.

CSS- October 18th, 2016:

- font-size: 1em; 1em = 16 pts. The em works things as a percentage and in
relation to the set point from the body.
- To style a list item in an unordered list in the navigation,
- Editing the a tag, adding the border to make a button, the more padding the more
clickable space you have.
- When dealing with links in a button --
- a:hover - rollover

12
 - a:active - when you press on it
- a:visited - changes color when you already accessed it

Midterm review​--
- 50 mcq’s bring a #2 pencil for bubble sheet.
- Broken up into four chunks:
- 1) 20 q’s on photoshop-- main tools used in class like lasso (3 of them) like which tool
would you use to do this….
- Know masks, used for non-destructive editing, meaning you can hide some parts
of a layer. It deals with black and white colors, ​when you have a mask which
color does the image show through on?​ ​White. Black conceals, white
reveals.
- Knw resolutions-​ screen and print resolution and what defines resolution and
size, those two are independent what is the diff?
- File types--
- Color-- what’s the diff between rgb cmyck which is additive which is subtractive,
and which is used for what? Ex: which color mode would an image on the web
use-- RGB!! Ex: Knowing that RGB is an additive color process.
- 5 q’s on the computer principles. No q’s on permission codes but know the gooey? And
know basic commands in terminal, changing directory, listing items and naming a folder.
We will be asked about one of those.
- Second half of exam will be HTML and CSS--
- Here are four examples of linking an image, which is the right way to hyperlink text or an
image?
- 2 q’s about tables, what are the tags used to define a cell, table header, know diff
between ul and ordered lists.
- Questions like what is the best tag to achieve x….
- The different types of address, an IP a domain and a URL
- Know about CSS and what version we are using.
- What an FTP program is.
- CSS, same idea as html, if “i want to style x,y,z what will i use?”
- Know diff between​ ID and class​ and how they are used.
- ID used once, class can be used multiple times. One needs comma one needs
semicolon?
- There is also a question about the a:hover, a:active, and a:visited too.
- Know box model and the metaphor we used in class.. The ART gallery, the frame is x,
the madding is padding, etc.

Good Site/Bad Site- October 25th, 2016:

Good website has-
- Navigation
- Good Design
- Hierarchy of Content

13
 - Color Scheme
- Legible fonts // emphasis
- Variation
- Visual Consistency
- Response
- Content
- Written
- Images
- UI/UX user interface / user experience
- Surprise
- Innovation

Web Design Process- October 27th, 2016:

- Discovery
- Analysis
- Competitors
- Trends
- CONTENT
- Design
- Site map
- Mood boards
- Look + feels
- Full comp.
- Development
- Beta build
- Final site

WireFraming- November 3rd, 2016:

- For fake dummy text use baconipsum.com when creating a wireframe.

Here is a list of required elements to include.

Add media queries to each of your HTML pages to choose among alternate style sheets. Feel free
to copy and paste the code above.
Create three separate CSS style sheets—desktop.css, tablet.css, and mobile.css—that correspond
to the media queries.
Add div tags to logical column sections of your HTML documents. (​No need to add divs if you
have been using sections and articles!!​)

Add style rules that allow your divs to float next to each other.
Modify each style sheet for optimal viewing with different browser widths.

14
Principles of Animation- November 3rd, 2016:
Principles of Animation:
- Position A->B
- Rotation
- Transform (height +width/scale)
- Opacity
- Properties
- Window→ timeframe → frame by frame- The frame allows you to literally work on
each frame of the animation.
- Key frame (yellow diamond)= specific property at a given point in time.

Twitter Bootstrap- November 29th, 2016:

- 12 column grid allows for guided design, specifying different ways to break up content
around the grid.
- Bootstrap has this grid built in and we can automatically get it to size things based on
column span, where classes automatically size content for us.

Review:
- 5 Questions on twitter bootstrap.
- Opensource- free and community aspect where everyone can contribute and
make it better.
- Why use bootstrap? Inherent template based into it, built in responsive design,
equipped with built in CSS and javascript.
- Bootstrap is front end.
- Backend is everything that you can’t see (i.e. Where the contacts go in a contact
form)
- Components: nav bar, carousel/sidestroke, jumbotron.
- Wireframing- mood boards, site mapping, creating the design, dictating the position of
images and text etc.
- Using design software to create wireframes allows for more hi-def design, more detail
than a low-fidelity rough sketch.
- UI- User Interface- the physical experience of the web design
- UX- User Experience- the way a user feels while navigating through the web site. Like
adding loading animations, drop downs, things can fade in, play into the color scheme
and aesthetic of the design to add to the UX. Flow of content also adds.
- Patterns with wireframing- why are they important in the wireframing and web design
process?
- You want to create consistency unless you are creating a hierarchy of content.
- 10 questions on components of responsive design:
- Why is it important, why we need it, why we should include it on our sites.
- Where can we write additional styles for creating responsive design.
- In different CSS documents, desktop, tablet, and mobile.css.

15
 - Media queries in the html pages, based on a series of variables helps us identify
which stylesheet to use.
- In these style sheets we can change font size, column orders, nav bar, column
width, anything as long as it is css based (aesthetic).
- Using float we get the columns to sit next to each other. Sometimes when using
it, the element next to it moves up, to get rid of the float-- clear.
- Using overflow allows us to show the content.
- Standard device sizes- like what device is something of this size meant to be
viewed on? (Look at the bar chart in the slides)
- Know the difference between absolute, relative, and fixed positions.
- Fixed vs. fluid? Element with fixed width vs. fluid, how do we determine that?
- Things percentage based will be fluid and change with browser size while
fixed will always have a specific width.
- HTML and CSS:
- Some core concepts, vocabulary, interpreting code samples, and error checking.
- We will get a page of HTML and he will ask about it, how many images, how
many links, are there any errors? A very basic webpage which he will write out.
- In terms of HTML, know stuff we put in the header, tables and lists, structures of
tags, main sections of an HTML document, difference between IP address and
HTML address (review the previous info on this).
- In terms of CSS and HTML, know how we write out the syntax of certain rules.
- In line, internal, and external style sheets.
- In line vs. block, class vs. ID, box model etc…
- A wild 5 questions on FTP, MAC and operating systems, UNIX, CPU etc.
- Color theory, resolution, raster vs. vectors.
- Last part of exam will be on photoshop and digital imaging with questions of gifs
built in to that.
- Know core tools of PS.
- in terms of animating gifs, and they loop how many times can they loop?
- On actual test-- when dealing with CSS and HTML, we talked about fixed vs.
fluid, if we want to create flexible sizes for fonts, how would we dictate that in
CSS?????
- We would use the em measurement to make it flexible.
- When creating external stylesheets, how can we embed another style sheet in it?
- @import (URL)
- So the only styles you have to write are the ones you want to overwrite
into the style sheet.
- What are some of the limitations to the gif format?
- Pixel size, it won’t be as clear because it only take ​256 colors​, because
the colors are limited it can never be super crisp.
- Some benefits of the gif, you can make it see through and it can be
animated forever.

16
 - When we created gifs using the video timelines, the ​key frames​ are the
yellow dots of positioning or changing any attribute. The changing of a
property at a specific time, time-based.
- Do the gifs have to loop? Nop.
- To hide an element in CSS, use display:none.
- Some HTML elements that do not need closing tags:
- Line break <br>
- <img>
- linking stylesheet.
- <Doctype>
- <hr> horizontal rule.
-
- How do we create nested lists?
<ul>
<li> one </li> /*two elements here */
<ol>
<li>two</li>
</ol>
</ol>
</ul>
- Know the difference between commenting in html and css. Know the box model
we talked about in addition to the art gallery metaphor the midterm questions.
- Different ways we can define colors in HTML: RGB, HEX, and the actual name.
- He will give us a style rule and have us specify all the elements in it.
- Know what HTML and CSS stand for.
- HTML: Hyper text markup language
- Cascading Style Sheets.
- He will ask us to use tools to draw something??
- Know the difference between a layer style and layer effect.
- Review color and type, RGB and CMYK, kerning, letting, and tracking from the
typing lesson. Difference between serif and sans-serif font, and resolution.
- Bootstrap- ​variable attributes that we can add to the video tags- control, autoplay, and
loop.
- Variable: a definition we create which holds a specific value.
- Function performs a series of tasks.
- example:

--defining a variable called myAudio and assigning it a value of audio1--

var myAudio = document.getElementById("audio1");

function playPause(){
if(myAudio.paused)
myAudio.play();

17
 else
myAudio.pause();
}

- Types of buttons in contact form: radio, checkboxes, and drop down.

- Input tag is used to define each input area in our contact form and we then define what
kind of field it is from the button options above.
- Adding the ​required​ element makes the field a requirement for the contact form to go
through.

No JQuery in exam!!!
WebHosting- December 15th, 2016:
- Hosting space is a server somewhere that allows you to put all your files online,
like the i6 account.
- Web hosting costs anywhere from 10$ per year to $30 per month.
- Disk space (more is better, but you often won’t need more than a few GB)
- Bandwidth, the more people who come to your page the more you will
need. It will crash if your server if you don’t have enough bandwidth to
handle the traffic.
- Dedicated server space vs. shared server, we are using a shared one.
- Dedicated server is one with only your website on. Good for lots of
traffic and storage size, its just more expensive and if one
person’s server blows up it will impact everyone on it.
- To save everything we did in this class, take public.html server and copy it to
desktop save that. When you get a new domain name you just drag that into the
new public folder.
- SEO:​ Search Engine Optimization:
- Process of making your site easy for others to locate.
- The more thoughtfully and selectively you choose it the higher up it’ll
appear.
- On page techniques are the methods you can use to improve search
results for your site. Get really specific with the URL cause it will help with
search results.
- This involves identifying and implementing keywords in seven particular
places in your page:
- Page title,
- URL
- Headings
- Text
- Link Text
- Image alt text, creating hyperlinks
- Page Descriptions

18
 - Use h tags in the headers for really important information so the search
engine can find it.
- Search Engine off-page techniques:
- Search engines also look at the number of other sites that link to
yours to determine search ranking.
- This is especially so when the content of a referring site is similar
to yours.
- Check google analytics to see the traffic on your site.
- It is ideal when the words that appear in links to your site also
appear in the text of the page that the site links to.
- Finally, as more people visit your site the search ranking will also
improve.

19