42
4 300

2:35

You don’t now CSS Margin (2)

2:31

You Don’t Know CSS Margin (1)

3:57

Master CSS Responsiveness

2:21

Real-World CSS Animation

3:50

You Don’t Truly Understand CSS If You Don’t Get This!

3:53

Easy But Impressive Pure CSS Animation

In this video, I'll show you how to create a simple yet impressive intro animation using pure CSS-no JavaScript needed! We’ll animate each character in the word “frontend” with a staggered, bouncy effect by using CSS keyframes, transforms, and animation delays. Plus, we’ll use basic HTML. It’s quick, fun, and perfect for adding a stylish intro to your web projects.
🔗Check out the CodePen link:
codepen.io/abderraouf-aouni/pen/qBzQerG?editors=0100
play around with the code and make it your own. Don’t forget to like, subscribe, and turn on notifications for more tutorials and tips!
Have questions or suggestions? Leave a comment, and I’ll be happy to help.

มุมมอง: 17

วีดีโอ

2:35

You don’t now CSS Margin (3)

มุมมอง 13319 ชั่วโมงที่ผ่านมา

Ever struggled with unwanted gaps in your layouts? In this video, I’ll show you how to fix extra space caused by icon shadows using negative margin-bottom. We’ll walk through a real Figma-to-HTML conversion, explain why typical margin or padding tweaks don’t solve this issue. If you’re aiming for a pixel-perfect design or just curious about handling tricky spacing problems in CSS, this tutorial...

2:31

You don’t now CSS Margin (2)

มุมมอง 10714 วันที่ผ่านมา

Learn why only one margin appears when two vertically stacked block-level elements both have margins! In this tutorial, I’ll show you how margin collapsing works, where the larger margin “wins” and the smaller one disappears. We’ll walk through an example with two div elements-a purple one with margin-bottom and a white one with margin-top-to see this CSS quirk in action. You’ll also discover w...

3:57

You Don’t Know CSS Margin (1)

มุมมอง 5928 วันที่ผ่านมา

In this video, I’ll make you look at CSS margin from another perspective and discover its power. I’ll show you a clever trick to create a full-width section inside a standard container using just two lines of CSS! You’ll discover how negative margins can replace cumbersome width overrides or complicated 100vw calculations that might cause horizontal scrollbars. By the end of this tutorial, you’...

2:21

Master CSS Responsiveness

มุมมอง 152หลายเดือนก่อน

in this tutorial as I show one simple trick that drastically improves your website’s responsiveness, ensuring your design looks great on any screen size-from mobile to desktop. Whether you’re a beginner or an experienced developer, this is the perfect technique to level up your CSS skills and keep your layouts looking sharp across all devices. Check it live in CodePen: codepen.io/abderraouf-aou...

3:50

Real-World CSS Animation

มุมมอง 139หลายเดือนก่อน

Discover the power of CSS animations in this step-by-step tutorial! In this video, I recreate a real-world animation originally provided as an MP4 video, using nothing but pure HTML and CSS. We’ll break down the animation into three parts: 1️⃣ Stretching the map. 2️⃣ Growing the indicator. 3️⃣ Animating a curved dashed line without SVG. By tackling each component piece by piece, I’ll show you h...

You Don’t Truly Understand CSS If You Don’t Get This!

3:53

You Don’t Truly Understand CSS If You Don’t Get This!

มุมมอง 279หลายเดือนก่อน

Are you struggling to understand why :first-of-type, :nth-of-type, or :last-of-type don’t always work as expected? In this video, we’ll dive deep into how these CSS pseudo-classes actually work, why they sometimes behave unexpectedly, and how you can use them effectively in your projects. Through practical examples, you’ll learn: - Why :first-of-type doesn’t target elements based on class. - Ho...

2:14

Write CSS Flexbox Like a Pro

มุมมอง 544หลายเดือนก่อน

n this video, I’ll show you how to handle both horizontal and vertical layouts effortlessly-no need to switch to Grid! Learn how to create a fully responsive layout using only Flexbox. We’ll start with a simple desktop design and transform it into a mobile-friendly layout with just a few smart Flexbox tricks and media queries. 💬 Got questions or tips? Drop them in the comments-I’d love to hear ...

Master Scroll Animations with Pure javaScript and CSS

5:18

Master Scroll Animations with Pure javaScript and CSS

มุมมอง 582 หลายเดือนก่อน

In this video, we’re recreating an amazing scroll animation effect-but this time, using nothing but vanilla JavaScript and CSS. No libraries, no frameworks-just pure, raw code! 💻 Here’s what you’ll learn: ✅ How to create a clip-path parallax effect. ✅ Synchronizing animations with scroll. ✅ Using position: sticky for smooth pinned animations. ✅ Calculating dynamic wrapper heights for precise sc...

Amazing Scroll Animation with CSS & GSAP

4:39

Amazing Scroll Animation with CSS & GSAP

มุมมอง 552 หลายเดือนก่อน

In this video, I’ll show you how to create an amazing scroll animation using CSS and GSAP. This animation features a parallax effect where a colorful image is revealed as you scroll over a grayscale version-creating a smooth and visually stunning effect! 🎨✨ 🔗 Try it yourself: Check out the CodePen link below to play around with the code and customize it to your liking: codepen.io/abderraouf-aou...

3:26

Take Your CSS to the Next Level

มุมมอง 252 หลายเดือนก่อน

In this video, I’ll show you a smart and efficient way to add borders to grid layouts in CSS-a technique I had to use in a recent real-world project. Creating clean separation lines in grids can be tricky and usually requires tons of repetitive code, especially when you only want right borders between cells (except for the last column) and bottom borders between rows (except for the last row). ...

Great 3D Effect with Simple HTML, CSS, and JavaScript

3:07

Great 3D Effect with Simple HTML, CSS, and JavaScript

มุมมอง 643 หลายเดือนก่อน

Great HTML, CSS, and JavaScript tutorial where we’ll create a stunning interactive Mouse 3D effect. 👉 CodePen Link: codepen.io/abderraouf-aouni/pen/eYoPzQa?editors=0010 #CSS #WebDevelopment #Coding #Frontend #csstricks #CSSAnimations #CSSTransform #javascript #3d

CSS Flexbox Magic: Interactive, responsive gallery

3:51

CSS Flexbox Magic: Interactive, responsive gallery

มุมมอง 1183 หลายเดือนก่อน

In this video, I'll show you how to create a sleek and responsive gallery effect using simple CSS and JavaScript. We'll harness the power of Flexbox to make an interactive gallery that smoothly adjusts based on the screen size. 🔗 check it live on codepen: codepen.io/abderraouf-aouni/pen/eYqEWOy?editors=1100 Follow me on Instagram: abderraouf_aouni #CSS #WebDevelopment #Coding #Fr...

4:28

Write CSS Animations Like a Pro!

มุมมอง 1973 หลายเดือนก่อน

In this video, I walk you through three powerful ways to create pretty button hover animations using pure CSS! We’ll start by animating with height and top, explore the benefits of using clip-path, and finally, I'll show you why transform is the best choice for smooth, efficient animations. Whether you’re new to CSS or looking to improve your animation skills, this tutorial has you covered! 🔹 W...

1:21

Write CSS Like a Pro

มุมมอง 1853 หลายเดือนก่อน

In this video, we dive into some essential techniques for simplifying your CSS layouts! Learn how to efficiently add styles between blocks without repeating code. We’ll explore using the adjacent sibling selector and the :not() selector to create cleaner, more maintainable CSS. Whether you're a beginner or looking to sharpen your skills, these tips will help you write CSS like a pro! Follow me ...