Would you please have a look at my code and offer any suggestions for improvements?

HTML-CSS
1
2

I see several instances of repeated CSS that is unnecessary. For example, when I see the following:

.pot-large{
    position: absolute;
    height: 100px;
    width: 100px;
    left: 200px;
    top: 310px;
    border-radius: 10px 10px 40px 40px;
    background-color: #45170D;
}

.pot-large-copy{
    content: "";
    position: absolute;
    height: 100px;
    width: 100px;
    left: 200px;
    top: 310px;
    border-radius: 10px 10px 40px 40px;
    background-color: #45170D;
    
}

the second selector is almost identical (except the addition of content: "";. When you have situations like this, do this instead:

.pot-large, .pot-large-copy{
    position: absolute;
    height: 100px;
    width: 100px;
    left: 200px;
    top: 310px;
    border-radius: 10px 10px 40px 40px;
    background-color: #45170D;
}

.pot-large-copy{
    content: "";   
}
1 Like
3

Thank you! Could you tell me other ways to reduce CSS lines?

4

Just look for situations where there is 75% duplication and put all the duplicated parts in a single group of selectors.

I would also look into using CSS variables, so you can define commonly used values (like colors) in one part of your CSS and then use them in the various selectors. This way, if you want to change one color to another color across multiple selectors, you only have to update it in one place.

1 Like
5

That’s SASS, right? I will look into it.

6

Another thing I am curious about is if I can use pseudo selectors here?

7

No, it is plain CSS. See this FCC practice project to learn more about using them.

1 Like
8

Potentially. What are you trying to achieve that you think you need them?

9

Nothing much, just wanted to complete this project with all the things that can be done.