if you highlight some text in vscode, press CTRL + D to select recurring instances of that text so you can change variables faster when you copy and paste. saves a lot more time than you think
I think everybody would get confused with the intro. One of the reasons I love you is that you're always making identical tricks that others can never think of. Great!!!
🤣🤣🤣🤣🤣🤣🤣 Likewise here, I stood 🙆🏾♂️🙆🏾♂️🙆🏾♂️ double checking the channel title, wondering "TH-cam Why are you doing this to me!?". Sooo funny, thanks bro, those channels + "The Net Ninja" are really great. Keep up the good work. Greetings from Tanzania 🇹🇿
MAN! I love all your videos! You kinda help me learning how to program, how to design and how even to make some magic stuff! I love the fact that I found your channel, Ed ❤️
Bro I'm sure you know it already, but just in case you don't , alt+z will wrap all the code in vsc so you don't need to be messing around with the window size to show what you're doing when you are splitting the screen.
Amazing tutorial as always keep up the good work =). And btw way I think your channel is kinda underrated comparing to other web ed channels because your tutorials are just amazing to follow and the way you pack together learning and humor is just great. It really creates a nice, inspiring and chill learning atmosphere.
You're like the PewDiePie of coding (because accent - which may not be Swedish?...), except you are incredibly knowledgeable in your field and are very entertaining to listen to - I hope you become as well renown as Felix.
there will some situation 'style' null problem just change "const bubble = document.querySelectorAll('bubble');" to "const square = document.getElementsByClassName("square")[0];" hope it can help also thx Ed about this tutorial I learn a lot from you
You are so funny and best teacher. I have a full time job and trying my best to find some time to practice your tutorials. My goal for 2020 is to finish all of your videos by practicing. ❤
Nice video Ed! I recently ran into an error that embarassed me. Some of you may not have your bubble changing color correctly or not at all. That's because your gradientIndex is a string and you can't go across an array via a string. To solve this, juste parseInt your gradientIndex and that'll be perfect! Hope I helped some people out there :) PS : Use some border-radius to magnify your bubble and make it look more like a bubble
can help me please...what if i used ids instead of Class the lien gonna be more useful u know...i tried but it deasn't work...can u help me to fix it and make these id i really apprecialte ur help dude
I have exactly the same problem I used parseInt() and it's still not working the bubble isn't even showing, except I put a letter in the HTML, the color doesn't change and it doesn't attach to activeAnchor tried everything
You are such an amazing person and we also get always brand new unique content that attracts me to be a follower of you. Your way of teaching and amazing tutorial can quench my thirst of knowledge. Love you from core of my heart.
Im a new subscriber, been scrolling through your vids, I realized you've always been so fun to watchh. Sense of humor is on the roof. Hahahaha and content is 100%. This really helps bec i found myself really getting lazy learning javascript, like can we really learn javascript? Hahahaha. Thankyou so much!!
I get this error in the end! Could you please help me out ? Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at app.js:22 at Array.forEach () at IntersectionObserver.navCheck (app.js:18)
Great video, but i get this error in my JS for the "entries.forEach(entry =>" when i check the error in the inpsector console it says "Uncaught TypeError: Cannot set properties of undefined (setting 'background'). How do I go about correcting this errors ?
Thanks this two lines of code we don't have to write background-color of each section to the array. const colors = [] sections.forEach(section => colors.push(getComputedStyle(section).getPropertyValue('background')))
At around the 8:50 mark, why did that display: flex; on section didnt arrange the elements in row which is the default behaviour? Why did it do column? 🤔
I'm a beginner don't know a bit about js and my code is not working I don't know where I went wrong can anyone please paste the code here I really need this
"Write it into the comments below and I will be sure to...delete it." Always cracks me up. That being said, a simple age gate feature would be cool to do. I know it's probably more complex, but something that takes in a birth date, checks it against a year, and then sets a cookie and lets you into the site.
How is your windows computer set up for development? I use Mac for the bash terminal to push to github, and for easily installing gems for Ruby, but not sure how to do the same on windows. I've even tried running a VM of MacOS on windows, but didn't work. If you did anything special, could you please share setting up Windows for development?
Great tutorial, I have an off topic question for you. Do you use a number pad when coding? Or do you use a TKL keyboard? I'm trying to become faster when following along and wondering what's a better workflow, thanks!
Need a second pair of eyes to have a look at my page. Got all the code, no errors, just that my gradient variable doesn't get read and there's no intersection between two out of four sections. Help!
Hey Dev Ed! i got an error in console on chrome. the error is this Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') at app.js:17 at Array.forEach () at IntersectionObserver.navCheck (app.js:13) idk what to do the home and contacts page is working with its corresponding background gradient. but projects just shows nothing
The bubble doesn't work for me, i get the error "cannot read property 'style' of null" when we setProperty. not sure why the query selector cant see the bubble css
However, I have tried to do everything. How to do? could not ('[data-page=${className}']'); const activeAnchor=document.querySelector('[data-page=${className}]');
Hi Ed!? I'm kinda new and about to start a Ruby On Rails project, I've learnt a lot from piecing out and applying the lessons from you, much appreciation. If you could please demystify this as you've done for these WebDev languages... that would be so rad and highly appreciated
Intro Correction:: Web Dev Simplified:: "Hello everyone, In this video....". Traversy Media:: "Hey, what's going on guys. In this Video....." Though that intro gat me 😁😁😁😁😜
How do you make the page update everytime you make changes to the code without having to refresh it manually? Im quite new to this and i find web design interesting because of your videos 😁
hi i'm french is i'm starting html programming css js is i have a little problem I don't know how to manage to keep my navbar when I scroll and thank you
Thank you/ mulțumesc/ again and again, I messed up somewhere, have to go over the code line by line....is it possible/i know it is/ to get it on GitHub/it's probably there already/. again good job
Marvel: Avengers Infinity War is the most ambitious crossover franchise in human history.
Dev Ed: hold my beer.
so right
😂
Hold my keyboard
Hi if you like travellers video. visit my channel...
th-cam.com/video/9oGu_fdSHtE/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html
Traversy Ed Simplified is my favorite channel!
You are also one of a kind
you 3 are like the holy trinity of web dev tutorials
I followthese three big great channels
mine also
🤣🤣🤣🤣🤣🤣🤣🤣
This was your best intro buddy! Good job! 😂
Hi if you like travellers video. visit my channel...
th-cam.com/video/9oGu_fdSHtE/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html
Tbh your intro made my interest in web designing😂😂 . Knowledge and humour balanced as it should be
At first I thought you are a very unsympathetic but now that I understand your humor I love your videos.
if you highlight some text in vscode, press CTRL + D to select recurring instances of that text so you can change variables faster when you copy and paste. saves a lot more time than you think
I think everybody would get confused with the intro. One of the reasons I love you is that you're always making identical tricks that others can never think of. Great!!!
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Honestly, I thought TH-cam made a mistake. loool. You are so funny hero Happy new year
Happy new year!
@@developedbyed I was confused about the intro😁😂😂😂😂😂😂
🤣🤣🤣🤣🤣🤣🤣
Likewise here, I stood 🙆🏾♂️🙆🏾♂️🙆🏾♂️ double checking the channel title, wondering "TH-cam Why are you doing this to me!?".
Sooo funny, thanks bro, those channels + "The Net Ninja" are really great.
Keep up the good work.
Greetings from Tanzania 🇹🇿
I was about to report him to traversy
@@abdulkadirosman2816 hahahaha the same
I have exams in a few days, have to study shit and I can't stop watching your tutorials.
Gosh, this guys is so funny, I'm watching all of his videos in a row
MAN! I love all your videos!
You kinda help me learning how to program, how to design and how even to make some magic stuff!
I love the fact that I found your channel, Ed ❤️
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
" Make sure to write a comment, and I'll delete it." 😅😂 Your humour is getting just better and better. Dude, are you fine? 😍😄🤘🏻😂
estou amando suas aulas muito obrigado não entendia nada agora estou aprendendo .
Bro I'm sure you know it already, but just in case you don't , alt+z will wrap all the code in vsc so you don't need to be messing around with the window size to show what you're doing when you are splitting the screen.
I've just finished your html and css course. It was AMAZING! I can't wait to see The JavaScript course. Anyway, nice video Ed
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
hey Ed you know my name is Dev from India i love this channel means you are the only person who cares about audions
LOVE YOU!!!!
Dev Ed you are such a good entertainer. Can't wait to watch this video. Thank you as always for your hard work. It's appreciated!
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
I love your videos and they inspired me to create my own, they may not be as good as yours but I am getting there! Keep it up!
Amazing tutorial as always keep up the good work =).
And btw way I think your channel is kinda underrated comparing to other web ed channels because your tutorials are just amazing to follow and the way you pack together learning and humor is just great. It really creates a nice, inspiring and chill learning atmosphere.
Really creative stuff bro... I love your tutorials... They are not only educative but really fun... Love from Africa
You're like the PewDiePie of coding (because accent - which may not be Swedish?...), except you are incredibly knowledgeable in your field and are very entertaining to listen to - I hope you become as well renown as Felix.
"I'll make sure to delete it". LOL he is awesome 🥺
This comment isn't deleted yet 😂.
Thank you for the ❤️
there will some situation 'style' null problem
just change
"const bubble = document.querySelectorAll('bubble');" to "const square = document.getElementsByClassName("square")[0];"
hope it can help
also thx Ed about this tutorial I learn a lot from you
You are so funny and best teacher. I have a full time job and trying my best to find some time to practice your tutorials. My goal for 2020 is to finish all of your videos by practicing. ❤
1:32 now that's what I call giving 110%
Hey Dev use shortcut so that you can use two tab alongside. The shortcut is for windows is "windows key + right/ left arrow"
Nice video Ed! I recently ran into an error that embarassed me.
Some of you may not have your bubble changing color correctly or not at all.
That's because your gradientIndex is a string and you can't go across an array via a string.
To solve this, juste parseInt your gradientIndex and that'll be perfect!
Hope I helped some people out there :)
PS : Use some border-radius to magnify your bubble and make it look more like a bubble
can help me please...what if i used ids instead of Class the lien gonna be more useful u know...i tried but it deasn't work...can u help me to fix it and make these id i really apprecialte ur help dude
I have exactly the same problem I used parseInt() and it's still not working the bubble isn't even showing, except I put a letter in the HTML, the color doesn't change and it doesn't attach to activeAnchor tried everything
You are such an amazing person and we also get always brand new unique content that attracts me to be a follower of you. Your way of teaching and amazing tutorial can quench my thirst of knowledge. Love you from core of my heart.
it feels so great when u done some thing even like this simple project
thank's man
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Please don't ever quit TH-cam, love the humor : )
😂😂For a second I double checked the channel name if I have mistakenly clicked on traversy media tut 😂
Why you do this to me? 😪😂
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
Same. I went on my other tab and heard the intro. I thought it auto played into Brad and but the voice is different (Ed's) 😂😂
i usually skip ads, but for you man I let a few slip through on a daily basis
Love to watch this in the morning even if my brain is not ready.
how were you able to apply the hex code of your eyes to your shirt, looks amazing
Im a new subscriber, been scrolling through your vids, I realized you've always been so fun to watchh. Sense of humor is on the roof. Hahahaha and content is 100%. This really helps bec i found myself really getting lazy learning javascript, like can we really learn javascript? Hahahaha. Thankyou so much!!
I get this error in the end! Could you please help me out ?
Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
at app.js:22
at Array.forEach ()
at IntersectionObserver.navCheck (app.js:18)
I got the same error, did you solve it?
both of you the best for inspiration Dev brothers. I hope I see you together in one video, it will be fun.
youtube(onload,feelings)
function feelings()
{
console.log("You are awesome n love your style you explain every little thing thanks a lot man")
}
Excellent tutorial, thanks, now i need find more information about IntersectionObserver and getBoundingClientRect
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
I want more JavaScript tutorials from you Dev Ed
Your best intro yet!
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
1:08 *weaves (unknown) signs *
*Naruto!*
You won my heart there 😂😂😂
Looking forward for a JavaScript full project tutorial please.
Great video, but i get this error in my JS for the "entries.forEach(entry =>" when i check the error in the inpsector console it says "Uncaught TypeError: Cannot set properties of undefined (setting 'background'). How do I go about correcting this errors ?
Thanks this two lines of code we don't have to write background-color of each section to the array.
const colors = []
sections.forEach(section => colors.push(getComputedStyle(section).getPropertyValue('background')))
More JavaScript videos please I like your JavaScript videos if you can make more that would be awesome :)
Wow when Traversy's intro played I actually double-checked whether I had clicked on the wrong video LOL
At around the 8:50 mark, why did that display: flex; on section didnt arrange the elements in row which is the default behaviour? Why did it do column? 🤔
Ed this is so far your BEST INTRO ever
I'm a beginner don't know a bit about js and my code is not working I don't know where I went wrong can anyone please paste the code here I really need this
"Write it into the comments below and I will be sure to...delete it." Always cracks me up. That being said, a simple age gate feature would be cool to do. I know it's probably more complex, but something that takes in a birth date, checks it against a year, and then sets a cookie and lets you into the site.
How is your windows computer set up for development? I use Mac for the bash terminal to push to github, and for easily installing gems for Ruby, but not sure how to do the same on windows. I've even tried running a VM of MacOS on windows, but didn't work. If you did anything special, could you please share setting up Windows for development?
Tip for you : you can zoom inspect section with ctrl + + 😁
You are getting better and better at this TH-cam thing. 😉
0:02 😂😂😂❤
this intro 😂❤.. you got me buddy.😅
hahahahahaha my favorite moment
Great tutorial, I have an off topic question for you. Do you use a number pad when coding? Or do you use a TKL keyboard? I'm trying to become faster when following along and wondering what's a better workflow, thanks!
This is pretty neat but it breaks when you resize the screen
Dimitri, could you please elaborate on how would you make the nav li's change the font color to white when they are in focus?
If only I could like your videos multiple times
Dev im love in love with your channel , thank God i found you
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Need a second pair of eyes to have a look at my page. Got all the code, no errors, just that my gradient variable doesn't get read and there's no intersection between two out of four sections. Help!
doctor: Traversy Ed Simplified is not real, don't worry
me: 0:00
Nice video!! Can I ask how to make all the layout responsive?
Dev Ed, Brad Traversy and WDS? What is this? A crossover episode? Anyway great video as always.
Ed you're all the magic we need. Happy New Year!!!
1:01 I lost it when he yelled “NARUTO!” 😂
Yoooo! that Fort Minor "Remember the Name" reference made my day.
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Dude i hope u will going have millions subscriber very soon becoz ur video is like 💎 for me
Hey Dev Ed! i got an error in console on chrome. the error is this
Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
at app.js:17
at Array.forEach ()
at IntersectionObserver.navCheck (app.js:13)
idk what to do
the home and contacts page is working with its corresponding background gradient. but projects just shows nothing
I love your teaching man.
Thank you so much
Thanks for discovering IntersectionObserver object !
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
new variant.. thanks. I used the one with IDs
Hello sir
good work but for me
its displays an error at the level of:
const activeAnchor = document.querySelector ('[data-page = $ {className}]');
Mine is triggering the console.log(className) when the section enters AND exits, but in yours it appears to only trigger upon entry.
The bubble doesn't work for me, i get the error "cannot read property 'style' of null" when we setProperty. not sure why the query selector cant see the bubble css
While I was making a page I got stuck How to change background color when I hover mouse over a section or inside a card....?
Useful, Please do some videos for creating web applications with Angular 8 tutorial
Clear stuffs using Angular 8
However, I have tried to do everything.
How to do?
could not ('[data-page=${className}']');
const activeAnchor=document.querySelector('[data-page=${className}]');
1:10 now you are going nuts. But it so cool, I like being here on your channel
Hi Ed!? I'm kinda new and about to start a Ruby On Rails project, I've learnt a lot from piecing out and applying the lessons from you, much appreciation. If you could please demystify this as you've done for these WebDev languages... that would be so rad and highly appreciated
Please make a detailed video on this keyword in JS .
Traversy and Dev Ed are cool friends
Damn, i love your sense of humour
Make a video on Jr. Web developer portfolios guide , with live code explain
Intro Correction::
Web Dev Simplified:: "Hello everyone, In this video....".
Traversy Media:: "Hey, what's going on guys. In this Video....."
Though that intro gat me 😁😁😁😁😜
can we get full beginner course for JavaScript.
Hilarious video yet a great tutorial. Do you think you can please make a video on Webpack, Babel, Sass with hot loading?
Hi Dev Ed , Wanted to know if one can make a popcorn time like website for ebooks ?
Song references are an automatic like!
wow perfect tutorial. i found a lot of tricks in just one video thanks)
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
How do you make the page update everytime you make changes to the code without having to refresh it manually? Im quite new to this and i find web design interesting because of your videos 😁
We definitely need that collaboration.
You sir are looking great after that nice haircut 💇♂️
You are amazing ! Keep making such JS videos
hi i'm french is i'm starting html programming css js is i have a little problem
I don't know how to manage to keep my navbar when I scroll and thank you
Thank you/
mulțumesc/ again and again, I messed up somewhere, have to go over the code line by line....is it possible/i know it is/ to get it on GitHub/it's probably there already/. again good job
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Please add more JavaScript tutorials.
So i have a problem with making the words in navbar turn orange. Can anyone help me?
Remember the name Dev Ed 👍👍👍
Ed , pls do tutorials or videos on Django projects , btw your new LearnWebCode Intro is awesome