Web Design Flashcards
Design Principles for Every Type of Site?
- Balance: symmetric & asymmetric
- White Space or empty space. room to breathe and focus on the content.
- grids: splits a page into columns and rows
- Color
- Graphics: help support the content ( optimize your images so that they don’t delay your site with long loading times.)
- Typography
- Consistency: cohesive experience by maintaining the same style or design
5 Stages of the Web Development Process
- Step 1. Design: color schemes, function, special features ( like e-commerce), graphic videos de overall look UI
- Step 2. Review: After the team has worked and go through the design process. It is time to show the client ( will provide feedback to implement)
- Step 3. Develop: once approved . it is toem for the website to go to the developer side. Meanwhile someone works in the ux writter to give a tone and a voice
- Step 4. Test once the website have been coded by the developer team. It is time to review the website in the serve( live version of the website). Usually there are a few tweaks that need to be made at this stage before the site is finalized.
- Stept 5. Launch: Once everything is approved and check is time to launche the site. that includes (setting up the hosting and domain)
What is Responsive Web Design?
- Responsive web design makes your web page look good on all devices.
- Responsive web design uses only HTML and CSS.
- Responsive web design is not a program or a JavaScript.
- Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device: to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
https://www.w3schools.com/css/css_rwd_intro.asp
Media queries
Media queries allow web developers to create responsive designs that adapt to different devices, screen sizes, and viewing environments.
For mobile:
@media only screen and (max-width: 600px) {
/* For mobile: * }
For tablet
@media only screen and (min-width: 601px) /* For Tablet: * }
For Desktop
@media only screen and (min-width: 768px) { /* For Desktop: */}
Grids
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS Flexbox
Flex box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
**Block
Before the Flexbox Layout module, there were four layout modes:
Key Concepts and properties of flexbox General
- Display: Flex or inline-flex This enables the container to control the layout of its child elements.
- Flex Items: The elements inside a flex container are called flex items. By default, flex items will align themselves along a single row (flex-direction: row) and adjust their size to fit the container.
- Flex-direcction: determines the direction of the main axis along which flex items are laid out. It can be set to row (default), column, row-reverse, or column-reverse to change the direction.
- Justifiy-Content: It allows you to distribute the items and adjust their spacing. Common values include flex-start, center, flex-end, space-between, space-around, and space-evenly.
Align Items and Align Content:
1. Align items: items along the cross axis (perpendicular to the main axis).
1. Align content: the alignment of multiple lines of flex items.
- Flex flow = wrap:property allows you to control whether flex items should wrap onto multiple lines when depending on the size.
- Flex Grow, Shrink, and Basis:
- Flex grow: specifies how much an item can grow relative to other items,.
- Flex shrink: controls how much it can shrink
- **Flex basis: **sets the initial size of the item
Flexbox Properties (Parent)
Flex Direction
row|row-reverse|column|column-reverse|initial|inherit;
Flex wrap
nowrap|wrap|wrap-reverse|initial|inherit;
flex-flow:
flex-direction flex-wrap|initial|inherit;
justify-content:
flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
Align items
normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit;
* Align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Flexbox Properties (Children)
order number|initial|inherit;
flex-grow number|initial|inherit;
flex-shrink number|initial|inherit;
flex-basis number|auto|initial|inherit;
flex flex-grow flex-shrink flex-basis|auto|initial|inherit;
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
html semantics
- Semantic elements = elements with a meaning.
- A semantic element clearly describes its meaning to both the browser and the developer.
- Examples of non-semantic elements: Tells nothing about its content.ej div or spam
- Examples of semantic elements: Clearly defines its content. header form, section
Semantic Elements in HTML
- article it self-contained content. meaning it make sense on its own. can be move around the website blog, post, porduct cars, user comments
- aside defines some content aside from the content it is placed in (like a sidebar). content should be indirectly related to the surrounding content.
- details
- figCaption same as figure but witth a label
- figurecontent, like illustrations, diagrams, photos, code listings, etc.
- footer typically contains : authorshio info, copytight info, contact info, sitemao, back to top links, related documents… (You can have several footer> elements in one document)
- header container for introductory contetn or a set of navigation links. typically contains( 1o 2 heading, logo, authoreship info)
- main
- mark Defines marked/highlighted text
- nav defines a set of navigation links.
- Section is a groups of elements tyoically with a heading like a module. A webpage can be split into senction for intri, content, contact… para agrupar elementos para organizar
- summaryDefines a visible heading for a details> element
- Time Defines a date/time
Note: You can have several header> elements in one HTML document. However, header> cannot be placed within a footer>, address> or another header> element.
Nesting article in section or Vice Versa?
So, you will find HTML pages with section> elements containing <article> elements, and article> elements containing <section> elements.
What is Specificity?
Think of specificity as a score/rank that determines which style declaration is ultimately applied to an element.
Specificity Hierarchy
There are four categories which define the specificity level of a selector:
Inline styles - in the htmlExample: h1 style=”color: pink;”>
IDs - Example: #navbar
Classes, pesudo-classes, attribute selectors- Example: .test, :hover, [href]
Elements and pseudo elements - Example: h1, ::before
How to Calculate Specificity?
The specificity of A is 1 (one element selector ej: h1
The specificity of B is 101 (one ID reference + one element selector) ej: h1 #content
The specificity of C is 1000 (inline styling ej: h1 id=”content” style=”color: pink;”>Heading/h1> (this one has the hifhestspecificity value
