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


    P

    @lmarchesoti


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

    I loved to find a good breakpoint for the pages, guaranteeing that both would look good.

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

    The hover effect on the submit button looks like a prank

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

    The hover effect on the submit button

  • Submitted


    @yuriown


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

    I'm proud of having managed to finish the project with little help.

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

    I had some difficulties in getting the value of buttons 1 to 5 and using them on the thank you page, I managed to resolve them with the help of a friend.

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

    I believe I wrote a long JavaScript code, maybe I could shorten it a little.

  • Submitted


    @cmfc31


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

    Kudos to designer because the challenge it looks really nice

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

    I wanted the drop shadow of the card to transition at the same time when you hover the title of the blog card. I found a solution in stackoverflow which was basically to disable the pointer events from the card container and enable them in the blog title.

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

    None

  • Submitted

    Social links profile using Sass

    #sass/scss#parcel
    • HTML
    • CSS

    0


    P
    Joan 30

    @jrosellr


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

    I'm proud of how I approached the decomposition of the challenge into different visual components.

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

    Too much overthinking.

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

    Accessibility and Sass architecture.

  • Submitted

    Social Media Dashboard (styled-components, tailwindcss and TS)

    #styled-components#tailwind-css#typescript
    • HTML
    • CSS
    • JS

    0


    Cipi 150

    @CipiVlad


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

    Working for the first time with tailwind and styled-components in combination was fun! With more profound knowledge in both, I in longterm there could be benifits for some projects...

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

    Making use of tailwind in a responsive manner didn't work out well. But I'll keep up to it.

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

    Does anybody know a helpful resource/article/best practice on how to combine tailwind with styled-components? Maybe some known projects?

  • Submitted


    @Qwertyasd09


    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?

    I would like to know what is the most efficient way to import svg icons and be able to customize them, the way I did it in the project was that I imported them as static images, so it's not posible to add active states to the svg icons, because i would need to modify the attributtes of the svg itself. All of this in react.

  • Submitted


    @JosephSamuel-1


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

    borders around the element

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

    Aligning all text better

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

    Designing of the page more better

  • Submitted

    FAQ ACCORDION

    • HTML
    • CSS
    • JS

    0


    Madu Jang 330

    @MJspitta


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

    First project i'm using JS. It was a good start.

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

    Looping through an element using querySelectorAll. I had to loop through the variable assigned to access each

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

    Is there a better way to work round this task?

  • Submitted

    sunny-landing-page

    #framer-motion#next#react#tailwind-css
    • HTML
    • CSS
    • JS

    0


    @Alexworldwid


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

    hmmm finished it under 24hours so thats pretty sleek lol

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

    i get confused with the image. background image to be precise. using "cover" makes it scale and cover the whole container but the cropping was too much and "contain" just does'nt work. any help around that would be really appreciated

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

    background-size: ??? (the value that makes the image aspect ratio percet without cropping and streching it).

  • Submitted


    FahimUK 40

    @FahimUK


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

    I'm unsure if I did this challenge correctly, I created the specification of the sign up form and success message as closely as I could, including the shadow and gradient on the buttons when hovered. I had the browser switch images from mobile to desktop when appropriate in regards to screen size. I also created a JavaScript file that checks to see if the submitted information is a valid email or not, if so it will then hide the form and display the success message and if not it restyles the form box red and displays an error message. I also had the site revert back to the sign up form when the dismiss message button is clicked.

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

    Once again, any advice on how I can better structure my code, pointing out any radiancies or simpler ways I could achieve the same goal would be very much appreciated. Pointing out any mistake I have made regarding the challenge would also be helpful. Thank you.

  • Submitted


    @ryanalfredtaganas


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

    I did pretty fast doing the layout. but there's more room to be better at it

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

    mostly locating images when the code is uploaded in github

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

    aligning things in proper spacing and size

  • Submitted


    Garg2006 140

    @Garg2006


    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


    @nataliiasolomchak21


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

    I was able to add form validation and adjust it accordingly for the form.

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

    My goal for this project was to learn how to integrate Bootstrap into my own code and learn how to adjust it to CSS. I still wasn't able to change Bootstrap icon for invalid state to my own icon do that's something that I will be working on

  • Submitted


    @fish-ladder


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

    I'm most proud of feeling more comfortable with Flexbox and not needing to look at the documentation so much to achieve the layout I was after.

    Next time I will add font-sizes in rems as custom properties in :root to make text scaling easier.

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

    1. I thought I had completed the challenge and then realized the font sizes were different in desktop vs mobile layout (should have read the instructions more closely). I needed to revisit my font-size units in order to scale them for the different display sizes.

    2. Using Flexbox and auto margins to horizontally and vertically center the main card worked great except that it shoved the attribution element out of view at the bottom of the page. I fixed this by applying auto margins to the attribution element as well.

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

    How can I better organize my CSS code to make it cleaner?

  • Submitted

    Product preview card using CUBE CSS methodology

    #accessibility#cube-css
    • HTML
    • CSS

    0


    Moa Davou 70

    @moadavou


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

    For this project, I continued working with utility classes and began learning about the CUBE CSS methodology. It's still very new to me, so keep your expectations low.

    I also learned...

    • ... that margin-inline & margin-block (or padding) is a thing. I'm never going back to just margin!

    • ... about the visually-hidden class. I still don't fully understand all of the attributes though.

    • ... a little more about how to write accessible code.

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

    I think accessibility is quite difficult to understand fully. It's probably because I'm not disabled, I never had to use a screen reader or similar. Maybe I need to experiment more before I can fully grasp it.

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

    I would love it if someone could skim through my code and give feedback on the CUBE CSS methodology (I'm certain that I missed a few things), as well as if there are any ways for me to improve my code related to accessibility.

    I'm also wondering if it's okay to leave section, div, etc. without a class or aria-label for accessibility? All of my "empty" elements looked so empty in the accessibility tree.

  • Submitted


    @io-oseinana


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

    Hopefully nothing for the time being.

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

    I always had an issue with widths and heights but hopefully found an article that helped me out. Top 5 CSS Mistakes made by Front End Engineers

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

    Hopefully nothing for the time being.

  • Submitted

    QR component

    • HTML
    • CSS

    1


    agnese 270

    @aggie-l


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

    I am proud I managed to finish this exercise close to the original design.

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

    I think I had some challenges with positioning the component at start, but I searched online and managed to fix the issues.

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

    I would appreciate any feedback.

  • Submitted


    @Codelearner123456


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

    of making the project and I would make it better than it is already.

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

    Getting it to work. I got help from a solution.

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

    Css.

  • Submitted


    P

    @Edg3Runner


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

    This is the very first project where I've been using Tailwind CSS. I learned:

    • How to add custom fonts and colours to Tailwind.
    • How to use CSS variables in Tailwind.

    I've used the following resources to learn how to do it.

  • Submitted


    @NurayMercan26


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

    The work had many pages and it was very difficult to adjust the margin.

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

    I finished a multi-page study

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

    The ideal app for book sellers

  • Submitted


    @Yossab55


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

    proud of making this animation it took me a lot of time but facing a trouble in mobile there is a scroll show and i don't know ho to fix it and if you have something to tell me , please let me know ♥️♥️

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

    how to switch bettwen photos and make it dynamic if there is more than two pic and i overcome with spending a lot of time thinking about it and making if statement

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

    about the problem in phone make the page in phone responsive and click on the arrow and also open the console and you will see the bug

  • Submitted


    @hirakjsarma


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

    This is a QR code element that is coded using vanilla CSS. I am happy that I could replicate the design from scratch and made a good looking design.

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

    I was confused what to use at first. I thought of using grids but later I used flex box. Dividing the components into sub sections helped me think and learn to how breakdown things into smaller task.

  • Submitted


    @iamporrrrrrrrr


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

    None

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

    Estimating sizes

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

    How I can accurately estimate the dimensions of the component

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