All solutions

Hi Frontend Mentor community 👋

This is my solution for the age calculator app challenge. Very interesting app, never worked with dates before, was quite challenging matching every case scenario. I thing I could've done the code part a little better. Any suggestions on my solution? What could I improve?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution for the results summary. Overall a fun challenge to practice new tools. As I am learning React and the BEM was a good challenge overall. I'm finnaly integrating the BEM with SASS and it is pretty awesome. What do you think of my solution? What could I improve?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the expenses chart challenge. I figured that this was a good challenge to put my React practices to test. Overall I learned a lot, solved the challenge with the documentation of React and eventually I got stuck and asked for help for the discord community. Josh Burri and Unidade helped me out on this. So thanks to them. What do you think of my solution? What could I improve on the solution?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution for the static job listings challenge. Was a fun challenge, learned a lot doing it. Putted in practice my javascript skills, however I thing I could have used map and filter instead of forEach in some situations. The solution is working as it should but I believe its not the most optimal, neither in the css part or the JS. What could I improve in my solution? Any tips about the solution?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the newsletter sign up. Overall a fun challenge to deal with. In this challenge I tried to start applying the BEM metodology, as I'm still learning this metodology I was not 100% sure in how to name everything. I also tried to start using separeted files for the media queries using SASS, but I cound not figure why it was giving some errors, so I leave them in the same SCSS file. What do you think of my approach to this challenge? What could I improve overall?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on social media dashboard. Overall I learned a lot in this challenge, I tried the mobile first approach and was greeted with a lot of small challenges and went quite smoothly, I used the mozilla documentation to guide through the things I was struggling. The SCSS part ended up being quile large and I think I could made it simpler, but it worked in the end. Also I had a idea of using a animation on the card, tried to made from scratch the mouse hover transformation of the card but I think I need a little more experience to do it so. That being said I used a open source script to animate the cards.

What do you think of my approach in this challenge? Where could I improve?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the advice generator app. Was a pretty fun challenge overall. Learned a lot of JS doing it. What do you think of my solution? It is in line with best practices of JS? Was a better way to do it, or a different one?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the intro component with singup form. I did this challenge with SASS as aways and the script part with vanilla JS. Overall a fun challenge to improve my skills regarding CSS and JS. As pointed out in a previous challenge, I tried to reduce the quantity of JS code, using query selector then looping over the components. What do you think of my solution? Any suggestions in how to improve?

Thanks in advance for the feedback and the tips!😄

Edit: now the website is supposed to be working as intended, for some reason the id of the form just went missing when I uploaded the solution, maybe some git issue? Anyways Its working properly now

Hi Frontend Mentor community 👋

This is my solution on the interactive rating component. Overall I had a really good time giving the page some style and animation. The JS part was challenging and fun to deal with. I believe that the JS part could be smaller, perhaps using jquery, any tips regarding the script or the CSS part?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution for the ping comming soon page. The css part of the challenge was pretty straight forward, the thing that took me the most time was figuring out the script to modify the document. Ended up creating a regex validation to match the e-mail and modify the page accordingly. What do you think of my solution? Was a better way to do it?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the testimonial grid challenge, pretty straight foward one, since I already knew the grid properties. Was quite a fun challenge trying to match the details. What do you think of my solution, anything to improve? Any tips?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution on the social proof section challenge. Quite a fun challenge, took a lot of testing and small adjustments, this made the css code a litte bigger than the usual, specially the media query part. Is there a better way to do the media queries in my case?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community 👋

This is my solution for the four card feature section challenge. A pretty fun challenge to use the flex proprieties. I was thinking of using grid at first, but didn't figured it out. Is there a easy way of doing this challenge using grid or is easier to just use flexbox?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community!👋

This is my solution to the product preview card. Overall a quite nice and relaxing challenge. What do you think of my solution?

Thanks in advance for the feedback and the tips!😄

Hi Frontend Mentor community!👋

This is my take on the stats preview card challenge. Overall a pretty nice one, everything went smoothly. Except the color on the image, I didn't get quite right and don't know how to do it properly, any tips regarding the image color?

Thanks in advance for any tips and help😄

Hi Frontend mentor community! 👋

This is my take on the order summary challenge!

Overall a quite nice project! I'm getting used to SASS and keep learning more about it. What do you think of my design?

Any suggestions, advices and tips are welcome!😄

Hi Frontend Mentor community! 👋

This is my take on the single price grid challenge!

Overall a very simple webpage to develop and learn the grid layout on CSS. My solution ended up being quite robust 😅. Any tips on redundancy code or how to improve into styling this kind of pages?

One thing that I was unsure about was the height of the page, on the body I used 100svh and had to change to 100% into the media query to properly fit the screen, any tips regarding why that happened?

body {
  height: 100svh;
}

@media screen and (max-width: 620px) {
  body {
    height: 100%;
  }
}

Thanks in advance for any tips and help with the code! 😄

Hi Frontend Mentor Community!👋

This is my take on the 3 grid cards challenge. I tried a desktop first approach, even though I was curious to make a mobile first website. I think It turned out pretty ok and any suggestions or help is welcome! 😄

The main thing that I was worried about was the utilization of SASS on a part of the code where I used nesting to make the hover effect, when compiling to CSS the :hover come with a space between the class name of the component, that made me fix manually the CSS code afterwards. 😵

Hi Frontend Mentor comunity! 👋

This is my first challenge and I tried to document my thought process in the github readme section, if there is any issues please give me feedback!

I tried to do my best on Aria and role labeling, it's my first time doing it, any tips? 😵

Thank you in advance for your feedbacks and suggestions! 😄