- 134
- 3 745 167
CODE WITH HOSSEIN
Germany
Приєднався 4 чер 2020
Hello and welcome to my channel 😊
My name is Hossein, a freelance Front-End developer.
To make it interesting, I will share a variety of different designs which are aimed at improving your HTML, CSS & JavaScript skills. In particular, you will learn:
1. Clean Code Rules
2. Modern Design Patterns
3. Efficient Programming Projects
Make sure to Subscribe and turn on notifications!
My name is Hossein, a freelance Front-End developer.
To make it interesting, I will share a variety of different designs which are aimed at improving your HTML, CSS & JavaScript skills. In particular, you will learn:
1. Clean Code Rules
2. Modern Design Patterns
3. Efficient Programming Projects
Make sure to Subscribe and turn on notifications!
Hourglass Loading Animation using CSS
Dive into the world of web design as we create a Classic Hourglass Loading Animation using CSS. In this step-by-step tutorial, you'll learn CSS Animation tips and how to bring a touch of elegance to your projects. let's craft something visually stunning together 😉
📂 Assets
Nothing's used...
🔗 Source Code
github.com/hosseinnabi-ir/Hourglass-Animation-CSS
🔔 Subscribe Now!
ua-cam.com/channels/UUA81SSpwJjRl3zp4DZXRQ.html
⏱ Timestamps
00:00 Hourglass Preview
00:31 Hourglass Frame Elements
00:39 General Styles
01:12 Hourglass Frame Styles
02:02 Design Hourglass Top
03:12 Design Hourglass Top
04:04 Hourglass Shadows
05:40 Rotation Animation
06:18 Sand Filling Animations
07:57 Design Drips
09:24 Dripping Animations
10:27 Final Test
11:08 Thanks For Watching :)
🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Last Summer [Official]
Music provided by Ikson®
Listen: ua-cam.com/video/oOGa-bxPloA/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: ncs.io/remember
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch: ua-cam.com/video/KmwpogFtb4Q/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch: ua-cam.com/video/U9pGr6KMdyg/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein
📂 Assets
Nothing's used...
🔗 Source Code
github.com/hosseinnabi-ir/Hourglass-Animation-CSS
🔔 Subscribe Now!
ua-cam.com/channels/UUA81SSpwJjRl3zp4DZXRQ.html
⏱ Timestamps
00:00 Hourglass Preview
00:31 Hourglass Frame Elements
00:39 General Styles
01:12 Hourglass Frame Styles
02:02 Design Hourglass Top
03:12 Design Hourglass Top
04:04 Hourglass Shadows
05:40 Rotation Animation
06:18 Sand Filling Animations
07:57 Design Drips
09:24 Dripping Animations
10:27 Final Test
11:08 Thanks For Watching :)
🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Last Summer [Official]
Music provided by Ikson®
Listen: ua-cam.com/video/oOGa-bxPloA/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: ncs.io/remember
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch: ua-cam.com/video/KmwpogFtb4Q/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch: ua-cam.com/video/U9pGr6KMdyg/v-deo.html
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein
Переглядів: 650
Відео
Glass Credit Card using HTML & CSS
Переглядів 1 тис.Рік тому
How to Design a stunning Glass Credit Card using HTML & CSS? In this tutorial, I'll teach you the process of creating an elegant and modern Credit Card with a nice Glass Morphism Effect 😎 Learn how to use HTML and CSS to prepare the structure of the card and the give styles to it, and apply gradients and transparency for the Glass Effect. If you're a beginner, this tutorial will improve your sk...
OTP Verification Box in JavaScript
Переглядів 1,6 тис.Рік тому
In this tutorial, I'll teach you How to Design an OTP (One-Time Password) Verification Box in JavaScript 😎 OTP Verification is an essential security measure in many applications, and understanding how to implement it good using HTML, CSS & JS can be valuable for web developers. So in this step-by-step tutorial, I'll walk you through Building a Cool OTP Verification Box using JavaScript. Whether...
Animated Android Logo using Pure CSS
Переглядів 626Рік тому
In this tutorial, I will show you step-by-step how to bring the Android Logo to a web page by coding it, all done using pure CSS 😎 Whether you're a CSS enthusiast or an Android fan, this tutorial is perfect for anyone looking to enhance their CSS Animation skills. Join us and discover the power of CSS in designing Animated Logos. Get ready to dive into this video 😉 📂 Assets Nothing's used... 🔗 ...
Glass Sidebar Menu using HTML & CSS
Переглядів 2,6 тис.Рік тому
In this tutorial, I'll show you how to create a modern Glass Sidebar Menu using HTML and CSS 😁 I'll walk you through the step-by-step process of creating a responsive menu that will add a professional touch to any website. Whether you're a beginner or an experienced developer, this tutorial is perfect for anyone looking to enhance their HTML and CSS skills. So join me and let's create a stunnin...
Responsive Travel Cards using HTML & CSS
Переглядів 1 тис.Рік тому
Welcome to this exciting tutorial where you'll learn How to Create Stunning Responsive Travel Cards using HTML and CSS 😍 Join me as I create visually appealing cards that showcase popular travel destinations. Learn step-by-step How to Code these Cards, making them Responsive for seamless viewing on various devices. Also make sure to subscribe to my channel for more coding tutorials 😎 📂 Assets F...
How to Create a Loading Animation with HTML & CSS
Переглядів 1,6 тис.Рік тому
In this tutorial, you'll learn How to Create a stunning Loading Animation with HTML & CSS 😎 Follow along with our step-by-step guide and discover how to add motion and style to your website loading screens. Perfect for beginners and Front-End lovers, this tutorial is for anyone looking to enhance their web design skills. Subscribe to our channel for more web design tutorials like this one 😉 📂 A...
How to Design a Post Card using CSS: A Tutorial for Beginners
Переглядів 1,7 тис.Рік тому
Design a stunning Post Card using CSS with this Beginner Tutorial 😊 Learn how to create eye-catching graphics, use effective color schemes, and add interactivity to your design. By the end of this tutorial, you'll have the skills to create your own professional Post Cards. Don't miss out on future tutorials, subscribe now to stay updated on the latest web design tips and tricks 😉 📂 Assets Font:...
Social Icons Hover Effect using CSS
Переглядів 2,6 тис.Рік тому
Hey everyone 😊 You wanna learn how to design Impressive Social Icons with Hover Effect using CSS?! Well Here I am with a new tutorial. In this project, I'm gonna teach you the trick, so that you can design these unique Social Icons for your own website. Check it out and let me know what's your idea! If you enjoyed it, don't forget to join our family 😉 📂 Assets Icons: fontawesome.com/ 🔗 Source c...
3D Rotating Image Slider using JavaScript
Переглядів 1,7 тис.Рік тому
Hello guys 😊 In today's tutorial, we're gonna see how we can design a 3D Rotating Image Slider using a few CSS and mainly JavaScript. Hope you guys enjoy this video and if so, please don't forget to give it a thumbs up 😉 📂 Assets Nothing's used... 🔗 Source Code github.com/hosseinnabi-ir/Image-Slider-JavaScript 🔔 Subscribe Now! ua-cam.com/channels/UUA81SSpwJjRl3zp4DZXRQ.html ⏱ Timestamps 00:00 I...
Cool Loading Animation using CSS
Переглядів 2,1 тис.Рік тому
Hello everyone 😊 Today, I teach you how to design a cooking Loading Animation using Html & CSS, and I guess it's really cool to be able to design whatever you imagine and use it in your projects 😉 Did you like this tutorial? Don't forget to give it a thumbs up! 📂 Assets Nothing's used... 🔗 Source Code github.com/hosseinnabi-ir/Loading-Animation-CSS 🔔 Subscribe Now! ua-cam.com/channels/UUA81SSpw...
Shopping Cart Design using HTML & CSS
Переглядів 2,8 тис.Рік тому
Hey guys 😎 I'm here again with another CSS tutorial. In this video, We're gonna design a Shopping Cart using Html & Css and every online shop you see on the internet contains a part like this. But you know what?! It's quality that absorb cutomers 😉 📂 Assets Icons: boxicons.com/ Fonts: fonts.google.com/ 🔗 Source Code github.com/hosseinnabi-ir/Shopping-Cart-CSS 🔔 Subscribe Now! ua-cam.com/channel...
Laptop Design using Pure HTML & CSS
Переглядів 2,6 тис.Рік тому
Hey everyone! We're gonna have an unbelievable tutorial, today 😎 You've probably seen same projects on UA-cam, but in this video, I'm gonna design the exact shape of a MacBook Pro Laptop using Pure HTML & CSS. You can improve your CSS skills to a higher level by watching this tutorial 😉 📂 Assets Fonts: fonts.google.com/ 🔗 Source code github.com/hosseinnabi-ir/Laptop-Design-CSS 🔔 Subscribe Now! ...
How to design a Line Chart using JavaScript
Переглядів 4,4 тис.Рік тому
YO GUYS 😊 Today, we have an advanced JS tutorial. Let's learn about How to Design a Line Chart using CSS & JavaScript. building charts has always been a challenge to Front-End developers, but we can easily get it done using Chart Libraries 😉 📂 Assets Fonts: fonts.google.com/ ApexCharts: apexcharts.com/ 🔗 Source code github.com/hosseinnabi-ir/Chart-Design-JavaScript 🔔 Subscribe Now! ua-cam.com/c...
Musical Loading Animation using CSS
Переглядів 4 тис.Рік тому
Hello everyone 😊 If you're looking for a simple, but amazing CSS Loading Animation tutorial, this video's for you. In this project, we'll design a Musical Loading Animation and as it is obvious, you can improve your knowledge in case of CSS Animations. So don't miss this tutorial and lemme know your thoughts in the comments below 😉 📂 Assets Nothing's used... 🔗 Source code github.com/hosseinnabi...
Glass Social Icons Hover Effect using CSS
Переглядів 4,9 тис.Рік тому
Glass Social Icons Hover Effect using CSS
Glowing Button Hover Animation using CSS
Переглядів 9 тис.Рік тому
Glowing Button Hover Animation using CSS
Responsive Glass Sidebar using CSS & JavaScript
Переглядів 133 тис.Рік тому
Responsive Glass Sidebar using CSS & JavaScript
Rotating Loading Animation using CSS
Переглядів 10 тис.2 роки тому
Rotating Loading Animation using CSS
Advanced Weather App using CSS & JavaScript
Переглядів 17 тис.2 роки тому
Advanced Weather App using CSS & JavaScript
Animated Progress Bar using CSS & JavaScript
Переглядів 4,9 тис.2 роки тому
Animated Progress Bar using CSS & JavaScript
Complete Image Slider using CSS & JavaScript
Переглядів 7 тис.2 роки тому
Complete Image Slider using CSS & JavaScript
Website Preloader Animation using CSS & JavaScript
Переглядів 4,9 тис.2 роки тому
Website Preloader Animation using CSS & JavaScript
Touch Swipe List Items using JavaScript
Переглядів 4,3 тис.2 роки тому
Touch Swipe List Items using JavaScript
Glassmorphism Analog Clock using CSS & JavaScript
Переглядів 6 тис.2 роки тому
Glassmorphism Analog Clock using CSS & JavaScript
Button Ripple Hover Effect using JavaScript
Переглядів 7 тис.2 роки тому
Button Ripple Hover Effect using JavaScript
Bottom Navigation Bar using HTML & CSS
Переглядів 9 тис.2 роки тому
Bottom Navigation Bar using HTML & CSS
Switchable Lamp Design using CSS & JavaScript
Переглядів 3,3 тис.2 роки тому
Switchable Lamp Design using CSS & JavaScript
3D Flip Card Animation using HTML & CSS
Переглядів 3,6 тис.2 роки тому
3D Flip Card Animation using HTML & CSS
Это очень круто, коротко и красиво
plz provide me the full code plz plz plz
You can easily download it from my GitHub profile, the link is always pasted in the video description 😁
wow wow thank you very much
how to change position for hambuger menu from left to rigth
I recommend you to use RTL properties in your CSS including text-align: right; and also direction: rtl; So that the whole template will be right to left...
@@CodeWithHossein thanks you much for your help ❤️😊
Bro U disappeared what's wrong. R U fine? Is it possible and make videos?
Hey Bro! I'm feeling great and hope you're fine as well 😊 Actually I've not been active on social media since a year ago. Because I'm currently learning German language and it takes most of my time and energy... That's the main reason why I can't be creating content right now. Hope you enjoy life and happy coding 🤍
I tried the code on github and it crashed🗿
Thanks for your support, I've checked out the code on GitHub and there's actually nothing wrong with it. Could you possibly get into more details about what the problem is?!
Nice but only work for the first button
I have changed Selector to querySelectorAll. Now all buttons workded in a page
You've done a good job sir 👌If you don't mind me saying: The tutorial is actually right, because we only have one! If you would wanted to have also one, naturally there'd be no need for selecting all and the loop for listening all events... Again, thanks for watching and hope you enjoy other videos 😍
You are best and cool ahi
My bro, that's very kind of you ❤
im sorry but it is a complete bullshit becouse of multi images
No problem my friend, don't spend your precious time on something you don't like 😊
Author, were you too lazy or too greedy to copying your code and sharing it in the comments or description of your video? Well, fine, I'll do it myself then.
Hahaha that's the point, I'm not an author 🤣 However you can download the project on my GitHub, I've put the link in the description...
@@CodeWithHossein What do you mean, "I'm not the author"? Then who is?
@@CodeWithHossein but all in all, it works, thank you. the code works.
@@RaptorT1V Glad you solved it, happy coding ❤
We need a 20 sided dice video! Please make it. One that works on HTML 5 websites.
cheers
Cheers ✌
Magnificent brother! didn't though it could be done that much easily 🤭🤟 do you have discord or telegram brother?
It's very kind of you bro 😊🙏 I'll be happy if you message me on LinkedIn any time...
@@CodeWithHossein I would love to text you on Linkedln but i can't open my main id unless i verify it with my NID card! I'lllll try to reach you soon. Thank you!
Please craete a design for music player like thats card a image and a description and title and artist and album and play pause button and a play animation and a download button tn a card
That will be amazing, thanks for sharing your idea 😍❤
Let's Go 🔥
My bro 😊❤
Good to have you back - hope you are well. Great demo.
It feels great to be back, thank you Paul 😍🔥
Where have you gone brother? loved your vidoes so much! :):
Feels fantastic to hear that 😍❤ Actually my channel was deleted by YT and it's back now after quite a while. So I need to plan a bit for it, because when I start again, I have to be consistent...
@@CodeWithHossein I'm so sorry to hear that! but I'm feeling so amazing to see you back brother! no matter how simple your contents are but it was one of a master piece for me.! wishing you all the best and hope you'll come with amazing contents again! will wait for your video. :):
Now is it mastercard, or visa? not the same..
I'm aware it's not the same, but it's a sample design to show you how the logos and other features can be used in such design, and obviously it wasn't supposed to be real 😁
Salam hossein Be gheir az youtube koja mitunm bahat dar ertebat bashm? Soal dashtm
Salam aziz Insta mitoni behem direct bedi @hossein_nabi.ir dar khedmatam ❤
@@CodeWithHosseinmrc dadash❤
Thanks, amazing bro 👍
Thanks a lot ❤
Love it
❤️❤️
Thank you 😊🔥
Sir ek full code video bna do
Please mine backdrop filter ain’t working what’s the problem?..😢
Review your code, and make sure you haven't missed a Semicolon... It's usually a common mistake I also sometimes make 😅
Very cool.
Very kind of you 😍
I am never gonna use this but this looks fire
Glad you think so 🔥
U the best
It's very kind of you, thanks a million ☺
I can not thank you enough! god bless
It's very kind of you 😊❤
Hey , do u have insta? I have a qustion
Yes I do, but it's better to message me on LinkedIn if you need urgent response, Link in About tab of my channel 😊
love your content and i am learning many things from you...Love from Nepal
Another great demo and video as usual. Thanks Hossein. All the best from UK x Any thoughts on narration ?
Please make a tutorial on how you make your thumbnails😊
It's a photoshop design and not really related to our content, BUT I guess we can have a video on how to do it using pure CSS 😉
@@CodeWithHossein ohk thanks
Thank you for the video, you are beautiful!
My pleasure, dear friend 😍😊❤
First case is better for getting index
Somehow!
Thank you very much for the tutorial. He gave me good ideas for my project
It is easy to understand even without you explaining. Thanks The music is relaxing 😌 I almost forgot myself😂. You've got a New Subcriber
Glad you enjoyed it my friend, new videos are definitely better and I'm looking forward for your ideas to get better everyday 😊🔥