Skip to content
OverviewSolutions
104
Comments
18
P
Karol
@VillageR88

All comments

  • Sam•970
    @JustANippleSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first project with Flutter. I'm really proud to share this with you. The only thing i think i'm missing to achieve the full solution is the hover state for the desktop version

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

    Working with widgets was a challenge, coming from HTML and CSS perspective, it wasn't intuitive for the first part, but then things started to click

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

    I'd like to know if there's anything i can do to centralize more my styiling. I feel like i wrote a lot just to make this card and i couldn't find a way to make a Theme that would work for all this project, but maybe there's a solution

    🟡Blog preview card | Flutter🟡

    1
    Karol•1,990
    @VillageR88Posted 2 months ago

    Great job! If you'd like to have a preview image, check out my Flutter solution.

    0
  • Karol•1,990
    @VillageR88Posted 3 months ago

    I recommend setting a minimal height to ensure that content remains visible. Good work!

    0
  • Karol•1,990
    @VillageR88Posted 3 months ago

    I recommend setting a minimal height to ensure that content remains visible. Good work!

    0
  • Sam•970
    @JustANippleSubmitted almost 2 years ago

    What did you find difficult while building the project? I couldn't manage to align the starting of the paragraph to the starting of the H2 Even if they were in the same div, aligning them to the center makes the paragraph to shift a little bit to the right. I tried to use a word spacing to make the words spread a little bit, but i couldn't get the same result as the QR example

    Responsive QR code box using Flexbox and relative units

    2
    Karol•1,990
    @VillageR88Posted 3 months ago

    I recommend setting a minimal height to ensure that content remains visible. Good work

    0
  • Karol•1,990
    @VillageR88Posted 4 months ago

    Great job! I recommend also testing your solution on larger screens to ensure it scales well.

    0
  • JaceLee•240
    @jaceleedevSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I feel that I started off on the wrong foot with this project. I should have taken a mobile-first approach, but instead, I went with a desktop-first approach, which was regrettable. However, I'm really proud that I didn't give up or restart the project; I saw it through to the end. Despite making things more complicated than necessary, I gained a lot from the experience. Next time, I'll spend more time carefully analyzing the design and planning how to implement it more thoughtfully.

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

    There was a lot of deliberation on how to handle the layout between desktop and tablet views. In this project, I implemented a complex grid layout logic, which felt overly complicated and not the best solution. In the future, I aim to solve such challenges with simpler, more straightforward code.

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

    Any tips related to CSS would be greatly appreciated. 😊

    Meet Landing Page with Next.js, Tailwind CSS

    2
    Karol•1,990
    @VillageR88Posted 4 months ago

    Great job! I recommend also testing your solution on larger screens to ensure it scales well.

    1
  • Karol•1,990
    @VillageR88Posted 4 months ago

    I recommend setting a minimal height to ensure that content remains visible. Good work.

    Marked as helpful
    0
  • Karol•1,990
    @VillageR88Posted 4 months ago

    It's very impressive how well it's done with just vanilla technologies. I would recommend setting a minimal height for all screens, as it might improve the viewing experience for users on mobile devices in landscape mode.

    Marked as helpful
    0
  • Zet•800
    @zetmosoma10Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I feel proud for completing this Huge Multi-page website and i feel more motivated to build even more big project soon.

    In this Project i worked with the following libraries

    • React+Typescript
    • TailwindCSS ( responsive design and styling the website)
    • react-router
    • react-leaflet ( rendering the Map and selecting locations)
    • react-hook-form ( tracking state of the form)
    • zod (schema base validation for form)
    • react-toastify ( send pop-up if form submission is successful )
    • react-helmet-async ( change page title dynamically when routing)
    • framer-motion ( add smooth animation when routing and toggling sidebar)
    • react-icons ( getting free svg icons)
    What challenges did you encounter, and how did you overcome them?

    Working with react-leaflet, it was my first time working with this library and i did not understand it at first. but eventually i manage to see the direction.

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

    In mobile device , the sidebar is not appearing in Location page. i think my the Map has a highest z-index above all element on the page, but i dnt know how to reduce it or find another way to show the sidebar.

    Thanks for any feedback.

    Designo build with React+Typescript | TailwindCSS | react-hook-form

    3
    Karol•1,990
    @VillageR88Posted 4 months ago

    You might want to switch from onSubmit to action, especially if you’re hosting on Vercel and then add real feedback messages with Nodemailer or something similar to give the project a bit of a backend touch.

    Marked as helpful
    1
  • Zet•800
    @zetmosoma10Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I feel proud for completing this Huge Multi-page website and i feel more motivated to build even more big project soon.

    In this Project i worked with the following libraries

    • React+Typescript
    • TailwindCSS ( responsive design and styling the website)
    • react-router
    • react-leaflet ( rendering the Map and selecting locations)
    • react-hook-form ( tracking state of the form)
    • zod (schema base validation for form)
    • react-toastify ( send pop-up if form submission is successful )
    • react-helmet-async ( change page title dynamically when routing)
    • framer-motion ( add smooth animation when routing and toggling sidebar)
    • react-icons ( getting free svg icons)
    What challenges did you encounter, and how did you overcome them?

    Working with react-leaflet, it was my first time working with this library and i did not understand it at first. but eventually i manage to see the direction.

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

    In mobile device , the sidebar is not appearing in Location page. i think my the Map has a highest z-index above all element on the page, but i dnt know how to reduce it or find another way to show the sidebar.

    Thanks for any feedback.

    Designo build with React+Typescript | TailwindCSS | react-hook-form

    3
    Karol•1,990
    @VillageR88Posted 4 months ago

    Great job, Zet! You might also want to style the autofill for input fields to match the regular input style.

    Marked as helpful
    1
  • Arkadiusz Żmudzin•30
    @arkus7Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I managed to finish this challenge :) Next time, I might separate CSS from the index.html file and maybe use some variables (or even SCSS) for styling.

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

    I had a problem with centring the card both vertically and horizontally. I found some articles about using flex to do this, but the default margins and padding messed it up a bit (creating additional space so that scrollbars were active). I've used a "hack" with * to reset those, but I'm unsure if this is the right approach. I've also had an issue with properly sizing the text elements on the card - the style guide said the paragraph size should be 15px, but there was no mention of the size for the header. I had to download the Figma file to check the proper size so I could mirror the design as closely as possible.

    What specific areas of your project would you like help with?
    1. I'm not sure if the HTML structure I came up with is the right approach. I tried not to overuse div elements, I reached for tags like main and section to give it more semantics although I worry that this is overkill for the example in the challenge. Any feedback is appreciated.
    2. I had a problem with centring things and I've used flex to solve it - what is the best approach here? I've used height: 100vh on the container to fill the whole viewport so it is also centred vertically - is this how it's supposed to be done?
    3. Is the naming of the classes in the CSS fine? I've always struggled with naming them and I went for naming by the "component" they describe.

    QR code component solution

    2
    Karol•1,990
    @VillageR88Posted 6 months ago

    Arkadiusz, I sent you the complete solution fix via pull request yesterday, but it seems to have been ignored.

    0
  • Karol•1,990
    @VillageR88Posted 6 months ago

    If you provide your real email in the input, you will receive a response from [email protected]. If you don't see it in your inbox, please check your spam folder.

    0