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

  • Robert 20

    @RobertLikesCoding

    Submitted

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

    I like the way I managed to create the hover effect with the translateY and translateX.

    https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX

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

    No challenges except for the hover animation.

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

    I'd be interested in other ways to animate the hover effect!

    IrieBee 280

    @IrieBee

    Posted

    Hi @RobertLikesCoding,

    That's an awesome solution for hover effect. You did it on the whole card instead of only header. That's why I couldn't get longer shadows on card... Love it!

    Have a nice day and happy coding

    Marked as helpful

    0
  • @Codingreptile81

    Submitted

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

    I have changed background color and tried to make the page look good.

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

    I faced little issue while making it responsive.

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

    To make it responsive.

    IrieBee 280

    @IrieBee

    Posted

    Hi @Codingreptile81,

    Great job on your first project!

    To make it responsive try to change body {display: block;} to {display: flex} and add to it {justify-content: center; align-items: center; min-height: 100vh;}

    For .box change margin: auto;

    Let me know if it worked for you.

    Have a nice day and happy coding

    Marked as helpful

    0
  • Anuj Gupta 250

    @AnujCodeIt

    Submitted

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

    Proud to complete this project

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

    Most challenging was to fit the background images.

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

    • I'm unable to make the container image round.

    • When I use overflow hidden, the background image gets hidden (but the top border gets round.)

    • Also can tell me what I could have done better

    Can you please tell me a way to round the top border without the background image getting hidden?

    IrieBee 280

    @IrieBee

    Posted

    Hi @AnujCodeIt,

    Great solution for this project!

    To round top corners you can add to .container {overflow: hidden}.

    Have a nice weekend and happy coding

    0
  • Jirobow 10

    @Jirobow

    Submitted

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

    Enduring through and learning to implement the display: flex properties (justify content, align-items). Took me a while to actually get it to work and wrap my head around it, specially within nested elements, but I managed.

    I'd definitely start trying it out sooner next time - I spent a couple of hours at least trying to get elements to center using only margin, padding and position properties.

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

    Getting flex to work!

    I overcame it by practicing with the wonderful Flexbox Froggy - an intuitive game, very useful as a starting point, as well as multiple practicing exercises at over at W3 schools CSS tutorial

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

    My image is simply refusing to align with my div-background element, for reasons that I simply can't wrap my head around. Tried a lot of different margin, padding, positions values, played around with different align-items and justify-content values, but nothing worked.

    I do admit I tried brute forcing it by setting values, running live-server and checking in the hopes of getting it to work, but, unfortunately enough, nothing worked, and I also recognize this is not the best way to actually understand things.

    IrieBee 280

    @IrieBee

    Posted

    Hi @Jirobow,

    Nice job on your first project!

    You can try to add to the body

    {min-height: 100vh; align-items: center;}

    Have a good weekend and happy coding

    Marked as helpful

    1
  • @KrishnaPoddar1

    Submitted

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

    I would love to tone down on the Font sizing for sure next time.

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

    Styling the table elements turned out a bit difficult. Took a while to get the hang of it.

    Utilization of new attributes like the first-child etc also turned out to be challenging.

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

    Help with the Font-sizing would be of great help. As you can see that I have made the fonts way to big. I was following the mobile first approach and it looked good on mobile but should I change the whole thing in the sizes above 768px? Or is there a better way.

    The reason I ask this is because I have used them rem units but the size is not changing based on the browser size.

    Any other advice would be welcomed!!

    IrieBee 280

    @IrieBee

    Posted

    Hi @KrishnaPoddar1,

    You did a great job on this project!

    I don't think they have different fonts for mobile and desktop designs. If you open mobile design and desktop design jpeg (in design folder that you downloaded) and make 100% view on both of them you can see that the text size is the same.

    Have an awesome day and happy coding

    0
  • @Vasutamizh

    Submitted

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

    This is my first own coded webpage and I'm really happy to share that i'm able to coding in frontend technology.

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

    I face the struggle in responsiveness of mobile screen width, then i have learned about media query for variable screen lengths. After i feel free to finish this challenge.

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

    In media queries.

    IrieBee 280

    @IrieBee

    Posted

    Hi @Vasutamizh,

    Great job on your first project!

    (for your question) I would change the width on your .container to around 400px (something close to your @media of 450px) width: 400px. And instead of all margins (like margin-top: and so on) replace with margin: auto.

    Have a great day and happy coding

    Marked as helpful

    1
  • @elsayedelbauomy

    Submitted

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

    proud of that im improve my talent in css

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

    recipe project by patient actully this project had a huge writing lines

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

    how i could cut the text from the projects photo to eas my building operation

    IrieBee 280

    @IrieBee

    Posted

    Hi @elsayedelbauomy,

    If I understand your question correctly, you can find index.html in downloaded files. They have all the text from a project in there. You only need to wrap it in correct tags.

    Have a nice day and happy coding

    Marked as helpful

    1
  • kel456 10

    @kel456

    Submitted

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

    With this being my first project, I'm most proud of how I worked through various issues to make my code create an output like the reference image.

    Next time, I want to try using CSS variables instead of copying the same color codes multiple times.

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

    The box shadow wasn't appearing, but then I realized I had formatted the values incorrectly

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

    This is my first project, so my code might not be the most efficient or organized. Any tips on achieving the same result but with less code / alternative approaches would be appreciated!

    IrieBee 280

    @IrieBee

    Posted

    Hi @kel456!

    Great job on your first project!

    If you want you can read about flexbox. It helps a lot with making websites more fluid.

    You can check this free course from Kevin Powell about flexbox. It helped me a lot.

    Have a great day and happy coding

    Marked as helpful

    0
  • leriwa888 30

    @leriwa888

    Submitted

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

    This was a good one, messing around with the shadow, and making sure the card looked good on mobile.

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

    Centering the card vertically was a challenge - I wanted it to be responsive.

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

    The card is centered via a fixed pixel unit - is there a way to do this with a percentage or em/rem?

    IrieBee 280

    @IrieBee

    Posted

    Hi, leriwa888!

    You can add to the body: min-height: 100vh; justify-content: center;. Also remove margin-top: 10%.

    Hope this will help.

    Have a happy coding

    1
  • IrieBee 280

    @IrieBee

    Submitted

    On full screen there's a thin line on top and under the image when I use Firefox. It was on Chrome as well. But I manage to fix it by using width: 102% (still have that line in Firefox). If anyone knows how to fix it I would really appreciate your help. Thank you in advance and have a wonderful day.

    IrieBee 280

    @IrieBee

    Posted

    I fixed it by increasing width for the card.

    0