Skip to content
OverviewSolutions
14
Comments
3

appleseed9

@appleseed9160 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Julianna Messineo•290
    @mathematiCode
    What are you most proud of, and what would you do differently next time?

    I am proud of figuring out how to use subgrid, it made the desktop layout super easy. But when I went to write a media query to have it change to 3 rows instead of 3 columns, it was confusing because I already had some rows for the content within each card for the subgrid so I wasn't sure how to handle that.

    I have been learning a lot from youtube and taking lots of notes. I used a lot of what I learned in this project like minmax, subgrid, variables for colors, fixed positioning, and more.

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

    The biggest challenge was figuring out how to make 3 main rows with sub-rows within them for sub grid. I was overthinking it for a long time, asked the question on discord, and then figured it out immediately. At first I had the solution of using grid-column-template: repeat(auto-fill, minmax(150px, 1fr); but that was causing one card to be alone on it's own row at certain sizes. I had to use media queries to make that not happen.

    Another challenge was figuring out how to center the content for smaller devices. It's still not really centered for phones :(

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

    I would love to know if it's possible or a good idea to use container queries for this. I tried to do so but I got confused with where to put the query and how to affect the container itself instead of the children.

    I'll happily take any other feedback or ideas as well!

    Responsive Layout with Subgrid and Media Queries

    1
    appleseed9•160
    @appleseed9

    You can edit README-template.md file, and then rename it to README.md. Then when visitors visit your github page they can instantly see screenshot and other details.

  • Ahmed•80
    @Ahmed-l2
    What are you most proud of, and what would you do differently next time?

    Responsive design was a new concept to me, and I'm very proud of building my first responsive website.

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

    I think this was my most challenging one yet because I was introduce to a new concept that I was not aware of before hand that is creating a responsive design that works with both PC and Mobile screens. I took a mobile first approach for this project and getting things to scale just right was new to me so it took me some time to get the hang of it but I have definitely improved by a lot and now have a better understanding of creating web pages that function on different screen sizes.

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

    I'm still fairly new to responsive designs so any feedback on my code would be greatly appreciated.

    Responsive product preview card component using HTML/CSS

    4
    appleseed9•160
    @appleseed9

    Hi, very good job achieving pixel perfection.

    It is recommended for line-height not to use units because of the peculiar way they calculate.

    Marked as helpful
  • Mohamed Ghareeb•270
    @MidoGhareeb
    What are you most proud of, and what would you do differently next time?

    I am proud of creating my first page

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

    Please provide feedback and Please tell me how I can improve

    “Mobile-first solution using CSS Flex ”.

    1
    appleseed9•160
    @appleseed9

    Hi, you forgot box-shadow for the main container