Final exam web design

What are diff ways we can define color in CSS?

RGB values HEX Name of color

wireframe

a visual guide that represents the skeletal framework of a website

Most common combined features of media queries

min-width and max-width

Float: clear

property is used to control the behavior of floating elements. Elements after a floating element will flow around it. To avoid this, use the clear property.

Only (media query syntax)

screens out older browsers from reading the rest of the query

CSS float property

Specifies whether or not an element should be positioned alongside of another element on a web page • none (default) • left • right • clear (removes a float from HTML elements)

more on clear property

The clear property specifies on which sides of an element floating elements are not allowed to float:

CSS position

Specifies the type of positioning used for an element on a web page • static (default) • absolute, rel to its first positioned parent element • fixed, rel to the browser window • relative, rel to its normal position

API - in front end with UI

Application program interface

CSS (version CSS3)

Cascading Style Sheets - Used for defining and assigning styles PRESENTATION (outfit) (happens directly in the web browser)

JavaScript

Facilitates interaction (happens directly in the web browser)

Importance of Responsive design

Font size, order or columns, nav bar, column width, ANYTHING can be changed as long as it is CSS based

HTML (version HTML5)

Hypertext Markup Language - used for organizing and formatting CONTENT (skeleton) (happens directly in the web browser)

Basic Style Sheet Link

<link rel="stylesheet" href="style/basic.css">

Style Sheet Link with Media Query

<link rel="stylesheet" media="only screen and (min-width: 640px)" href="style/main.css">

Difference between layer style and layer effect

?

Other types of devices (query)

all, aural, braille, handheld, projection, tv

Bootstrap

-a front end framework for developing responsive, mobile-first projects on the web -contains HTML and CSS + optional JavaScript extensions

Responsive web design (RWD)

-an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).; -design for flexibility

Media Queries

-new in CSS3, technology of responsive web-design, -they enhance the media type methods - can be used to load an alternate style sheet or offer alternate styles within an existing style sheet

Back end (web development)

-refers to the functionality of a website that is not visible to a person (transaction takes place on the back end of a database on a web server) -usually consists of a server, an application, and a database -most often used languages are PHP, Ruby, and Python

Float

property can be used to wrap text around images.

Front end (web development)

refers to the elements of a website that a person sees and interacts with (usually uses CSS, HTML, and JavaScript)

Examples of widgets

tabs, carousels, tooltips

the box

the minimal visual building block of a wireframe is __________

You can combine multiple features and values with ____

the word, and

Logic of media queries

two possible values: only or not

Media queries

used to determine screen size and apply different styles accordingly

When was bootstrap invented and why?

was developed as an internal toolkit for Twitter and released as open source in 2010

Most common types of devices (query)

• screen • print

Features of media queries

• width • height • device-width • device-height • orientation • aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan grid

Interactivity (bootstrap)

interactive components or "widgets" can extend the behavioral aspect of bootstrap web pages (need to understand JavaScript to do)

Not (media query syntax)

negates the result: "not screen" means everything except screen

clearfix hack

overflow: auto; (within {} of .clearfix) to fix problem of overflowing outside of container

Layout & design

bootstrap offers a grid layout system which organizes page content into a series of rows and columns

Wireframes

can be done by hand, creates a series of placeholders to dictate where images or text etc. will go, can be drawn or done with software, looks at low (less detail) and high fidelity (more detail) designs

Device sizes

comp: 1024 tablet: 768 smartphone: 240

Feature: value

feature is one of the predefined media features must be enclosed by parentheses and preceded by "and"