DEV Community

loading...
Cover image for Beautiful Responsive Cards UI Design using HTML & CSS

Beautiful Responsive Cards UI Design using HTML & CSS

codeleague7 profile image Code League ・1 min read

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

pic
Editor guide
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
ulvis_b profile image
Ulvis

I agree

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
sumonaroy profile image
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 :)