Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

HTML/CSS > Omnifood Project - Setup and Desktop Version > Flashcards

Omnifood Project - Setup and Desktop Version Flashcards

1
Q

What is a good way to start a new front end project?

A

Make and MD document in VS code where you put all the text divided over sections

In general CSS file, add al the font sizes, line heights, spacing distances, color combinations, generic blocks, etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
1
Q

What elements are by default needed in your MD file?

A

Font sizes / weights
Line heights
Spacing system
Typography system
Shadows
Border radii
White space

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the four responsive design ingredients?

A

Fluid Layouts
Responsive Units
Flexible Images
Media Queries

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the tips / reminders for fluid layouts?

A

To allow the webpage to adapt to the current viewport width

Use % (or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout)

Use max-width instead of width

Flexbox and CSS grid are fluid by default

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the tips / reminders for Responsive Units?

A

Use rem unit instead of px for most lengths
This will make it easy to scale the entire layout down automatically

Helpful trick: Setting 1rem to 10px for easy calculations

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are the tips / reminders for Flexible Images?

A

By default, images don’t scale automatically as we change the viewport. so we need to fix that

Always use % for image dimensions, together with the max-width property

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are the tips / reminders for Media Queries?

A

Change CSS styles on certain viewport widths

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the downsides of setting an element with:

width: 1000px;

How to resolve?

A

The viewport will show a scroll bar because the element remains 1000px

Therefore use:

max-width: 1000px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are the downsides of setting an element with:

width: 100%;

How to resolve?

A

When the element is 1000px and the screen is wider than 1000px, the element will feature the whole viewport width and that is not what you want.

Therefore use:

max-width: 1000px;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What does rem stand for and how large is it by default?

A

Root element

By default it is 16px

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What does rem size depend on?

A

Font size

Herein lies the strength of rem - When changing the font size all lengths are automatically updated based on that change

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How would you set the rem to 10 instead of 16?

A

html{
font-size: 10px;
}

This is very convenient because it makes it easy to calculate with

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is recommended instead of setting the font-size to 10?

A

font-size: 62.5%
This is because 62.5% of 16px is 10px

html{
font-size: 62.5%;
}

It is recommended to not use pixels for font-size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How to easily center something on a page (again) ?

A

Use the margin trick as shown below:

