Brainscape's Knowledge GenomeTM

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


See full index

HTML/CSS > Components and Layout Patterns > Flashcards

Components and Layout Patterns Flashcards

1
Q

CSS: How to center an element with a width of 700px?

A

.accordion{
width: 700px;
margin: 100px auto;
}

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

How to add an icon to your page?

A

At heroicons.com look for the .svg tag and and simply add it to the page

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

How to quickly copy class names for the css?

A

Alt + select and then copy

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

Address more elements than one?

A

.number, .text{}

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

.hidden-box ul{
margin-left: 20px;
}

.hidden-box li{
margin-bottom: 12px;
}

How to do this better in flexbox?

A

.hidden-box ul {
margin-left: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}

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

How to change alignment direction in flexbox? What are the implications for the other properties?

A

flex-direction: column;

align-items goes horizontally
justify-content goes vertically
gap acts like margin-bottom

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

How to add gaps in CSS grid?

A

column-gap: 24px
row-gap: 32px

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

In VS code, how can you simply collapse a part?

A

Hit the arrow on the left?

Note: When copy/pasting this, it will paste in NON collapsed form

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

In CSS property, how to vary between visible and not-visible?

A

Visibility property
Vary between block and hidden

visibility: visible;
visibility: hidden;

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

Difference between display and visibility property?

A

The visibility CSS property shows or hides an element without changing the layout of a document.

To both hide an element and remove it from the document layout, set the display property to none

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

What will happen when setting only the height of an image?

A

The propertions of the image will be maintained?

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

CSS property: How to set all text in the container to white

A

color: #fff

Will apply to all text in the referred to container

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

How to typically start with a new bit of content?

A

Put all the content there and work from there

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

How to apply the rest of the colors apart from the base color?

A

Use a color style sheet (for testimonial text for example)

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

When wanting to use an image that you want to let fall out of the boundaries of the container, what property would you use?

And which properties to position it correctly?

A

transform: scale(1.8)
(for example)

Then use inspect to keep track of the center of the image. Use gap and padding to make the image come out properly

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

How to apply shadow?

A

box-shadow: 0 12px 24px rgba(0,0,0,0.1)

Offset, blur, color

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

How would you use the inspector in your design

A

Checking and unchecking buttons and see the results

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

When applying two round buttons for backward and forward, what properties could be necessary?

A

background-color
border: none
height, width
position: absolute
border radius: 50%
display: flex, align and justify –> To center icon

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

What is probably going wrong here with the alignment unless intentional? (left and right button)

