Expanding Cards | HTML, CSS & JavaScript Project(Initial Cards)

Expanding Cards Project Using HTML, CSS & JavaScript

In this video, I built a simple and responsive Expanding Cards UI using HTML, CSS, and JavaScript. It's a great beginner-friendly project to improve your frontend skills. I also show how to style the .panel class with transitions — note: I mistakenly wrote transition: flex 1 ease-in instead of transition: flex 1s ease-in, so be careful while writing the code!
Image Sources Used:
https://plus.unsplash.com/premium_photo-1668383209687-84821b873259?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
Explore The World
https://images.unsplash.com/photo-1567755025984-63bb19fc5444?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
Wild Forest
https://images.unsplash.com/photo-1647152548891-5a28a5d9c3a0?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
Sunny Beach
https://images.unsplash.com/photo-1643313651505-fa001214002f?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
City Of Winter
https://plus.unsplash.com/premium_photo-1724824053272-518d9dfd4ce0?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
Mountains - Clouds
Google Font:
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

Видео Expanding Cards | HTML, CSS & JavaScript Project(Initial Cards) канала Nahid Hossain

Комментарии отсутствуют

Информация о видео

28 мая 2025 г. 11:53:43

00:18:25

Nahid Hossain

Правообладателям

Жалоба на материал Недопустимый материал Нарушение авторских прав

Комментарии

Другие видео канала

Expanding Cards | HTML, CSS & JavaScript Project(Initial Cards)

Smoky Hover Text Animation Using Pure CSS – Stylish Effects for Front-End Developers #coding#shorts

CSS Text Animation for Hover – Simple HTML & CSS Effects for Front-End Developers

Premium Auto Typing Text Animation Using JavaScript for Modern UI/UX Designs#shorts

EP‑2: MERN Stack Basic Backend Tutorial 2025 | Mongoose Post API for Beginners | Postman API test

Progress Steps | HTML, CSS & JavaScript Project(UI Design )

What is MongoDB? | MongoDB Explained in 30 Seconds 🔥 #Shorts #MERNStack

Rotating Navigation Menu Using HTML, CSS & JavaScript | (Rotate And Slide Effect)

Progress Steps | HTML, CSS & JavaScript Project(Step Functionality )

Create and style landing page - Part 1

Database vs Collection vs Document Explained in 30 Seconds | MongoDB Shorts for Beginners#Shorts

Rotating Navigation Menu Using HTML, CSS & JavaScript | (Intro Project)

Colorful Text Animation Hover Effect for Stunning UI | Premium CSS JavaScript Effects 2025

Ep-5: MERN Stack Basic Backend Tutorial 2025 –Frontend Setup with Vite & Chakra UI | React Component

JavaScript forEach Method Explained | Master Array Looping Fast! #JavaScript #WebDevelopment#shorts

Rotating Navigation Menu Using HTML, CSS & JavaScript | (Content And Circle Styling)

EP‑1: MERN Stack Basic Backend Tutorial 2025 | How to Set Up Node.js + Express + MongoDB Atlas

Neon Border Button Animation with CSS | Stunning Hover Effects for Websites

Progress Steps | HTML, CSS & JavaScript Project(Project Intro)

Create and style landing page - part 2

If Else Statement in JavaScript Explained 🔥 | Programming Basics for Beginners | #shorts #coding