5 HTML, CSS & JS Mini Projects - Scroll Animation, Rotating Navigation, Drag Events, etc

5 projects from my 50 Projects In 50 Days course on Udemy. These projects are meant to sharpen your CSS skills and help you work with the DOM using JavaScript.
FULL COURSE: $9.99 Promo Link (Only valid for 5 days)
www.udemy.com/course/50-proje...
All courses:
traversymedia.com
Timestamps:
0:00 - Intro
2:00 - Scroll Animation Project
16:13 - Rotating Navigation Project
40:40 - Login Input Wave
59:38 - Animated 3D Boxes Project
1:27:12 - Hoverboard Project

[@sadique_x_]

I got the course some days ago and i must say it has really upped my css and js game

[@dammyola]

@♜ Pinned by Traversy Media Scam

[@lakshyarajdash]

Mind blowing projects by Brad. I like them. I also suggested some of my friends and after seeing the powers of javascript they were like 😲😲😲.

[@LunaSmithArt]

Great course - love the mini projects :)

[@paulthomas1052]

Another great tutorial - nice pace and easy to follow.

[@AsaAlexa]

the best teacher i've ever seen

[@fishinghunter4030]

Hey Brad, I purchased the Udemy course when this video came out. Just finished the course and I learned a lot about javascript. Thanks

[@OpenJavaScript]

Great practice projects!

[@bazdarinothebizier9085]

Glad to see you back in business 😀

[@digwillhachi]

that nav is amazing, never seen that before. Im definitely stealing it for some future project lol.

[@FarhanAli-to3ku]

Great practice for us to improve our CSS and JavaScript logics

[@BetYouHateMeNow]

Man if you teach like this in your courses, you have seduced me into buying. Great explanations.

[@johannesperez9548]

Love this! Thanks Brad :)

[@yavergazi]

thank you Brad, you are truly Teacher

[@muhammadidrees6650]

Thanks Brad, still waiting for Angular advance project please :)

[@eduar2tc904]

Thanks from Mexico

[@mtranchi]

great content, thanks!

[@goitomabebe]

Thank you so much for all the help full videos u make

[@wesleyowen904]

Hey Brad I was wondering if you could do a full stack app in flutter I've been trying to learn it and I've watched your videos and you explain things to where I can understand.. remember to put trailing cammas in your code to format it correctly

[@ibrahimsallieukamara517]

Great toturial

[@devchabek8728]

Thanks you for your vidéo !

[@bruktawitwolde9382]

Men you r awesome !!

[@mahmadmaqbool5038]

Awesome 😎

[@usrehman5046]

perfect practice session

[@usrehman5046]

@♜ Pinned by Traversy Media yeah ?

[@hamza_Techy]

Great!

[@kwizerasinapy5332]

Great, Nice one Kabisa👌, Thank you.

[@kwizerasinapy5332]

@♜ Pinned by Traversy Media I wish I get you email then I ask you some thing concerning the training courses

[@benfrese3573]

+2 years into web development, prolly going to buy this course to fill some gaps.

[@ibizawavey8630]

still no job? or?

[@Channel-iu6de]

Just bought it :P

[@AGUNGKAYA]

Waiting 50 angular projects too Sir. Nice video!

[@Eldalion99999]

why would you torture yourself with angular good sir

[@AGUNGKAYA]

@@Eldalion99999 just like the logo of angular, like my initial name :D

[@Loki_Dokie]

Funny how things show up when you need them, almost done with the modern JS course and was wondering what to build before I move to react, thanks Brad!

[@hanslumbridge5349]

When the student is ready the teacher will appear

[@Loki_Dokie]

@@hanslumbridge5349 Indeed

[@hmike54]

How did you go about getting the modern JS course? Can i have some materials shared from you to me via WhatsApp?

[@Loki_Dokie]

@@hmike54 I bought it and no im not giving you anything

[@hmike54]

@@Loki_Dokie okay fine then!! Thanks

[@tiffanyclark146]

I like watching your video and it's good to see you back. Can you also do more clone videos? how do we send you a direct message on here? i don't see the option to send you a message. Is twitter better? Keep up the great work! thank you for this video.

[@jagadeeshkj594]

Hoverboard is cool

[@dimasnytin]

Nice good 😁😁🥳🥳

[@musicmasala2391]

Please make a video series on data structures and algorithms in javascript.....(commenting on your newer video to get your attention)

[@kingdavid4577]

Hi Brad How do I get the index.html path to show at the top of my page like yours?

[@lonecoder4459]

Hi Brad, Which screen recorder are you using for mac?

[@maryamsabzalipour8011]

Thank you so much Brad but just one question, In the first project how we calculate the triggerBottom? I mean how does the expression "window.innerHeight / 5 × 4" work? Where are these numbers "5 and 4" coming from?

[@odiljonsobirov6140]

I've same problem as yours

[@juanrebolledo8123]

Copy and a little modified paste from a comment below: "when the top of the box is within the 80% (4/5 = 0.8) of the viewport height we add the show class to the box."

[@maryamsabzalipour8011]

@@juanrebolledo8123 thanks a lot 🙏

