- Видео 46
- Просмотров 3 801
Warehouse Dev
Добавлен 11 дек 2023
🚀 Welcome to the Warehouse Dev's Coding Chronicles! 🌐 Join me, a Junior Front-End enthusiast, as I embark on a coding quest through HTML, CSS, JavaScript, and the mystical realms of React.
🔍 Follow along as I document my learning journey through tutorials, sharing the ups, downs, and a sprinkle of humor. This channel is a space for fellow coding adventurers, where we navigate the twists and turns of web development together.
I'm your fellow traveler on the path to mastery. Let's learn, grow, and laugh at the coding setbacks along the way. Subscribe and join the adventure-because the best way to learn is by doing it together! 💻✨
P.S. I'm not a native English speaker. I apologize in advance for all the grammar mistakes and bad pronunciation you can hear in my videos.
🔍 Follow along as I document my learning journey through tutorials, sharing the ups, downs, and a sprinkle of humor. This channel is a space for fellow coding adventurers, where we navigate the twists and turns of web development together.
I'm your fellow traveler on the path to mastery. Let's learn, grow, and laugh at the coding setbacks along the way. Subscribe and join the adventure-because the best way to learn is by doing it together! 💻✨
P.S. I'm not a native English speaker. I apologize in advance for all the grammar mistakes and bad pronunciation you can hear in my videos.
Building Expense Tracker with JavaScript: iCodeThis Challenge
Take on the iCodeThis - Make Me Functional challenge with me as I build a Simple Expense Tracker using JavaScript! 💻💸
Given only the HTML and CSS, I focus on adding the required interactivity by implementing key functionalities:
- Add new expenses dynamically.
- Clear input fields after adding items.
- Display the total expense.
Plus, I tackle optional tasks like clearing the list on page load for a clean start. Join me as I demonstrate step-by-step how to manipulate the DOM and make this template fully functional with JavaScript. #javascript #icodethis #codingchallenge #expensetracker
Chapters:
00:00 Introduction
01:50 New expense object, Expenses array, Form Submission
05:48 Displaying new expe...
Given only the HTML and CSS, I focus on adding the required interactivity by implementing key functionalities:
- Add new expenses dynamically.
- Clear input fields after adding items.
- Display the total expense.
Plus, I tackle optional tasks like clearing the list on page load for a clean start. Join me as I demonstrate step-by-step how to manipulate the DOM and make this template fully functional with JavaScript. #javascript #icodethis #codingchallenge #expensetracker
Chapters:
00:00 Introduction
01:50 New expense object, Expenses array, Form Submission
05:48 Displaying new expe...
Просмотров: 10
Видео
Hover to get the colors back - Hero Section Cloning
Просмотров 83 месяца назад
In this video, I clone the striking hero section from Barton G, featuring a unique layout divided into three sections. Experience how images transition from grayscale to full color on hover, and see the title come to life with engaging animations. Join me and bring your hero sections to life! 🚀🎨 #webdesign #hovereffects #css #heroselection Inspiration: bartong.com/ GitHub repo: github.com/Wareh...
Easiest way to make pop-ups - Popover + Anchor
Просмотров 503 месяца назад
Easily create pop-ups and tooltips with Popover API and Anchor CSS! 💬💻 Learn how to efficiently use the Popover API for creating dynamic pop-ups and master the art of positioning tooltips with Anchor CSS. Join me and take your UI design skills to the next level! 🎨✨ #webdevelopment #tooltips #popup #css #html Docs: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover developer.moz...
Fetching Latest YouTube Videos from a Channel - YouTube API
Просмотров 754 месяца назад
Learn how to fetch the latest RUclips videos using RUclips's API and vanilla JavaScript 🚀✨ Watch as I demonstrate how to display the three most recent videos from my RUclips channel directly on my personal portfolio website🎥💻 From setting up the API connection and getting the API key to rendering the videos on your site, this tutorial covers everything you need to easily showcase dynamic conten...
Easiest way to make modal windows - Dialog HTML
Просмотров 2624 месяца назад
Discover the simplest way to create modal windows with this comprehensive tutorial on the new HTML dialog tag! 🖼️✨ Learn how to implement, style, and animate Modals to enhance your web projects with minimal code. Join me and unlock the power of the HTML dialog tag! 💻🔧 #html #css #javascript #webdevelopment #modalwindows Mentioned video: ruclips.net/video/IP_rtWEMR0o/видео.htmlsi=7_yJUWxrzr6Rnt_...
Mortgage Repayment Calculator with React: Frontend Mentor Challenge Part2
Просмотров 2074 месяца назад
In this video, I walk you through creating a Mortgage Repayment Calculator app as part of the Frontend Mentor Challenge. 🏡💻 The Application calculates monthly payments and total repayments based on loan amount, interest rate, and loan term. In this second part, we'll finish the project by completing the calculation logic, displaying the results, and error handling. Let's practice React while cr...
Mortgage Repayment Calculator with React: Frontend Mentor Challenge Part1
Просмотров 4354 месяца назад
In this video, I walk you through creating a Mortgage Repayment Calculator app as part of the Frontend Mentor Challenge. 🏡💻 The Application calculates monthly payments and total repayments based on loan amount, interest rate, and loan term. In this first part, we'll enable getting the values users entered. Also, we'll finish validation logic and mortgage calculation logic. Let's practice React ...
Apple-like Scroll Animations in Under 13 Min - JavaScript
Просмотров 215 месяцев назад
Unlock the secrets of creating smooth, Apple-like scroll animations with JavaScript in this quick tutorial! 🍏✨ Implement a scroll-based background video animation, where frames move seamlessly as you scroll. Add a touch of sophistication to your sites. Hit subscribe and let's code together! 💻🚀 #javascript #scrollanimation #webdevelopment GitHub repo: github.com/WarehouseDev/pottery Video and Im...
Transforming Poster into Landing Page: Green Roofs & Facades🌿
Просмотров 205 месяцев назад
Explore the art of web design as I transform a simple poster into a visually striking landing page for a company specializing in green roofs and facades! 🌿 Create an engaging and eco-friendly online presence. Whether you're passionate about sustainability or looking to sharpen your web design skills, this tutorial is what you need. Join me on this creative journey and let's build something beau...
iCodeThis Challenge - Timer Countdown with JavaScript
Просмотров 766 месяцев назад
Once again I tackle the iCodeThis.com challenge and create a functional timer countdown using JavaScript! ⏳ In this video, I guide you step-by-step through the process of building a dynamic countdown timer. Learn how to set up the timer, update the countdown in real time, and display it on your webpage. Subscribe now and let's countdown to coding success together! 🚀✨ #icodethis #javascript #cod...
Watches Landing Page with Scroll Magic
Просмотров 256 месяцев назад
⏱️ In this video, I show you how to create a stunning scroll-based animation where a watch face shrinks and wraps around a wrist as you scroll down the page. We'll use just CSS for animating the big watch and the AOS library for the rest of the animations. I'll guide you through each step to bring this dynamic effect to life. Whether you're a web design enthusiast or a coding pro, this tutorial...
Frontend Mentor Challenge - Contact Form with React - Part2
Просмотров 1086 месяцев назад
Join me as I tackle the Frontend Mentor Challenge 🚀✨ by creating a dynamic Contact Form using React! In this second part, we'll dynamically render error messages and display a success toast notification. If you stick until the end, you'll see two bonus chapters: Displaying contact data and improving form accessibility. Subscribe now and let's build an interactive Contact Form together! 🚀👨💻 #re...
Frontend Mentor Challenge - Contact Form with React - Part1
Просмотров 1686 месяцев назад
Join me as I tackle the Frontend Mentor Challenge 🚀✨ by creating a dynamic Contact Form using React! In this first part, we'll get users' inputs and create a function for validating our form. Subscribe now and let's build an interactive Contact Form together! 🚀👨💻 #reactjs #contactform #frontendmentor Links to the public GitHub repo and live website will be available in the second part. Chapter...
Optics Landing Page with Text Magnification Animation
Просмотров 3516 месяцев назад
👓Optical Illusions: In this video, I create a stunning landing page for an optics website, featuring a text animation that gets magnified as it passes under a pair of glasses. Join me and let's make web design magic happen! 💻🔍 #webdesign #textanimation #css Design by: x.com/MotreskuKosta GitHub repo: github.com/WarehouseDev/truesight-optics Chapters: 00:00 Intro and Credits 01:32 Styling the co...
CTA Button Transforms to Navbar😲
Просмотров 457 месяцев назад
Create a great user experience by transforming a call-to-action button into a sleek navbar as you scroll through the page✨📜 We'll see the new animation-timeline property, and both scroll () and view() values, in action 🚀 and the final solution with JavaScript. Watch now and let's transform your web projects with scroll enchantment! 💻🔮 #scroll #webdevelopment #cssanimation #javascript Chapters: ...
Kaizen Way - Cloning cool website section
Просмотров 1417 месяцев назад
Kaizen Way - Cloning cool website section
Image Slider 6 - Moving Slides with Swipe (Touch Events JS)
Просмотров 977 месяцев назад
Image Slider 6 - Moving Slides with Swipe (Touch Events JS)
Image Slider 5 - Handling Screen Resize
Просмотров 217 месяцев назад
Image Slider 5 - Handling Screen Resize
Image Slider 4 - Moving Slides with Dot Indicators
Просмотров 347 месяцев назад
Image Slider 4 - Moving Slides with Dot Indicators
Image Slider 3 - Auto-Slides and Moving Slides with Keyboard
Просмотров 437 месяцев назад
Image Slider 3 - Auto-Slides and Moving Slides with Keyboard
Image Slider Step-by-Step - Part2 Slides Functionality
Просмотров 168 месяцев назад
Image Slider Step-by-Step - Part2 Slides Functionality
Image Slider Step-by-Step - Part1 HTML and CSS
Просмотров 228 месяцев назад
Image Slider Step-by-Step - Part1 HTML and CSS
YouTube Upload Videos Animation - CSS✨
Просмотров 248 месяцев назад
RUclips Upload Videos Animation - CSS✨
How to publish your static website on GitHub Pages - 2024
Просмотров 398 месяцев назад
How to publish your static website on GitHub Pages - 2024
Live Search in real-time: Vanilla vs. React JS
Просмотров 338 месяцев назад
Live Search in real-time: Vanilla vs. React JS
Build, Push to GitHub, and Publish your React App in less than 10min🚀
Просмотров 398 месяцев назад
Build, Push to GitHub, and Publish your React App in less than 10min🚀
React for Beginners 2024 - Webshop React🛒 Final Part
Просмотров 428 месяцев назад
React for Beginners 2024 - Webshop React🛒 Final Part
React for Beginners 2024 - Cart Functionality - Webshop🛒: Part 4
Просмотров 468 месяцев назад
React for Beginners 2024 - Cart Functionality - Webshop🛒: Part 4
React for Beginners 2024 - Conditional Rendering - Webshop🛒: Part 3
Просмотров 389 месяцев назад
React for Beginners 2024 - Conditional Rendering - Webshop🛒: Part 3
React for Beginners 2024 - State, Props, Keys - Webshop🛒: Part 2
Просмотров 519 месяцев назад
React for Beginners 2024 - State, Props, Keys - Webshop🛒: Part 2
great video. thank you.
Glad you liked it! Thanks
Well done. I used react-hook-form instead.
Thanks a lot! Well done, react-hook-form is awesome for something like this
1:19 nice to meet you too 😊
Nice to meet you, Muhammad!
I like your videos
Thanks a lot! I'm glad I can help
Hi. Can this be used to replace the JavaScript confirm dialog for form submission?
Hi there! Yes, you can use it for that. Check out the documentation in the description. You can find an example of getting the return value on closing the dialog using form submission.
never stop ur vids , ur 50 subs love u
Love you back🙂! Thanks a lot
Thanks a lot for the efforts !
Appreciate it. Thanks🙏
Great tutorial!!
Thanks a lot, Florin🙏
Perfectly done! Keep going 💪
Well done, Marjan! Keep it up 💪
Appreciate it, Ibrahim!
Promo sm ❣️
Thanks for your comment! If that meant social media, I'm now on X: twitter.com/WarehouseDevJS
Well done, Marjan! keep going!
can you provide your github link
Once I finish the whole project, I'll provide a public GitHub repo. There will be at least 4 parts
nice explanation
part 2
Part 2 will be published something like this time tomorrow
Awesome, Marjan 👌 👏 keep going 💪
Great content. Thank you
Awesome job my friend 👏 I watched the whole video ❤ keep it up 💪
Thanks so much, my friend!