Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5
Gracia Naimora Samosir
@cia2003

All comments

  • Utenoh Joshua•10
    @Diam0naz
    Submitted 3 months ago

    Responsive site achieved using Flex box layouts & MediaQueries

    1
    Gracia Naimora Samosir•110
    @cia2003
    Posted 3 months ago

    Hello!

    I see that you want to put a creativity in your project, like using different color for the background. It is great!

    I suggest you read about BEM methodology to improve your code's clarity. It will be helpful for other developers to read your code. For example, I see in your html's code like this:

    <div class="price">
      <span class="pic1"> $149.99 </span>
      <span class="pic2"> $169.99 </span>
    </div>
    

    As you can see in the div.price there are two spans with class pic1 and pic2. It is unclear if you said it as a price or picture.

    For the product category (div.DIV1), you can use properties like text-transform' to uppercase the text or letter-spacing` to give space between the letters in CSS.

    Hope that helps!

  • Mustafa Sen•110
    @mustafasen97
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I think I wrote the codes more regularly this time and I am quite happy with it. But I think I still have a lot to fix. Next time I'd like to make sure the codes are even more organized.

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

    I can say that I had a little difficulty with the instructions. I figured this part out by doing some research.

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

    In general, every feedback is very important to me. I'm open to comments.

    Recipe Page Solution

    1
    Gracia Naimora Samosir•110
    @cia2003
    Posted 3 months ago

    Oke, I am impressed that you make the recipe page nearly pixel to the design one on desktop screen. You did great!

    I have some advice for you about the code.

    • At .image-container, you set the min-height and max-height to 300px. I suggest that you can add the property height with 300px value. And, I suggest you remove some properties like min-width = 100% because you already declare it on width property .So, here is the code:
    .img-container {
        height: 300px
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    Marked as helpful
  • P
    kindlypi8MCeN7•150
    @kindlypi8MCeN7
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing.

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

    Nothing.

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

    Nothing.

    Social Media Card (HTML/CSS)

    1
    Gracia Naimora Samosir•110
    @cia2003
    Posted 3 months ago

    Hello!

    Based on the screenshots, I think you did good on the project. When I see your code, I see that you put font-family in (almost) every text element. I suggest that you can put the font-family at the body to make it the main font and add the font fallbacks as a backup font.

    As an example

    body {
      /* other codes */
      font-family: "Inter", monospace;
    }
    

    The "monospace" family font is a font fallback.

    Marked as helpful
  • ِAhmed•840
    @Axsel519
    Submitted 3 months ago

    Blog preview card

    1
    Gracia Naimora Samosir•110
    @cia2003
    Posted 3 months ago

    Overall, I think you did great! However, I think you need some improvements:

    • You can add "gap" between each text so that it will look really nice. So, the code will look like this:
    .text {
      display: flex;
      flex-direction: column;
      padding-left: 4vh;
      gap: 12px /* You can change the value*/
    }
    
    • You can use align-self: flex-start and add gap: 12px to make the profile move to the left and remove the justify content and the right padding.

    Hope that helps!

    Marked as helpful
  • Gabriel de Miranda Albuquerque•30
    @Gab-off
    Submitted 4 months ago

    QR code component - a simple card in center of a screen

    1
    Gracia Naimora Samosir•110
    @cia2003
    Posted 3 months ago

    Hello, Gabriel! This is my opinion about your code

    • Yes, it does include semantic HTML, your code clearly states the main content and the footer.
    • Yes, your code is accessible in different screen devices.
    • Yes, the layout looks good on the different screen sizes.
    • Yes, it is well-structured, readable, and reusable because you clearly state the semantic. Keep up the good work!
    • Overall, your solution is not differed from the design, except for the size of the QR container.
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub