All solutions

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

I am most proud of successfully implementing the password strength evaluation feature in my Vue.js password generator app. Calculating password entropy and dynamically assessing password strength based on user inputs was a significant achievement.

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

One of the challenges I faced was creating a custom slider input to adjust password length dynamically. Integrating Vue.js with CSS to achieve smooth slider functionality while maintaining responsiveness was tricky. I overcame this challenge by leveraging Vue's reactivity system effectively and carefully managing CSS transitions and animations. Ensuring compatibility across different browsers and devices required thorough testing and adjustment of CSS properties for optimal performance.

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

I am most proud of how I integrated Vue.js to create a dynamic and responsive user interface for the tip calculator. Using Vue.js allowed me to manage state and reactivity effectively, enabling real-time calculations based on user inputs. Additionally, achieving a clean and visually appealing design that enhances usability was a satisfying accomplishment.

Next time, I would focus more on accessibility considerations from the outset of the project. Ensuring the application is fully accessible to users with disabilities, including proper keyboard navigation, screen reader compatibility, and color contrast ratios, would improve its overall usability and inclusivity. Additionally, I would enhance error handling and validation messages to provide more intuitive feedback to users.

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

Challenges Encountered: One challenge was implementing robust input validation, particularly ensuring that users couldn't enter negative numbers or invalid characters in the custom tip field (customTip). Managing the validation logic dynamically alongside Vue's reactivity posed initial difficulties.

Overcoming Challenges: To address these challenges, I utilized Vue's computed properties and watchers effectively. I created dedicated validation functions that were triggered reactively whenever customTip or other relevant inputs changed. This approach ensured that input validation was seamless and user-friendly, enhancing the overall reliability of the application.

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

I'm happy because I'm starting to make better use of grids.

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

The menu on mobile wasn't easy to integrate. I would have liked it to unfold gradually with a transition, but I didn't manage to do that.

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

transition, animation in CSS

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

I'm happy to have reached the end of this challenge. At this stage, I don't know what I would have done differently.

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

I had difficulty positioning the elements because of the extra content that appears when you click on the "more" button. Initially, I'd coded my entire layout without taking this into account and then, when I finally integrated it, I realised that I couldn't use padding on the parent container and that I'd (perhaps) have to use margins. At this stage, I'm not sure that's the best way to do it. I'm a bit disappointed because (and I don't know what my learner peers think), but sometimes I feel confident in HTML and CSS and the next moment I can't get the result I want properly and I'm doubting again.

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

If you've worked on this project differently for the positioning of the elements, I'd be happy to know how and why. Thanks in advance!

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

I'm proud of the fact that I start to get by when I take on small challenges. I've got a good grasp of the basics of HTML, CSS and JS. I'm making slow but steady progress.

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

This was not a complex challenge for me. It allowed me to revisit concepts I'd already seen in other challenges and I'm happy to see that my hard work is finally paying off.

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

I don't think my code is the simplest in the world. If you ever have any suggestions for refactoring, I'd love to hear from you.

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

I'm happy to be making gradual progress in learning JavaScript, even if I'm still getting stuck on some simple elements.

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

The most difficult part for me was displaying the timeframes according to the button clicked (monthly, weekly or daily).

I've created a specific function for this.

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

I can't see anything at the moment, but if you have any comments, I'd love to hear from you.

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

I'm happy with the visual result and the fact that I was able to generate the JS code without help and by doing some research myself.

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

I can't think of any, although I'm sure I could improve my code.

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

For the moment, I don't know.

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

I'm happy with the result.

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

I wasted a lot of time trying to change the color of the share button when it is active. I went to stack overflow and found the solution.

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

I can't see anything at the moment.

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

I'm happy because I'm feeling more and more comfortable with HTML and CSS. On the other hand, I don't really understand JS. I've just come out of an intensive training course and we concentrated on frameworks. I've forgotten basic JS and DOM manipulation. I really need to go back to the basics.

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

DOM manipulation, basic javascript, function creation, code organization.

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

I think I've met the challenge, but I'd love any advice on how to get better at JS, even if it means starting from scratch.

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

I'm pleased because the component is interactive and I've used the URL parameters to retrieve information from one page to another.

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

I don't master JS, so I use a lot of existing solutions.

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

I can't see any at the moment, but I'm always interested in your comments.

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

I'm happy to have made it to the end of this challenge. I learned vanilla JavaScript, but it's been a long time since I used it. I don't think I would do this challenge any other way, but I might try doing it with a framework (Vue) next time.

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

I had a lot of difficulty positioning the form elements. I was unable to position the error message in absolute position for the mobile version. Therefore, when it appears, it brings down the rest of the composition.

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

I'm always open to suggestions and advice.

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

I'm proud to have taken the challenge all the way. The final result doesn't match the design to the pixel, but I've managed to find solutions to various challenges, such as positioning images in absolute position, positioning background images, creating a curve for the bottom side of a block, and so on.

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

It's really the image positioning that I didn't feel comfortable with. Now I've found the trick. I use the inspector and enter the data directly into the inspector to position more or less and it works.

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

If you see anything incorrect, please let me know so that I can improve. I also find the use of BEMs confusing in a more complex challenge like this. If you see me misusing this methodology, don't hesitate to let me know.

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

I am happy with the result and I think I have understood the BEM methodology. Next time, I would like to go further by using modifiers, but I don't know yet how to proceed at this stage.

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

Nothing comes to mind.

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

Suggestions are welcome. I call upon the masters of the BEM methodology to give me their opinion on how I have utilized it.

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

I'm happy with the result of this challenge, which closely matches the design.

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

None.

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

Any advice is always welcome.

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

I'm happy with the result because I think it matches the design very well. What's more, it seems to me that the whole thing is responsive as it should be.

I absolutely must take the time to analyse the layout before I start coding. I think I'm jumping into challenges too quickly and I'm not anticipating everything.

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

Semantic tags. It's still not clear to me. Do you have to systematically put a ? Especially if there's no and ?

I'm often happy with the visual result, but is my code correct? clean?

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

If you can think of a better way of doing it, I'd love to hear from you.

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

Hello everyone !

I didn't like this challenge.

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

I found that there were a lot of little adjustments to be made in order to stick as closely as possible to the design. In the end, I stopped following the design because I didn't understand the logic behind the spacing between viewports.

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

I'm not at all happy with what I've done, but I wanted to finish it and move on to something else. I certainly could have done better, but when you spend a lot of time preparing everything, it's hard to go back or start again.

If you have any advice, I'd love to hear from you. I'm sure there is a better way to proceed...

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

I'm happy with the result. Maybe I could simplify the markup and styling.

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

Positioning the quotation mark was tricky. I found a solution online.

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

I don't know, but I'm open to suggestions.

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

I find that the result is very close to the model. What I would change: I forced myself to use grids, but I wonder if I should have tried with flex boxes for this one.

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

The organization of the in desktop version with the 4 sections that are at different heights. I went back several times to websites that explain how to use grids because it wasn't obvious. Not sure if my h1 is an h1. I didn't find an alternative.

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

The grids. I would like to practice on other challenges. Which ones do you suggest?

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

Hello There !

-I managed to implement media queries well, ensuring responsiveness by prioritizing the mobile version. -I sense that I'm beginning to grasp some best practices, which is a satisfying progression.

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

-Styling lists, particularly customizing li::marker. -Styling the table in the last section, specifically inserting lines between each row. -Uncertainty regarding the header within the article.

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

-I'm seeking reliable resources on HTML semantic tags. Any recommendations would be greatly appreciated! -What's more, I know I've probably made a lot of mistakes again. Feel free to point them out to me. It will help me improve.

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

Hello !

I'm pleased with the colours chosen and the way the result looks.

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

The difficulty for me on this challenge was to properly organize this list of links by getting rid of the styles inherent to the , , and elements. Also, with my manipulations, I realize that I can't make the cursor appear when I hover over my links. I've tried cursor: pointer, but it's not working.

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

I'm open to any suggestions and advice.

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

I'm most proud of successfully implementing grid layouts in my project.

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

I couldn't trouble figure out how to decrease font size without using media queries. I've searched online and consulted documentation on units of measurement like vh, vw, etc., but haven't found a solution. Can anyone help me?

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

I would like the solution to adjust font sizes based on screen size without using media queries. Additionally, I'd like to know how to create a smooth transition in the size of elements between screens.

Challenge Completed! 🚀

Hello Front-End Mentor Community! 😃

Challenges Faced: 💪

Building this project came with its challenges, and I've got a list to share:

• Positioning Pseudo Elements

• Using CSS Grid

• Implementing the Slider

• Dealing with Spacing Inconsistencies

• Handling The Numbered List-Items

Many thanks to Kevin Powell: 🎓 I want to express gratitude to Kevin Powell for his amazing video tutorials. Following his guidance, I've soaked up a ton of knowledge throughout this project. His expertise and teaching style were absolute game-changers. 🙏

I would like to improve my skills with CSS grid. What frontend mentor challenge would you recommend I do next ?

🚀 Celebrating My BMI Calculator Solution! 🚀

Hey Frontend Mentor community!

I'm thrilled to share my solution for the BMI Calculator challenge with all of you. This project was both fun and challenging, pushing me to dive deeper into various aspects of web development.

Challenges I Overcame:

• Crafting custom gradients and shadows using Tailwind CSS was a learning curve for me. It required experimenting and iterating to achieve the desired visual effects.
• Working with CSS Grid for the first time was an exciting experience. It opened up new possibilities for layout design, and although it was challenging initially, I'm proud of how it turned out.
• Striving to match the prototype precisely was tough. While my result isn't pixel perfect, I'm content with the outcome.

Areas I'm Seeking Feedback On:

I'm questioning whether I could have simplified my Tailwind CSS further by creating more components. If you've got tips or insights on this, I'd love to hear them!

Questions for Feedback:

• How's the overall user experience? Are there any pain points or areas that could be improved?
• Did I effectively use custom gradients and shadows? Any suggestions for refinement?
• Regarding my use of CSS Grid, are there alternative approaches that could enhance the layout or responsiveness?
• I aimed to balance adhering to the prototype and making pragmatic design choices. How well do you think I succeeded?

I'm immensely grateful for any feedback you can provide. Your insights will undoubtedly help me refine my skills and take my future projects to the next level. Thanks for being an incredible community that fosters growth and learning!