Skip to content
OverviewSolutions
5
Comments
5

GCrane93

@GCrane93UK70 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

Latest comments

  • Osvaldo Valdivia•180
    @progValjiSubmitted 8 days ago
    What are you most proud of, and what would you do differently next time?

    I am glad to have been able to finish this small practice, but it is essential to do it since it establishes the bases of responsive design.

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

    I only found the challenge of how to be able to cross out the old price of the perfume, I solved it in a simple way that was simply with the text-decoration property

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

    in responsive design

    Product_preview_card_component

    #sass/scss
    1
    GCrane93•70
    @GCrane93Posted 6 days ago

    Besides some styling inconsistencies compared to the design, this is a really good solution

    A few notes to "improve" the overall design

    • HTML can handle responsive images
    • Some elements, like buttons, have default styling like the border color and can be handled by a reset stylesheet
    <picture>
 <source media="(max-width: 768px)" srcset="assets/images/image-product-mobile.jpg" />
 <source media="(min-width: 769px)" srcset="assets/images/image-product-desktop.jpg" />
 <img src="assets/images/image-product-desktop.jpg" alt="Product Image" />
</picture>
    0
  • mohammed qabbari•150
    @mohamedqabbariSubmitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing this challenge in a day or less. in the next time, i will make code templete ready to use to finish challenge faster.

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

    challenges are always in advenced CSS styling, but i have used my tools ( Chrome DevTools ) to inspect elements. finally, i got a challenge.

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

    I would like to help with HTML / CSS and pixel perfect coding.

    My Solution: Recipe Page

    #sass/scss
    1
    GCrane93•70
    @GCrane93Posted 13 days ago

    Great attempt, a trick to match the inner element's border-radius and and outer's, like the card and image - is to add the padding to the outer radius

    0
  • GCrane93•70
    @GCrane93Posted 16 days ago

    Great design, code is structured well and agreed - like the tabbed styling

    0
  • Jaykins1•60
    @Jaykins1Submitted 24 days ago
    What specific areas of your project would you like help with?

    All feedback are welcome.

    Blog-Preview-Card

    2
    GCrane93•70
    @GCrane93Posted 24 days ago

    Good attempt, design-wise you're almost there on the first pass. It just needs a little tweaking to match.

    Suggestions

    • Use and reference the figma/design file. Has values for everything you're designing (widths, font sizes, border-radius etc.)
    • Add the Google font
    0
  • Ivan Beltran•20
    @SerebroinnaSubmitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how quickly I was able to develop this component, and in the next challenge, I will take more time to analyze the Figma design since I realized that it contains all the information I needed for styling.

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

    I forgot the box-shadow syntax, but fortunately, ChatGPT exists

    QR code component

    1
    GCrane93•70
    @GCrane93Posted 25 days ago

    It's very nice, almost matching the design. If you can access the Figma file, it's great to reference styling and sizing.

    Suggestions

    • Use Grid / Flex for styling, consistent spacing
    • Override default paragraph margins to match closer to design
    • Display Block on the image tag can fix a possible future issue of a white space underneath
    Marked as helpful
    1