- 314
- 225 311
ALB Dev
เข้าร่วมเมื่อ 7 เม.ย. 2021
Hey Everyone.
I'm a High school guy who uploads videos related to web development everyday.
If you enjoy the videos I create please make sure to subscribe and turn on bell notification so you won't miss the content I upload daily.
I'm a High school guy who uploads videos related to web development everyday.
If you enjoy the videos I create please make sure to subscribe and turn on bell notification so you won't miss the content I upload daily.
Top 10 Best VS Code Extensions in 2022
In this video I'll show you 10 best vs code extensions in 2022. These extensions are all my personal favorites but of course there are other awesome extensions out there which I don't know. If you know any make sure to comment down below, I'd be glad to take a look at it.
There'll be more of these videos in this channel so if you're interested make sure to stick to the end and don't forget to like, subscribe and turn on bell notification.
2.5D Parallax Effect: th-cam.com/video/bDbi3DgEWac/w-d-xo.html
Custom Upload Button: th-cam.com/video/Rl8deHQtDgA/w-d-xo.html&
Funny JS Project: th-cam.com/video/a3rVJu30qAs/w-d-xo.html
Simple Image Editor: th-cam.com/video/eI9BV7H__Dw/w-d-xo.html&
Liquid Transition Between Images: th-cam.com/video/fSnYgjeKKrY/w-d-xo.html&
Password Generator: th-cam.com/video/PG_mXcANM8E/w-d-xo.html
Start Rating: th-cam.com/video/oaqn1jIPqhQ/w-d-xo.html&
Theme Switcher: th-cam.com/video/_58sviPe-sg/w-d-xo.html
Join Facebook Group: groups/html.css.javascript.albtechhh
Subscribe For More: th-cam.com/channels/zWS-AiirxpTDq_AGSg9Fhgd.html
===| Time Stamps |===
00:00 - Intro
00:13 - 10 - Indent Rainbow
00:56 - 09 - Highlight Matching Tag
01:39 - 08 - Auto Rename Tag
02:29 - 07 - Better Comments
05:14 - 06 - Prettier
06:28 - 05 - CSS Peek
07:51 - 04 - Colorize
08:34 - 03 - Google Fonts
10:15 - 02 - VS Code Pets
11:14 - 01 - Live Server
There'll be more of these videos in this channel so if you're interested make sure to stick to the end and don't forget to like, subscribe and turn on bell notification.
2.5D Parallax Effect: th-cam.com/video/bDbi3DgEWac/w-d-xo.html
Custom Upload Button: th-cam.com/video/Rl8deHQtDgA/w-d-xo.html&
Funny JS Project: th-cam.com/video/a3rVJu30qAs/w-d-xo.html
Simple Image Editor: th-cam.com/video/eI9BV7H__Dw/w-d-xo.html&
Liquid Transition Between Images: th-cam.com/video/fSnYgjeKKrY/w-d-xo.html&
Password Generator: th-cam.com/video/PG_mXcANM8E/w-d-xo.html
Start Rating: th-cam.com/video/oaqn1jIPqhQ/w-d-xo.html&
Theme Switcher: th-cam.com/video/_58sviPe-sg/w-d-xo.html
Join Facebook Group: groups/html.css.javascript.albtechhh
Subscribe For More: th-cam.com/channels/zWS-AiirxpTDq_AGSg9Fhgd.html
===| Time Stamps |===
00:00 - Intro
00:13 - 10 - Indent Rainbow
00:56 - 09 - Highlight Matching Tag
01:39 - 08 - Auto Rename Tag
02:29 - 07 - Better Comments
05:14 - 06 - Prettier
06:28 - 05 - CSS Peek
07:51 - 04 - Colorize
08:34 - 03 - Google Fonts
10:15 - 02 - VS Code Pets
11:14 - 01 - Live Server
มุมมอง: 468
วีดีโอ
3 Awesome CSS Button Hover Effects with HTML & CSS
มุมมอง 1.3K2 ปีที่แล้ว
In this video we'll learn how to create three cool css button hover effects using HTML and CSS. In this video you will also learn how to use the CSS Pseudo elements. There'll be more of these videos in this channel so if you're interested make sure to stick to the end and don't forget to like, subscribe and turn on bell notification. Source Code - github.com/prodev2004/3-css-button-hover-effect...
Build an Awesome Movie App with HTML, CSS and JavaScript - TMDB API
มุมมอง 8K2 ปีที่แล้ว
In this video I'll show you how to build this movie app with HTML, CSS and JavaScript. If you're a beginner then make sure to stick until the end so you might learn something new. We'll build this movie app using an API called The Movie Database (TMDB). There'll be more of these videos in this channel so if you're interested make sure to stick to the end and don't forget to like, subscribe and ...
Card Hover Text Reveal Animation with HTML and CSS
มุมมอง 6752 ปีที่แล้ว
In this video I'll show you how to create this card hover text reveal animation using HTML and CSS. There'll be more of these videos in this channel so if you're interested make sure to stick to the end and don't forget to like, subscribe and turn on bell notification. Source Code - github.com/prodev2004/cardHoverTextRevealEffect.git Join Facebook Group: groups/html.css.javascript....
Add a Cool Hover Effect to Button - HTML & CSS Tutorial
มุมมอง 592 ปีที่แล้ว
Add a Cool Hover Effect to Button - HTML & CSS Tutorial
How To Build a Virtual Keyboard with HTML, CSS and JavaScript
มุมมอง 8K2 ปีที่แล้ว
How To Build a Virtual Keyboard with HTML, CSS and JavaScript
Create a Beautiful Tags Input Field with HTML, CSS and JavaScript
มุมมอง 5382 ปีที่แล้ว
Create a Beautiful Tags Input Field with HTML, CSS and JavaScript
Animated Hamburger Buttons with HTML, CSS and JavaScript | CSS Animations
มุมมอง 952 ปีที่แล้ว
Animated Hamburger Buttons with HTML, CSS and JavaScript | CSS Animations
Create an OTP / PIN Input Field with Autofocus | HTML, CSS and JavaScript
มุมมอง 2.1K2 ปีที่แล้ว
Create an OTP / PIN Input Field with Autofocus | HTML, CSS and JavaScript
Create a Bubble Floating Effect with HTML, CSS and JavaScript | CSS Animations
มุมมอง 1.1K2 ปีที่แล้ว
Create a Bubble Floating Effect with HTML, CSS and JavaScript | CSS Animations
Build Images Accordion with HTML, CSS and JavaScript | Beginner Project
มุมมอง 3562 ปีที่แล้ว
Build Images Accordion with HTML, CSS and JavaScript | Beginner Project
Floating Label Animation with HTML and CSS | Input Label Animation
มุมมอง 1882 ปีที่แล้ว
Floating Label Animation with HTML and CSS | Input Label Animation
Create a Restaurant Home Page with HTML and CSS | Golden Bull Restaurant
มุมมอง 932 ปีที่แล้ว
Create a Restaurant Home Page with HTML and CSS | Golden Bull Restaurant
10#Ryuk Take Your CSS Skills To Another Level With CSS Battles
มุมมอง 452 ปีที่แล้ว
10#Ryuk Take Your CSS Skills To Another Level With CSS Battles
Create a Neon Button with HTML and CSS | Neon Effect Button
มุมมอง 602 ปีที่แล้ว
Create a Neon Button with HTML and CSS | Neon Effect Button
Build a Simple Password Strength Checker with HTML, CSS and JavaScript | Beginners Project
มุมมอง 1992 ปีที่แล้ว
Build a Simple Password Strength Checker with HTML, CSS and JavaScript | Beginners Project
Increase Background Size On Scroll - HTML, CSS and JavaScript | Zoom in on scroll
มุมมอง 5062 ปีที่แล้ว
Increase Background Size On Scroll - HTML, CSS and JavaScript | Zoom in on scroll
Build a Speed Typing Game with HTML, CSS and JavaScript | Find your WPM
มุมมอง 6082 ปีที่แล้ว
Build a Speed Typing Game with HTML, CSS and JavaScript | Find your WPM
Advanced Image Viewer with HTML, CSS and JavaScript | Zoom in, Zoom out and Drag
มุมมอง 3.8K2 ปีที่แล้ว
Advanced Image Viewer with HTML, CSS and JavaScript | Zoom in, Zoom out and Drag
Amazing Feedback Reaction using HTML and CSS | Custom Radio Buttons
มุมมอง 1302 ปีที่แล้ว
Amazing Feedback Reaction using HTML and CSS | Custom Radio Buttons
Live (Outlook) Signin Page Clone with HTML, CSS and JS | Multi-step Form
มุมมอง 5732 ปีที่แล้ว
Live (Outlook) Signin Page Clone with HTML, CSS and JS | Multi-step Form
How To Create a Vertical Timeline Chart with HTML and CSS | CSS Design
มุมมอง 1672 ปีที่แล้ว
How To Create a Vertical Timeline Chart with HTML and CSS | CSS Design
Border Rotating Animation with HTML & CSS
มุมมอง 592 ปีที่แล้ว
Border Rotating Animation with HTML & CSS
Build a Dictionary App with HTML, CSS and JavaScript
มุมมอง 4602 ปีที่แล้ว
Build a Dictionary App with HTML, CSS and JavaScript
Build a QR Code Generator with HTML, CSS and JavaScript
มุมมอง 1342 ปีที่แล้ว
Build a QR Code Generator with HTML, CSS and JavaScript
Make a Clock Loading Animation with HTML and CSS | CSS Loader
มุมมอง 1622 ปีที่แล้ว
Make a Clock Loading Animation with HTML and CSS | CSS Loader
Build a Github Profile Search App With HTML, CSS and JavaScript
มุมมอง 3292 ปีที่แล้ว
Build a Github Profile Search App With HTML, CSS and JavaScript
9#Amegakure - Take Your CSS Skills To Another Level With CSS Battles
มุมมอง 352 ปีที่แล้ว
9#Amegakure - Take Your CSS Skills To Another Level With CSS Battles
Create an Amazing Image Slice Effect with HTML and CSS
มุมมอง 3812 ปีที่แล้ว
Create an Amazing Image Slice Effect with HTML and CSS
Awesome Rounded Cards Design with HTML and CSS
มุมมอง 832 ปีที่แล้ว
Awesome Rounded Cards Design with HTML and CSS
thank youuu
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animación de Círculos Ondulados</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* Estilo del cuerpo */ body { display: grid; /* Centrar el contenedor */ place-items: center; /* Centrar el contenedor */ min-height: 100vh; background: linear-gradient(135deg, #000, #333); /* Fondo degradado */ overflow: hidden; /* Ocultar desbordamiento */ } /* Contenedor principal */ .contenedor { width: 400px; /* Ancho fijo */ aspect-ratio: 1; position: relative; /* Para posicionamiento absoluto de círculos */ transform-style: preserve-3d; /* Habilitar 3D */ transform: perspective(500px) rotateX(60deg); /* Perspectiva 3D */ } /* Estilo de los círculos */ .circulo { position: absolute; /* Posicionamiento absoluto dentro del contenedor */ border: 5px solid transparent; border-radius: 50%; /* Convertir en círculo */ transform: translateZ(-100px); animation: animar 2000ms ease-in-out infinite; /* Animación continua */ animation-delay: var(--retardo-animacion); /* Retraso personalizado */ inset: var(--espaciado); box-shadow: 0 4px 10px 0 currentColor, inset 0 4px 10px 0 currentColor; /* Sombra para efecto 3D */ } /* Animación de los círculos */ @keyframes animar { 0%, 100% { transform: translateZ(-100px); } 50% { transform: translateZ(100px); } } /* Colores personalizados de los círculos */ .circulo:nth-child(1) { --espaciado: 0; --retardo-animacion: 0s; color: #FF0000; } /* Rojo */ .circulo:nth-child(2) { --espaciado: 20px; --retardo-animacion: 0.1s; color: #FF7F00; } .circulo:nth-child(3) { --espaciado: 40px; --retardo-animacion: 0.2s; color: #FFFF00; } .circulo:nth-child(4) { --espaciado: 60px; --retardo-animacion: 0.3s; color: #00FF00; } .circulo:nth-child(5) { --espaciado: 80px; --retardo-animacion: 0.4s; color: #0000FF; } .circulo:nth-child(6) { --espaciado: 100px; --retardo-animacion: 0.5s; color: #4B0082; } .circulo:nth-child(7) { --espaciado: 120px; --retardo-animacion: 0.6s; color: #8B00FF; } .circulo:nth-child(8) { --espaciado: 140px; --retardo-animacion: 0.7s; color: #FF1493; } .circulo:nth-child(9) { --espaciado: 160px; --retardo-animacion: 0.8s; color: #00CED1; } .circulo:nth-child(10) { --espaciado: 180px; --retardo-animacion: 0.9s; color: #FFD700; } </style> </head> <body> <!-- Contenedor principal de los círculos --> <div class="contenedor"> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> <div class="circulo"></div> </div> </body> </html>
How to remove the arrow which is in the input box?
How to remove the arrow which is in the input box?
can i put 3d model instead of SVG if yes how?
not working
I follow ur code but in my laptop the search icon are not apply it bcz of what....?
Responsive ?
How to add next line feature in this
There has to be a better way than all those buttons... I keep seeing videos like this, but there must be a way to iterate over an array, or something...
can i have the source code ?
Awesome video. Can we have scroll bar instead of draging functionality here. ? How can we manuplate scroll bar size.?
Amazing video. Thanks bro
It was usefull thanks dude❤
Amazing video man thanks
Please how can I get the backend encrypted to my mysqli database
Can I get the connections of the backend
your code is wrong in css and javascript...it's no working...
awesome tutorial. I also genuinely dont know how this doesnt have more views
Thanks! that's what i looking for!
Well its clear that scripting technology has taken a nose dive. Just a few years ago, You couldn't tell the difference between the web JavaScript version and a real window with rain draining down it. Those days are now behind us. I feel bad for the people that lost the need for all their knowledge and work.
Can uh send the source code of html n css
Solved
Thanks this was extremely helpful to me :)
How to add filter for genres, release date and rating... Please reply
Brother I need the response version for this
Do you know howw to blur the text? I need the text to be blurred when a modal opens. Thanks!
bro my website content is coming in front and the popup is coming in the back pls solve it
Add z-index: 1000 to .popup
But the datalist element is not working fine in iPhone mobile device how to fix this
show 🆙
loved it
Font awesome link
Can you write a code for the backend also to receive user’s input
Grateful
its not working!!!!!!!!!!!!1
can you please do one for instagram login page
how to do it dynamically through cloning in javascript instead of hardcoding first and last slide in HTML?
Is this work only in p element?
oooooh thanks for informing me how that works
The font awesome icons I always use have </> tags.. open and close.. is there another code I should use. Because those don’t seem to work?
could you do this on html tho?
thx buddy
not work
💕💕💕💕💓💓💓💕💕💕💕💕💕💕💕💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💓💕💕💕💕💕💕💕💕💕💕💞💞💞💞💞💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕
It does not work. I have tired multiple times , even copying your source code completely. It gives an error that addEventListener wont work
Source code??
And how to show the full text when hover
Very well guy. Congrats.
Thanks man, keep it up. Hope you have a wonderful life!
is this responsive tho
In this case no since I added fixed width and height in pixels, but if u add % values then it will