Web Design Rules and Framework Flashcards
What is used when people are being quoted?
blockquote
What can you say about amount of typefaces ?
Don’t use more than 2, especially when you’re beginning
A way to limit type size
Use a ‘type scale’ tool
Line height in relation to size of text?
The smaller or longer the text, the larger the line height needs to be!
normal-sized text –> 1.5 and 2
big text –> below 1.5
When increasing something like line-height from the console which key combi would you use
With alt + arrow you can increase with small amount
You need a least two types of colors in your color palette: A main color and a ….
grey color
.btn-link{
padding: 16px 32px;
}
Why is this failing?
Link is an inline element and with inline element the box model does not work as expected
Solution: set it to display:inline-block
Don’t set it to block then it would take up all the width
Difference links and buttons?
Links take the user to a new location such as a new web page or section.
Buttons trigger some action, such as showing content on the page that was previously hidden
How to apply shadows?
small shadows on smaller elements that stand out
Medium-sized shadows for larger areas that should stand out a bit more
What type of windows uses shadows
It is good for navigation and pop-up windows
How is the shadow property build up?
box-shadow: 20px 20px 20px 10px
Offset X
Offset Y
Blur
Spread
When is the figure tag used?
Common element that is used for a product card for example.
How is the text-shadow property build up?
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
With color for example:
rgba(0, 0, 0, 0.2)
Why use border-radius and how to apply design-wise
Increase the playfulness
Make sure to match the roundness of typeface
Use it on buttons, images, icons, standout sectiont,etc
How to apply something to only the images of the chair class
.chair img{}
