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"