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

  • @Harsh-Kumar-Dwivedi

    Submitted

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

    I am proud that I was able to build the highly closest design in comparison to the required design. From next time, I would try to complete the project in a significant lesser amount of time without compromising on the quality of the project.

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

    Essentially, I encountered following challenges:-

    1.Responsive paragraph.

    2.Designing the plan portion.

    3.Box-Shadow for the payment button.

    4.Designing the background of the card.

    I tackled these problems calmly by researching out various possible solutions, choosing the better solution, applying the solution, modifying it and then finalizing it. I used following approaches for respective problems:-

    1.Padding helped out in the problem of making the paragraph responsive as per the given design across different devices.

    2.Flexbox and `` element were highly useful, in designing the plan portion.

    3.Setting up the box-shadow CSS property with proper values, helped in giving the payment button a bottom box-shadow.

    4.Pseudo element ::before and position: fixed; were significantly helpful in designing the background.

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

    Would love to know following:-

    1.What better approach could be used for designing the background?

    2.Any suggestions in general or specifically regarding code optimizations, better approaches and production worthy practices.

    Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Happy Coding ! Thanks 😀

    Victor 470

    @therealmaduanusi

    Posted

    understanding the fundamental logic of flexbox, grid and positioning can go a long way. Also good work 😁

    Marked as helpful

    0
  • @AzpenMeadows

    Submitted

    • I am really new to HTML and CSS. Does anyone have any recommended best practices I should follow?

    • Is there a better way to make text responsive to screen size? The card dimensions in my solution do not quite match the design image for mobile version.

    Victor 470

    @therealmaduanusi

    Posted

    Try and change the h1 into a p tag, you can embed it with an anchor tag(<a>)

    Marked as helpful

    1
  • @ErwinPrograms

    Submitted

    I'd like feedback on what I should tweak in order to provide a better UX.

    There's a vertical scroll on the component when it gets too small. I set display to none to keep the UI intact, however I don't think it's immediately apparent that it's scrollable.

    Is there a way to communicate that information without diverting from the design?

    Victor 470

    @therealmaduanusi

    Posted

    Try adding an alt text to name IMG and footer to the last div(not div itself) to fix error and maintain accessibility

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Why not change the last div to footer to maintain accessibility

    0
  • Josephine 20

    @JoShobande

    Submitted

    Please i will need feedback on the responsiveness of the page. i will also need feedback on my code in general: is my code clean enough? did i employ on the the best solutions?

    Victor 470

    @therealmaduanusi

    Posted

    It's looks nice on mobile 🙌

    0
  • Victor 470

    @therealmaduanusi

    Posted

    This is nice 🙌

    1
  • Victor 470

    @therealmaduanusi

    Posted

    Check your accessibility and your mobile display very well and see if it needs fixing.

    0
  • Nick 40

    @FrontEndNick2022

    Submitted

    I'm really pleased with this one. I had fun and games with the image again, with getting borders to round and working out how to get the tint on it.

    My first time trying media queries as well. I got it all to work nicely in the end, but am not sure it's the cleanest of code.

    Any feedback and tips are most welcome.

    Thanks,

    Victor 470

    @therealmaduanusi

    Posted

    The IMG is so compressed put it to a responsive state

    0
  • Nick 40

    @FrontEndNick2022

    Submitted

    I'm really pleased with this one. I had fun and games with the image again, with getting borders to round and working out how to get the tint on it.

    My first time trying media queries as well. I got it all to work nicely in the end, but am not sure it's the cleanest of code.

    Any feedback and tips are most welcome.

    Thanks,

    Victor 470

    @therealmaduanusi

    Posted

    Fix the IMG width on mobile.

    0
  • Raitis 190

    @RaitisVilums

    Submitted

    Hello,

    I made this little project using GRID, feel free to leave your feedback! I tried to make it responsive. If anyone knows good tutorials or reading materials for @media it would be appreciated.

    Happy coding, ** Raitis :) **

    Victor 470

    @therealmaduanusi

    Posted

    Nice one 🙌

    1
  • Victor 470

    @therealmaduanusi

    Posted

    Nice,I like the hover effect

    1
  • @codewithxavi

    Submitted

    Thanks for watching my solution, really appreciate it, I want feedback if it's possible, you can check out my channel: xavicoder

    Victor 470

    @therealmaduanusi

    Posted

    Maybe you could change the max-width to 100% on mobile so the it could be center. Or you set it to margin auto

    0
  • Victor 470

    @therealmaduanusi

    Posted

    I just love how you tackled these quickly when it's was just released. great job wishing you the best😁

    1
  • Victor 470

    @therealmaduanusi

    Posted

    Your's are just perfect 🙌 while mine are just😔 honestly I wish I could. You did a great job looking forward for more of your solution 🙌

    Marked as helpful

    1
  • @AaronCurrie

    Submitted

    I completed this challenge to keep my CSS and HTML skills sharp. I struggled quite a lot with a few elements of this design, particularly the profile picture: I couldn't figure out the best solution to have it split over the 2 areas my first attempt was to use a overly complex css grid inside the card that overlaid the image over 2 rows, this method worked but seemed unnecessarily complex for such a simple task. On my second attempt I used position relative and a minus value for the top which again worked, I finally settled on just using a minus margin value as this seemed the simplest option. I had a similar problem with the background top and bottom circles. I finally got them positioned after fiddling around with the background-position values but it was very trial and error until it looked right.

    My question to the community is what would the best practice way to position these elements be, would what I have done be acceptable or is there a standard way that would be expected.

    Victor 470

    @therealmaduanusi

    Posted

    So far you are able to get close to the design and have a good HTML and CSS structure. There's no problem in doing it the way you prefer. Because I'll use position for the profile img

    0
  • Victor 470

    @therealmaduanusi

    Posted

    It's nice 🙌

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Why not reduce it close to the solution.

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Nice design 🙌

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Nice work 🙌 but can you make it center vertically

    Marked as helpful

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Master piece 🙌

    0
  • Victor 470

    @therealmaduanusi

    Posted

    Your fonts need to be fixed

    0
  • @VladimirBrscic

    Submitted

    Hi, I tried my best but I'm not quite happy with typography issues. I can't get that exact color that is in design files. What could be the problem? Thanks

    Victor 470

    @therealmaduanusi

    Posted

    I think you should reduce the width on mobile like 80% and add a hover state on the name profile. Compared to that nothing much 🙌

    Marked as helpful

    0
  • Victor 470

    @therealmaduanusi

    Posted

    It's a good solution 🙌

    0
  • @Wijayaac

    Submitted

    Hey Folks ! I have no idea how the height of the body and html not inherit to my proof section, if you have a suggestions feel free to comments, Thank You

    Victor 470

    @therealmaduanusi

    Posted

    Your design needs fixing. Just learn about CSS flexbox and grid to see how you can implement it on the design. Also don't to worry yourself about the height

    0