Arsalan Ansari• 340
@arsalanansariofficial
Submitted
Engineer Providence
@EngProvidence
All comments
- Engineer Providence• 310
@EngProvidence
Posted
cool but the next button can not be seen on mobile view
0 - agu collins• 60
@Collinsac
Submitted
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
that was very good your solution was really iderntical courage and more effort
Happy coding! emperor pro
0 - Nascimento• 360
@Nacsimento
Submitted
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. CSS🏷️: I WILL LIKE TO GO STRAIGHT TO THE POINT your image -product image is not really responsive when resizing the screen.
secondly your images look more of white you can correct this by making the background color of the image div purple and then reduce the opacity of the images to about 0.8 so as to make it have a slight purple color
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
1 - lmp• 360
@lmpko
Submitted
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing your first challenge! 🎉
I have viewed the code and above all your work was good but the view on screen size 500px to about 780px is not really good this is because you used media query only once and that makes the code not really responsive for some screen sizes.
you can fix this by adding @media screen and (min-width: 500px) and (max-width:800px){ .container{ height: 78vh;// your code for your new width and height in here display: flex; justify-content: center; align-items: center; }
}
I hope you find this helpful 😄 Above all, the solution you submitted is great!
Happy coding from emperor pro!
Marked as helpful
0 @HabilSalim
Submitted
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing your first challenge! 🎉
I have some little observations, you did not use the required font family but anyway your work was good.
I hope you find this helpful 😄 Above all, the solution you submitted is great!
Happy coding from emperor pro!
Marked as helpful
0- Mohamed Afi• 60
@MoAfi12
Submitted
Product preview card component
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have other recommendations regarding your code that I believe will be of great interest to you. CSS🏷️: I WILL LIKE TO GO STRAIGHT TO THE POINT your image -product image is not really responsive when resizing the screen. you can fix this using css by add an id here
<div class="column-one"> <img src="images/image-product-desktop.jpg" alt="image-product" id="product" > </div> then go to cssyour code .column-one img{ height: 480px; // remove this line. width: 360px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
add
#product{ height:100%!important;} so as to adjust the image with the column size
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
0 - Cool17• 110
@Cool17
Submitted
Hello,
I have uploaded my first solution. It is requested to comment on my solution for my guidance and improvements. I am grateful for your precious time. Thanking you in advance.
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing your first challenge! 🎉
I have some little observations, the border radius of the div are too much and the background color of the summary fields are suppose to be related to the main color but your own was consecutive in the first 3 fields. one more thing in a challenge try as much as possible to reproduce the exactly thesame thing
I hope you find this helpful 😄 Above all, the solution you submitted is great!
You can see my solution here: https://www.frontendmentor.io/solutions/responsive-single-price-grid-system-using-bootstrap-css-FCLZgXEOZb
Happy coding from emperor pro!
0 - Qumrran• 410
@qumrran
Submitted
Here is my solution to the Frontend Mentor task. I used HTML, CSS, JS, and a JSON file that was included in it. It was a cool exercise with JSON, and I used a foreach loop to add elements to the project.
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉 I have a little worry and want to Know more from you please I want to know more about the json file and how it can be usefull in the project because i completed the project don't know it's use
You can see my solution here: https://www.frontendmentor.io/solutions/responsive-single-price-grid-system-using-bootstrap-css-FCLZgXEOZb
0 - ify47• 360
@ify47
Submitted
Please guys take a look at my codes, the css and js, i just followed my heart when building them without so much help from the internet, it works though, but i feel there could have been a better way in writing the codes, thank you.
Engineer Providence• 310@EngProvidence
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
I have some little observations which I know you might haver forgotten the hover effect on the arrow is not functioning check it out.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding from emperor pro!
Marked as helpful
1 This was definitely the challenge that gave me the toughest test so far and I tried to get this close to near perfect as possible according to the Figma diagrams. I implemented all the bonus features that were required including a CPU that I have a ranking system used to determine where it should place the chip. To do the sliding animation I used MUI (Material UI) library and the Slide component which takes care of all the dirty work for animation. No need for CSS keyframes thank god so I highly recommend working with a UI library to save much time! Much of the work involved animating the SVG graphics and it was one of my first experiences working with SVG. The huge advantage of this was not having to worry about responsiveness as it scaled perfectly.
Not sure how I would do this without TypeScript. It was a big time savior for me and so important when working with React.
The main challenging part for this app is to build the CPU AI and have it reasonably smart. I came up with a ranking system to determine which of the 7 columns to place it's chip. There are many approaches to this but I found one that worked for me. I put a link in my GitHub readme on a good algorithm online as a starting point in which I implemented a much more advanced approach to his version.
The CPU I think I made moderately challenging. I wasn't able to win often against my own AI as I always lost more than I won but then again I just suck at the game :D. Hope you do better than I do and good luck!
If any improvements to the CPU are to be made please let me know.
Engineer Providence• 310@EngProvidence
Posted
this job is awesome and I really like it courage!! GOOD JOB
1
