HTML CSS JavaScript Project

Let's learn how to build an app with HTML, CSS and JavaScript from scratch.

0:00 Intro
1:01 HTML Basics
3:13 CSS Basics
10:50 Animal Card HTML
15:26 Animal Card CSS
26:28 JavaScript

Follow me for updates on new videos or projects:

[LearnWebCode]

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.

[silvioukoth]

You are one teacher who makes learning web development much easier for a person like me who try to do it alone. Thanks, buddy.

[Ubaid-]

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

[paulehrig]

Excellent Brad! You're very good at explaining your videos/projects! it's a pleasure to watch your work!

[web_mansoor]

Brad, you are truly remarkable! I derive immense pleasure from your teaching techniques.

[milenfrom]

Nice to see you're back in the game!

[davidemerson]

Nice quick and efficient tutorial Brad. Always fun to watch someone else's approach to building from scratch since most of these start boilerplate.

[genevevecortezmabalhin]

I like your way of teaching, Brad! Easy to comprehend and engaging. I have made my first WordPress theme with your tutorials, so big thanks to you! <3

[BlackStar]

Hi, Why do you use tags <a> for filters ? It's bad for simantic. You should use the <button> tag and it will prevent your code from using e.preventDefault() . When Google's crawler gets your page, it will get four <a> with href="#" - that's bad.

[KingOlaJohn]

Thanks so much for this wonderful lesson you are a great teacher body ❤

[absoluteinertia]

I have been following you since a long ago and the one thing that didn't changed till now is meowsalot and barksalot 😂

[김철수-de]

I'm waiting for the new Udemy course.

[stephenprice]

I thought I knew a lot until I watched this

[jayshree]

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

[Ace-pilm]

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.

[JohnSmith-bsym]

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!!

[iambhavinpatel]

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 YouTube but couldn't decide. Can you tell what to do based on current and future demand and trends of each?
Thank you so much! ❤

[jediampm]

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
- 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

[sherylboles]

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?

[terriblevidsforfriendseyesonly]

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?