- Видео 134
- Просмотров 3 731 784
CODE WITH HOSSEIN
Германия
Добавлен 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!
ruclips.net/channel/UCUUA81SSpwJjRl3zp4DZXRQ
⏱ 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
1...
📂 Assets
Nothing's used...
🔗 Source Code
github.com/hosseinnabi-ir/Hourglass-Animation-CSS
🔔 Subscribe Now!
ruclips.net/channel/UCUUA81SSpwJjRl3zp4DZXRQ
⏱ 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
1...
Просмотров: 464
Видео
Glass Credit Card using HTML & CSS
Просмотров 96411 месяцев назад
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,5 тыс.Год назад
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
Просмотров 604Год назад
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
Просмотров 991Год назад
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,6 тыс.Год назад
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! ruclips.net/channel/UCUUA81SSpwJjRl3zp4DZXRQ ⏱ Timestamps 00:00 Imag...
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! ruclips.net/channel/UCUUA81SS...
Shopping Cart Design using HTML & CSS
Просмотров 2,7 тыс.Год назад
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! ruclips.net/channe...
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 RUclips, 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,2 тыс.Год назад
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! ruclips.net/...
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
Advanced Weather App using CSS & JavaScript
Просмотров 17 тыс.Год назад
Advanced Weather App using CSS & JavaScript
Animated Progress Bar using CSS & JavaScript
Просмотров 4,9 тыс.Год назад
Animated Progress Bar using CSS & JavaScript
Complete Image Slider using CSS & JavaScript
Просмотров 7 тыс.Год назад
Complete Image Slider using CSS & JavaScript
Website Preloader Animation using CSS & JavaScript
Просмотров 4,9 тыс.Год назад
Website Preloader Animation using CSS & JavaScript
Touch Swipe List Items using JavaScript
Просмотров 4,1 тыс.Год назад
Touch Swipe List Items using JavaScript
Glassmorphism Analog Clock using CSS & JavaScript
Просмотров 6 тыс.Год назад
Glassmorphism Analog Clock using CSS & JavaScript
Button Ripple Hover Effect using JavaScript
Просмотров 7 тыс.Год назад
Button Ripple Hover Effect using JavaScript
Bottom Navigation Bar using HTML & CSS
Просмотров 9 тыс.Год назад
Bottom Navigation Bar using HTML & CSS
Switchable Lamp Design using CSS & JavaScript
Просмотров 3,2 тыс.Год назад
Switchable Lamp Design using CSS & JavaScript
3D Flip Card Animation using HTML & CSS
Просмотров 3,5 тыс.Год назад
3D Flip Card Animation using HTML & CSS
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 😊🔥
That's really good
Your opinion means a lot to me 😍
thxxx
My pleasure!
The design is really cool and modern. Good job man.
It's very kind of you buddy 😍❤
thank you
My pleasure 🙏
Thank you so much 🙏
My pleasure 😍
how can i get help?
Hossein janam Hossein janam!
Fantastic demo again. Really useful piece of code ! Thanks again Hossein.