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

Latest solutions

  • Submitted


    @polinagusakova


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

    .

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

    .

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

    Responsible design

  • Submitted


    @Son1x-7732


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

    Learnt use of variable classes in CSS. I will try to use data attribute to change style of various elements in projects.

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

    Changing styles of various elements of same components with a slight change was difficult without using individual CSS attributes. Used data type attribute to overcome it.

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

    Use of data type attributes, and property of flexbox.

  • Submitted


    surpoxia 10

    @surpoxia


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

    I think it is okay, but nothing perfect.

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

    The MockUp and details about the specific measurements where really vague.

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

    None

  • Submitted


    @mihainrs


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

    I got the CSS/HTML down fairly quick, so I'm slowly getting more accustomed to it. Looks pretty good too, just not optimized for screens that are not 1080p or mobile devices

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

    Javascript - I struggled a lot with it but with the help of a rly nice friend I got it to work

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

    Any constructive feedback helps!

  • Submitted

    Recipe page with React

    #bem#react#vite
    • HTML
    • CSS

    0


    @takinabradley


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

    I liked my organization of colors with CSS variables, using names such as --primary --primary-accent, and --background-accent. Theoretically that should allow me to switch the color theme easily if needed.

    I focused mostly on the style on this one. If I were to do it more seriously, I'd probably make this component consume and render recipe data to me more reusable.

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

    I hadn't touched tables in a while, and I had to research how to write them again. I also encountered weird behavior with padding on table rows- and I found through research I had to apply padding to / elements instead.

    Styling the table was interesting too, and it was fun to use the :not() operator to exclude a bottom border from being applied to the last table.

    I also had to research how to add padding between text content in a `` element and it's bullet. Figured out I could just using padding for that.

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

    I researched how to center the bullet points vertically with long text, but couldn't exactly figure it out. Admittedly, my research was haphazard and I kind of just tried stuff.

    I could have made custom bullet points, but I wasn't exactly feeling that. If there's a way to do it without creating custom bullet points, a hint would be nice!

  • Submitted


    @mussieh


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

    I am proud of the responsiveness that I achieved for the mobile layout. Next time, I might use a framework like Tailwind CSS if it saves me time on styling.

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

    I encountered a challenge in setting up hosting on Github Pages with Vite as the source code builder. Specifically, handling image paths was a bit tricky at first but I was able to figure out the issue.

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

    I would like any feedback on the correctness of my approach.

  • Submitted

    Pure SCSS pricing component with toggle

    #sass/scss#vite#accessibility
    • HTML
    • CSS
    • JS

    0


    DF 250

    @FengDenny


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

    I am proud to only use SCSS to combine :checked pseudo-class with input checkboxes and General Sibling Combinator (~) to create a pricing component with toggle

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

    A challenge I came across was using General Sibling Combinator.

    It wasn't working as expected because General Sibling Combinator can only be used to select elements that share the same parent.

    Thus, I had to refactored my HTML layout to fit this mandatory requirement

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

    At the moment, none.

  • Submitted


    @zjackson3163


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

    I am most proud of actually finishing it. I find it easy to start things and not finish them so I am proud that I actually got it done. I think if I cut all my projects into pages like this I could get them done. Like instead of thinking of it as a whole, I think of it section by section. This could be a single page of a bigger website. What I would do differently next time is actually look at the "style-guide.md". I didn't even know that was there, I thought that was a paid feature having the colors and fonts given to you so I made it way more difficult for myself to get the colors that I wanted. It's actually looking at the Figma mockup that is a pro feature, but now I know.

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

    I didn't have any serious challenges while making this. I did have trouble getting the colors right because I didn't know about the style guide so to get the colors I uploaded the design image to this color picker website (https://imagecolorpicker.com/) to get as close as I could with the colors. The general website colors are the same but the font colors are not. I'll probably go back and fix that now that I know where to find the colors used.

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

    N/A

  • Submitted


    zapfish1 70

    @zapfish1


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

    i didn't know how to make the overlay thing so i googled and found this tutorial on w3schools (https://www.w3schools.com/howto/howto_css_image_overlay.asp)

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

    i had a little bit of trouble with padding and gap, i would like to know if there's a more optimal way of dealing with that

  • Submitted


    @MuliroMatt


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

    I'm proud that I created more functions

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

    I didn't encouter any challenge

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

    I'm up to any suggestions

  • Submitted


    @kamauEr


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

    I tackled problems i had with flex-box especially on aligning the layout. Next time i would probably try and match the challenge as close as possible to the solution as i can.

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

    I encountered a challenge with aligning the footer property. I solved it by adding it with the position:absolute property and specifying where i wanted it to be with the bottom and left property.

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

    I would like more help with aligning items with flex-box without using the position absolute property.

  • Submitted


    @lucasribeirosantos


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

    The image hover with the color change and icon appearing was a bit tricky but using ::after, ::before and position absolute I managed to make it work properly

  • Submitted

    Dev links Built with React and firebase

    #firebase#tailwind-css#react
    • HTML
    • CSS
    • JS

    0


    P

    @Swag-blips


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

    This is my first project in a while, and I'm particularly proud of completing it, including adding authentication and authorization. I also expanded the project scope by using Figma to design and implement additional pages like 404 Error and No Profile Data. My friends and family appreciated it when I shared it with them. The project took two weeks to build, though it could have been finished sooner without frequent power outages. I also hosted it on Vercel with a custom domain for the first time, which was a valuable learning experience.

    In the future, I plan to use TypeScript for type safety and add unit testing with Jest and React Testing Library to make the code more robust and foresee potential errors, ensuring the web app is secure.

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

    Creating the select input with tailwind css i just opted for react select library which took quite a learning curve

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

    If you have any feedback that can help or imporve my code please dont hesitate to commet

  • Submitted

    Stats-Preview-Card

    #cube-css
    • HTML
    • CSS

    0


    @Ogo1A


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

    use of css and flex box

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

    phone screen and media query

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

    Sizing and re usability

  • Submitted


    @dynamic109


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

    .

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

    The only challenge i encountered was implementing the css designs

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

    none

  • Submitted


    @BhargavMarala


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

    NA

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

    NA

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

    Html and CSS

  • Submitted


    Vrondir 10

    @Vrondir


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

    Nothing in particular.

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

    Flex alignment I guess...? It was fairly easy.

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

    Shorter, cleaner code maybe?

  • Submitted


    Endy1381 150

    @Endy1381


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

    finishing it

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

    if you wanna see it, its in my repo README file go and read it

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

    any help would be accepted

  • Submitted


    @hannibal1631


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

    NA

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

    I face a lot of trouble while making the pricing part. But i figured it out on my own, which was good. GG.

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

    Any suggestions would be helpful.

  • Submitted


    @YoussefIbrahim9


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

    I'm proud because I designed the software algorithm by myself.

    Next time, I would focus more on thinking and analyzing before coding

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

    making functions was a bit challenging, The algorithm was complicated for me but after several trails, eventually I designed it

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

    Nothing, I already searched for all problems I faced

  • Submitted


    @MaanAlHababi


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

    I'm proud of the progress bar type element. I figured out a way to make it work quickly. I'm also proud of figuring out the little "message bubble" fairly quickly.

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

    Positioning and aligning the elements.

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

    There is a slight misalignment, the two cards in the desktop view appear to be aligned at the bottom but I could not figure out how to make it happen, I just stuck with keeping them centered using display:flex.

  • Submitted


    @thehelpfultipper


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

    Executing the reusability of the component that creates the basis for the main product display and the lightbox. I would opt for Bootstrap to bring about the responsive design on another try.

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

    The layout shifts across screen sizes came somewhat as a surprise and were largely due to not paying too much attention when overviewing the challenge requirements. Because of this, I started working on the desktop version and had to adjust along the way when making the app responsive. Typically, on projects that have considerable layout differences across devices, I prioritize planning before code execution to create lean reusable, and responsive components.

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

    On how to optimize code when making the application responsive.

  • Submitted

    Tip Calculator App || React + Typescript

    #react#tailwind-css#typescript#vite
    • HTML
    • CSS
    • JS

    0


    Boots 😺 1,610

    @adityaphasu


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

    I mainly chose this project to practice more typescript. The project wasn't difficult but me trying to focus too much on making the code work made it messier which could've been avoided just using a useEffect hook 💀

    The one key takeaway for me from this project is to plan carefully before diving into code 😅

  • Submitted


    sniiii 10

    @sniiii


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

    Didn't take me long time at all, and haven't written css from scratch before

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

    First made the CSS for desktop, wasn't sure how to do it well for mobile but think i figured it out?

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

    Appreciate feedback on everything!

  • Submitted


    Natércio 30

    @Natercio8


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

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

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

  • Submitted


    Adhi 50

    @Adhi-S12


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

    used clamp for responsiveness without using media queries

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

    .

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

    .

  • Submitted


    Abhishek 10

    @abhi02495


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

    I'm proud of building in considerably less time. Would like to give more time on more important things rather than boilerplate things.

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

    I wanted to solve this challenge using TailwindCSS. Using and setting TailwindCSS is little tricky when working for the first time or even after a long time. So, TailwindCSS Documentation helped me a lot.

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

    Nothing as now. Mostly it would be on the structure of the code/folders in project.

  • Submitted


    @homciAbdallah


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

    Every day I advance further in the front end Next time I will try to learn other techniques

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

    I suffer from the time factor a lot. I need support on how to speed up my work

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

    I started learning Redux in order to invest in the world of react. Are there any references you recommend?

  • Submitted


    @Samuelnerat


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

    The design

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

    The image on the large screen didn't align at some point I used width property to correct it

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

    i would any correction that could be made from the general code.

Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord