P
@dovlicioSubmitted about 16 hours ago
What specific areas of your project would you like help with?
Any possible feedback is welcome!
Mustafa Sen
@mustafasen97All comments
- @mustafasen97Posted about 9 hours ago
The design looks very good. Moreover, the codes are written cleanly. I liked it.
1 - P@coding-brianSubmitted about 1 month ago
- @DjordjeJasicSubmitted 16 days ago@mustafasen97Posted 16 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 - @pauldevcodesSubmitted about 1 month ago
- @Jewalikar-NitinSubmitted 16 days ago@mustafasen97Posted 16 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 helpful0 - @KeevKKSubmitted about 2 months agoWhat 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!
@mustafasen97Posted about 2 months agoWhen 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-25Submitted about 2 months agoWhat 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
@mustafasen97Posted about 2 months agoDisplay: 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 - @lordymarcSubmitted about 2 months agoWhat specific areas of your project would you like help with?
Im not sure when to use px and rem lol
@mustafasen97Posted about 2 months agoRem is a unit of measurement set relative to the root element (Usually HTML). So when you change the HTML font size, the dimensions set with rem change completely.
html {
font-size: 16px;
} /* (16px = 1 rem) */h1 {
font-size: 2rem;
} /* 16px * 2 = 32px */Pixel is a fixed unit of measurement and does not depend on any other element. So no matter the resolution of the screen, the pixel size of the element you set does not change. You can use this on items you want to remain fixed. (For example, pictures or borders.)
For responsive design, measurement units such as rem and em are generally used. Because you can easily change them according to different screen sizes.
Let's say you set most of the elements with rem. HTML font size is 16 px by default. Later, when you want to make this design responsive, it may be sufficient to write the code below for smaller screens.
@media only screen and (max-width: 600px) {
html { font-size: 12px; /* (12px = 1 rem) */ }
When you do this, the elements in your design will shrink according to the screen size and a compact design will emerge. Because you reduce the font size of the root, the elements are sized accordingly.
Therefore, using units of measurement such as rem, em, %, vh and vw for most elements is important for responsive design.
Marked as helpful1
