@DavidMorgadeSubmitted over 2 years ago
This challenge is quite easy if you know how to manipulate de DOM and request info from and API to display on the DOM.
Any reviews of my code are welcome!!
Allan Kirui
@AllanKiruiAll comments
- @AllanKiruiPosted over 2 years ago
Hi, David. Great work in completing the challenge 👏 Not many people who started it have managed to complete it.
So I've skimmed through your code and the reason the project doesn't seem centered vertically in comparison to the design is because you have the following line of code;
height: 100remas part of the styles for the.mainclass. I'd suggest changing it to use thevhunit i.e,height: 100vh.I'd also suggest you use the colors provided in the style-guide.md file that comes included in the project files. And for this and future projects, you could also use a color contrast checker to make sure your sites meet web accessibility standards. You could watch this video on accessible color standards to learn more.
The last thing I'd suggest is adding a Readme file to the project describing what this and any other future projects you might have are all about. This might also come in handy for visitors of your Github page 😉 #NeverStopCoding✌️
Marked as helpful0 - @MaryEhbSubmitted almost 3 years ago
was the design tricky or it is just me ? I felt that it looked easy before I started coding it but it took a lot of time to finish I also feel that the code is really messy and complex than necessary but I can't fix it so I really need all the advice and feedback that can come to mind on everything
@AllanKiruiPosted almost 3 years agoHello Ehab, it's not just you. The design was actually tricky 😅 So you should be proud of yourself for putting in the time to get the project done. Not many people have been able to finish the challenge.
Have a look at this repository I made about how I personally approach coding designs. I use this approach with every project and it has saved me a lot of time and headaches in figuring out where or how to start tackling a challenge. You might get some useful insights from it: https://github.com/AllanKirui/designing-and-coding-layouts
As for your code, maybe for the HTML you code get some more practice with forms especially with how to use the <label> tag with the 'for' attribute.
If you'd want to chat, find me in Frontend Mentor's Slack Community @Nalla Will Jr
Marked as helpful1 - @imparassharmaSubmitted over 3 years ago
I used flexbox for the first time. Please take out some time and help me out if I can do this in more efficient way. Your suggestions will be very valuable to me!
@AllanKiruiPosted over 3 years agoHello Paras. First off all, you should be proud of yourself for completing this challenge. Many people started this challenge, but you are among the few who have completed it.
Here is some feedback on some of the things you might want to improve on. I suggest that you use class names that are a little bit more easy to read. For example, where you used a class of 'div div1' for a div element, I would suggest that you use a class names that try to represent the information that you are styling. Class names such as 'testimonial' or 'card card1'. This applies to the ratings section as well.
For the user images, in the testimonial section, it's considered best practice to use width and height properties on images. Here, I suggest you consider using px/rem units to set the values of the width and height properties as well as setting margins, paddings etc. This might help you get as close to the design as possible.
But as I said, be proud of yourself. Keep coding and never stop learning new things and improving :D
Marked as helpful1 - @JepardMaySubmitted over 3 years ago
I'd like to get feedback on the main block with buttons (gameboard__stage-1), animations, and game.js. I'd like to hear what can be done more easily and what better practices I missed.
@AllanKiruiPosted over 3 years agoHey, I think it's brilliant that you extended the game to include your own version. The ripple effect for when there's a winner is also a nice addition.
I don't have much experience with animations, but I just wanted to say that your version of the challenge is very inspiring (:
1 - @DamianErasmusSubmitted over 3 years ago
Did I miss anything?
@AllanKiruiPosted over 3 years agoHi Damian. First of, I'd like to say that you've done a good job. Not many people who started this challenge have finished it. So feel proud of yourself.
What I would suggest is that you work on the responsive design a little bit more. I noticed that when you resize the screen from desktop to mobile devices, somewhere in the middle before the mobile breakpoint, things look really crammed and start to overflow.
For the testimonial sliders, I would suggest that you use a plugin such as Flickity (https://flickity.metafizzy.co/). It will allow you to easily create beautiful sliders that can be customized to meet your needs.
Also, try to link to your Frontend Mentor profile on the part that says, "Coded by Damian Erasmus". At least this way, when people click on the link, they will be brought to your Frontend Mentor profile instead of the link just refreshing the page. This will also help others to view your other solutions and give you more feedback incase you need some.
And if you feel like you need some more help in writing code that matches the designs as close as possible, have a look at this GitHub repository. (https://github.com/AllanKirui/designing-and-coding-layouts)
2
