Creating Page Layouts with CSS

Question 1

What does semantic tags do to our webpage?

Answer 1

Make it nice for readers and also for indexing

Question 2

What is the “Do not lie metatag?”

Answer 2

Is a meta element containing the initial definition of width, initial scale and maximum scale.
``

Question 3

What are the four most used semantic elements? Where are all they located?

Answer 3

header, nav, section, footer. INSIDE the body element.

Question 4

Where to find fonts? How to import the selected fonts to our website?

Answer 4

fonts.google.com. Import them by using the “embedded” tab and copying the content inside our HEAD element

Question 5

Is it recommended to use css reset or normalize? What each one does?

Answer 5

css reset resets all the predefined styles defined by the browser. Normalize does the same but less intrusive.

Question 6

Should we separate CSS files? one example containing 4? Does the order matter?

Answer 6

normalize.css, small, medium and large.css. Yes.

Question 7

How do the CSS files are organized in a mobile-first approach? How do the CONTENT of these files are activated?

Answer 7

normalize and small are always applied, medium only for tablets and large only for computers. ACTIVATED via media queries.

Question 8

Regarding border-box: Are margins applied inside the box? what about padding?

Answer 8

margins = OUTSIDE
padding = INSIDE

Question 9

What difference between jpg, png and svg? what does svg mean?

Answer 9

jpg = images;
png = images with transparent backgroud;
svg = scalable images
svg means SCALABLE VECTOR GRAPHIC

Question 10

When SVG used the most? why?

Answer 10

For icons because they look great for all screen sizes

Question 11

do div and section has default styling?

Answer 11

NO

Question 12

What does the clear property do?

Answer 12

It allows removing preceding or succeding floating elements to below

Question 13

In a regular layout screen, can the elements touch the border of the browser?

Answer 13

no.. this is a design issue.

Question 14

What is a hero image?

Answer 14

It is an image that brings attention to our site.

Question 15

Why do we need to set a pre-defined height and weight in our images even when they are overwritten by the css? Does it do what we call “Jank removal”?

Answer 15

So that the image box takes its place before the image downloads and this way the content won’t be pushed down. YES

Question 16

What happens when you use an absolute element with top:0 without caring about the parent? What is necessary to be done then?

Answer 16

The element will go to the top of the page. necessary to define the parent element as position: relative

Question 17

Considering a 12 column layout, how much space (%) of the screen a col-lg-3 would ocupy? How many of these will fit in one row?

Answer 17

3/12*100=25%

12/3=4 (4 pieces fit in a 12 column grid)

Question 18

Why using a css preprocessor? Which is a good sass compiler?

Answer 18

to unify all css files into one. to minimze duplicated code and etc. also has built-in minifier. also nesting.

COMPILE HERO

Question 19

What is the sr-only in bootstrap?

Answer 19

screen reader only

Question 20

how a 6 colum row is expressed on bootstrap?

Answer 20

container
row
col-md-6

Question 21

What does Flexbox replaces in the current float system? Is float system then deprecated?

Answer 21

clear-both -> display: flex; 
                      flex-wrap: wrap;
float: left  -> CAN BE REMOVED;
width: 100%  -> flex-basis: 100%;
.clearfix:after{}  -> CAN BE REMOVED;

YES. DEPRECATED.

Question 22

How to create a set of col-md-X with SASS? Do I have to write each one by hand?

Answer 22

SASS supports loops which allows calculating stuff and also creating dynamic selectors for each col-md-X.

Question 23

How do we make sure the box model is applied the same for all browsers?

Answer 23

define moz-box, webkit-box and box-sizing to border-box

Question 24

What is grid system and how many columns is the default size?

Answer 24

Separates the screen in twelve equally separated columns.

Question 25

What do we need to define in the CSS so the image scales properly?

Answer 25

width: 100%;
height: auto;

Question 26

Are the HTML elements rendered in the same order defined in the HTML? Is it top to bottom? What is the keyword that change the default behavior?

Answer 26

Yes. Yes. Position.

Question 27

What is “CSS Slenderize” according do the author?

Answer 27

Using multiple selectors to group to avoid css duplications on too-specific selectors.

Question 28

What is the drawback of using bootstrap? Why do people choose it anyways?

Answer 28

Its size. 264kb total… where a small project css and js will be 4kb total.. to increase development speed.

Question 29

Inline-block is a value of which css property?

Answer 29

Display