Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Fatma Tawfeek• 100

    @Fatma-Tawfeek

    Submitted

    What are you most proud of, and what would you do differently next time?

    • Using Grid CSS and make responsive design with it.
    • I won't set grid-row-template property I will let the grid items take height from its content

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

    • The challenge I faced was creating a responsive grid layout that adapts well to different screen sizes. In particular, one grid item needed to span two rows on the desktop, while all items had to stack in a single column on mobile, adjusting their heights to fit the content. Additionally, the grid items had varying amounts of content, making it tricky to keep the layout balanced and aesthetically pleasing on all devices.

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

    -I'd appreciate help refining the grid's responsiveness, especially when it comes to ensuring the layout remains visually appealing on a wider range of screen sizes, like large desktops or tablets. I'm also looking for advice on optimising the grid for accessibility, particularly regarding the reading order of the items when they stack in a single column on smaller screens.

    -Additionally, I’d like to explore how to implement a fallback for older browsers that don’t fully support CSS Grid, ensuring a seamless user experience across different browsers.

    Testimonials grid section solution

    1

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    Yours look perfect, unlike mine. I will take a look at your code and go back and review grid on my own

    1
  • Vincin Christmas• 130

    @VincinChristmas

    Posted

    great job

    perhaps using a body tag in css is not needed though

    0
  • Halima584• 30

    @Halima584

    Submitted

    What are you most proud of, and what would you do differently next time?

    At first, I had a hard time trying to get a url, I wasn't getting the github navigation but eventually I persevered and got it. I am so proud of myself for not giving up because I was discouraged and nobody was giving me the answers I want.

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

    Getting a url on github. I was asking everyone but nobody seemed to get my point. AI came through for me and I am so happy I could go through with this

    First Solution Using HTML and CSS

    2

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    Good job!

    It is recommended to use rem instead of px.

    There is a small trick that a lot of people use to make sure elements and everything stay in place even when the screen is being zoomed in or out. Maybe something like this:

    display: flex; justify-content: center; align-items: center; padding: 0 30px; border-radius: 12px;

    also you should always use a CSS reset. Most people on here use this one:

    www.joshwcomeau.com/css/custom-css-reset/

    0
  • Halima584• 30

    @Halima584

    Submitted

    What are you most proud of, and what would you do differently next time?

    At first, I had a hard time trying to get a url, I wasn't getting the github navigation but eventually I persevered and got it. I am so proud of myself for not giving up because I was discouraged and nobody was giving me the answers I want.

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

    Getting a url on github. I was asking everyone but nobody seemed to get my point. AI came through for me and I am so happy I could go through with this

    First Solution Using HTML and CSS

    2

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    Good job!

    It is recommended to use rem instead of px.

    There is a small trick that a lot of people use to make sure elements and everything stay in place even when the screen is being zoomed in or out. Maybe something like this:

    display: flex; justify-content: center; align-items: center; padding: 0 30px; border-radius: 12px;

    also you should always use a CSS reset. Most people on here use this one:

    https://www.joshwcomeau.com/css/custom-css-reset/

    0
  • Vincin Christmas• 130

    @VincinChristmas

    Posted

    Looks good. I couldn't find anything to critic about it

    0
  • Jerry Surya Irawan• 240

    @JerryIrawan14

    Submitted

    What are you most proud of, and what would you do differently next time?

    n/a.

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

    n/a.

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

    n/a.

    Responsive card using flexbox

    1

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    just giving small feedback and sharing some opinions. In my opinion, there is a little bit more code than need especially when using flexbox. I am not even sure if flexbox was needed at all for this small project being that it is only one big container. Perhaps you could have just put display flex on on big container and then aligned individual elements? Also, there are no hover states on your site. The assignment asked us to do some hover states if you want to do that

    0
  • Vincin Christmas• 130

    @VincinChristmas

    Posted

    the mobile looks fine, but on desktop, it doesn't meet the design requirements or look like the desktop design at all. Also, why did you use JavaScript in this project? If CSS can do it, it is best not to use JavaScript to do things that are easily handled by CSS. The assignment did not require the use of JavaScript as well, perhaps you may have done it for your own experimentation?

    Sorry, I can't provide an critics about your use of grid, because I haven't learned it yet. I used flexbox for mine. also, I notice you are using flex and grid. Does it make more since to just use one?

    0
  • Vincin Christmas• 130

    @VincinChristmas

    Posted

    Looks good. But it almost looks like it doesn't work? Is it better to apply the media query a little earlier? like at min-width 700px?

    other than that, it works fine. This is just my opinion

    1
  • tushar-Ruhela• 90

    @tushar-Ruhela

    Submitted

    What are you most proud of, and what would you do differently next time?

    I have most proud on maded a responsive web page and add all thing that should be given and next i will focusing making webpage is more goodlooking

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

    The challenges should i encounter like added google font to css add or give color to the bullets of the lists.

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

    the most speacific area of code that i can share with every first one how to google fonts and second adding a color to the bullets of the lists

    Recipe page using css flex

    1

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    looks good.

    Should recipe have a bigger width on mobile? When I see it on mobile, there is a gap on the left side

    0
  • Ineke• 30

    @Ineke84

    Submitted

    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I incorporated quite some concepts that are relatively new to me: css properties, clamp().

    Next time I should read the challenge a bit better (at first I missed the challenge to not use media query for font-sizes untill I wanted to submit the challenge). Also I want to look more indepth at the designs, this time I kept finding extra things to add (like different font-sizes for devices and multiple changes on hover)

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

    Most challenging is the alignment of the blog preview and the attribution at the bottom. At the moment I fixed it with flex-box, but I'm not sure if that's the best option.

    Also using clamp() is still challenging. I read/watched quite some things about it and copied some things from those posts and it's working. But I need some more practice.

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

    I would love to hear if there's another/better solution for the positioning of de blogpreview and the attribution at the bottom. I want the card vertically centered in the middle and the attribution at the bottom of the screen as longs as this would fit. If the blogpreview gets to big with a narrower screen only then the attribution should move further down so you would need to scroll down to see it just below the card. At the moment I fixed it with flexbox and height with clamp(). But I'm not really sure about it.

    Any other feedback is also very welcome.

    Blogpost preview with clamp and flex-box

    1

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    This seems perfect. I have never really heard of clamp until now

    0
  • María Paula Cevallos• 10

    @mpcevallos

    Submitted

    What are you most proud of, and what would you do differently next time?

    Im proud that I could solve the challenge without many issues and I did it very fast. Also I feel good that I could help other people I know to solve it.

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

    This is my first challenge on Frontend Mentor. I was very excited to do this project and challenge my HTML and CSS skills. I think the most challenging was to make the project look good in different screens but in general I did feel comfortable.

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

    I would like to have feedback on what a workflow that can help develop with the best practices. Any aditional advice or feedback is welcome and very appreciated.

    Recipe page solution using HTML and CSS

    1

    Vincin Christmas• 130

    @VincinChristmas

    Posted

    It looks really great.

    0
  • Vincin Christmas• 130

    @VincinChristmas

    Posted

    looks on desktop, but does not look good on mobile; specifically the button portion.

    Marked as helpful

    1