Skip to content
OverviewSolutions
7
Comments
7

Gracia Naimora Samosir

@cia2003180 points

Undergraduate student. Only use github to keep my project(s) or exercise(s)

Latest solutions

View more solutions

Latest comments

  • P
    Faisal Almail•410
    @faisalalmail
    What are you most proud of, and what would you do differently next time?

    Proud of:

    • Applying both flex and grid display properties for different @media
    • customizing the view for 3 different screen sizes
    • Starting to use CSS variables by setting color codes in :root
    What challenges did you encounter, and how did you overcome them?

    I believe it was a straight forward process The challenge here is the HTML mark-up

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

    Are you adding a margin to the top? or how do you center the page content vertically?

    Flexboxes and grid view for testimonials

    2
    Gracia Naimora Samosir•180
    @cia2003

    Good job! You did this project really well. Your layout's design, especially for tablet screen, really inspires me. it looks great and gives me a good reference for improving mine.

    As a suggestions, it is much better if you start to write a scalable and maintainable CSS. So, when you work on a group project, not only you but also others can maintain the code.

    For your question, honestly, I kinda confused too. Once, I use this code on the body (it can be implemented on your code):

        display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;

    It looks like the code was succeed. But, when you set the size to medium or smaller screen, it will cut some of the testimonials's part. So, I fix it with using overflow-y: scroll on that code. But, I think there is a better way. Sorry I did not give you the exact answer :D

    Marked as helpful
  • Gracia Naimora Samosir•180
    @cia2003

    I think you did this project really great! It almost look the same as the original one :D. Other than that, I think you can implement the CSS grid really well.

    I have a suggestions for your future projects:

    1. I think you need to learn how to write scalable, maintainable CSS. It is helpful for you and others to maintain your code. I suggest you to learn about BEM Methodology.

    2. I see on your code that you write like this:

    html,
body,
div,
span,
applet,
object,
iframe,
h1,..{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

    I suggest you can simplify it like this:

    * {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
    Marked as helpful
  • Gracia Naimora Samosir•180
    @cia2003

    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•3,180
    @mustafasen97
    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•180
    @cia2003

    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•170
    @kindlypi8MCeN7
    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•180
    @cia2003

    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
  • Gracia Naimora Samosir•180
    @cia2003

    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
View more comments