All comments

• 

  Rossella Ferrandino•10

  @RossellaFerSubmitted 8 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?

  1. What semantic elements would you use for this layout? I chose because it is meant for a reusable component.
  2. 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

  100
  

  Shaurya Gupta•100

  @madebyshauryaPosted 8 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

  @RiguedevSubmitted 9 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

  1

  20
  

  Shaurya Gupta•100

  @madebyshauryaPosted 9 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

  0