HTML & CSS Flashcards
What does the following CSS mean?
box-sizing: border-box;
Box sizing decides what type of box model to use.
Border Box will add margin and padding to the width of the box, allowing for less difficulty when formatting pages.
Why should photoshop comps be minimal?
Due to time it takes to create. The site will not look exactly the same as the comp.
What should you do in replace of a photoshop comp?
- Style tile
- Wireframes
- In browser Wireframe
What does a wireframe do?
Works out the flow of your site.
What is a poly field?
It is a javascript file. That forces the browser to recognize features it would usually not naturally support.
Browser Prefix
When a browser tests out a feature. Need to use a specific prefix
- webkit - (chrome, safari, edge)
- moz- (mozilla)
What are the 4 property of floats?
- Comes out of flow
- Needs a width of less than 100%
- Parents do not embrace the floats
- Need to ensure there is enough space
What does Clear do?
Forces the element to ignore the float and go directly under them.
What does Clear Fix do?
Forces the parent to contain the floats.
Create an invisible element that comes after the floats and clears both floats.
What does a reset do?
To override browser defaults since all browsers are different.
What is Modernizr and what does it do?
Is a javascript file. It tests and validates what CSS features work within the browser.
How does Modernizr work?
Depending on how the testing modernizr performs, it creates classes in HTML tag either a property name or a no-js class.
Why is modernizr important?
To create fall backs if JS is not supported or does not work.
Tip. Add a class=no-js to your html tag even before adding modernizer.
How do you make your site accessible?
- Adding an alt tag
- Tab index (when tabbing and it auto focuses)
- Correct input styles
How many h1 tags can you have in your html?
Multiple
