@alinakanivecka
Latest solutions
FAQ accordion
PSubmitted about 1 month agoI struggled to get the background image to fit properly, especially on larger screens. While I was able to make it responsive for most viewports, it still doesn’t stretch past 1440px, which makes it look cut off on ultra-wide monitors. I tried different CSS properties like background-size: cover and background-repeat: no-repeat, but I couldn’t get the desired result. I’d appreciate guidance on how to make the background image stretch consistently across larger screen sizes.
Intro component with sign-up form
#tailwind-css#reactPSubmitted about 2 months agoI’d like to get better at organizing and managing Tailwind classes in a way that keeps my code even cleaner and more maintainable. I’m also interested in learning how to customize the Tailwind configuration more effectively, like setting up custom colors, fonts, and reusable components. Any feedback on best practices for structuring React components with Tailwind would be really helpful too.
Frontend Quiz App
#reactPSubmitted 3 months agoWhile I’ve made significant progress on my quiz app, there are still a few areas where I’d appreciate some guidance to improve and refine my work:
-
State Management with Context API or Redux: As the app expands, managing state across multiple components is becoming more challenging. I would love help understanding the best practices for using Context API or Redux to streamline state management and avoid prop drilling.
-
Testing the Application: I haven’t yet written tests for my app, and I’m unsure where to start. I’d like help with setting up testing frameworks like Jest or React Testing Library and writing effective tests to ensure my app works as expected.
-
UI/UX Design Improvements: While the app is functional, the design could use some refinement. I would appreciate feedback on improving the user interface and user experience, such as making it more intuitive, visually appealing, and accessible.
-
Performance Optimization: As the app grows and becomes more complex, performance could become an issue. I’d like help identifying potential bottlenecks and optimizing the app for better speed and responsiveness.
-
Deployment Best Practices: Although I deployed my app on GitHub Pages, I’d like to learn more about other deployment strategies (e.g., Netlify, Vercel) and how to set up Continuous Integration/Continuous Deployment (CI/CD) for smoother project management.
-
Password generator app
PSubmitted 6 months agoI want to get more practicing using the Dom and writing functions. I'm getting better at CSS, but I still want to get practice on some of the input styles and animations.
Tip Calculator App
PSubmitted 8 months agoNeed more practice solving problems with JavaScript. I intend to do more problem-solving.
Time tracking dashboard
PSubmitted 8 months agoHow to plan out a project better. I feel like I don't know how to properly break down a project and find out where I need to start on it.
Latest comments
- P@hectorlil48
Hey, I checked out your FAQ accordion, and I think you did a great job with the design! I noticed you used width for the container and adjusted it with breakpoints. You might want to consider using min-width instead because it gives more flexibility. Using min-width allows the container to adapt better as the screen size increases, preventing it from being too narrow on larger screens. This can make the layout more responsive and consistent.
One other thing I noticed is that the structure would benefit from using more semantic HTML. For example, wrapping your FAQ title in a <header> tag or the accordion content inside a <main> can make the page more accessible. This helps screen readers better understand the page structure, which is especially important for users with disabilities.
Let me know if you want to chat more about it!
- @NessapngWhat are you most proud of, and what would you do differently next time?
I am proud of being able to successfully build a functional Interactive Rating Component using HTML, CSS and JavaScript, I learned how to structure my code and made it to match the design as closely as possible.
I would pay more attention to the fonts of texts used and make sure it's applied to the program.
What challenges did you encounter, and how did you overcome them?I had troubles with making sure my program was responsive, I had to keep checking often to make sure it matched the mobile design that was given, and I was able to overcome the problem by using media queries to adjust the layouts at different breakpoints which helped improve the responsiveness.
What specific areas of your project would you like help with?I would like help in improving the responsiveness across screen sizes and to help make my CSS more efficient.
P@hectorlil48It looks good, maybe add more padding in the button. Also, you should try wrapping everything inside a main tag to make it more semantic.
- P@MikDra1What are you most proud of, and what would you do differently next time?
💻 Hello 👋 Frontend Mentor Community,
This is my solution for the Frontend quiz app.
- Scored 97,75% on Google Pagespeed Insights! 🚀
- Solution with 100% W3C validation accuracy 🌟
-
You should be able to:
-
Select a quiz subject
-
Select a single answer from each question from a choice of four
-
See if they have made a correct or incorrect choice when they submit an answer
-
Move on to the next question after seeing the question result
-
See a completed state with the score after the final question
-
Play again to choose another subject
-
View the optimal layout for the interface depending on their device's screen size
-
See hover and focus states for all interactive elements on the page
-
Navigate the entire app only using their keyboard
-
Change the app's theme between light and dark
Additionally:
-
Your preferred theme will be saved so next time you visit my website you will get the right one.
-
Each category has different primary color so you can differentiate them.
🛠️ Built with:
- HTML ✨
- CSS 🎨
- JavaScript 🧾
- React ⚛️
- Vite.js 💡
- Context API 🛒
- Styled-Components 💅
- React-Router 📡
-
Fully responsive design crafted with a desktop-first approach 💻
-
Enjoyed every moment coding this! 😎
-
Feedback is always welcome—let’s grow together! 🌱
-
Completed 15 out of 28 Intermediate Challenges so far—keeping up the momentum! 🔥
-
Completed 2 out of 12 Intermediate Premium Challenges 🔥
-
👨💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
-
As I am developing in my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡
P@hectorlil48Hey,
I think you did a great job on your quiz app! It’s responsive, and everything works as expected.
I was a little confused about how you styled it—did you do your own CSS? I really like that you used different colors for each topic, but for the HTML topic, the orange makes it a bit hard to tell if I got an answer wrong since it looks close to red.
One thing I added to my own quiz app was local storage to save progress, so users don’t get sent back to the start menu if they refresh. I noticed you’re using useState, which works great, but it resets when the page reloads. Just something to consider if you ever want to add persistence!
Overall, I learned a lot just by reading your code. What was your thought process when tackling a challenge like this? Keep up the great work!
Marked as helpful - P@coding-brianP@hectorlil48
Hello Brian,
Good work on making this with React. I want to redo it once I get to React. The design is nice, but it breaks when you view it on mobile. When you select the length to be 20, the password will be displayed on two lines. The strength bars are also changing before the password is generated. You should include validation for the length. Because it just does nothing, and the strength bars appear like there is a password it considers to be strong even though it has no length. Other than that, maybe add an animation for the COPIED word to disappear after a couple of seconds. Also, it shouldn't reset the fields after you copied it. I hope these help a little bit, I know I struggled to write the logic for mine, but it helped me become a better developer, and I hope I can help someone else with what I learned.
- @Sandaruwan7056What specific areas of your project would you like help with?
some tips or resources to increase my javascript skills will be helpful and if i made any errors in this particular challenge any tips to correct them will be greatly appreciated
P@hectorlil48You can improve the code by using event delegation to minimize the number of event listeners, enhance performance, and simplify the logic. Refactoring your error handling into reusable functions will also help eliminate redundant code. Using more descriptive variable names for clarity would be beneficial, like renaming Element to tipButton. Lastly, breaking down logic into smaller functions would make the code easier to maintain. Keep up the good work!
Marked as helpful - @ClaudiaRamirezDP@hectorlil48
Good job on the dashboard. It looks good in every size. The only thing I would say is on the card components; you might want to add a border radius to the top of the dark blue cards. Other than that, keep up the good work!
