Skip to content
OverviewSolutions
15
Comments
19
Mikhail
@MikeBeloborodov

All comments

  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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!

  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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

  • Mikhail•440
    @MikeBeloborodov

    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!

  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    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.

  • Mikhail•440
    @MikeBeloborodov

    Wow, very nice effect with that sidebar when you add a new item! Good work man!

  • Mikhail•440
    @MikeBeloborodov

    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
  • Mikhail•440
    @MikeBeloborodov

    I feel you, man! It looks simple, but for me, as a beginner, it was a lot of trouble to make it work right :D

  • Mikhail•440
    @MikeBeloborodov

    What do you mean by "Getting the colors right with the provided ones"? If you don't know how to use them because they are in hsl format, then it's very simple, just put them in your CSS code as is, for example:

    .qr-card {
background-color: hsl(0, 0%, 100%);
}

    Or you can make a variable:

    :root {
--card-background: hsl(0, 0%, 100%);
}

.qr-card {
background-color: var(--card-background);
}

    Hope it helps, good luck!

  • Mikhail•440
    @MikeBeloborodov

    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. You can add some background color on body to see how it stretches.

    Marked as helpful
  • Mikhail•440
    @MikeBeloborodov

    Wow, I really like the result! Good job man! Every button and feature works as intended. The only critique I have is that there is a horizontal scroll in mobile view. Maybe work on that in your next project! Good luck!

    Marked as helpful
  • Mikhail•440
    @MikeBeloborodov

    Hey there! A quick solution to your problem - find this selector in your mobile media query and change it:

    .tip-select input[type=number]{
text-align: right;
min-width: 12rem;
border: 2px solid hsl(183, 100%, 15%);
}

    Your input width is messing with you. You can also use devtools in your browser to see what CSS properties does your element have, it helps a lot.

    Marked as helpful
  • Mikhail•440
    @MikeBeloborodov

    Don't sweat over it, man. It looks really good! Tried out your calculator, it says my BMI is bad D: Well, gotta exsercise more I guess... Anyway about your code. I looked over your styles and my main tip for better responsiveness is: try to avoid pixels! When you use pixels it's very hard to resize everyting for mobile and desktop. Try using rem or em units, you can find a lot of videos about it on youtube. I usually do mobile design first, set everything in rem (paddings, margins, font-sizes... just almost everything except border width, setting them in px is ok). And then when I finish my mobile design I can just create a simple media query to set my html font-size to less or more than before and my whole page resizes like magic! For example:

    @media screen and (max-width: 22rem) {
html {
font-size: 0.3em;
}
}

    Try it out on a smaller project, like a card component or something and then integrate it into your toolkit for bigger projects. Good luck!

    Marked as helpful