.hero {
max-width: 130rem;
margin: 0 auto;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a great tool to use to generate tints towards black and tints towards white?

A

https://maketintsandshades.com/

It is bookmarked.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Hence the following buttons:

<a>Start eating well</a>
<a>Learn more ↓</a>

How to address both buttons and how to address a single one?

A

Both:
.btn,
.btn:link,
.btn:visited {
display: inline-block;

Single:
.btn–full:link,
.btn–full:visited {
background-color: #e67e22;
color: #fff;
}
.btn–outline:link,
.btn–outline:visited {
background-color: #fff;
color: #555;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What trick can you apply when there’s a border around a button?

A

Use box-shadow instead of border:

.btn–outline:active {
/* border: 3px solid #fff; /
/ Trick to add border inside */
box-shadow: inset 0 0 0 3px #fff;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How to add a bit of animation to a button?

A

Use the transition property

.link:visited {
transition: all 0.3s;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What is a helper class?

A

Adding an extra name to the class so you can refer to that specific html part

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How to add new fonts? What will you receive?

A

You will receive a set of link elements

These need to be placed between you meta and title tags

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

When to use flexbox over grid?

A

Small designs

Align elements: Create a flex container using display: flex and then define the flex-direction that you want

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

How to make images in a row overlap a little bit? And how to make sure the last one does not?

A

Use margin right

.delivered-imgs {
display: flex;
}

.delivered-imgs img {
height: 4.8rem;
width: 4.8rem;
border-radius: 50%;
margin-right: -1.6rem;
border: 3px solid #fdf2e9;
}

.delivered-imgs img:last-child {
margin: 0;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

When a span element is part of a p element and you want to change the span styling. What to do?

A

Use a descended selector instead of a new class

.delivered-text span {
color: #cf711f;
font-weight: 700;
}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is a useful tool to check color contrast?

A

coolors.co

And then contrast checker

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What does the nav element do?

A

Nothing, but is very useful semantically

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the main element used for?

A

Contains the main area of the web document, so without header and footer

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What could be a good reason for not giving the header padding? Does this apply to height or width?

A

You might want to make it sticky later on. Applies to height. Not to width

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

How is a nav section tyoically set up in HTML?

A

Nav tag, ul tag, list tags with link tags

Then it is modified later on

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

How to get rid of the bullet points in a list

A

list-style: none;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What element should a button in the nav bar become when you want to apply a bit of padding?

A

inline-block;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

Say you want to style the last button in the nav bar differently. What would you do?

How do you make sure this one applies and not the other one?

A

Create a new class for the last button

The more specific the class, the higher precedence it has

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What is a good trick for copying a line beneath the current line?

A

Shift + Alt + Arrow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

.section-how:nth-child(1){}

Somehow this does not work. Why?

A

You have to use a descended selector here:

.section-how div:nth-child(1){}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

How could this be written as well?

grid-template-columns: repeat(2, 1fr)

A

grid-template-columns: repeat(1fr, 1fr)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Given:

<section>
<div class="container"
<div>Test 1</div>
<div>Test 2</div>

How to style the Test elements
</section>

A

Use double div

.section-how div div {

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

When same CSS applies to two classes, how to write this in CSS?

A

.heading-primary,
.heading secondary{

}

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Color coding: How to easily play with white/grey values?

A

Go from #fff to #eee to #ddd and check results

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

How to quickly center an image in the container?

A

Set container to flex, then center with align-items and justify-content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

You want to apply a pseudo element to an image. How to?

A

Pseudo element cannot be applied to an image. It is not allowed to attach child elements to images.

Therefore apply it to the container of that image.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

How to add a circle behind an image?

A

Set the container element of the image to relative

Set the pseudo element to absolute and make sure it is a block element
step-img-box::before{}

Use the z-index and put it to -1 to set it to the background

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

How to add two concentric circles behind an image?

A

Use the code for 1 circle

You can’t use ::before another time, therefore use ::after

Play with the z-index to place the circles accordingly

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

When using

step-img-box::before{}

as a pseudo element, it sometimes does not take the height: 60% property from the parent. How to resolve?

A

Set padding-bottom:60%

This should work

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What is the use of h2 here?

<h2>As featured in</h2>

A

None. It is pure sementically. The class determines the styling.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

Difference between space-between and space-around in flexbox?

A

Space between does not apply to spacing of the left side of the first element and the right side of the last element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

How to set colored items to a gray scale? What problem could then still be there?

A

filter: grayscale(100%)

There fill be different gray tones, also black

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

What are some options for applying filter property to an element?

A

grayscale, blur, hue, etc

46
Q

How to change all colored elements to the same grey color?

A

color: #999

Then try different options, like #888, etc

47
Q

When wanting to have list items aligned in a vertical direction, what can you do?

A

Change flexbox direction

.meal attributes {
display: flex;
gap: 2rem;
flex-direction: column;
}

48
Q

What are implications of changing flexbox direction?

A

align-items is horizontally now, no longer vertically

justify content vice versa

gap is margin-bottom and no longer margin-right

49
Q

When using ionicons, which steps must you take?

A

Add a bit of script to your html as described on the ionicons website (ionic.io)

50
Q

Where to paste the ion icon element in case of a list item?

A

Within the list item element, just before the text that goes along with that list element.

For the text it is best to add a span element for alignment later on

51
Q

What properties do and don’t work on an icon?

A

Stroke and fill do not work but the color and dimension properties do

52
Q

What to do when the bold font weight is too strong?

A

Can be adjusted with the font-weight property, for example:

font-weight: 500;

53
Q

How would you make a ‘card’ out of a section

A

Take the container and apply shadow and border-radius to it

54
Q

When an element is overflowing the container and you want to hide it?

A

overflow: hidden;

55
Q

Say you want tag words with different colored backgrounds. How to do so?

A

Give them different class names and style them with different bg colors

56
Q

Say you have a set of tag words underneath each other and want to turn them into list items in VS code?

A

Alt + Select
Add <li> in front

57
Q

You want list items with icons and text. How would this be configured in html?

A

<li> <ion-icon> </ion-icon> <span> </span> </li>

58
Q

Say you want to add a fixed margin to some 3 column sections. How would you do this?

A

Add it to general css document:

.margin-bottom-md {
margin-bottom: 4.8rem !important;
}

Then add the class to the section:

div class=”container grid grid–3-cols margin-bottom-md”>

59
Q

What is currentColor?

A

It takes the color that is defined earlier in the color property (#e67e22)

.link:link,
.link:visited {
display: inline-block;
color: #e67e22;
text-decoration: none;
border-bottom: 1px solid currentColor;

60
Q

Why would you use transparent?

.link:hover,
.link:active {
color: #cf711f;
border-bottom: 1px solid transparent;
}

A

When simply removing the border-bottom, the entire page would shift one pixel. Best to keep it and just make it transparent.

61
Q

What does center-text here do?

<section>
<div>
<span>Meals</span>
</div></section>

A

It is a helper class to the other class:

.center-text {
text-align: center;
}

62
Q

Say you have a card or tile and you want to shift it a bit when hovering over it

<div>
<img></img>
</div>

A

Add a hover pseudo class to the card:

.meal:hover {
transform: translateY(-1.2rem);
box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

63
Q

Why is it necessary to add the transition property to both the container and the hover state?

.meal {
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
border-radius: 11px;
overflow: hidden;
transition: all 0.4s;
}

.meal:hover {
transform: translateY(-1.2rem);
box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.06);
}

A

So it also transitions back when not hovering

64
Q

When is a figure element used?

A

For anything that can have a caption and is self container, such as: diagrams, photos, code listing, etc

65
Q

What element is recommended for testimonials

A

Blockquotes

66
Q

When is a figcaption needed?

A

represents a caption or legend describing the rest of the contents of its parent <figure> element</figure>

67
Q

When stacking images on top of each other a line between them arises. What could be the case

A

Images are inline by default. Set them to block element

68
Q

What to do when wanting to scale one image in a gallery up a bit without affecting the whole container

A

Set scaling on image.
Then make sure it does not go outside its border (overflow):

.gallery-item {
overflow: hidden;
}

.gallery-item img:hover {
transform: scale(1.1);
}

69
Q

How to style the span part:

<p><span>$</span>399</p>

A

Use a descended selector:

.plan-price span {
font-size: 3rem;
font-weight: 500;
margin-right: 0.8rem;
}

70
Q

How to to align a grid item to the end of its cell?

A

justify-self: end

71
Q

Properties needed for adding a ribbon to a card?

A

Pseudo class, content, positioning, font, color, padding, overflow

.princing-plan–complete::after {
content: “Best value”;
position: absolute;
top: 6%;
right: -18%;
text-transform: uppercase;
font-size: 1.4rem;
font-weight: 700;
color: #333;
background-color: #ffd43b;
padding: 0.8rem 8rem;
transform: rotate(45deg);
}

.princing-plan–complete {
background-color: #fdf2e9;
padding: 4.8rem;
position: relative;
overflow: hidden;
}

72
Q

How to easily center the container

A

margin: 0 auto

73
Q

Set up container with 66/33 ratio:

A

grid-template-columns: 2fr 1fr;

74
Q

How to apply a gradient and what are the arguments?

A

background-image: linear-gradient(to right bottom, #eb984e, #e67e22);

So:
Direction
Color1
Color2

75
Q

How to find an image in CSS when it is not in de CSS folder?

A

First go to parent folder, then to image folder

…img/eating.jpg

instead of: img/eating.jpg

76
Q

Steps for adding a background image with gradient

A

Set background-size: cover (works when section is smaller then the image)
background-position: center
Apply alpha value to rgba

Full CSS:
.cta-img-box {
background-image: linear-gradient(
to right bottom,
rgba(235, 151, 78, 0.35),
rgba(230, 125, 34, 0.35)
),
url(“../img/eating.jpg”);
background-size: cover;
background-position: center;
}

77
Q

What could be the problem with an empty div and how to solve this issue

A

Cannot be read by a screen reader

Apply the role attribute
Instead of alt text, use aria-label

Full code:

<div></div>

78
Q

Hence the following html:

<section>
<div>

Say the container class and cta class container different styling. How to solve this?
</div></section>

A

<section>
<div>
<div>

Styling won't mingle now
</div></div></section>

79
Q

How to set the heading color to be inherited from parent?

A

color: inherit;

80
Q

What elements come along with a form?

A

Form, input, button element

81
Q

What is needed along with a form to send it?

A

Action attribute
You need some code on your server that is ready to receive this data

82
Q

How to add placeholder text + label to an email field?
What is additional advantage of this?

A

The for attribute is linked to the id of the input field

<div>
<label>Email address</label>
<input></input>
</div>

The result is that the cursor will become active in that field when clicking the label

83
Q

What elements are needed for a dropdown list?

A

Select and Option element

84
Q

How does the label work in case of the dropdown list?

A

The for attribute is linked to the id of the select field

85
Q

What attributes does the option element have?

A

It has a value element, which is the list option

86
Q

What to use when a form element must be filled per se?

A

Use the required attribute

87
Q

What is a best practise regarding each label + input element?

A

Group them together with a div element

88
Q

How would you arrange the input elements?

A

Use grid box, along with column-gap and row-gap for spacing

89
Q

What would be a fast way to style the form elements quickly?

A

Use a descended selector, for example:

.cta-form label {
display: block;
font-size: 1.6rem;
font-weight: 500;
margin-bottom: 1.2rem;
}

90
Q

How would you give the label its own line?

A

Set it to block

.cta-form label {
display: block;

90
Q

What would you write when wanting the grid over the whole grid area?

A

.cta-form input{
width: 100%;

91
Q

Do form elements inherit font family from the body by default?

A

No

92
Q

How to force form elements to inherit font from which ever parent?

A

.cta-form input{
font-family: inherit;

93
Q

How to style the placeholder of the input field?

A

.cta-form input::placeholder {
color: #aaa;
}

94
Q

How to style the input field the same as the select element?

A

.cta-form input,
.cta-form select {

95
Q

Why is the button not styled, such as the other buttons in the document?

<button>Sign up now</button>

A

Buttons, by default are only styled when there’s an href link

96
Q

How to make sure all buttons are styled in the same way?

A

By adding class you can add that class to the general doc

This way all form buttons will have that styling

97
Q

A button in the grid is very high and not same height as the other elements. How to resolve this?

A

A grid item by default stretches the whole area

Use align-self to vertically align the item - Notice it refers the item not the grid container

98
Q

What to do with the button to change the hover state?

A

Pseudo class

.btn–form:hover {
background-color: #fff;
color: #555;
}

99
Q

What is a good way for styling all the input elements for when they are in focus?

A

Add this to the general CSS document:

*:focus {
outline: none;
box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5);
}

100
Q

Where in the document is the footer placed?

A

Outside of the main element - Main area is for non repeating content

The header and footer might be repeated on other pages of the website

101
Q

How to setup a footer with 5 columns

A

Start with footer, then set the grid to the 5 column type, then put each column in a div

<footer>
<div>
<div>
</div></div></footer>

102
Q

What element is useful for contact details and how will it render?

A

Address element

Usually renders in italic and browsers will always add a line break before and after the address element

103
Q

How to write the telephone and email elements in html?

A

On a phone it is very useful to write the number in a link so can immediately call that person.

<p>
<a>415-201-6370</a><br></br>
<a>hello@omnifood.com</a>
</p>

104
Q

What is a good website for setting up color combinations?

A

coolors.co

105
Q

How to turn this into a link column?

ooter class=”footer”>
<div class="container grid grid--footer">
<div class="logo-col">
<a>
<img></img>
</a>

      <ul class="social-links">
        <li>
          <a class="footer-link" href="#"
            ><ion-icon class="social-icon" name="logo-instagram"></ion-icon
          ></a>
A

.logo-col {
display: flex;
flex-direction: column;
}

.social-links {
list-style: none;

106
Q

Why does it say display: block?

.footer-logo {
display: block;
margin-bottom: 3.2rem;
}

A

A link is by default an inline element

107
Q

How to push the copyright info to the bottom of the column?

.copyright {
font-size: 1.4rem;
line-height: 1.6;
color: #767676;

A

Use margin-top: auto
It will be pushed to the bottom as for as possible

.copyright {
font-size: 1.4rem;
line-height: 1.6;
color: #767676;
margin-top: auto;
}

108
Q

You have 5 equally sized columns and two of them you want a bit bigger. What to do?

A

.grid–footer {
grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
}

109
Q

How to add a subtle line between CTA and footer?

A

.footer {
padding: 12.8rem 0;
border-top: 1px solid #eee;
}

110
Q

Write in short:

padding: 9.6rem 0 12.8rem;

A

padding: 9.6rem 0 12.8rem;

111
Q
A

HTML/CSS (10 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions