DEV Community: Ahmed Zisan

Mastering Flexbox Made Easy with This Interactive CodePen Playground

Ahmed Zisan — Fri, 30 May 2025 05:31:22 +0000

I recently discovered an incredibly useful tool for mastering CSS Flexbox: the Flexbox Playground by Enxaneta on CodePen. This interactive playground offers a hands-on approach to learning Flexbox, allowing you to experiment with various properties and see the results in real-time.

🔍 What Makes It Stand Out?

The Flexbox Playground provides an intuitive interface where you can manipulate key Flexbox properties such as:

flex-direction
justify-content
align-items
flex-wrap
align-content
align-self(CodePen, CodePen)

By adjusting these settings, you can observe how elements respond within a flex container, making it easier to grasp the behavior of Flexbox layouts.

🎯 Why It's Beneficial for Learners

For those delving into web development, especially beginners, this playground serves as an excellent resource to:

Visualize the impact of different Flexbox properties instantly.
Experiment without the need to write extensive code.
Build a strong foundational understanding of responsive design principles.

Incorporating this tool into your learning journey can significantly enhance your comprehension of Flexbox. It's a practical, user-friendly platform that brings CSS concepts to life. Give it a try and elevate your web development skills!

Help Needed: Sidebar Not Working Properly in My Project

Ahmed Zisan — Thu, 27 Mar 2025 00:17:45 +0000

Hey everyone, I'm currently working on a project where I have a sidebar, but it's not working properly. I'm a beginner in HTML and CSS, and I need some guidance on what might be wrong.
Live Preview:

🔗 Live View

📌 HTML: boxes.html

📌 CSS:

What I Need Help With:

The sidebar is not behaving as expected (e.g., layout issues, not sticking, overlapping, etc.).

I want to fix it using only HTML and CSS (no JavaScript).

Any improvements or best practices would also be appreciated!

Questions:

How can I make sure the sidebar stays in the correct position?

Are there any common mistakes I should check in my CSS?

Any beginner-friendly tips to improve the sidebar's design and functionality?

I’d really appreciate any advice or suggestions! Thanks in advance! 😊

আমি অনেক

Ahmed Zisan — Wed, 12 Mar 2025 06:22:22 +0000

আমি ওয়েব ডেভেলপমেন্ট শেখা শুরু করি ২০২০ সালে, আর এখন ২০২৫ সাল। এই ২০২০ সালের অক্টোবরে যে ছেড়েছিলাম আজ আবার ফিরে এসেছি, ইতিমধ্যে প্রায় সবই ভুলে গেছি, কিন্তু এখন আমি আবার শিখতে চাই। জানিনা হাতে কেমন সময় আছে, এতো তা বড় হবার পর কোন লাভ হবে কিনা তবুও চেষ্টা করা যায়।

Tooltip Using HTML/CSS

Ahmed Zisan — Thu, 22 Oct 2020 12:38:43 +0000

Hello Folk!
See my new design using HTML and CSS by Codepen.
Suggest me something new.

Happy Development.

Tooltip Using HTML/CSS

Ahmed Zisan — Tue, 06 Oct 2020 17:05:43 +0000

Hello Folk!
See my new work made by HTML5 & CSS3.
Copy From w3schools and host on codepen.

Hover Over Image...

Comment if you like!

Happy Learning web developers.
Happy web development.

Overlay 1.4

Ahmed Zisan — Mon, 05 Oct 2020 19:40:49 +0000

Hello Folk! See my new work using HTML and CSS. Hosted on Codepen & copied from w3schools...

If like then leave a comment & suggest something new.

Please Hover Over Images...

Happy Learning...
Happy Web Development...

Animation Using Transform

Ahmed Zisan — Sun, 04 Oct 2020 09:11:36 +0000

Hello Folk!
See my animation made by HTML5 & CSS3.
Copy From w3schools and host on codepen.
Comment if you like!
Happy Learning web developers.
Happy web development.

Animation Timing Function

Ahmed Zisan — Sat, 03 Oct 2020 20:22:46 +0000

See different on Animation Timing Function Values...
Happy Learning...
Happy Development...