- Видео 248
- Просмотров 41 532
Muslim Helalee
Германия
Добавлен 15 янв 2021
Hi Everyone
I am a Full-Stack Web developer and I create courses on the topics of HTML, CSS, JavaScript, React JS, Vue JS and Python. My goal is to simplify the process of becoming a web developer for everyone.
I create high standard premium courses on Udemy and I am bringing the same standards to RUclips for free. Subscribe today to get your web development journey started and learn programming skills that will last a lifetime.
Much Love
Muslim Helalee
Full-Stack Web Developer & Instructor
I am a Full-Stack Web developer and I create courses on the topics of HTML, CSS, JavaScript, React JS, Vue JS and Python. My goal is to simplify the process of becoming a web developer for everyone.
I create high standard premium courses on Udemy and I am bringing the same standards to RUclips for free. Subscribe today to get your web development journey started and learn programming skills that will last a lifetime.
Much Love
Muslim Helalee
Full-Stack Web Developer & Instructor
Issue Tracker App for Absolute Beginners - Project #3 - React from Confusion to Clarity
Hi Everyone! #typescript #tailwindcss #react #reactfrontend #reactrouter
Welcome to the 3rd app of this tutorial series. In this video, we will create an Issue Tracker. The app has 3 pages, an all issues page, an open issues page and a closed issues page. We will start coding the app using Vanilla Typescript and style it with Tailwind CSS. Then we will code the app with React and implement the app routing with React Router. In the third and final iteration of the app, we will implement routing with TanStack.
*-*-*-*-* Learning Objectives
- Learning to code a feature rich app using vanilla technologies
- Understanding the differences in approach between imperative and declarative programming
-...
Welcome to the 3rd app of this tutorial series. In this video, we will create an Issue Tracker. The app has 3 pages, an all issues page, an open issues page and a closed issues page. We will start coding the app using Vanilla Typescript and style it with Tailwind CSS. Then we will code the app with React and implement the app routing with React Router. In the third and final iteration of the app, we will implement routing with TanStack.
*-*-*-*-* Learning Objectives
- Learning to code a feature rich app using vanilla technologies
- Understanding the differences in approach between imperative and declarative programming
-...
Просмотров: 1 011
Видео
Conditional Rendering in React - React from Confusion to Clarity
Просмотров 25721 день назад
Hi Everyone! Conditional rendering allows us to build dynamic user interfaces that change based on state, props, data availability, or any condition. Whether it’s toggling UI elements, showing different layouts for logged-in vs. logged-out users, or loading different components based on application state, understanding conditional rendering is essential for creating interactive and robust React...
User Profile App - Project #2 - React from Confusion to Clarity
Просмотров 231Месяц назад
Hi Everyone! This is a simple user profile app built with React, TypeScript, and Tailwind CSS. The goal of this project is to help you understand how to update the UI of an app and how to handle external communication of React components. *-*-*-*-* Example App - Simple user profile app that fetches user data from JSON placeholder API. *-*-*-*-* Source Code github.com/ArnaCode/React-Typescript-T...
Shopping Cart App - Project #1 - React from Confusion to Clarity
Просмотров 505Месяц назад
Hi Everyone! This is a simple shopping cart project built with React, TypeScript, and Tailwind CSS. The goal of this project is to help you understand the differences between state and props in React while creating a functional shopping cart application. *-*-*-*-* Example App - Simple shopping cart app that showcases the differences between state and props. *-*-*-*-* Source Code github.com/Arna...
useRef vs. useState - React from Confusion to Clarity
Просмотров 173Месяц назад
Hi Everyone! In this video, we are going to code a simple Stopwatch app to showcase the differences between managing states that result in re-renders and persist data without causing re-renders. *-*-*-*-* Example App - Simple Stopwatch app to showcase when to re-render the UI based of changes in the state of the app. *-*-*-*-* Source Code github.com/ArnaCode/useRef-vs-useState-React-from-Confus...
useEffect vs. useState - React from Confusion to Clarity
Просмотров 143Месяц назад
Hi Everyone! In this video, we are going to take a look at what state changes and side effects are, what are the differences between them, how to implement state and side effects professionally. *-*-*-*-* Example App - During this video, we will work with a simple app that displays user information from a third party API endpoint. *-*-*-*-* Source Code github.com/ArnaCode/useEffect-vs-useState-...
React's Synthetic Events Explained - React from Confusion to Clarity
Просмотров 202Месяц назад
Hi Everyone! In this video, we are going to take a look at 6 different examples, from beginner to advanced, in order to understand React's Synthetic Events with Typescript. *-*-*-*-* Examples - Handling Button Click Event - Input Change Event - Handling Form Submit Event - Mouse Enter and Leave Events - Custom Input Component with Event Forwarding - Drag and Drop Event Handling *-*-*-*-* Source...
What is the Virtual DOM - React from Confusion to Clarity
Просмотров 92Месяц назад
Hi Everyone! In this video, we are going to take a look at 6 different examples in order to understand React's Virtual DOM. *-*-*-*-* Examples - Understanding DOM Updates - Conditional Rendering - Highlighting Diff Mechanism - Updating Complex State - Understanding Reconciliation - Dynamic List Rendering with Conditional Styling *-*-*-*-* Source Code github.com/ArnaCode/What-is-the-Virtual-DOM-...
The Truth About JSX - React from Confusion to Clarity
Просмотров 157Месяц назад
Hi Everyone! In this video, we are going to take a look at 10 different examples in order to understand JSX. *-*-*-*-* Examples - JSX Transpilation to React.createElement - Nesting Elements - Passing Props - Functional Component with JSX - Conditional Rendering - Rendering Lists - Handling Events - Using Fragments - Inline Styling - Controlled Component (Form Input) *-*-*-*-* Source Code github...
New Course Announcement - Tailwind CSS - The Practical Bootcamp in 2024
Просмотров 2123 месяца назад
Hi Everyone! #tailwindcss I am super excited to let all of you know that I just released my Tailwind CSS - The Practical Bootcamp in 2024. Coupon Links: 30 Day (14.99 USD) www.udemy.com/course/tailwind-css-the-practical-bootcamp/?couponCode=A8DBB9E96AE1D7B3E779 5 Day (9.99 USD) www.udemy.com/course/tailwind-css-the-practical-bootcamp/?couponCode=ED9AAEE3BC2836E461DD Bootcamp Source Code and Doc...
States - Tailwind CSS for Devs in a Hurry
Просмотров 3723 месяца назад
Hi everyone, In this video, I will show you how to get started with States in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/States-Tailwind-CS...
Grid Layout - Tailwind CSS for Devs in a Hurry
Просмотров 8004 месяца назад
Hi everyone, In this video, I will show you how to get started with Grid Layout in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Grid-Layout-T...
Flexbox Layout - Tailwind CSS for Devs in a Hurry
Просмотров 1744 месяца назад
Hi everyone, In this video, I will show you how to get started with Flexbox Layout in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Flexbox-La...
Scroll Snap - Tailwind CSS for Devs in a Hurry
Просмотров 4954 месяца назад
Hi everyone, In this quick video, I will show you how to get started with Scroll Snap in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Scroll-...
Tables - Tailwind CSS for Devs in a Hurry
Просмотров 2504 месяца назад
Hi everyone, In this quick video, I will show you how to get started with Tables in Tailwind CSS as fast as possible. *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by buying me a coffee www.buymeacoffee.com/arnacode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Support me by becoming a patron www.patreon.com/ArnaCode *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Source Code GitHub github.com/ArnaCode/Tables-Tailw...
Variables - Tailwind CSS for Devs in a Hurry
Просмотров 2,3 тыс.5 месяцев назад
Variables - Tailwind CSS for Devs in a Hurry
Dark Mode - Tailwind CSS for Devs in a Hurry
Просмотров 1,4 тыс.5 месяцев назад
Dark Mode - Tailwind CSS for Devs in a Hurry
Animations - Tailwind CSS for Devs in a Hurry
Просмотров 1 тыс.5 месяцев назад
Animations - Tailwind CSS for Devs in a Hurry
Transitions - Tailwind CSS for Devs in a Hurry
Просмотров 8055 месяцев назад
Transitions - Tailwind CSS for Devs in a Hurry
Transforms - Tailwind CSS for Devs in a Hurry
Просмотров 1566 месяцев назад
Transforms - Tailwind CSS for Devs in a Hurry
Columns - Tailwind CSS for Devs in a Hurry
Просмотров 3436 месяцев назад
Columns - Tailwind CSS for Devs in a Hurry
Positions - Tailwind CSS for Devs in a Hurry
Просмотров 2976 месяцев назад
Positions - Tailwind CSS for Devs in a Hurry
Spacing - Tailwind CSS for Devs in a Hurry
Просмотров 3656 месяцев назад
Spacing - Tailwind CSS for Devs in a Hurry
Typescript for Beginners - Type Narrowing Revisited - Lesson 34
Просмотров 5457 месяцев назад
Typescript for Beginners - Type Narrowing Revisited - Lesson 34
Typescript for Beginners - Generic Type Aliases - Lesson 33
Просмотров 937 месяцев назад
Typescript for Beginners - Generic Type Aliases - Lesson 33
Typescript for Beginners - Generic Arrays - Lesson 32
Просмотров 577 месяцев назад
Typescript for Beginners - Generic Arrays - Lesson 32
Typescript for Beginners - Getting Started with Generics - Lesson 31
Просмотров 2247 месяцев назад
Typescript for Beginners - Getting Started with Generics - Lesson 31
Typescript for Beginners - Class Inheritance - Lesson 30
Просмотров 777 месяцев назад
Typescript for Beginners - Class Inheritance - Lesson 30
Typescript for Beginners - Getter and Setter Methods - Lesson 29
Просмотров 1158 месяцев назад
Typescript for Beginners - Getter and Setter Methods - Lesson 29
Typescript for Beginners - Parameter Properties - Lesson 28
Просмотров 448 месяцев назад
Typescript for Beginners - Parameter Properties - Lesson 28
*Can tell which file/folder icons theme that your are using it in this wonderful tutorial video please tell me 😢*
The extension is called icons and the author is "Mhammed Talhaouy."
bro please build app like omegle
All in good time!
whats next brother ?
Typescript, React, Next and MERN. I am also working on a new series called "Zero to Interview Ready in JavaScript, Typescript, Python, Go and Rust," and I will start uploading the videos in the next few days. I hope tomorrow will be the first video. This series will be the biggest series anyone has done on the topic of Software Engineering and interview Preparation on RUclips and will be running for a long time with several hundred videos.
Thanks
My pleasure
First time, I understand the main idea how Typescript deal with Generics Declaration will be generic and Execution will be specific Awesome ! Regards Khan Imran from Pakistan
I am glad it helped you out.
is it going to be a A-Z react course or we have to wait for that ?
The aim of this playlist is as the title suggests. I want to simplify such an unnecessarily complicated technology.
Great content, as always! Could you help me with something unrelated: My OKX wallet holds some USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Could you explain how to move them to Binance?
I'm not familiar with cryptocurrency wallet transfers, but I recommend keeping your seed phrase private, consulting OKX's official guide on transferring USDT, and ensuring the network matches your Binance deposit address (e.g., ERC-20 or BEP-20) to avoid losing funds.
Thank you
You're welcome
U made learning react easy, Thanks man
Glad to hear that!
Thanks man, a good one
You're welcome!
@@MuslimHelalee can you place all the htm files in some github repo, i mean those which you are copying from
The file is already in the repo and is called "starter-markup.html". It is in the main directory of the project committed to GitHub. Here is the link github.com/ArnaCode/React-Typescript-Tailwind-Shopping-Cart-App1-React-from-Confusion-to-Clarity/blob/main/starter-markup.html
Excellent 👌
Thanks a lot 😊
i love ur way of teaching really simple and clear. nice vid
Thanks a lot!
Thank you!
You're welcome!
I knew how jsx works and createElement but its good to see the components side by side, it reminds you why changing one props trigger re-render all the children components when you look at createElement element.
I am glad you found this video useful.
I am looking forward to your react & NextJs course ! Thank you
You are welcome! Happy coding and learning
Completed Thread. Now looking forward to phoxul website after that will continue project number 2.
Congrats on coming this far. See you there
Man you are a gem.
I am glad you like the projects.
@MuslimHelalee We reaching out to discuss an exciting business proposition regarding your Udemy course. Our aim is to enhance the visibility of your course, increase sales, expand your student audience, and cultivate positive reviews. We are eager to explore potential collaboration opportunities with you to achieve these objectives. Looking forward to the possibility of working together.
Complete the whole footer section html and css before moving into the lecture :) felling good.
Great job
From the udemy course i am following this automatic grid responsiveness over media queries . Day by day my fear about css is disappearing. Thanks you .
I am glad I could help.
Great lecture learn about live bug fixing :)
Glad it was helpful!
Another day, another win! Learned a lot of cool stuff today.
Glad you enjoyed!
Thank you for this great video! As someone with a background in JavaScript, I was able to handle js parts on my own, but I learned a lot from your explanations. I feel much more confident now in understanding how design concepts work. Keep up the amazing work!
You're very welcome!
At 13:59 why we are using the position absolute property and it is relative to whom ?
Hi, the reason for position absolute is to position them freely without having to think about the existence of other elements. And it is relative to the body element.
Beautifully explained. Thank you!
Glad you enjoyed it!
this course is useless when you dont show a single form styling in your entire course
Hi there, there actually a very good form styled in the first project. I have also added some exciting challenges for forms.
@@MuslimHelalee sorry and tx for reply i think you should have atleast one section on form building
I will update the course and add a component for some sort of a form. Until then you can always tackle forms from a project standpoint.
Great. Wish you all the best.
Thank you! You too!
Just purchased the course i love your html css course. What will be your next course?
Definitely react
Just for the improvement of your channel, you should know that devs want a direct to the point information. This video should focus on using columns only, not wasting any more seconds adding backgrounds, padding or whatever.
Thank you vey much for your feedback. I will keep it in mind.🙂
I Want to say u hi from germany u course css modern flex and grid ist the Best course in the World ❤
Thank you so much
Muslim Helalee great course bro, off topic please don't use roids we need you to live long and healthy, those substances shorten your lifespan. Thanks and keep up the good work!!!!
Thank you very much for your concern. I am NOT using any steroids or anything or protein, I have just gotten fat. I am trying to lose weight but it is very difficult to do when you are sitting all day long. Thanks anyway and I hope you enjoy the Bootcamp.
many thanks
You are welcome
Just bought it. Look good😊. Cheers.
Hope you enjoy it!
Great efforts! Thank you 🙏
So nice of you
Great great job🎉
Thank you! 😃
Beautiful with a real example. Thank you for making it easy and simple
Glad you like it!
but my one million question is, do you plan to combine tailwind with alpineJS as well??? because its a dream team together :)
Soon, very soon
salamulaikum senior hilali we have the end of september... and i'm really hurrying right now 🤣
It is very close to being completed. Thank you very much for your patience.
Great efforts! Thank you
You are welcome!
Muslim Helalee when will you publish your TailwindCSS course on Udemy?
HI there, I am currently editing the videos. As soon as this process is done, I will release the course. I planning a late September release. Thank you for your patience and interest.
Salam brother, just wanted to comment to say In Sha Allah it works out and to give a bit of support.
Appreciated
Muslim Helalee when will you publish your Tailwind CSS course on Udemy?
Hi, Thank you very much for your interest in the course. The course is completed. The only thing remaining is editing the videos. I used to have a video editor and designer, now I do everything myself. That is why my courses take a bit longer than usual. I am hoping for a late September release, hopefully.
P.S. You look very similar to a friend of mine from Turkey. The whole time I was going through your lessons, it felt like my friend was teaching me web development. Lovely experience overall.
That's awesome! I am thrilled to see you are enjoying your learning.
Hi. I'm going through your Udemy masterclass on Building Responsive-Adaptive Websites..... So far it's been great and wonderful. I love your style of teaching, the whiteboarding and then the coding aspect really help drive home the concepts really well.
Great to hear! Happy coding and learning
Thank you 🙏
You’re welcome 😊
The best ideas and good explanation
Thanks a lot
Thank you
You're welcome