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


    Jeeva• 40

    @Aaju


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

    Proud of nothing.

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

    Nutrition table was my real challenge.

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

    I want help with aligning items in grid.

  • Submitted


    Lauren Molloy• 10

    @LaurenAMolloy


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

    This is the first time sharing some code in public. It is also the first time I have completed a project without a tutorial or step by step guide. I am proud of attempting this project. Since I started learning JavaScript, I have neglected using HTML and CSS and just using prewritten files from my course. This challenge really helped me realise the importance of consistent practice and regular reflection.

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

    This took me a while, so I suppose one challenge is not being fluent enough writing my own code and being dependent on tutorials. This is the main reason why I joined this community. Another challenge was making the site responsive. For the next challenge my goal is to not look at any of the solutions till I have submitted my own. :)

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

    How could this be improved? What advice would you give moving forward to sharpen the skills used in this challenge for future challenges? What would be some skills to learn next in order to progress? There is so much to learn!

  • Submitted


    Craig Wolfe• 90

    @craigwolfe


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

    Most proud of the JavaScript it took me a while to figure out the email pattern script.

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

    I guess displaying and hiding the message with JavaScript when the email address was incorrect. Youtube and fellow developers was helpful.

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

    None. I think I did okay on this one. Not pixel perfect but close enough without using a Figma file.

  • Submitted


    Thaís Vieira• 100

    @thaisavieira


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

    For this project, I was most proud of how comfortable I was feeling with Flexbox proprieties. Next time I'd like to improve the way I get paddings and margins, I think it's too repetitive.

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

    Navigating padding and margins without a Figma design certainly presented its challenges, but it was possible to use other tools like "Better Ruler" extension.

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

    I'd like to help with the . product-image, I'm having trouble with the opacity and the margin-bottom that presents a sharp color and the view icon is almost invisible. While I was trying to fix things up everything messed up.

    .product-image{
        height: 300px;
        border-radius: 15px;
        cursor: pointer;
        opacity: 0.6;
    }
    
    .product:hover{
        border-radius: 15px;
        opacity: 0.8;
        background: url(/images/icon-view.svg);
        background-color: aqua;
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center;
    }
    
  • Submitted


    AshongAbdallah06• 650

    @AshongAbdallah06


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

    I had a problem with the overlay on the image. But I was able to do it after some research.

  • Submitted


    Franznic0• 280

    @Franznic0


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

    I had some difficulties working on json, I ended up solving in another way using the data as Object in the js file. I will study more json and return to it in a new challenge.

  • Submitted


    Takstan• 10

    @Takstan


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

    This is the first time i created this kind of stuffs. I'm so happy i've created the QR code challenge though it's easy its still a achievement to me as a newbee in web development. I will do my best and study more on web development.

  • Submitted


    1deadjoe• 60

    @1deadjoe


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

    I am prod that I handled the flexbox better that in the previous challenge. I am getting more familiar with the different styling techniques and options.

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

    I had a challenge centering the content, again, although this time persistence only did the trick. I am getting better at it.

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

    I would like help with the fonts please. I tried severally but could not manage. I used the link to google fonts to manage.

  • Submitted


    shazminnasir67• 10

    @shazminnasir67


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

    I'm most proud of your initiative to tackle HTML and CSS! As for improvements, next time I could focus on optimizing my code for better performance and accessibility.

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

    Navigating padding and margins without a Figma design certainly presented its challenges, but it ultimately led me to become a better frontend developer. I had to rely on my intuition and understanding of design principles to make educated decisions. Through trial and error, I learned to strike the right balance between spacing elements for visual appeal and maintaining a clean layout.

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

    I'm struggling with fine-tuning the responsiveness of my project across different screen sizes. Specifically, I'm having trouble with the layout on smaller devices such as smartphones. Any advice on optimizing my CSS media queries or implementing a mobile-first approach would be greatly appreciated. Additionally, I'm unsure about the best practices for optimizing images to improve load times without sacrificing quality. Any guidance on this aspect would be valuable.

  • Submitted


    001Cyntra• 10

    @001Cyntra


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

    I tried to create myself without looking at the other solutions, next time, for some styling, I need to use different approach to be more creative and also javascript and svelte.

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

    I started learning svelte for my first time and I feel unsure for using it like the concept and I tried to search their concept and took time to fix each error. Sometime, it shows nothing in the browser and I need to search them.

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

    We can use this one for web development or app development whatever, since FAQs is that we do for every kinds of software development.

  • Submitted


    LGenSOC• 20

    @LGenSOC


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

    I am most proud about coding most of the CSS on my own even if I had to ask a CSS expert for help on a couple of points. I found myself spending a lot of time troubleshooting the code thinking it was not working when it was just a missing ";" that was preventing my changes from being displayed so next time I will ensure I first check the syntax.

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

    Most of the challenges are based on trying to replicate the design elements which meant a lot of tries and re-tries and it took a long time. This is something that can only be overcome by using an app such as AnimaApp which converts figma files into CSS.

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

    I would like for my CSS to be reviewed

  • Submitted


    Cynthia Agu• 60

    @cynthiachinenye


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

    I was supposed to use a CSS grid to design this project but I couldn't perfect it with the grid so decided to use Flex. please I think I need more explanation on grid although I am going to learn grid with webos video hopefully it brings to my understanding of grid

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

    I tried using a display grid to solve the solution but I ended up using display flex using flex is much easier and less stressful but with grid I didn't know why when I used span it didn't give an accurate display that I needed, I am seriously going to master grid before the end this learning path

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

    in Readme file on git how do I add it to my project without creating another branch

  • Submitted


    Mineshaye• 10

    @Mineshaye


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

    I'm a beginner in frontend development and I'm happy I was able to center the container vertically on the body with CSS .Back then when I didn't really know CSS I used to use the HTML tag, Which is bad Practice.

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

    When I wanted to align the card vertically on the center of the page using align-items:center .It didn't work until i changed the height of the body to 100vh.

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

    I had problems with the layout.I was not able to align the paragraph to the link to the author because I used dispay:flex for the body . I'd really appreciate any assistance or feedback . Thank you in advance for your support!

  • Submitted


    T3chfuzion• 30

    @T3chfuzion


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

    I was able to figure out the hover transition for the buttons

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

    For some reason on the initial deployment, all my commits did not register properly from github desktop to the website. I had to start all over and recommit everything.

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

    I was trying to use bootstrap and was not successful. I just used vanilla HTML and CSS

  • Submitted

    Tip calculator app

    #accessibility
    • HTML
    • CSS
    • JS

    0


    shubham oulkar• 130

    @ShubhamOulkar


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

    I learned :has() pseudo class in this project. Also I learned how to write less CSS. In JavaScript VALIDATION_STATE is used to validate input fields and values. I have written state management functions in this project.

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

    State management was little challenging.

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

    I want help on my JavaScript code.

  • Submitted


    Gurofu• 30

    @Dr-Dados


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

    i'll do it using react

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

    it was a simple challenge

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

    nothing

  • Submitted


    Iamtrieves• 110

    @Iamtrieves


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

    My knowledge in JS is slowly upping by the day.

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

    Form validation.

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

    JS

  • Submitted


    Nikola• 30

    @miteskinikola


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

    In this project i learned the basics of CSS like flex-box and positioning. And JavaScript variables.

  • Submitted

    Social links page

    #tailwind-css
    • HTML
    • CSS

    0


    @apetranov


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

    I am proud that the design is very similar to the desired one

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

    The most challenging part was centering everything and I overcame it with some ai and youtube help

  • Submitted


    Nahid Hossain• 10

    @nahidhsiddique


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

    I am very proud that for the first time I've figured out the solution of the problem on my very own.

    Things I consider doing different next time are,

    • using good naming conventions
    • avoid using ID's for selecting HTML tag where it can be done without using it.
    • try to write more clean code

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

    I wasn't able to use Flexbox properly and I was having trouble aligning the containers horizontally center and also some of my elements were overflowing the containers. I have solved aligning problem by setting width to my containers and used calc() function to substract the amount of margin and padding from the actual width of my containers to stopping it from overflowing.

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

    I would really want to get feedback on where I could've written fewer lines of code to gain the same results and how can I write more clean code.

    Thank you!

  • Submitted

    HTML / CSS

    #accessibility#bem
    • HTML
    • CSS

    1


    jgambard• 260

    @Tripouille


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

    Nothing in particular, but I'm happy to practice without any framework.

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

    How to change the list-style color, I ask google as always.

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

    Any thoughts on my css?

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