@pjtetede
@99Abdel
Submitted
What are you most proud of, and what would you do differently next time?
i did not know how to center exactly the box in the page and make it parametrizable in order to get the sizes correct for the desktop and phone at once
What specific areas of your project would you like help with?
how to position correctly objects without being only rough by eye
@pjtetede
Posted
Hi there, as much as I'd love to help, the links to your site and code are not working. Please let me know when you've gotten them back up so I can give some tips.
@mr-sv3n
Submitted
What are you most proud of, and what would you do differently next time?
It is my first time, that I was building a mini-project with HTML and CSS, so I am proud, that I hit that first milestone. Things I would like to do differently next time: -Learn more about Figma, so I can better plan my site -Lean more about measurement units, so I can work in a more scalable manner -Use Flexbox
What challenges did you encounter, and how did you overcome them?
-I spent most time to wrap my head around grits and different ways they can be build depending on the need.
@pjtetede
Posted
Welldone, this is a nice one, and congrats on your milestone. You can only get better from here.
I noticed that you mentioned wanting to learn more about Figma:
I love the fact that you tried using grids even though it wasn't easy for you, that how one really learns and grows. The following might help when it come to grid:
I hope this resources would be helpful on your journey towards greatness.👋🏽👋🏽👋🏽
@35degrees
Submitted
What are you most proud of, and what would you do differently next time?
The BEM syntax was helpful and I can benefit from my structured, readable code.
What challenges did you encounter, and how did you overcome them?
pseudo elements and BEM were the biggest hurdles.
@pjtetede
Posted
Nice one here, welldone! This looks quite nice, but I have a couple of suggestions that might make it better.
display:flex;, justify the parents content to the center justify-content: center; as well as align-items to center align-items: center;. This would work especially if its the only child of its parent and its parent has a fixed height.Your code :
body {
font-size: 18px;
font-family: 'Outfit', sans-serif;
height: 100vh;
width: 100vw;
overflow: hidden;
display: grid;
place-items: center;
background-color: var(--very-dark-blue-main);
}
What I explained above:
body {
font-size: 18px;
font-family: 'Outfit', sans-serif;
height: 100vh;
width: 100vw;
overflow: hidden;
/* display: grid; */ display: flex;
/* place-items: center; */ justify-content: center;
align-items: center;
background-color: var(--very-dark-blue-main);
}
With the above, the card would automatically be centered on the page. Here is a comprehensive and very helpful article on flexbox
I hope these points would be helpful. Welldone and keep making progress👍🏽👍🏽👍🏽
