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
Log in with GitHub
OverviewSolutions14Comments9

All comments

  • Sharm• 40

    @sharms-my

    Submitted

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

    The stuff I learned from my previous Challenge such as the use of Flex box. This time, I started following the mobile first design.

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

    The pseudo elements can be challenging to style. I took time in aligning list styles and found out about the use of list-style-position.

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

    Would appreciate any feed back on what I could have done better.

    Recipe Page with SASS, Pseudo Elements

    #sass/scss

    2

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    This is really good. I haven't thought about using a table for the Nutrition section.

    Maybe you could start adding usage of variables for your colors, fonts, etc. That way, it would be easier to change in the future if need be.

    Overall, great work! Couldn't have done it better myself.

    0
  • woojjajja• 90

    @woohyodong

    Submitted

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

    :)

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

    :)

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

    :)

    Testimonials grid section

    1

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Hello there fellow mentee! Couple of things:

    1. Looks like breakpoints are a bit early.
    2. Also every image has the border. On the design only two has it and its violet and light violet.
    3. Looks like you also forgot to implement the background quote on the first card.
    4. Maybe you could also explore dynamic stylings of some sort by using data attributes.

    Aside from that, most of the stuff looks good!

    Marked as helpful

    0
  • P
    WB52• 110

    @WB52

    Submitted

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

    I tried to match to design as close as I could....

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

    I normally use felxbox for positioning but plan to use grid more. I made a grid with three columns and as there were 4 cards it automatically added a row which I didn't want. As a solution I wrapped the middle two cards in a div which seemed to solve the problem as it pushed the two middle cards into the middle column and got rid of the row.

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

    Any feedback / constructive criticism always welcome...

    Four Card Feature Section

    1

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    This is really good. Visually this is way way better than what I have. I only skimmed through the code but I noticed you're using 2 H1 headings which semantically, I am pretty sure shouldn't not happen.

    I'll study your approach more once I have more time.

    Keep up the good work!

    0
  • ISAAC EDZORDZI FIAVOR• 110

    @ISAAC-EDZORDZI-FIAVOR

    Submitted

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

    none

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

    none

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

    none

    product-preview-card-component

    1

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    It looks okay. Couple of things though:

    1. It looks like you didn't use the other font family for some elements so the live site looks a bit different from the design.
    2. Card is not centered on mobile design and looks a bit tall and thin compare to the design.
    3. In my solution, I used data attribute in adding the image for the button. Maybe you can try and implement that as well instead of adding an image tag.
    4. I just recently learned this as well, the picture element is a great html element that we can use for different image sizes! This challenge is a good place to implement that.
    5. Aside from that, some correct usage of html semantics I think like for the button you use a div instead of an actual button. Visually should look the same but semantically It wont be right.
    6. This might also be a great chance for you to explore accessibility (not too in depth). Example is for the price, visually it's clear that we have a sale price and original price. However, for screen readers, they would read it as $149.99 $169.99, which doesn't make sense since they would be read two price for a single product.

    Some of the suggestions I provided can be found on my solution as well and some links on the repo for some useful resources.

    Good luck in future challenges!

    1
  • Vishal Yadav• 60

    @Vishal-Yadav-001

    Submitted

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

    I will try to adjust width of parent container based on child elements width nexxt time.

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

    -Responsiveness I have to learn more

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

    -Responsiveness

    Responsive Recipe Page

    1

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Hello there fellow mentee!

    I think the overall responsiveness is not that bad. Looks like the breakpoints are just too early. Consider increasing them. i.e., since the design is simple, mobile and tablet could potentially share the same layout where the card span across the width of the device. Then only change it comes the desktop size.

    Aside from that, some minor things here and there:

    1. Some color usage were missed.
    2. Looks like you opted out in using the default <li> decorations so some alignments and colors were not implemented as well.
    3. Some more attention to details as well so you don't missed stuff like changings colors, adding border radius, etc. This way you can follow the design a bit more.

    Keep up the good work!

    Marked as helpful

    0
  • suresh298877• 50

    @suresh298877

    Submitted

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

    i'm confident on flex box now and from next time i'll divide whole taks into divisions and try to complete it.

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

    nothing

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

    nothing

    Responsive Socila link profile card using css flex

    1

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Good work. Few feedbacks:

    1. Looks liked cursor pointer on li was missed.
    2. Card was not centered on the screen like on the UI design.
    3. I am also still learning about typography but I don't think you should jump headings like that. If you really need to use a next level of heading, you should do so in increments. I.e., h1 -> h2.

    Aside from that, it looks good! Great job!

    Marked as helpful

    0
  • P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Good work! What do you think about using an article for the card instead? I used one for my solution but not entirely sure if my reasoning was sound. Also I think the HTML & CSS foundations needs to be in a heading tag.

    Aside from that, this looks good!

    0
  • P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Good work! Only thing I think is we should use rem instead of px in font sizes.

    0
  • P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Submitted

    After a long hiatus I am back with practicing and exploring front end development.

    I've skip a lot of stuff in this challenge (i.e., fonts) as my main focus here is to explore tailwind css. I will be using frontend challenges like these to learn and apply what I am learning along the way on the usage of tailwind css.

    Feedbacks are greatly appreciated as I am really planning to start using tailwind css in most of my upcoming projects as I am currently trying to learn next.js, shadcn ui, and tailwind css.

    Thank you!

    Results Summary using Tailwind CSS

    2

    P
    Judge Micko S. Silvestre• 295

    @mickoymouse

    Posted

    Looking back at my solution I noticed a lot of mistakes and/or mishaps on my end. I will be backtracking on this one. I am planning to do it with plain css first and then convert it into using tailwind. I feel like because of me trying to create this with just tailwind css it kinda mess up my approach since I am new in using tailwind.

    I will try and submit a new one after doing the above approach. Hoping for your feedback and amazing suggestions! Thanks!

    0