Web Dev Interview Questions

Box Sizing

In CSS, you might often see this:

* { box-sizing: border-box; }

In CSS, actual width is calculated as width + padding + border. Actual height is calculated as height + padding + border. So for example without box-sizing: border-box, the height of the elements with the class below, wouldn’t actually be 400px. It would be more because of the padding.

.someDiv{
    height: 400px;
    padding: 25px;
}

To fix this you just need to add box-sizing: border-box. This way padding is included in the height of 400px, and the elements with the class will have a true height of 400px.

Using Non-Standard Web Fonts

One way to use non-standard web fonts is to use google fonts.

Get Coffee Bytez’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Google Fonts

Click the plus button next to the font you want to use, click the bottom sheet it has on the bottom right, it will give you the code to use. For example, if you chose Roboto and Spartan, it would give you this code to add to your header:

<link href="https://fonts.googleapis.com/css?family=Roboto|Spartan&display=swap" rel="stylesheet">

Then in your CSS, you would use this code(choose one for each class, id, etc.):

font-family:'Roboto',;
font-family:'Spartan,;

Resetting Vs. Normalizing CSS

Resetting CSS removes all of the built-in stylings from your browser. You might reset CSS like this:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Normalizing CSS means to make the CSS consistent across all browsers. You might need to use browser-specific prefixes to normalize CSS or use this package:

Normalize.css