DEV Community

Cover image for Beautiful Responsive Cards UI Design using HTML & CSS
Code League
Code League

Posted on

Beautiful Responsive Cards UI Design using HTML & CSS

In this Tutorial, we'll build a Responsive Cards UI Layout with Hover Effect using HTML & CSS. This Project-based Tutorial is suitable for all especially Beginners.

πŸ“• Images download link: https://drive.google.com/drive/folders/1z7xh5-myGD4p69vRfABTptI6jvLITACs?usp=sharing

🧠 Concepts covered in this video:

  • Modern Web Design
  • CSS Grid
  • Flexbox
  • CSS transitions
  • Transforms

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

Discussion (7)

Collapse
veldakiara profile image
Velda Kiara

This is really good. πŸŽ‰πŸŽ‰πŸŽŠ
I was wondering if someone could view your code base for example on Github for other
projects like these.

Collapse
codeleague7 profile image
Code League Author

Thank you, Velda. I have uploaded some similar project videos on my Youtube channel. If you are interested in HTML, CSS, JavaScript, consider checking them out.

Collapse
ulvis_b profile image
Ulvis

I agree

Collapse
shaijut profile image
Shaiju T

Hi, I have seen lot of website design layout with rounded div corners recently like below.

dribbble.com/shots/8509427-Smart-H...
dribbble.com/shots/13819210-Task-S...
dribbble.com/shots/6914699-Smart-H...
dribbble.com/shots/14707518-Web-UI

Is it rounded corners reveal design or Neumorphism or card ui design ?

What is the name of the trend ?

Collapse
akiwams profile image
Alhassan Kiwamdeen

That was awesome

Collapse
codeleague7 profile image
Code League Author

Thank you Alhassan. Glad you liked it :)