Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-column-preview-card-component (responsive webdesign)using HTML & CSS

Deepthi M R• 90

@Deepthi-Ramesh

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone ! Here is a solution for the 3-column-preview-card-component which is totally responsive, created using Flexbox and grid .I am open to take any suggestions to improve my design. Thank you everyone.

Community feedback

Nishkarsh Dubb• 165

@Nishkarsh01

Posted

Hello, Deepthi-Ramesh! 👋

Congrats on finishing your first frontend mentor challenge! Here are few suggestions from me:

  • please do add the link to the GitHub repository so that we can view your code.
  • update the background color of body to background: hsl(0, 0%, 95%);
  • try giving the heading font-family: 'Big Shoulders Display', cursive;
  • try reducing the height of each card.
  • try fixing the ACCESSIBILITY ISSUES and HTML ISSUES mentioned in the report by frontend mentor.

Good luck with that, have fun coding! 💪

0

Deepthi M R• 90

@Deepthi-Ramesh

Posted

@Nishkarsh01 Thank you for your suggestion.

0
Deepthi M R• 90

@Deepthi-Ramesh

Posted

@Nishkarsh01 Hey hi ! Linked Github repository .Check out the code.

0
Nishkarsh Dubb• 165

@Nishkarsh01

Posted

@Deepthi-Ramesh sure thing

0
Nishkarsh Dubb• 165

@Nishkarsh01

Posted

@Deepthi-Ramesh

  • add this link https://github.com/Deepthi-Ramesh/3-column-preview-card-component-main in the solution to GitHub repository

  • and this link https://3-column-preview-card-component-main-lovat.vercel.app/ to preview site.

0
Nishkarsh Dubb• 165

@Nishkarsh01

Posted

Hello, ** Deepthi-Ramesh!** 👋

I really like how you've organized your code (a very good practice I must say), try using comments in CSS as well. Here are a few suggestions from me:

  • Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
  • Try using utility classes to avoid repetition of code and increase the reusability of code.
  • It is advised that you do not use inline styling much, as it makes the code cluttery and is not the best practice.
  • Try adding alt attributes to images, they improve accessibility.

Other than that really good job, keep hustling! 💪

0
Deepthi M R• 90

@Deepthi-Ramesh

Posted

@Nishkarsh01 Hey hi !Thank you so much for you suggestions. I don't think will everyone spend their time to make others to do good pratice and to make others rectify their mistakes.Thank you so much .The reason behind not adding comments is that I does not know how to give a short explanation on each block of code.I will definitely try here after . I will try to learn everything what you said sir .Thank you🙂

0
Nishkarsh Dubb• 165

@Nishkarsh01

Posted

@Deepthi-Ramesh Wishing you luck!

1
Arya Anish• 1,492

@AryaAnish121

Posted

Nice but can do a few things

  • update the background
  • make card smaller

it's perfect

congrats on your first solution

Byy

0

Deepthi M R• 90

@Deepthi-Ramesh

Posted

@AryaAnish121 thank you

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord