Skip to content
OverviewSolutions
18
Comments
9
geektim
@geektim

All comments

  • João Ribeiro•90
    @joaoevribasSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I needed to practice CSS Grid so this was a fun challenge.

    If I was to start over again, I would definitely do mobile first. Because I did the grid layout for the desktop first, I had to manually reset each card position to stack them vertically on a single column. If I started mobile first, they would already be stacked in a column because of the display grid. I would've written less CSS.

    Next challenge that I need to use CSS Grid, I might try and practice grid template areas.

    Any feedback is appreciated, thank you.

    Responsive four-card grid layout

    1
    geektim•230
    @geektimPosted 8 months ago

    This is awesome!

    0
  • Carisa Elam•100
    @carisaelamSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Did not take me very long. I feel like I'm getting quicker at making things happen.

    What challenges did you encounter, and how did you overcome them?

    I'm still unsure whether or not my CSS naming conventions make sense.

    What specific areas of your project would you like help with?

    I don't really understand how to use semantic html in this case when there really isn't that much going on in the design. I get using "header" "nav" "footer" etc., but for a project this small, how do I incorporate semantic html, or is it even worth it?

    Social links

    1
    geektim•230
    @geektimPosted 8 months ago

    A nice job! About the issue of Semantic html, my idea was this: since there's no logo or navigation links which usually occupy the header position, and since there isn't information that could be classified as "footer", I just didn't use them. I took the whole card containing the links and intro-profile as the "main" with a class of "card". Then I just used divs inside. I hope you find this relatable.

    0
  • Lahir-Sai-Vignesh•20
    @Lahir-Sai-VigneshSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I used the mobile first design approach , about which I am most proud of.

    Next time , when designing I would also keep the desktop design in mind.

    What challenges did you encounter, and how did you overcome them?

    Displaying different images for different screen sizes was challenging.

    I overcame it by using two img tags with two different classes and using display:none in the media queries.

    What specific areas of your project would you like help with?

    I designed the mobile version first and then the desktop version. I used display : none and media queries to achieve the desired output.

    But I see many developers using picture tag or img tag with srcset and sizes.

    I tried to implement my solution that way but the styling I did before is not being applied properly so I opted display:none and two media queries .

    Some advice on the other methods that I mentioned could be very helpful .

    Thanking You, Lahir

    Product Preview Card

    1
    geektim•230
    @geektimPosted 8 months ago

    Well done!

    0
  • Anton Vasilache•580
    @AntonvasilacheSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • Creating multiple lists with custom bullet points, applying common formatting, and then customizing each, as so:
    .prep-list-item::before,
.ingredients-list-item::before,
.instructions-list-item::before {
  content: "•";
  font-size: 1rem;
  color: var(--Nutmeg);
}
    • Creating the media queries to match the mobile design file.
    • Creating the table by using grid in a simple and effective way.
    What challenges did you encounter, and how did you overcome them?
    • Grouping up the lists to apply common attributes, before styling them individually. I tried to not repeat myself, but it took longer than writing them separately.
    • Tried to create the table using the `` tag, but couldn't add margins and borders at the same time, so I switched to grid
    • Figuring out how to follow the mobile design properly, without changing the page structure
    What specific areas of your project would you like help with?
    • Not sure if it is the best way to implement the mobile design.

    Responsive recipe page using CSS Flex and Grid

    1
    geektim•230
    @geektimPosted 8 months ago

    This is a job well done. I couldn't even space the list-style markers away from the texts, nor could I change the color of the number-type markers from black. Nice work!

    1
  • geektim•230
    @geektimPosted 8 months ago

    Well done!

    0
  • geektim•230
    @geektimPosted 8 months ago

    Hi, Tomek! An awesome job done. However, do consider the following: you set the max-width: 400px; and max-height: 600px;. But if you consider smaller screen sizes like the fold phones and the iPhone SE, the card will overflow and cause the scroll bar to appear. My suggestion is this, set width in percentage, for example width: 90%; and then max-width: 400px. This will make it so that when the screen size is smaller than 400px, the card will adjust to become 90% of the screen size. Then for the height, just make it height: auto; this is because when you have a project that has word counts exceeding the height, it will overflow. I hope you find this helpful.

    Marked as helpful
    0
  • HussainAzimi•120
    @HussainAzimiSubmitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I can learn new things from completing this challenge and I would like to use them in future challenges

    What challenges did you encounter, and how did you overcome them?

    the div position was the challenge I encountered; fortunately, I could overcome it by searching and finding the solution.

    What specific areas of your project would you like help with?

    I need more help in these areas of my code: 1- flexibility 2- clean and light

    QR code component solution using CSS Flexbox

    4
    geektim•230
    @geektimPosted 8 months ago

    Hi there, this is a beautiful job done. Well done! As regarding the centering of your card to the middle, you could consider the following: making your background display: flex; justify-content: center; align-items: center;. Or you could make your background position to be relative, then the card's position to be absolute, then you set top: 50%; left: 50%; transform: translate(-50%, -50%); on your card. I hope you find this helpful.

    0
  • geektim•230
    @geektimPosted 10 months ago

    Thank you very much.

    1
  • daniDev6•150
    @daniDev6Submitted about 1 year ago

    I use many divs, is it correct to use so many divs? If you can give me advice it would help me

    Flex Box CSS

    2
    geektim•230
    @geektimPosted about 1 year ago

    This is a very awesome work. I also used a lot of divs when I did mine, and was worried about it. So, i checked the solutions of some people who already did the challenge, I figured it is better to first use html semantics like 'header, main, aside, section, article' or the likes like that, to first wrap up the elements before splitting into divs. Those semantics I mentioned are also block level elements, so, they stack. I hope you find this somewhat helpful.

    Marked as helpful
    2