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;

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

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 in relation to the parent element (unless intentional)? (left and right button)

How to set it up properly?

 .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? And how does the nesting then look like?

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

The <th> HTML element defines a cell as the header of a group of table cells

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 in a table?

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 <div>

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

When hovering the button, the icon does not light up at all. What could

.btn-icon:hover {
   stroke:#
}
A

It lights up when it hovers over the icon, not over the button. Therefore use a class combiner taking both the hovered button and the icon. You’ll get something like:

.btn:hover .btn-icon {
   stroke:#
}
38
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>

39
Q

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

A

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

40
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{}

41
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

The descendant combinator — typically represented by a single space (“ “) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

42
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

The page links have been turned into flex containers (display:flex)
Flex containers behave like block elements and therefore they are not shown in line

Solution:
Set its parent container to flexbox

.pagination{
display:flex;
align-items: center;
}
43
Q

In this case below, why is there a height and width used and not padding?
Also why is inline-block used here?

.page-link:visited {
font-size: 18px;
color: #343a40;
text-decoration: none;
height: 36px;
width: 36px;
border-radius: 50%;
display: inline-block
A

With padding there are uncertain results due to page link character size. With height and width this is fixed.
Being inline by default, it is not possible normally to add space around the page link character

44
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

45
Q

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

A

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

46
Q

What to do when wanting to apply padding to a button

A

display: inline-block;

By default, user agents style buttons as display: flow-root, which establishes a new block formatting context and centers the button’s children both horizontally and vertically as long as they do not overflow. If the button is defined as a flex or grid container, the children will behave as flex or grid items.

47
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.

48
Q

What is the first thing you write in css?

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

border-box vs. content-box
With content-box, padding can make the box larger than the given width
With border-box it will stay that width and the padding will be on the inside

49
Q

What does this mean?

height: 100vh;

A

It means 100% of the viewport height

50
Q

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

A

Position absolute and relative

51
Q

How to center an element to its parent taking into account its own height and width?

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

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

A 
new div{
width:50%;
}
53
Q

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

A

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

Use url(“filename.png”) when wanting to use an image

54
Q

How to make the background image properly cover the viewport?

A

background-size: cover;

55
Q

How to make the text white in an element?

A

color: #fff;

56
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)
)
57
Q

Which takes precedence?

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

.container

class takes precedence over more generic selector

58
Q

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

A

nav (section of a page whose purpose is to provide navigation links)

menu (represents an unordered list of items, treated as <ul>)

section (represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it)

main ( represents the dominant content of the <body> of a document. )

aside (represents a portion of a document whose content is only indirectly related to the document’s main content.)

59
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;

grid-template-columns: Gaat over hoe de kolommen over de breedte verdeelt worden
grid-template-rows: Gaat over hoe de rijen over de breedte verdeelt worden

60
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;
}

61
Q

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

A

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

grid-row refers to a grid item instead of the container

62
Q

Say you have 4 columns in the body, but you want the second column of the menu element row to run til the end horizontally.

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

A

Modify the grid item

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

Menu will run from the second column til the end horizontally

grid-column refers to a grid item instead of the container

63
Q

How to put text in the center of an element?

A

text-align: center;

64
Q

What could be the case when buttons are centered automatically 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)

65
Q

How to add padding to a button?

A

display: inline-block;

66
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. It maximizes the space between the last button and the forelast button

67
Q

How to center text in a button?

A 
display: flex;
align-items: center;
justify-content: center;
68
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;
69
Q

How come you are able to center the text in the email container?

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

        display: flex;
        align-items: center;
        justify-content: center;
      }
  <section>
      <div class="email">Email 1</div>
      <div class="email">Email 2</div>
      <div class="email">Email 3</div>
      <div class="email">Email 4</div>
      <div class="email">Email 5</div>
      <div class="email">Email 6</div>
      <div class="email">Email 7</div>
      <div class="email">Email 8</div>
      <div class="email">Email 9</div>
      <div class="email">Email 10</div>
    </section>
A

Flexbox treats text as flex item

70
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

71
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

72
Q

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

A

overflow: hidden;

HTML/CSS (12 decks)

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