@hkaur108Submitted 2 days ago
What specific areas of your project would you like help with?
I am trying to add the active class so that I can show the selected button but it is not showing the required css. any feedback is welcomed.
Rupak Mukherjee
@hannibal1631All comments
- @hannibal1631Posted 2 days ago
Well, you've got the wrong idea about the rating buttons.
You have currently used orange when hovering which is not the case.
It's supposed to be orange when you click on it, so use
.btn:focus { background-color: #f3653a; }and when you hover over the buttons, use.btn:hover { background-color: #ECDFCC; }.Hope this helps. Happy coding.
And let me know if you would like to connect and work on some projects together, because like you i'm also self-taught. so let's connect.
Marked as helpful0 - @Lukas3162000Submitted 4 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of sticking through this challenge and getting better at web-layouting
What challenges did you encounter, and how did you overcome them?During the fundamental work i encountered the problem that the second column's height didn't match the height of the first column with the 2 rows in it.
I overcame this issue by deleting my existing layout and starting over from scretch with a much simpler approach.
What specific areas of your project would you like help with?For the mobile version below 600px display width:
How can i make the container of the cards match the new content height of the cards ? bcs right now the cards just overflow from and therefore i can't put a spacing on the end of the cards-container in mobile.
I'd really appreciate help on this behalf if you happen to know the issue :D
@hannibal1631Posted 4 days agoWell buddy,
@media (max-width: 600px) { .container { flex-direction: column; overflow: visible; max-height: 100svh; padding: 5.23rem; } }this is where you screwed up that no-space problem. Instead of 100svh, use 100% and use margin-y to give it space above and below.Hope that helped. And if i may, learn tailwind. You won't face this silly yet time consuming problems. Happy Coding.
0 - @aguli-meSubmitted 5 days agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of the attention to detail I've put in replicating the design. Next time, I would first fetch a list of css properties first before starting to code.
What challenges did you encounter, and how did you overcome them?Two challenges -
- Figma - Learning to import the figma file and using the software to fetch the css properties without the dev mode was a bit challenging.
- Tailwind - Doing the customisations for the theme in Tailwind was a bit challenged, required me to comb through the documentation of Tailwind.
I need feedback on the semantic html used and responsive design of the project.
@hannibal1631Posted 4 days agoThis looks good and is responsive for the most part.
About the figma design thing, you don't have to fetch the css properties from their. Just use your own vision to bring it to life. Cause that'll help you build an understanding of how styles work.
And while using tailwind, always think about big screen. because as you might know, by default it's phone responsive. So while styling, use
sm:andmd:to make it big screen responsive and then provide the classes for phone part(which in some cases is not necessary).I hope this'll give you some clearance about how should you use tailwind. If you would like to work on some projects together in future let's connect. Happy Coding!!!
0 - @workdotnishaSubmitted 7 days ago@hannibal1631Posted 7 days ago
Well Nisha, overall the design layout is correct but you've made the container too big for the screen which looks bad. Keep its' width like 600px or 700px. and make the font-size short.
Also, the button should have a hover state where the color changes. So make sure to change that too.
And you can remove the footer provided. Your webpage will look much cleaner.
Hope that helps, make sure to mark this as helpful. Happy Coding.
Marked as helpful0 - @SkAliyaSubmitted 10 days agoWhat are you most proud of, and what would you do differently next time?
Hi FrontEndMentor 🌐Community! I'm Aliya and this is my solution for this challenge:) 😁
What challenges did you encounter, and how did you overcome them?🛠️Built with:
1.HTML5📄 2.CSS3 🏳️🌈 3.SASS🎨 4.BEM NOTATION 5.JAVASCRIPT
What specific areas of your project would you like help with?I'll be happy to hear any feedback and advices ,Thanks in advance👩🏻💻😃😃. One more opportunity to improve my skills, in this challenge I'm used HTML, CSS, SASS & JS ,mainly used HTML Form for core functionality, Not sure my approach is correct or not, but it is working.
Thanks, to FEM team ,for helping us to improve skills & gaining knowledge by working on solution to challenges .
I'll be happy to hear any feedback and advices ,Thanks in advance👩🏻💻😃😃.
@hannibal1631Posted 10 days agoGreat job on the functionality, this works as it should.
The design have some minor flaws, not that big for users. But they are flaws for us, so make sure to fine tune it.
Apart from that, it's perfect.
0 - @Varsha-A03Submitted 11 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of how closely I matched the design, learning new techniques along the way. Next time, I'll focus on applying these skills more confidently to avoid repeating mistakes and improve efficiency.
What challenges did you encounter, and how did you overcome them?As a beginner working on first project, I faced challenges in understanding layout and font integration. It took extra time to get familiar with these concepts, but through research and practice, I gradually found solutions. By applying what I learned, I was able to achieve a result close to the desired design.
What specific areas of your project would you like help with?I'd like feedback on how closely my output matches the intended design, especially regarding layout and font accuracy. Any advice on adjustments in these areas would be really helpful.
@hannibal1631Posted 11 days agoWell as far as I'm concerned, this looks awesome. But obviously there are some things you could have done better and differently.
-
You should use main tag first and then make the card inside the main tag, it helps with accessibility and optimization. It's a good practice.
-
Use a separate style.css file for styling. Because in future your styles would get much much longer than this, let alone your html. So again, it's a good practice to use style.css separately.
-
You can remove the footer that's provided by default.
-
One advice I would personally give you for a problem that I've faced during my first days is, if you feel like your card/container looks small compared to the original design; use
transform: scale(1.1). It'll increase the overall size of your card, you can play with the sizes(above 1.0 will increase, and below 1.0 will decrease).
I hope my advices will be helpful. If you need any help or assistance, let me know. Also if you would like to connect to work on some projects or practice in future, let me know.
Happy coding!!!
0 -
- @miaxocSubmitted 11 days agoWhat specific areas of your project would you like help with?
I struggled with the placement of the background image. I would appreciate some feedback for that. Thanks.
@hannibal1631Posted 11 days agoWell, the problem with your background placement is you're putting it on html. What you should do is, use it in css. Use
background-image:url()orbackground:url()on your body tag and play with thebackground-positionto get it right.I hope this helps. Happy Coding.
1 - @kiran63616456Submitted 11 days ago@hannibal1631Posted 11 days ago
Great job kiran.
Just one advice, instead of giving # on the anchor elements, you can provide the official login or signup page link of those websites. It'll look much better.
Marked as helpful0 - @Nikhila-DNSubmitted 12 days ago@hannibal1631Posted 12 days ago
Great job on this one. But i hope you see where you should have done something different.
The goal here is to make to as close to the original design as you can. so this one needs some tweaks and it'll look exactly same.
Other than that the inner structure is well placed and designed. Good job on that one.
If you'd like to work on some projects in future or code together, let's connect.
Marked as helpful0 - @SkAliyaSubmitted 18 days agoWhat are you most proud of, and what would you do differently next time?
Hi FrontEndMentor 🌐Community! I'm Aliya and this is my solution for this challenge:) 😁
What challenges did you encounter, and how did you overcome them?🛠️Built with:
1.HTML5📄 2.CSS3 🏳️🌈 3.SASS🎨 4.JAVASCRIPT⌨️ 5.BEM NOTATION
What specific areas of your project would you like help with?One more oppertunity to improve my skills,in this challenge i'm used html, css ,sass & js. And also used Keyboard event to make the active state work for Keyboard Navigation, Not shure my approch is correct or not, but it is working.
Thanks, to FEM team ,for helping us to improve skills & gaining knowledege by working on solution to challenges .
I'll be happy to hear any feedback and advices ,Thanks in advance👩🏻💻😃😃.
- @SkAliyaSubmitted 18 days agoWhat are you most proud of, and what would you do differently next time?
Hi FrontEndMentor 🌐Community! I'm Aliya and this is my solution for this challenge:) 😁
What challenges did you encounter, and how did you overcome them?🛠️Built with:
1.HTML5📄 2.CSS3 🏳️🌈 3.SASS🎨 4.JAVASCRIPT⌨️ 5.BEM NOTATION
What specific areas of your project would you like help with?One more oppertunity to improve my skills,in this challenge i'm used html, css ,sass & js. And also used Keyboard event to make the active state work for Keyboard Navigation, Not shure my approch is correct or not, but it is working.
Thanks, to FEM team ,for helping us to improve skills & gaining knowledege by working on solution to challenges .
I'll be happy to hear any feedback and advices ,Thanks in advance👩🏻💻😃😃.
@hannibal1631Posted 14 days agoHello aliya, I checked your solution. It's technically working. But as a frontend developer, you should also implement some styles to handle transition and make it smooth.
If you look, you're preview is happening all of a sudden or in simpler words it looks choppy. Just give the question & answer some transition of like 0.3s ease-in-out. Also when the answer appears, a scrollbar also appears on right side of the screen. Which should not be the case. Fix this and this will look awesome.
If you like to discuss more or work on something together in future, let's connect. Happy coding!!!
0 - @itsmesrishtiSubmitted 18 days agoWhat are you most proud of, and what would you do differently next time?
I'm proud of finishing the project.
What challenges did you encounter, and how did you overcome them?I found it challenging to figure out how to make custom input work without a button. I decided to create a button for custom input for an easy user experience.
What specific areas of your project would you like help with?Anything that you feel can be improved upon.
@hannibal1631Posted 18 days agoWell great job! This works as it should. But there is a big change you should consider. The page is way too big looking and the footer is overlaying the container.
My advice, don't use the footer and make the container small by just using
transform:scale(0.8). It'll decrease the overall size of the box, play with the size to fit properly.Also use the script tag inside body, not on the head.
There is a small bug on your inputs as well, it takes negative value which should not be the case. Just a small tweak on js and it'll be good to go.
Happy coding!!!
0
