Thanks for watching; here are a few random notes after editing and posting this video: I'm not sure why I thought we needed to manually pass the click event object into our function like this: el.addEventListener("click", e => handleFilterClick(e)) The browser automatically passes the event object into your callback function for you; I'm so used to using React that I forgot how vanilla JS works and overcomplicated things; we can instead setup our code like this: el.addEventListener("click", handleFilterClick) For SEO and accessibility reasons I should have setup the filter navigation buttons to be "button" elements instead of "a" link elements. In our JavaScript; certain basic DOM actions that don't rely on the JSON we're fetching should/could be placed above the "await fetch" line so that they can run the millisecond the page is loaded instead of waiting for that network request to complete.
Brad! I am your student from udemy, I am enrolled in react, JavaScript, mySQL and html. I really enjoyed your coaching technique and thank you for the good things you deliver to us
Hi, Why do you use tags for filters ? It's bad for simantic. You should use the tag and it will prevent your code from using e.preventDefault() . When Google's crawler gets your page, it will get four with href="#" - that's bad.
Hi Sir, am from malaysia. I really love designing so I choosed my career as web development everything went smoothly and i learn many thing in my internship period also but I didn't get job in website development . But I did not lost my hope kept trying and started to take classes in html,css and javascript and also built the website using html and css, I have some experience in working Android Studio. So it was east a bit and morever I love to design and mainly am a creative person so I choosed this career laterly the project was cancelled due to covid and unemployed in IT field. I started to think and the web developent job also demand for the people from south and north india that was not wrong because they are skillful person. Right now am at RPA field. I literally don't like this field I came to this field because end of the I cannto sit at home till I get job in front end sir. But I still have faith that I would get job in front end because I really love to the core the web development and am always spend my weekend in front end development. Now sir i dont want rpa field and morever my other deparmtent is front end now the opportunity to request or getting job is near in front end. I really don't like RPA BECAUSE i really want to explore coding i just want to be clever in coding but rpa they don't use coding just drag and drop this is the things make me so so low for me. I knew RPA is easy but I cannot hide my pain and working in the field which I dont' t like. PLease sir help me I want to leanr the web development with react currently I know html css and javascript beginner level . Please suggest me what I need to now.? I am ready all set to built my small app or web .I really want to be a amaxing web developer am ready to face any challenges when am learning front end please sir help me to guide
Hi Brad, Brother I need your suggestion. I am a WordPress and PHP developer. I need to switch my career. So, I am thinking with which I should go for either Full Stack (JavaScript) or Python. I have seen so many videos on RU-vid but couldn't decide. Can you tell what to do based on current and future demand and trends of each? Thank you so much! ❤
Hi, I'm honored you'd trust me with such an important question ❤️. I don't think there's a "correct" answer though; you can have a lucrative and enjoyable career in just about any tech stack. What's the primary reason for wanting to switch careers away from WordPress and PHP? Not enjoying it? Are you freelance/contract or a salaried employee? There's the meme on Twitter that the PHP/Laravel devs are buying Lamborghinis (Taylor Otwell) so I think PHP is a great path. However, if I was giving advice to someone who wasn't already in the field I'd recommend JavaScript, just because you can get really really good at one language and it can be used everywhere for all scenarios, and the demand for it in job descriptions is huge. But if you're already in the PHP world I'd be curious why you want to switch.
@@LearnWebCode Hi Brad, Thank you so much for your reply! 😊 There is main and primary reason is I have heard that FAANG and big MNCs don't use PHP and I want to crack one of them. Even startups don't use PHP. And yes I am a salaried employee and I have also heard that no big salary package in PHP. This is the second reason. What is your opinion? Do let me know. Thanks! 👍
Hi Brad thanks for the video. Just few things: - thanks for the tip of live preview extension, which i will replace the live server with live preview for simple apps - for beginners i would be careful to introduce fetch with top level await. - in the card i would use flex instead of grid - for mobile instead of "100%" i would use "1fr" in cards - in modern browsers i would use "append" instead of "appendchild", since is more flexible - instead of creating a div element as wrapper i would create a "document.createDocumentFragment" - You are killing me by not using semantic tags. You could use header, nav, article in this project. Please start using semantic tags as good practice. I watch your laravel course as well with same problem. - A video about semantic tags would be great and would help you and others to write better html pages. Thanks
All great tips, thanks! I agree; top level await can be cool, but showing it to a beginner is asking for blocking trouble. I agree, the layout didn't have two axis's worth of complexity so Flex would have been easier and gotten the job done. Thanks for the tip on append vs appendChild; I've been using React so much lately that my vanilla DOM knowledge isn't where it could be. I think in years past I remember reading an article that Fragments actually performed slower than the Div approach; but I'm sure in modern browsers that's no longer the case. There was a time when I used header, nav, and article; I've fallen into a bad habit of not using them in recent tutorials because it seems like just one more thing to overwhelm the viewer. I should definitely create a video or series about accessibility basics.
@@LearnWebCode hi, writing / creating web page using semantic tag not just because of or only for accessibility but also because of readability for those who create the pages. Since you use h1 or ul , why not more descriptive tags since they are available to make life of devs also easy. When creating web pages we should sometimes tinkling like creating a normal word doc. About fragment, i mention because you are creating unnecessary element, it is like you react instead of created div just use empty element, more precise a short way for fragment. I also recommend a video about astrojs, their tutorial is great. ;)
Hey Brad!! I took an extended break from programming last year and started back up last month. I got through all the HTML & CSS content again and am now slowly working through your "Become a WordPress Developer: Unlocking Power With Code" course. Is that becoming too dated at this point? Or has there been a relatively recent update? Thanks!!
Hi John! Welcome back to programming! Thanks for the support! My WordPress Developer course received big updates in 2021 as well as 2022. It was updated to include plugin chapters, block type creation, and most recently Block Themes (or Full Site Editing) to fit with the newest features & paradigms in WordPress. I updated the NPM package list to the latest versions just a month or two ago; you can rest assured it's still current.
@@LearnWebCode No, thank YOU for all the amazing content!! I've been benefiting from your teaching on and off for years now. (And became quite familiar with sir Meowsalot and sir Barksalot lmao) It's great to know that the Wordpress course is still current. I intend to finish it this time for sure. I took a break when my wife gave birth to our daughter last year 😄 and just took me forever to find my way back.
for some reason my 'filter' does not work. It shows on the console "WebSocket is already in CLOSING or CLOSED state.". I followed your main.js. Any clue why is this happening? Overall, it's great tutorial.
Hi. Good request, it needs to be on my bucket list to put out a plain vanilla PHP & MySQL tutorial at some point. In the meantime, my channel has a couple "getting started with Laravel" videos that might be interesting.
Definitely! Check out this video on my RU-vid channel: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-korRfKTDoxE.html or for a longer follow-along I have a full-stack JS, Node.js & MongoDB course www.udemy.com/course/learn-javascript-full-stack-from-scratch/?referralCode=03AAAA96E039CF9DCBCE
For some reason, when I use type="module," the js does not work. If I remove that, then console.log the numbers, and I can see them. Do you know why I get an error with using the type module?
Thanks for more great content mate, I really appreciate it! Following this course everything is great for me until 16min, When I add to class "animal-card" display: grid; my content is nothing like yours (my H3 is aligned left, p aligned right, and then a and img underneath, aligned left) I have checked and checked that my code is the same, started from scratch and still this keeps happening?!? Do you have any suggestions on how I could troubleshoot this?
Hi, you're welcome; glad you like the video! Based on your description of what's happening, it sounds like maybe your HTML doesn't have the separate wrapper divs (one for the text column, one for the photo column) and so it's treating the direct children (h3, p, img) as the grid columns instead of their parent wrapper divs that I have in my HTML.
@@LearnWebCode You are a legend... Diagnosed my incompetence without even seeing my code🧐 I really appreciate you giving me your time and now having completed the video, helped me again along my learning journey. Thanks again
How to learn HTML CSS JavaScript in 1 hour: Step 1: Already know all the terminology, functions, and logic of each coding language. Step 2: Code the website.
I agree. I crammed too much into one hour so there wasn't enough time to actually teach and explain things and make concepts easier to understand. Here is a newer, easier to follow video I created with that in mind ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JkbSKtaWOeM.html
I hate clickbait titles. Can you learn these in one hour? You can learn SOMETHING about them in an hour. Clearly you are selling your course, which disproves your title. Please, clickbait does not work anymore, it only hurts your rep.
