Make Your Site Lightning Fast With Responsive Images Web Dev Simplified 2023-06-13 | Responsive Images Article: blog.webdevsimplified.com/2023-05/responsive-imagesLoading the right image based on screen resolution, size, and medium is difficult unless you know about the picture element. The picture element makes responsive images trivial. This will not only drastically increase the loading speed of your page for mobile users, but it will also increase the user experience for everyone that uses your site.📚 Materials/References:Responsive Images Article: blog.webdevsimplified.com/2023-05/responsive-imagesLazy Load Images Video: youtu.be/hJ7Rg1821Q0Lazy Load Images Article: blog.webdevsimplified.com/2023-05/lazy-load-images🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:43 - img srcset Attribute Basics06:35 - img srcset Attribute Advanced10:12 - picture Element#HTMLPicture #WDS #ResponsiveImages
Help Me Teach You TypeScript Web Dev Simplified 2023-08-24 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
NEW Way To Create Variables In JavaScript Web Dev Simplified 2023-08-22 | The brand new using keyword is yet another way to declare variables in JavaScript. This using keyword is pretty niche in how it should be used but when it is fully implemented into libraries it will make handling closing connections and cleanup tasks so much easier.🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:30 - Problematic Code Example02:50 - Using Keyword Basics09:41 - Async Using#JSUsing #WDS #JavaScript
Stop Using {} In TypeScript Web Dev Simplified 2023-08-17 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
I Cannot Believe React Made A Hook For This Web Dev Simplified 2023-08-15 | React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-M3mGY0pgFk0React recently announced a new experimental hook that makes working with optimistic updates so much easier. This saves so much boilerplate code and gives your users a much better experience.📚 Materials/References:React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-M3mGY0pgFk0🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:34 - What are optimistic updates01:13 - Why optimistic updates are hard02:05 - useOptimistic hook basics06:38 - useOptimistic hook advanced#ReactJS #WDS #useOptimistic
If You Think Pick/Omit Are Useless Then You Need To Watch This Web Dev Simplified 2023-08-10 | Original Pick/Omit Tutorial: youtube.com/shorts/tNN8xXDNp9o?feature=share🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
This New React Hook Changes How You Use Forms Web Dev Simplified 2023-08-08 | React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-_tUdtt6H5CEReact recently announced a new experimental hook that makes working with forms so much easier. This hook solves issues related to double submitting forms, loading states, and so much more.📚 Materials/References:React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-_tUdtt6H5CE🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:57 - Traditional Solution02:45 - useFormStatus Solution#ReactJS #WDS #useFormStatus
NEW React Simplified Course Announcement! Web Dev Simplified 2023-08-03 | React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-idZo05jFwWE0kJob Listing Project Demo: https://react-simplified-job-board.netlify.app🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How I Would Learn React From Scratch In 2023 Web Dev Simplified 2023-08-01 | React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-a7YYJVGBy6AReact Roadmap: reactsimplified.com/beginner-table-of-contents/?utm_source=youtube&utm_medium=video-description&utm_content=table-of-contents&utm_campaign=video-id-a7YYJVGBy6ALearning React is incredibly difficult. It is made even harder by the fact that React is constantly changing and the documentation is quite complex to follow. In this video I will show you exactly how I would learn React to land a job.📚 Materials/References:React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-a7YYJVGBy6AJavaScript Roadmap Video: youtu.be/7L2RLBmEJmEJavaScript Roadmap Site: javascriptsimplified.com/beginner-table-of-contents🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:40 - Prerequisites01:44 - Basics09:13 - Advanced#ReactJS #WDS #ReactJSRoadmap
This Will Get You A React Job Web Dev Simplified 2023-07-31 | React Simplified Course: reactsimplified.com/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-XX1YJlz0IKIJob Listing Project Demo: https://react-simplified-job-board.netlify.appIf you have been struggling to learn React, or you just want to get started with React this is the perfect course for you. Also, if you purchase the course within 1 week of this video going live you will get a special launch day discount!🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#ReactJS #WDS #ReactSimplified
This New CSS Text Property Is Amazing For Headings Web Dev Simplified 2023-07-27 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
I Will Never Write CSS Animations Again Without Using This Tool Web Dev Simplified 2023-07-25 | CSS Animations are difficult to work with because they are hard to debug/test, or at least they would be if we didn’t have amazing animation dev tools built into the browser. In this video I will show you how to use the amazing dev tools built into both Chrome and Firefox.📚 Materials/References:Prettier CSS Animation Video: youtu.be/uQNpr09UOAYLoading Spinner Animation Video: youtu.be/Gx35fMhDPWs🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:43 - Animation Dev Tool Basics04:47 - Advanced Examples10:45 - Firefox Dev Tools#CSSAnimation #WDS #CSS
How To Instantly Destroy Your Own Business Web Dev Simplified 2023-07-20 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How To Maximize Performance In Your React Apps Web Dev Simplified 2023-07-18 | React Simplified Course: reactsimplified.comFixing performance bugs in React is difficult since so much of the performance of React is tied to re-renders and state management. This is why I love the profiler built into React dev tools since it does an amazing job of showing you everything you need to know about what is causing your app to be slow. In this video I explain exactly how to use the React profiler to maximize your performance.📚 Materials/References:React Simplified Course: reactsimplified.com🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:26 - Demo Application01:45 - Basic Profiler Features06:30 - Advanced Profiler Features#ReactProfiler #WDS #ReactJS
Is This The Best New UI Library? Web Dev Simplified 2023-07-13 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How To Create This Unbelievable CSS Scroll Animation Web Dev Simplified 2023-07-11 | I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. I even decided to make the challenge more difficult by doing nearly everything in just plain CSS instead of doing it all in JavaScript. In this video I show you how I created this animation.📚 Materials/References:GitHub Code: github.com/WebDevSimplified/logical.so-scroll-animationIntersection Observer Video: youtu.be/2IbRtjez6agIntersection Observer Article: blog.webdevsimplified.com/2022-01/intersection-observer🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:03 - Demo03:15 - How I examine this animation05:30 - JavaScript scroll variable setup11:03 - Top section scrolling CSS20:41 - Top section image CSS27:50 - Other image CSS (IntersectionObserver)31:20 - IntersectionObserver JavaScript#CSS #WDS #ScrollAnimation
Pick/Omit Are One Of The Best Features Of TypeScript Web Dev Simplified 2023-07-06 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
The Only Markdown Crash Course You Will Ever Need Web Dev Simplified 2023-07-04 | FREE Markdown Cheat Sheet: webdevsimplified.com/markdown-cheat-sheet.htmlMarkdown is one of the most important text editing languages you can learn. It is used everywhere like blogs, comment systems, documentation, and so much more. In this video I will teach you everything you need to know about Markdown so you can become a Markdown expert.📚 Materials/References:FREE Markdown Cheat Sheet: webdevsimplified.com/markdown-cheat-sheet.htmlMarkdown Blog Article: blog.webdevsimplified.com/2023-06/markdown-crash-courseInteractive Markdown Editor: blog.webdevsimplified.com/2023-06/markdown-crash-course/#interactive-markdown-editor🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:00 - Markdown Example01:33 - What Is Markdown03:00 - Paragraphs04:43 - Headings05:50 - Markdown Flavors06:45 - Bold/Italic08:24 - Strikethrough/Highlight09:33 - Superscript/Subscript10:40 - Emojis11:09 - Code Blocks13:45 - Links15:11 - Images16:00 - Blockquotes16:42 - Horizontal Rule17:23 - Lists18:55 - Tables21:08 - Checklists#Markdown #WDS #MarkdownCrashCourse
Stop Watching Programming Tutorials Web Dev Simplified 2023-06-29 | JavaScript Simplified Course Table Of Contents: javascriptsimplified.com/advanced-table-of-contents/?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-4fXOjwl2HOQReact Simplified Course Table Of Contents: reactsimplified.com/beginner-table-of-contents🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
Most Senior React Devs Don’t Know How To Fix This Web Dev Simplified 2023-06-27 | React Simplified Course: reactsimplified.comYou probably know about how to use keys in React arrays, but did you know that keys can be used for much more than just arrays? In this video I will show you 2 different ways that you can use keys to fix bugs that nearly no one knows about.📚 Materials/References:React Simplified Course: reactsimplified.com🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:28 - The bug explained03:18 - Using keys to fix the bug06:05 - Another advanced key use case#ReactJS #WDS #AdvancedReactJS
VSCode Profiles Save Me So Much Time Web Dev Simplified 2023-06-22 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
This Is Why You Can’t Learn Web Dev Web Dev Simplified 2023-06-20 | JavaScript Course Table Of Contents: javascriptsimplified.com/beginner-table-of-contents?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-z9FeTl5eq9EReact Course Table Of Contents: reactsimplified.com/beginner-table-of-contentsLearning web development is hard and it has only been getting harder and harder each year. In this video I talk about why web development has been getting harder to learn and what you can do to overcome that difficulty and truly learn web development.📚 Materials/References:JavaScript Course Table Of Contents: javascriptsimplified.com/beginner-table-of-contents?utm_source=youtube&utm_medium=video-description&utm_campaign=video-id-z9FeTl5eq9EReact Course Table Of Contents: reactsimplified.com/beginner-table-of-contentsMy Courses: courses.webdevsimplified.comOdin Project: theodinproject.com🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:34 - The Problem02:44 - What Is Changing08:48 - What To Do About This#WebDevelopment #WDS #JavaScript
I Had No Idea This Scroll Bar CSS Property Existed Web Dev Simplified 2023-06-15 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
This NPM Package Is A Game Changer For UI Design Web Dev Simplified 2023-06-08 | Class Variance Authority: github.com/joe-bell/cva🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How To Load Images Like A Pro Web Dev Simplified 2023-06-06 | Lazy Load Images Article: blog.webdevsimplified.com/2023-05/lazy-load-imagesImages are the largest asset for most sites and the biggest cause for unresponsive, laggy sites. In this video I will show you how to use lazy loading to not only drastically speed up your applications, but to also increase the polish and quality of your site.📚 Materials/References:Lazy Load Images Article: blog.webdevsimplified.com/2023-05/lazy-load-imagesResponsive Images Video: youtu.be/fp9eVtkQ4EAResponsive Images Article: blog.webdevsimplified.com/2023-05/responsive-images🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:35 - What Is The Problem02:17 - Lazy Loading Basics05:15 - Advanced Blurry Loading#LazyLoading #WDS #HTML
You Can Finally Safely Use innerHTML (kind of) Web Dev Simplified 2023-06-01 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
I Waited 15 Years For These New Array Methods Web Dev Simplified 2023-05-30 | JavaScript has lots of array methods for doing things like sorting and reversing arrays, but the biggest problem with all these methods is they mutate the array you are working with. This is a huge problem when you are trying to write React code, functional code, or pure functions. This is why I love the new array methods that add immutable versions of all the mutable array methods we are used to.🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:36 - Immutability Explanation02:45 - with Method03:50 - toSorted Method05:31 - toReveresed Method06:00 - toSpliced Method07:15 - Browser Support#JSArrayMethods #WDS #Immutability
This Tailwind Library Is A Game Changer Web Dev Simplified 2023-05-25 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
Learn Next.js 13 With This One Project Web Dev Simplified 2023-05-23 | React Simplified Course: reactsimplified.comNext.js is constantly evolving and one of the biggest updates is the addition of server components and server actions. This video goes over all the new Next.js 13 changes and how you can use these new features to create a simple todo list application.📚 Materials/References:React Simplified Course: reactsimplified.comGitHub Code: github.com/WebDevSimplified/next-13-todo-listPrisma Crash Course Video: youtu.be/RebA5J-rlwgSingleton Video: youtu.be/sJ-c3BA-Ypo🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:44 - Setup01:50 - Database Setup05:45 - Remove Boilerplate Code07:20 - Next.js 13 Routing08:35 - Home Page10:41 - Server Component Data Fetching17:34 - New Todo Page20:24 - Server Actions (Forms)25:20 - Server Actions (Buttons)#NextJS #WDS #ReactJS
This Prettier Plugin Makes Tailwind So Much Better Web Dev Simplified 2023-05-18 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
Learn CSS Scroll Snap In 6 Minutes Web Dev Simplified 2023-05-16 | Learn CSS Today Course: courses.webdevsimplified.com/learn-css-todayScroll snapping is a feature many websites take advantage of and it used to be quite difficult to implement before CSS released scroll snapping properties. In this video I will cover everything you need to know about scroll snapping in CSS so you can utilize it in all your sites.📚 Materials/References:Learn CSS Today Course: courses.webdevsimplified.com/learn-css-todayCSS Logical Properties Video: youtu.be/-0fAhoahXYw?t=545🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:25 - Setup01:10 - Scroll Snap Basics04:02 - Scroll Snap Advanced Features#WebDevelopment #WDS #JavaScript
I Am Taking A Break From YouTube Web Dev Simplified 2023-05-13 | I have decided after much deliberation to take a small break from YouTube. This doesn’t mean I am stopping making videos. Instead what it means is that I am reducing my video output to focus more of my time on creating content for my courses (especially my React course).🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#WDS
This CSS Trick Makes Impossible Animations Possible Web Dev Simplified 2023-05-11 | Article About This Technique: css-tricks.com/css-grid-can-do-auto-height-transitions🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How To Create A Social Media App Using The T3 Stack - Next.js, React, Tailwind, Prisma, TypeScript Web Dev Simplified 2023-05-09 | Try Out Amplication: amplication.com/?utm_source=wdsytc&utm_medium=cpm&utm_campaign=vid&utm_content=twitter_clone&utm_term=try_out_link_amp_hpAmplication is open source. Star their GitHub repo: github.com/amplication/amplicationI finally created a project using T3 and I love the stack. tRPC, TypeScript, and Tailwind are some of my favorite tools. Being able to use them all on the same project in an easy to use way is so nice. This is the biggest project on my channel and I really hope you enjoy it.📚 Materials/References:GitHub Code: github.com/WebDevSimplified/twitter-clonePrisma Crash Course Video: youtu.be/RebA5J-rlwgIntl Formatter Video: youtu.be/4oGWpTAY_hc🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00:00 - Introduction00:00:21 - Sponsor00:01:38 - T3 Setup00:03:40 - PlanetScale Setup00:09:06 - Authentication Setup00:12:05 - Deployment Setup00:18:03 - Prisma Schema00:23:00 - Sidebar JSX/Styles00:31:45 - New Tweet Form JSX/Styles00:49:13 - New Tweet Logic00:55:05 - Recent Tweets Server Logic01:07:18 - Recent Tweets JSX/Styles01:29:22 - Like Tweet Logic01:33:05 - Cache Update Logic01:42:03 - Recent/Following Tabs JSX/Styles01:52:27 - Profile Page Server Logic02:05:42 - Profile Page JSX/Styles02:16:35 - Follow Button Logic02:22:22 - SSG Revalidation Logic#T3 #WDS #NextJS
Next.js Server Actions Change Everything About React Web Dev Simplified 2023-05-06 | I have been waiting 6 months for Next.js to announce how they plan to handle mutations and it is finally here with server actions. I am incredibly excited for this new feature and look forward to seeing how it shapes up over the coming months.📚 Materials/References:Announcement Article: nextjs.org/blog/next-13-4🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:24 - Server Actions Example#NextJS #WDS #ReactJS
This Extension Is A TypeScript Game Changer Web Dev Simplified 2023-05-04 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
The New dialog HTML Element Changes Modals Forever Web Dev Simplified 2023-05-02 | Modals have been a part of web development for decades now, but they have always been a bit of a pain to work with. The main reason modals have been such a pain is because it is difficult to make a truly accessible modal that conforms to all accessibility standards. This is why the new HTML dialog element is so exciting. The dialog element makes it so much easier to create accessible modals, and in this video I will explain everything you need to know about the dialog element to use it in your next project.📚 Materials/References:My Blog: blog.webdevsimplified.comDialog Element Article: blog.webdevsimplified.com/2023-04/html-dialog🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:55 - The traditional way to make modals02:45 - Using the dialog element08:02 - Advanced dialog element use cases#HTMLDialog #WDS #HTML
Unstyled Component Libraries Are A Game Changer Web Dev Simplified 2023-04-29 | It may seem counterintuitive to use unstyled components, especially after so much time has been spent developing libraries like Bootstrap, but unstyled components are one of my favorite things to happen to frontend development. The reason these libraries are so amazing is because they make it so easy to create custom styled components that look exactly like you want them to while also containing all the complex accessibility and functionality that is difficult to create on your own.🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:31 - The problem with styled component libraries03:55 - Low level component libraries07:50 - Unstyled component libraries10:47 - How to best use these libraries#UnstyledComponents #WDS #CSS
Any vs Unknown In TypeScript Web Dev Simplified 2023-04-27 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
Watching Tailwind Tutorials Is A Waste Of Time Web Dev Simplified 2023-04-25 | Learn CSS Today Course: courses.webdevsimplified.com/learn-css-todayI love Tailwind. It is one of (if not) my favorite ways to style applications. I do have one issue with Tailwind, though, and that is how people go about learning it. In order to truly learn and master Tailwind you do not need to actually learn much at all about Tailwind. Instead you need to master CSS since Tailwind is really just CSS with some slightly different names and a few extra features.📚 Materials/References:Learn CSS Today Course: courses.webdevsimplified.com/learn-css-today🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:24 - Best way to learn Tailwind04:28 - How to learn advanced Tailwind#TailwindCSS #WDS #CSS
Are New Frameworks Replacing React? Web Dev Simplified 2023-04-22 | React Simplified Course: reactsimplified.comReact was one of the first frameworks to adopt the modern component model which is one of the reasons it is so popular today. React did many things to simplify frontend development, but now there are tons of new frameworks that can do everything React can, but with even more features and quality of life improvements. Does this mean React is doomed to become obsolete?📚 Materials/References:React Simplified Course: reactsimplified.comFireship 10 Frameworks Video: youtu.be/cuHDQhDhvPE🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:52 - React Trends04:30 - React vs Svelte08:00 - Future of React#ReactJS #WDS #FrontendFramework
How To Create ENV Variables In React Web Dev Simplified 2023-04-20 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
3 Beginner React Mistakes That Can Ruin Your App Web Dev Simplified 2023-04-18 | FREE React Hooks Simplified Course: courses.webdevsimplified.com/react-hooks-simplifiedFull React Simplified Course: reactsimplified.comI have been teaching React for years and have seen countless beginner React mistakes, but there are 3 mistakes that stand far above the rest that I see nearly every developer make (even more experienced developers). In this video I go over what those 3 mistakes are as well as how to avoid them so you can become a master of React.📚 Materials/References:FREE React Hooks Simplified Course: courses.webdevsimplified.com/react-hooks-simplifiedFull React Simplified Course: reactsimplified.comPassing Functions As Variables Video: youtu.be/7UMuJMiNjSkPassing Functions As Variables Article: blog.webdevsimplified.com/2020-10/javascript-functions-as-argumentsShort Circuiting Video: youtube.com/shorts/8mvNzU7DpO4Short Circuiting Article: blog.webdevsimplified.com/2019-10/what-is-short-circuitingReference Vs Value Video: youtu.be/-hBJz2PPIVEReference Vs Value Article: blog.webdevsimplified.com/2021-03/js-reference-vs-valueuseState Video: youtu.be/O6P86uwfdR0useState Article: blog.webdevsimplified.com/2020-04/use-stateStrictMode Video: youtu.be/XUwzASyHr4Q🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:30 - Mistake #108:12 - Mistake #212:02 - Mistake #3#ReactJSMistakes #WDS #ReactJS
You Will Never Finish Your Project If You Keep Doing This Web Dev Simplified 2023-04-15 | It is really easy to get motivated to start a new cool project, but oftentimes you get bogged down halfway through the project with tons of boring monotonous tasks. In this video I will share with you some tips on how to avoid those monotonous tasks and actually finish your dream project.🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:15 - Hosting/Deploying02:13 - How to determine what is worth paying for06:05 - Taking advantage of free tiers08:58 - Taking advantage of completely free resources10:00 - What to do when your app grows11:12 - Guitar 🤘#ProjetctAdvice #WDS #WebDevelopment
This Node Debugger Trick Will Save You Hours Web Dev Simplified 2023-04-13 | 🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
How To Use ChatGPT To Get Hired Web Dev Simplified 2023-04-11 | Prompt Template: You are conducting an interview for a [Role/Job Title] role. I want you to ask me [Question Difficulty] [Topics/Languages] interview questions. Your response should contain the difficulty rating, but do not give me the answer or any other information. Start by asking me one question.Example Prompt: You are conducting an interview for a senior Front End developer role. I want you to ask me difficult React.js, HTML, CSS, and JavaScript interview questions. Your response should contain the difficulty rating, but do not give me the answer or any other information. Start by asking me one question.🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:37 - How to use the prompt07:00 - Example usage#ChatGPT #WDS #InterviewPrep
Learn React With This One Project Web Dev Simplified 2023-04-08 | React Simplified Course: reactsimplified.comLearning React is hard. There are so many concepts to learn and mindsets shifts that you need to do. That is why in this video I will be breaking down all the most important concepts you need to understand in React.📚 Materials/References:React Simplified Course: reactsimplified.comGitHub Code: github.com/WebDevSimplified/react-todo-listFREE React Hooks Simplified Course: courses.webdevsimplified.com/react-hooks-simplifiedES6 Modules Video: youtu.be/cRHQNNcYf6sES6 Modules Article: blog.webdevsimplified.com/2021-11/es6-modulesDestructoring Video: youtu.be/NIq3qLaHCIsDestructoring Article: blog.webdevsimplified.com/2020-08/destructuring-and-spreadShort Circuiting Video: youtube.com/shorts/8mvNzU7DpO4Short Circuiting Article: blog.webdevsimplified.com/2019-10/what-is-short-circuiting🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction01:10 - What Is React02:45 - Thinking In React06:07 - Todo List Project Setup10:45 - JSX15:30 - React State20:15 - Todos Logic30:45 - Break App Into Components38:15 - useEffect Hook#ReactJS #WDS #JavaScript
Learning React Is Like Making A Sandwich Web Dev Simplified 2023-04-06 | React Simplified Course: reactsimplified.com🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified#Shorts
The React Docs Are Wrong (If You Are Trying To Learn React) Web Dev Simplified 2023-04-04 | React Simplified Course: reactsimplified.comLearning React is hard enough as is, but with the docs telling you to start with Next.js it makes learning React even harder. In this video I talk about why I think the docs are wrong and what I would do instead if I was just learning React.📚 Materials/References:React Simplified Course: reactsimplified.comNew React Docs: https://react.devFREE React Hooks Simplified Course: courses.webdevsimplified.com/react-hooks-simplified🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:33 - React Docs Issue04:08 - NEW React Course06:00 - Free Alternatives#ReactJS #WDS #ReactDocs\
I Challenged An Expert Designer To A CSS Battle Web Dev Simplified 2023-04-01 | Ed’s Channel: youtube.com/@developedbyedFREE CSS Specificity Cheat Sheet: webdevsimplified.com/specificity-cheat-sheet.htmlLearn CSS Today Course: courses.webdevsimplified.com/learn-css-todayReact Simplified Course: reactsimplified.comEd is an incredible designer and developer, but is he an expert CSS developer as well? In this video I challenge Dev Ed to an incredibly fun CSS battle to decide once and for all who is the most gorgeous friend on the internet.📚 Materials/References:CSS Battle: https://cssbattle.dev/battle/22Ed’s Channel: youtube.com/@developedbyedFREE CSS Specificity Cheat Sheet: webdevsimplified.com/specificity-cheat-sheet.htmlLearn CSS Today Course: courses.webdevsimplified.com/learn-css-todayReact Simplified Course: reactsimplified.com🌎 Find Me Here:My Blog: blog.webdevsimplified.comMy Courses: courses.webdevsimplified.comPatreon: patreon.com/WebDevSimplifiedTwitter: twitter.com/DevSimplifiedDiscord: discord.gg/7StTjnRGitHub: github.com/WebDevSimplifiedCodePen: codepen.io/WebDevSimplified⏱️ Timestamps:00:00 - Introduction00:50 - Round 110:17 - Round 228:30 - Round 3#CSSBattle #WDS #DevEd
