Changed UI of suggested_coding_site.html

[abhiraj-ku]

Description

Best and Free Online Websites to Learn Coding for Beginners was not looking good as all the text was in long paragraph style
and also the background gradient colors were not complementary so it not visible also ..

Please include a summary of the change and which issue is fixed.
Fixes #550
The changes made are that the paragraph style text is been changed into responsive cards design made Flex-box and CSS only

List any dependencies that are required for this change

No , Dependencies were required just pure CSS was applied

Type of change

Enhancement of suggested_coding_site.html

How Has This Been Tested?

With the help of developer tools

UI /UX changes

Attach gif or screenshot for changes.

• Before :
  

- After :

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[abhiraj-ku]

hey @harikesh409 I have made a PR regarding the enhancement .waiting for your reply

[harikesh409]

Where are the images being used?

[harikesh409]

The contact us and the copyright footer is messed up.

[abhiraj-ku]

The contact us and the copyright footer is messed up.

its done ..

[abhiraj-ku]

Added the images and also changed the name of images folder to suggested-sites

[harikesh409]

The main content is not proper now.

[abhiraj-ku]

I have applied the changes you suggested and its working fine on local machine . i have pushed them also so that you can see the changes

[harikesh409]

check for this resolution, the responsive is not proper.

[abhiraj-ku]

Hey actually i don't have monitor of this size so i made keeping in mind of the laptops and mobile screen .. so i am having hard time visualizing it ..so could you help a bit 🙂

[harikesh409]

@abhiraj-ku
You don't need to have a laptop of that size just use devtools to check those resolutions.

[abhiraj-ku]

@harikesh409 i am actually having hard times figuring media queries for this resolution even using devtools so if you could suggest something that would be good 🙂