All comments

Rossella Ferrandino• 10
@RossellaFer
Submitted 7 months ago
What are you most proud of, and what would you do differently next time?

I planned the HTML beforehand, thinking about the semantic elements that could be used for the different sections of the design.

Next time I would try out a CSS framework, or extend the design with some micro interactions on hover.

What challenges did you encounter, and how did you overcome them?

Getting the colors right without the use of Figma

What specific areas of your project would you like help with?

What semantic elements would you use for this layout? I chose because it is meant for a reusable component.

What do you think about the CSS organization? I tried to have the more general rules at the top and then move on to the elements top to bottom

Results summary using HTML/CSS/JS
2
Shaurya Gupta• 100
@madebyshaurya
Posted 7 months ago
Hi, I wanted to say that if you were having trouble with colours, you can use the "style-guide" file included in every frontend mentor project. The style guide has specific colours which you can copy-paste in your website.

If you found this useful please upvote this comment, thanks.
1

Jesús Rico• 10

@Riguedev

Submitted 8 months ago

I would like to know if the way I have worked with CSS is good practice and if not, how I could improve.

I also want to know if the html structure is well ordered and if it has good semantics.

Sorry if there are errors, my English level is low, I got a little help from the translator.

I used HTML5, CSS with custom properties and a mobile-first approach

Shaurya Gupta• 100

@madebyshaurya

Posted 8 months ago

To be honest I am not a CSS pro either but looking at your code I would say to keep your code as concise and easy to read as possible. You can take a look at the way I did it (even though it also might have some problems in it.)

    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    background-color: #d6e2f0;
    background-size: cover;
}

img {
    width: 300px;
    border-radius: 15px;
    margin-top: 15px;
}

h2 {
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    font-family: 'Outfit';

}

.mainDiv {
    background-color: white;
    width: 330px;
    height: 500px;
    text-align: center;
    /* margin-top: 100px; */
    /* margin-left: 50px; */
    border-radius: 15px;
}

p {
    font-family: 'Outfit';
    color: #7b879d;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 15px;
    text-align: center;
} ```

Please mark as helpful is this helped.

Marked as helpful

Shaurya Gupta

All comments

Results summary using HTML/CSS/JS

I used HTML5, CSS with custom properties and a mobile-first approach