.btn{
background-color: #fff;
border: none;
height: 40px;
width: 40px;
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 24px rgba(0,0,0,.2);
cursor:pointer;

A

The buttons will not be aligned to the center of the container but will be lower than that because it adds the height of that element.

To resolve: transform: translate();

Use left and right in separate css and set the dimensions of each while

.btn–left {
/* In relation to PARENT ELEMENT */
left: 0;
top: 50%;

    /* In relation to ELEMENT ITSELF */
    transform: translate(-50%, -50%);
  }

  .btn--right {
    right: 0;
    top: 50%;

    transform: translate(50%, -50%);
  }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Set cursor to pointer

A

cursor: pointer

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

If you don’t want to use flexbox, what could you use instead apart from CSS Grid?

A

Absolute positioning is sometimes favored

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

Can you overwrite paddings after having set a general padding?

A

Yes

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

How to build a table in html?

A

Start like with emails
Body > table > tr > td

Good to note that tables are not used that much anymore due to the rise of flexbox

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

Table: How would you address to head row?

A

<thead> for head row
<tbody> for rest

Nesting:
table > thead > tr > td
table > tbody > tr > td
</tbody></thead>

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

Table: How to distinguish between head row and the rest of the table?

A

Head row: Use thead
Body row: Use tbody

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

Table: How to let an element in the table stand out?

A

Use <th> in stead of <td> for an element

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

What can you use instead of margin: 0 auto?

A

display:flex
justify-content: center

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

Table: How to prevent that there’s a double border?

A

border-collapse: collapse;

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

How to only address the first row of the table?

A

thead th{
}

30
Q

Table: How to fix white space between the cells?

A

Without using the actual border, you do need the border: collapse property to break away the lines

31
Q

Table: How to set all columns to an equal width?

A

thead th{
width: 25%
}

Rest of the cells follow accordingly

32
Q

How to fill the rows of a table with alternating light grey and darker grey?

A

tbody tr:nth-child(odd){
background-color: #
}
tbody tr:nth-child(even){
background-color: #
}

33
Q

How would set up pagination buttons (left, right, numbers) in html?

A

div container ‘pagination’ and directly under that the buttons, numbers (in href) and dots (span tag)

34
Q

When does the trick of margin 100px auto not work?

A

When you don’t specify a width for the container

35
Q

What would you use when you don’t want to specify a width for the container?

A

display: flex

36
Q

How would you let the icon color change inside a button when you hover over it?

A

Combine classes:

.button:hover .arrow{
stroke: #;
}

37
Q

What to do when you want to give your pagination numbers a width and height?

A

Set as:
display:inline-block;

Since the <a> are inline by default they cannot have a heigh or width</a>

38
Q

What would you write in css to set the pagination numbers on one line?

A

display:flex;
justify-content: center;
align-items: center;

39
Q

Somehow, the text color of the page number is not applying when using the second selector. How come? And how to resolve?

.page-link:visited{
color: #;
}
page-link{
color: #;
}

A

They are both applying their properties, but the first one takes preference because it is more specific.

To resolve this issue: use an & selector, meaning using two classes at the same time.

.page-link.page-link-current{}

40
Q

What is the difference between a descended selector and an & selector

A

Descended selector is when the second class is a child of the first class, like:
.button:hover .arrow{}

&Selector takes two classes independent from each other

41
Q

All nrs here got stacked. Why is that and how to resolve?

.page-link:visited {
font-size: 18px;
color: #343a40;
text-decoration: none;
height: 36px;
width: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;

A

Reason why they got stacked is because flex is by default a block element. Each element in the container is a block now.

Solution: Set its parent container to flexbox

42
Q

How to add fonts to your page

A

In google fonts select your font along with font weights. Then paste the link tags right under the title tag in html

43
Q

When having to words that you want pushed to the sides (one left, one right), what would you use?

A

display:flex;
justify-content: space-between;

44
Q

What to do when wanting to apply padding to a button

A

display: inline-block;

45
Q

What can be the reason why this is not working?

.container{
margin: 0 auto;
}

A

For margin auto to work you need to have a width on the item.

46
Q

What is the first thing you write in css?

A

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

47
Q

What does this mean?

height: 100vh;

A

It means 100% of the viewport height

48
Q

What is good alternative when flexbox is not working the way you intend?

A

Position absolute and relative

49
Q

How to center an element to its parent?

A

left: 50%;
top: 50%;
transform: translate(-50%, -50%)

50
Q

How to create an extra element within an element while putting everything in the left half

A

new div{
width:50%;
}

51
Q

How to add an background image to the page?
What problem arises?

A

background-image: url(img.jpg)
Image not aligned well

52
Q

How to make the background image properly cover the viewport?

A

background-size: cover;

53
Q

How to make the text white in an element?

A

color: #fff;

54
Q

How to apply a gradient to a background image?

A

background-image: linear-gradient(
rbga(0,0,0,0.6),
rbga(0,0,0,0.6)
)

55
Q

Which takes precedence?

.container{
margin: 0 auto;
}
nav{
margin-top: 32px;
}

A

.container

class takes precedence over more generic selector

56
Q

In a web app, what html elements could you use for:
navigation
menu
inbox
view panel
additional info

A

nav
menu
section
main
aside

57
Q

Say you have 4 columns and you want 1 column to change in size when dragging the viewport. What would you write?

A

grid-template-columns: 80px 400px 1fr 250px;
grid-template-rows: 80px 1fr;

58
Q

Analyzing the rows. How come the second row is not filling the viewport? How to resolve?

grid-template-rows: 80px 1fr;

A

Body only occupies the space that it needs, so height is limited to the last div

Set body{
height: 100vh;
}

59
Q

Say you have 4 columns. How would you let the first column run to the bottom?

A

nav{
grid-row: 1 / -1;
}

60
Q

Say you have 4 columns, but you want the second column of the first row to run til the end horizontally

A

menu{
grid-column: 2 / -1;
}

61
Q

How to put text in the center of an element?

A

text-align: center;

62
Q

What could be the case when buttons are centered to a column?

A

It could be that it says somewhere that:

body{
text-align: center;
}

Instead use flexbox for aligning the buttons (after setting them to inline block)

63
Q

How to add padding to a button?

A

display: inline-block;

64
Q

Say you have 5 buttons and want to put the last one at the end of the page horizontally, and also make it red

A

button:last-child{
background-color: red;
margin-left: auto;
}

margin-left is a simple but very effective trick

65
Q

How to center text in a button?

A

display: flex;
align-items: center;
justify-content: center;

66
Q

How to make buttons vertically in one direction while adding spacing between them

A

Consider flexbox with changed direction

display: flex;
gap: 40px;
flex-direction: column;

67
Q

How come this works?

.email {
background-color: #adb5bd;
height: 96px;
flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

<section>
<div>Email 1</div>
<div>Email 2</div>
<div>Email 3</div>
<div>Email 4</div>
<div>Email 5</div>
<div>Email 6</div>
<div>Email 7</div>
<div>Email 8</div>
<div>Email 9</div>
<div>Email 10</div>
</section>

A

Flexbox treats text as flex item

68
Q

How to make a section so that it is not showing all the items but rather scroll through them when it overflows?

A

In the section use:
overflow: scroll;

Remember though that overflow property has nothing to do with flexbox

69
Q

What new problem arises when adding scroll and how to resolve?

A

By default, flex items are allowed to shrink if necessary but we can turn that off

Resolve:
flex-shrink: 0;

Only necessary when using flexbox

70
Q

Say we want to hide away the part that overflows, what do we use?

A

overflow: hidden;

71
Q
A

HTML/CSS (11 decks)

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