Skip to content
OverviewSolutions
6
Comments
7

Mustafa Sen

@mustafasen97100 points

I am a front-end software developer trying to improve myself. I'm waiting for your feedback.

Latest solutions

Latest comments

  • Mustafa Sen•100
    @mustafasen97Posted 12 days ago

    Very nice design.

    0
  • Mustafa Sen•100
    @mustafasen97Posted 12 days ago

    Your design is nice but it would be better if you centered the design completely.

    For this;

    You can delete the flex: 1; code in the .container class.

    Also, you can add the following codes to center the body section completely.

    justify-content: center;
align-items: center;

    Then it would be better to remove your gap: 20px; coding.

    You don't need the position relative, top and left commands to center the footer section, you can also delete them and the margin: auto; code.

    After all these adjustments, your design will look better.

    0
  • Mustafa Sen•100
    @mustafasen97Posted 12 days ago

    Good and interesting design.

    0
  • Mustafa Sen•100
    @mustafasen97Posted 13 days ago

    Your design is very good and looks almost the same. If you give border-radius: 10px; to the image it will look more similar. You can also give some padding to the paragraph section from the right and left to get a more similar design.

    Marked as helpful
    0
  • KeevKK•20
    @KeevKKSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Based on previous feedback I tried to use proper class names for the div tags as well as semantics such as section instead of just a div. I have also tried to make it easier to read the CSS file by putting it in order in relation to the html file.

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

    I am not too sure about the responsiveness. When I checked it in the browser with Inspect I thought it looked fine at 350px. Am I wrong and have I misunderstood something? Thank you!

    Blog Preview CArd

    2
    Mustafa Sen•100
    @mustafasen97Posted about 1 month ago

    When I checked, the design looks pretty good on mobile devices.But this was a bit of a coincidence because normally some adjustments are made using media tags for mobile devices.

    @media screen and (max-width: 350px) {
    body {
        background-color: yellow;
    }
}

    @media screen and (min-width: 350px) {
    body {
        background-color: red;
    }
}

    You can open Inspect in the browser by typing these codes one by one. You can then see for yourself how it works by changing the browser size.

    In addition, for responsive design, measurement units such as rem, em, %, vh and vw are generally used instead of px. Of course, this does not apply to things like border radius. It is more important in places such as font sizes and container sizes.

    0
  • saleh-25•40
    @saleh-25Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    everything

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

    how to center a div bro

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

    how to center a div bro

    awesome blog card thingy

    1
    Mustafa Sen•100
    @mustafasen97Posted about 2 months ago

    Display: flex; property, Flexbox layout, making it easier to arrange and align elements within a container. It allows child elements (flex items) to be dynamically positioned based on available space.

    To use this, go to the HTML tag that is the parent of the tag you want to center and add display: flex;

    The parent tag of the .card div is body. That's why we write our code here.

    body {
  background-color: hsl(47, 88%, 63%);
  display: flex;  
  justify-content: center; 
  align-items: center;
  height: 100vh; 
  margin: 0; 
}
    • We enabled flex feature (Display: flex;)
    • We centered the .card div horizontally inside the body (justify-content: center;)
    • We centered the .card div vertically inside the body (align-items: center;)
    • When using Flexbox, the container (e.g., <body>) needs a height to properly align its child elements. If you don't define a height, Flexbox won't know how much space it has to work with. If <body> has no height, align-items: center; won't work because Flexbox needs a reference point for vertical alignment. (height: 100vh;)
    • We reset the margin value for full averaging. (margin: 0;)

    By adding this code to the body, you can ensure that the elements in the body are exactly centered.

    0
View more comments