Skip to content
OverviewSolutions
32
Comments
14

Lee

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

View more solutions

Latest comments

  • shrepdev•110
    @shrepdev
    What are you most proud of, and what would you do differently next time?

    used javascript

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

    javascript was challenging and project overall was challenging

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

    javascript

    Javascipt in action with responsive design

    1
    Lee•525
    @leecockcroft

    ,

  • P
    Scott Martin•150
    @smartinuk88
    What are you most proud of, and what would you do differently next time?

    For this project, I am most proud of how I was able to replicate the responsive layout of the hero section, use clamp for fluid font-sizing and width of some elements, and creating the number circle with vertical line.

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

    I really tried to focus on using utility classes where possible to avoid duplicated styles. I can still refactor further and I came into the issue of some styles needing to change for larger screens.

    I would plan for this better in future projects.

    I am generally unsure as to whether to use the exact spacing in the Figma designs or to stick to the spacing specified in the design system, to keep it more uniform, even if it differs slightly from the design. But I think I struck a happy medium.

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

    I would like help with:

    • Opportunities for refactoring
    • Feedback on my solution to creating the responsive hero design.
    • Replicating the overflowing hero image on desktop
    • Mixing methods. Sometimes I have used flexbox (where spacing between elements is even), and at other times I have used margin-bottom (where spacing differs between elements)
    • To get the right layout for the desktop cta section, I used max-width on the text-containers, but this does not feel like the most effective way.

    Meet Landing Page

    1
    Lee•525
    @leecockcroft

    .

  • Lee•525
    @leecockcroft

    Looks great well done

  • Lee•525
    @leecockcroft
    What challenges did you encounter, and how did you overcome them?

    Desktop if I give the body 100vh. the layout renders nearly perfect. here. however viewing this on a lap top the header is missing? (which viewing 1440px should be fine) but its dragged above the screen?

    What other approach should I do here?

    Flex box

    3
    Lee•525
    @leecockcroft

    Appreciate the feedback. thanks alot :)

  • Lee•525
    @leecockcroft

    .

  • FirstHalcyon•90
    @FirstHalcyon
    What are you most proud of, and what would you do differently next time?

    Well, it's not too far off from the design provided. Probably should have added another breakpoint, but it gets the job done. As a first attempt at mobile-first purely with code, it's fine.

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

    Tried to implement as many different new elements as I could. The stuff didn't give too much trouble, but typography was a real headache. Started with clamp(), but it messed with everything (content size, containers etc), so I just used "manual" measurements and @media. Not happy with that, it means I don't fully grasp how responsive text functions. Will try again in the next one.

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

    Honestly, any tips for responsive typography and rem-based containers will be really appreciated. Maybe, I should have had a clamp() with my min and max font sizes, but I still struggle a bit to visualize how calc() works.

    Mobile-First Product Page

    1
    Lee•525
    @leecockcroft

    Great effort!!

View more comments