Skip to content
OverviewSolutions
17
Comments
16
P

Robert Crocker

@robcrockUnited States410 points

Full-stack developer working on a side-hustle while not building UIs for the scientists I work with at Helix.

Latest solutions

View more solutions

Latest comments

  • Yousef Attia•310
    @Deeperr0
    What are you most proud of, and what would you do differently next time?

    I am very proud of the animations in the features section.

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

    Animating the features part was a bit difficult especially with the blue rounded div behind the pictures.

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

    Anything regarding the animations and responsiveness or how to write cleaner react code or things like file structuring would be appreciated

    Bookmark Responsive Landing Page using React and TailwindCSS

    #react#tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    The biggest things catching my attention on first glance is that the header image is a bit larger than the design and it's falling off of the right hand side of the screen.

    I tried filling out the form at the bottom, but I don't get the error message I would expect.

    I also noticed that several of the interactive elements aren't changing on hover as you would expect them to.

  • P
    Robert Crocker•410
    @robcrock

    Visually, I can see that the size of the logo should be reduced and the nav moved down. The top row of content that changes is too tall and the navigation buttons are getting squished. In looking more closely at the site there a layout shift happening when you click on the nav buttons, which is a little jarring. You can also use the svg for the shop now arrow they provided instead of the character code. Speaking of code, I briefly looked at your code and noticed that you're reaching to the DOM for the toggleMenu function, which you did get working, but you might want to look at useRef when reaching out to specific DOM elements. All that being said, great work standing up this fully functioning solution 👏

    Marked as helpful
  • Gakii•600
    @G-Gakii
    What specific areas of your project would you like help with?
    • I'm not sure how to set the close icon in the mobile design so that clicking it takes me back to the homepage.
    • I have too much bulky javascript code. Is there a method to write better by using Tailwind for styling and minimising the amount of js code?
    • media queries in Tailwind. I'd appreciate any resources you can recommend to help me understand better.

    loopstudio landing page with tailwind

    #tailwind-css
    1
    P
    Robert Crocker•410
    @robcrock

    This is a fantastic start, but I bet it could feel 1000% better with transitions on the hover effects and proper sizing of the elements. It feels very zoomed out when you go to view the site.

  • P
    Robert Crocker•410
    @robcrock

    Looks great. The only feedback I have on this one is to work on improving the alignment between the design spec of the text and your solution.

    Marked as helpful
  • P
    Nate Valline•420
    @nvalline
    What are you most proud of, and what would you do differently next time?

    This was the first time implementing Typescript and a dark/light mode into an application. I feel like I picked them up fairly quickly. I know I have more to learn with Typescript, but this was a good first project.

    As for the dark/light mode, I elected to handle it with dynamic classes. For this project I feel like it works well, though for larger applications I'm not sure if there is a better way.

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

    Figuring out the question progress bar was the biggest hurdle I faced. I was able to find some information online that provided the right direction and I was able to figure it out in the end.

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

    If there is a better way to handle the dark/light mode feature, I would be interested in hearing other options.

    Also, if there are any general suggestions/tips to improve upon my code I'm all ears.

    Thanks!

    React, Typescript, & SASS

    #react#react-router#sass/scss#typescript#vite
    1
    P
    Robert Crocker•410
    @robcrock

    You could use a context provider to wrap your child components that need to inherit the theme. That being said, I thin you did a good job especially in how you're handling the error state. I personally didn't even take the time to implement the bonus points, so well done. Bravo!

    If you would like to fix a bug, I found one. After you click submit answer you can continue selecting different options and even set the correct answer to be correct and incorrect at the same time. It's a little funky.

    Marked as helpful
  • P
    Robert Crocker•410
    @robcrock

    I like how you set up the min/max password length constants. I also like how you have set up the copy to clipboard reset using setTimeout.

    You asked for feedback on your Tailwind. In my solution I learned how to use the group utility class to style child based on interactions made on the parent. I used this in the Copy to Clipboard button and icon in the Generate button. Maybe you'd like to use it to? https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state I don't think you have setup the hover state of your Copy to Clipboard yet.

View more comments