Man this stuff can be hard! Just having fun and learning like everyone else.
I’m currently learning...Always learning and working on better practices with HTML, CSS, Javascript, and design. Learning new things like React, Typescript, backend solutions, and new frameworks.
If anyone knows a better way of placing the SVG in the background please let me know because I spent way too much time trying to get this right and had to settle with what I have.
I know my paddings are not the same and the design is not an exact match, but I'm happy with the solution and the functionality. If anything stands out that should be fixed feel free to let me know and I'll look into it.
I am aware the font sizes, margins, and paddings are not exact and am ok with that. Feel free to give me some input on any errors you notice or changes that you would make to improve the code.
If anyone wants to see how I solved this with grid layout and has any pointers on a better grid solution I'll gladly take them.
I know my padding, margins, and font sizes aren't perfect, but I'm not too bothered by that. If you see anything that looks really off let me know.
This helped me learn how to make simple layout with just basic style attributes. Next time, I might explore other layout techniques like flexbox & grid.
What challenges did you encounter, and how did you overcome them?Deciding on the layout technique to use.
What specific areas of your project would you like help with?Any feedback on the CSS I wrote.
Your solution looks good. On smaller viewports like 375px width it starts to get a little messed up.
I wanted to learn more about why myself so I looked at your code.
I removed margins from .card - I think you were using these to position the card?
Changed the width of .card to 100%. Realized this works in mobile view, but in desktop is now stretches the entire screen. So I changed it to max-width: 400px; which allows it to take up the entire screen on smaller screens but not grow larger the 400px on larger screens.
Added margin: 0 auto; to .card which centers your .card element on the screen at all sizes.
So three quick changes and I think you got a great result.
I am refreshing my skills after holidays and I am happy to see that they are not so rusty. Even if this is just html and css it felt good to complete it and feel the reward of a task done.
What challenges did you encounter, and how did you overcome them?This challenge was quiet easy, what I research about a bit was the media queries , but then I realise I dont need it with the flexbox as when I tested the component on a smaller screen was looking as expected.
What specific areas of your project would you like help with?Feedback is always appreciated. If I can write the styles in a more elegant way or the html itself, I would like to hear opinions.
Nice work. I messed with your CSS a bit to center the positioning of the component:
html, body {
background-color: #d5e1ef;
height: 100%;
margin: 0;
padding: 0;
}
main {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
}
img {
width: 288px;
height: 288px;
margin-bottom: 24px;
border-radius: 10px;
}
section {
display: flex;
align-items: center;
flex-direction: column;
background-color: hsl(0, 0%, 100%);
padding: 16px 0 16px 0;
width: 320px;
border-radius: 10px;
}
h3,
p {
text-align: center;
font-family: "Outfit", serif;
}
p {
size: 15px;
color: hsl(216, 15%, 48%);
}
.attribution {
text-align: center;
size: 10px;
color: hsl(216, 15%, 48%);
}
Main changes are assigning html and body a height. Which then lets your <main> take up the entire height of the screen. This allows justify-content: center; on <main> to center your <section> vertically.
flex; 1; changes the behavior of justify-content so I went ahead and removed it. It also didn't impact the design as far as I could tell.
You could opt to use a <div> with the class of "container" instead of styling a <section> tag (then move your CSS to .container). This is what people would normally suggest.
Happy with the cleanliness of the code, next time would like to try implement JS somehow
What challenges did you encounter, and how did you overcome them?N/A
What specific areas of your project would you like help with?If anyone can condense the CSS or has an alternative to how the minimum widths should be handled, let me know.
Also, for some reason the generated screenshot captures a lot of white. I am unsure why this is, the body's height has not been modified and the height of the black page container is set to 100 percent. If anyone knows what is causing this, please let me know!
Nice job. Everything looks great and @alaa-mekibes feedback is spot on as well.
I wanted to look into it more just to learn more myself. I ended up making these changes to your CSS:
html, body {
font-family: 'Inter';
font-size: clamp(14px, 2.5vw, 18px);
height: 100%;
margin: 0 auto;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: #141414;
height: 100%;
}
.content-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1f1f1f;
padding: 20px;
border-radius: 15px;
}
Added html so it has a declared height and then body can size in relation to it's parent element (html). margin: 0 auto, and padding: 0 in order to remove any default margin and padding happening.
Removed padding from container because it is adding padding below and above which is giving you a container height that is larger than the initial screen size. This will cause vertical scrolling once you fix your body height.
Removed width and padding-bottom/top from content-box. This lets content-box's width be determined by the content inside. I also added 20px padding back (to all sides) which will make it so your buttons don't touch the edge of the container in mobile view.
Try out what you want and test out different things. There are different ways to get a good solution.
This was my first time using css grid. Next time I'd probably layout my html a little differently.
I would love to hear from anyone for tips on how to improve my code. I've been coding for 2 months and am looking forward to my journey of improvement and learning.
What challenges did you encounter, and how did you overcome them?I had a lot of issues with css grid and responsiveness. I did hours of research to figure out how to get both of them to work with my html and scss code.
What specific areas of your project would you like help with?Html layout and css grid, along with responsiveness.
Try moving your images folder inside of your public folder (create a public folder in your case since I don't see one) and then linking your images like this:
<img src="images\illustration-five-stars.webp" alt="Illustration of five stars" />
I just did this challenge with Vite also and I had to end up moving my images folder from the src folder to public. It has to do with how Vite proccess static files and how files in the src folder are processed (though I see you don't have yours in the src folder).
Other than that looks good and nice responsive layout solution for going from large to mobile screens.