[@diegovallenilla8362]

@@juanrebolledo8123 Wouldn't it work the same if we put window.innerheight x 0.8? Genuinely asking

[@juanrebolledo8123]

@@diegovallenilla8362 I haven't tested it but It stands to reason that it would work the same.

[@aniketkhare8635]

Can you make a video in which you combine all of the stuff so that it looks really cool to watch

[@hmike54]

@♜ Pinned by John HoweII uhm

[@ericbashir7275]

Love it!

[@ericbashir7275]

@♜ Pinned by Traversy Media scammer

[@ericbashir7275]

@♜ Pinned by Traversy Media scammer

[@odiljonsobirov6140]

Hey Brad. Where are the sources that you used? Even you did not put links in the description

[@thegoat2936]

Hello Traversy - Hello guys - I hope u re fine. How can I create a tracking system with follow code in PHP7 (no framework) PHP, plz

[@kimayapanash8998]

I wanna animate just one time when i scroll not everytime How do i do that?

[@mikemawson82]

Hey Brad, I've been trying to purchase your freelance mastery course but it will not work? Is it because I'm in Canada? Everything is filled out properly, and when I click to purchase it just scroll halfway up and will not allow me to purchase. I've tried going to teachable and PayPal but it will not work. Been like this for a few days.

[@thatsenam9183]

Please create a course based on leetcode problem explanation

[@jeremyhorne6244]

I like the rotating menu/container however it's poor UI and I never use the burger menu on the home page.

[@axelprena2352]

Hey Brad i just purchased the corse of 50 days, and did not get no where.

[@peacekiki]

The font used on the css...where do I download it from?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@kingdavid4577]

Hi Brad I have copied everything you've done in this tutorial, somehow my stylesheet has no effect on the outcome. Nothing changes on the html page. I'm stressed 😉 Please assist me. Maybe there are settings in my web chrome browser that needs to be set? TIA

[@pranitagandhi889]

is your style sheet linked on your html page? i.e link rel="stylesheet" href= "style.css" it needs to be linked in order for the styling to be applied.

[@kingdavid4577]

@@pranitagandhi889 thanks for the feedback. Yes it is linked. I have duplicated everything Brad shared in the video, but still have this issue.

[@milanbuli]

Why divide with 5 and multiply by 4? First project

[@fatfooodie]

basically when the top of the box is within the 80%(4/5) of the viewport height we add the show class to the box.

[@milanbuli]

@@fatfooodie Thanks!

[@hmike54]

@@fatfooodie i wish i understood what you just explained 😔 Sadly i care for more explanation if you don't mind

[@tallysingh1366]

The course is full price!? It's the 5th day

[@Maccelerate]

Hey Traversy, there is a scammer/spambot impersonating you and your channel in the comments. Their name is "pinned by Traversy Media"

[@akashmudgal3718]

First! Really appreciate you bringing this awesome content!

[@hmike54]

Hey brad! I would love to have my messages delivered to you directly Was thinking how to make this project work on all devices with same characteristics

[@tonybp]

Is it true you're revamping your HTML & CSS course? If so, when is the release date?

[@tonybp]

@♜ Pinned by Traversy Media Tell your mom to message me ASAP bot.

[@vinaypatil8009]

Please sir bring 1 big resume ready project on Html css Javascript React And MERN stack Only 1 big resume ready project with above mentioned tech. This will be great help for beginners

[@aniketkhare8635]

Yes for this I would say "+1"

[@axelprena2352]

my card was charget $9.99, but i did not get no link to go to.

[@dianaalvarez8282]

Today is day 5 but promo link is showing full price??

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@holcombdesigndevelopment2337]

Is anyone else having problems with the rotating nav menu? I have tried this code and code from several other versions of this from all over and none of them will actually rotate the page.

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️..

[@Richardpuls]

Exactly

[@Richardpuls]

Am confused

[@jlambert12013]

Brad, is there a reason you have never done a Swift Tutorial? Is that programming language a waste of time?

[@sumitsharma6738]

Bro what about the SpaceX project

[@sumitsharma6738]

English brother

[@sheebam2832]

Hi my script is not running ?

[@ztcanada_1]

Helpline 📲📩 QUESTIONS CAN COME IN☝️⬆️ ⬆️...

[@mohammadaamir9778]

Am facing the same issue

[@dakshsinghrathore9584]

It is happening because most probably you have not added the script tag inside the body tag(bottom of it).

[@OmerYALTIRIK]

Can you join the video with english subtitles?

[@Bond58]

The code has expired and this is the 5th day

[@appleid3223]

What’s up

[@mofe620]

What is this gold 💰

[@littlebrit]

I don't want to be algo expert and will never want to be algo expert. Please stop asking me everyday.

[@greenshaheen6716]

HTML CSS :)

[@alifhasanshahOfficial]

Why you don't make a updated video based on node js , mongodb, graphql etc . ?

[@FakeMister]

First!

[@adivmt]

First

[@cubedev4838]

Brad become more lazy now :)

[@albarajas142]

looks like you had stuff already added in the css folder so not for beginners.

[@mariomeza3514]

Hey do you have another link to your discord server?