@MikeBeloborodov
@Ontologeist
Submitted
I would like to figure out how to have the cards laid out in the same way as the original (two stacked in the middle while the outer two are centered between them). Could anyone provide some hints or a solution?
Any other feedback or best practices is certainly welcome! Thanks!
@MikeBeloborodov
Posted
Hello! Nicely done work, good job! Regarding your question:
You can use grids for this task. It's just 3 columns and 2 rows. The first and the last column take 2 rows at the same time and the middle column has 2 rows and 2 cards in it. For example:
grid_container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* we make 3 equal columns here */
grid-template-rows: 1fr 1fr; /* 2 equal rows */
}
card_1 {
grid-row: 1/3; /* the first card spans from the first line to the 3rd line and so it takes two cells of the grid */
}
card_4 {
grid-row: 1/3; /* same thing but for the last card */
}
Marked as helpful
@tsilvalisbon
Submitted
I had difficulty making the website accessible to safari, couldn't add border radius to the bottom of the card, and my body background image is a bit messed up it doesn't show the full image just half of it and don't know how to fix all of these issues, help would be appreciated.
@MikeBeloborodov
Posted
Hello! Nicely done work! Some feedback:
You can add border-radius to the whole card by adding it to the "card-container" class in your HTML.
To make background the same as the design you should change your background-size contain, and background-position to top. Also add hsl(225, 100%, 94%) background-color.
Good luck!
Marked as helpful
@JamieShortz
Submitted
Finished this within a week or two but have not decided to upload it until now. What do you guys think?
@MikeBeloborodov
Posted
Hey! Nicely done work! Some feedback:
Try to avoid styling with IDs, use classes for that to avoid problems with rules priority (for example if you style ID it's priority is higher than classes, etc.)
Try to use rem and em units instead of pixels for better accessability (so that users could change font-size of their browser and your page will adjust).
Add an empty line after every selector in your css file, for example
body {
margin: 0;
}
h1 {
font-size: 1rem;
}
is bad, instead do this:
body {
margin: 0;
}
h1 {
font-size: 1rem;
}
Good luck!
@MacSmod
Submitted
Looking for honest feedback. I'm just learning HTML and CSS and this is the first challenge I've attempted. I've only been learning for about 2 weeks.
@MikeBeloborodov
Posted
Hello! Nicely done work! Some feedback:
Try to use more semantic tags, for example you could use article for your card
Read about BEM naming convention, and try to use only classes to style your components.
Try to make your final result look as close to the design as possible, including paddings, margins, font sizes. You can use "PixelPerfect" addon for chrome to use the design image on top of your document to eyeball all the sizes more correctly.
Try to avoid using pixels and instead use rem or em units, because this way your page will be more accessible for people who want to change their default font-size in the browser and your document will adjust to that, otherwise they will have to zoom in your page and it's a bad practice.
Good luck!
Marked as helpful
@Code-Beaker
Submitted
Hello there! I completed this project in almost 6hrs. I was able to make it look as same as possible, Except the image is still on the left side of the page on Desktop View. As I'm still getting used to CSS Grid, I couldn't figure out How I could align the image to the right side of the Container. Can anyone help me fix the image position? Thank you.
@MikeBeloborodov
Posted
Hello! Nicely done work. Regarding your question: you can just add
.card__img {
grid-column: 2;
}
in your desktop media query and image will take the second column, as easy as that! Also you probably shouldn't use main tag for your card. Main is a unique section for your content, it should only appear once in the document, like body. Use article or just div for your card. Good luck!
Marked as helpful
@ABojo
Submitted
@MikeBeloborodov
Posted
Hey man! I'm currently learning typescript and your solution seems very interesting to me. The way you organize everything is awesome. Can you point me to some resources where I could learn that? Or did you just came up with this layout yourself? If followed you on github, don't know where else to reach you, please answer :D
@INFLAMER07
Submitted
having some problem with deploy but the code 100% works
@MikeBeloborodov
Posted
Your gallery's main image doesn't show like in the design, and + - arrows on the amount are not showing as well, maybe check these things. But the result is very good! Nice work!
@KevenGonCabral
Submitted
A good use of Flexbox.
✅Mobile mode implemented.
@MikeBeloborodov
Posted
Hey! Good work on your solution! I would suggest you try doing mobile first next time. It's a lot easier to stretch things later, than to shrink them. Just try it once and you will understand how easier it is.
Marked as helpful
@gdsr-abhishek
Submitted
How can I make the card to be placed to middle of the webpage?
@MikeBeloborodov
Posted
Hey! Good work on that solution. To answer your question: Let's say that you have a body and 1 div, to center this div inside the body you need to do this
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: green;
}
div {
width: 100px;
height: 100px;
background-color: red;
}
If you do this and remove height on your body, then it won't center vertically, because body does not stretch to the full height without content. But if you add height - then it's a box that covers the full screen and your div will be in the center because justify-content centered it horizontaly and align items verticaly.I added some background color on body and div to see how it stretches. You don't have to add height and width 100 px to your div, I just did this for the showcase, you should have your own height and width on your div.
Marked as helpful
@MinaNarouz
Submitted
I want to know how to professional Frontend developers manage the responsiveness to match different devises. Ok i am saying this because i did the card for desktop and Mobile and both are ok and for sure if anyone has comment on the code to have better or easier one that would be great. and i did for desktop and mobile only because this is the task. but i was planning to make it for tablet and smaller size of laptops and etc... So how to developers manage this, do they do media query for each range of sized expected, or do they depend on bootstrap or any other framework or what ?
@MikeBeloborodov
Posted
I think the standard is 3 devices: desktop, tablet and mobile. And then if your project is very big and you have a lot of devs you can target more specific medias, like certain phones etc.
@mfkutz
Submitted
@MikeBeloborodov
Posted
Wow, very nice effect with that sidebar when you add a new item! Good work man!
@Tobiloba1234
Submitted
While trying to recreate the design, it was fun and I found it hard to make my profile picture come together and arranging my html element accurately. I have a long way to go but would really like feedback and review of my code. View my Profile paragraph could not change the background color, would love to know why.
@MikeBeloborodov
Posted
Hello! I like how it looks, very good for a beginner! Try to change your header background color like this:
header {
background-color: blue;
}
It should work. Or change it to any other color that you like. Hope it helps! Good luck!
Marked as helpful