Get the source code here: www.codavilla.com/posts/html-css-and-javascript-website-with-smooth-scroll My favorite course to Learn how to code: v2.scrimba.com/?via=briandesign
broo i am facing problems...please help me.... remember the explore button....when ever i am scrolling the web page ...only explore button acts ...when scroll down or up the explore button overlaps the nav bar ..like you can se button above the nav bar...how to fix it!!!
@@thechef1190 had the same question, bu since the description of the video says "Easy beginner Javascript project that you can refactor and add your own design.", i guess you can use it as a foundation for your own web page (as long as you change the design in some way and don't just copy it 1:1?)
Hi, i finished the navbar to the dot of what you did, but the dropdown menu did not work. So i copied all the files provided to see the completed product, but the dropdown still does not open? any ideas?
sorry to be so off topic but does any of you know a trick to get back into an instagram account? I somehow forgot the account password. I would appreciate any tips you can offer me
If you are a total beginner, You may be able to follow along. But you absolutely will not understand the code at all. but then again this video will help you get an idea of what you need to learn. I followed a tutorial from this channel when I was a newbie, didn't understand anything; just blindly followed the instructor. but then I googled each of the things I didn't understand and did my research. now when I followed this tutorial, everything was making sense. now I understand every bit of it...
This video is particularly CRAZY good because you work with most of the major elements regarding web designs in only one project. Thanks for your hardwork, man.
I am about halfway done with the tutorial. To anyone reading this comment, You may be scared by how long the video is. Let me assure you, in coding, there is no such thing as fast and easy. I highly recommend this video because it is easy to follow along. I have almost no prior experience coding, and my website looks awesome. I would recommend trying to follow along with exactly what he is doing and pause often. Listen to what he says and try and understand what is happening. Even if you don't understand (because I don't) you will still be better of watching this and following along, than skipping this video. Awesome work Brian! (p.s... don't do this in one day. I am on day three and it's just really nice to see small changes each day, while not having to stress over much at one time.) Goodluck!
it was honestly a green flag for me that the video was longer, means that there will be good content and time dedicated to explaining the concepts not just presenting and moving on.
To be honest I thought this was a great video. I liked how things were explained in enough depth to know what’s going on but not overly complicate it. I dislike videos that show “how to do such and such” and literally whizz through without explaining much, just telling you what to type and where. You don’t learn that way. I only found the video because I needed to know how the scroll at the end was done (and already thinking how best to refactor the code for the else statements) but ended up watching more because the guy was actually good at explaining his methodology and I was interested to see how another dev would build a site like this. To those who say it goes to fast..UA-cam has the option to slow down the video! Will go check out the other videos on the channel now and sub. Thank you!
Brian! You are a saver sent by God to me. Your this video helped me to complete my assignment. Thank you so much. I will keep you in my good prayers for helping me to finish my assignment. Hopefully, I am expecting first class by building my own website on your fundamental ideas from this video. Apart from the assignment, there were many core fundamental ideas to learn from your video. CSS, HTML5 and JavaScript, all are clearer to me.
great video I just started learning this today, and im only 12 minutes in and can already say this video is better than others i have watched. You go the perfect speed and i love it!
Just had a brief idea about HTML and JS. Not CSS. But even after that I understood your tutorial and made my first responsive and amazing looking website! Thanks a ton Brian! 💯🔥
Your videos are amazing, man. They're the first real contact I ever had with programming and helped me a lot! You should do more HTML/CSS website tutorials, I've already done all the other ones lol
I like your video because its less than 30 minutes which means that you go through the steps one by one! Thank you for taking the time I know it’s alot of preparation for you to make this video for us.
I enjoyed this video. Easy to follow at a great pace. Saying everything you were coding helped a lot for me not to look at the video and just code while hearing what you are doing. Helped a lot. Thanks!
Simple, great tutorial to follow along. I am grateful for this as it is helping me develop a website for tutoring and learn programming at the same time
Wayyyy too far, I start to learn coding a few weeks, decided to make it by myself and been through a bunch of tutorials (even in french cause I'm a native french speaker) that couldn't make it attractive to me... also I'd like to say this is a first class tutorial. Well explained, each step looks logic and normal cause in fact, it is. Thanks for all, simple clear, accurate. I HIGHLY RECOMMAND !
Thank you so much for this great tutorial. I had finished python and wanted to get into JavaScript. This tutorial helped a lot, and I will surely watch more!
@@mzeedev it's wayyy different. i mean it goes down to your background in computers, your learning ability, and your ability to grasp the concept. for me, it took about a month to full master it, but only about a week of tinkering to just simply learn it, though at the time of learning i had already learned lua which gave me a kickstart. (don't learn lua, its bad) the most popular tutorial is only about four hours, it shouldn't take you too long to get a grasp on it.
Thanks for this excellent tutorial, it helps to skill up my javascript. Though when the code implemented, my low budget PC cant seemed to handle the performance. My website is actually lagging and bugs due to my CPU and RAM, but I had fun learning the web building. Appreciate it : )
I really appreciate what Brian is doing and helping many but I am trying to change carriers and this is not for a beginner. There are several things mentioned that people like me cannot understand and a detail explanation is not provided cause it is focused on people who have previous programing experience. For example: what is a "link" , "class", "navbar". Brain, I mean this with all due respect. You seem like a good teacher. May I request if you could put something together for people like me, cause there are thousands of people out there who are looking to change careers. Once again, thank you and I hope I did not sound disrespectful. your efforts are truly appreciated
Super great tutorial. I have already been inspired to create a new website based on the structure you created with a few other bells, e.g. link to a calculator on another site.
Thanks again for this practical tutorial. Best so far cause i learned lots of effects and i can apply it in real world. I also learned proper blending of colors using linear-gradient and the background-clip and fill color. Please do more tutorials with fade effect, slideeffects etc in core javascripts, css and html
Nice one Brian and thanks for this tutorial!I think it would be a liiiitle better for the beginners to slow just a lil bit,not because i cannot follow you along but because some things do need more time to be understood.I repeat,im talking from a beginners angle( 1 year ).Big up for the javascript part explanation,really so simply explained!Definitely added to my list, go on,personally id love to watch more tutorials like this!!
I really enjoyed building this project without having to concern myself with Bootstrap or any other CSS library. There actually is one thing I didn't like; how you hide the mobile nav by setting top position to -1000px. Instead, I would have loved if you'd have positioned the main nav as relative and the mobile nav absolute and then hide the display by setting the property to display, only toggling it on the active class. It's a great project once again, with the right color scheme. One I can show off
I'm new to this, but thought about the -1000px as well. I tried defining all the properties in .navbar__menu with display set to none, and then under .navbar__menu.active I just set display to grid. This gives me the toggle behavior, but no transition effect. How would I get a transition on the toggled elements?
Trying out this tutorial on my MacBook with VS code. at 17:09 time stamp you start doing #navbar__logo css unfortunately when I enter this into my script it doesn't display the Color icon on the navbar. If I put my cursor in the general area its suppose to be it does seem like its there. Its just not visible on the webpage when you open the live server. Would you happen to know why?? is there extensions I'm suppose to have that only works with the -webkit-background-clip:text; -moz-background-clip:text. because if i erase those two elements under #navbar__logo a colored box will appear just no text. Thanks for your time.
I know this junt fire Im giving the thumbs up before I even begin...I need a good decent somewhat high-quality website for an earnings platform, so I need one the website and two an auth flow...i can check number one off now 😎
Now i will be following this guy alone, i have lost more than three years because of following many channels and i think i will commit to only one channel and challenge myself to finish all his projects and repeat until i get comfortable with coding.
Thanks mate! Best advice is to just get inspiration from my projects and then try to create your own using your own designs and custom css. You can always learn something from someone, so I wouldn't limit yourself to just one resource, but definitely the best method is to just build a ton of projects and try to improve them each time
Thanks bro for the awesome tutorial! It really help me to understand HMTL CSS and JS. Now I am looking for any tutorial video to do with node.js and sqllite too.
Love the tutorial. It's awesome. one thing i noticed is that the hover animations at 1:03:51 just don't seem to work for some reason. Like the syntax was changed or something. When I looked it up online someone suggested writing out the code like this.... .main__btn a:hover {color: #fff} instead of .main__btn:hover {color #fff} and the hover animation for just that text works, but no matter what I try I can't get the animation that happens at exactly 1:03:50. Has anyone else also come across this in particular?
if you're a beginner, I suggest you watch a different(longer video) that goes more into depth. Great video though, but I'll have to come back to it after I learn some more html and css.
one tip try to keep the live server scrolled to the thing you are working so we can see the effects being taken while being coded, since without it you might have just as well places your code on the screen while you talk
Get the source code here:
www.codavilla.com/posts/html-css-and-javascript-website-with-smooth-scroll
My favorite course to Learn how to code: v2.scrimba.com/?via=briandesign
broo i am facing problems...please help me.... remember the explore button....when ever i am scrolling the web page ...only explore button acts ...when scroll down or up the explore button overlaps the nav bar ..like you can se button above the nav bar...how to fix it!!!
Dude, if I use your code for doing my website but I change so it fits mine, are the rights of my website yours?
@@thechef1190 had the same question, bu since the description of the video says "Easy beginner Javascript project that you can refactor and add your own design.", i guess you can use it as a foundation for your own web page (as long as you change the design in some way and don't just copy it 1:1?)
Hi, i finished the navbar to the dot of what you did, but the dropdown menu did not work. So i copied all the files provided to see the completed product, but the dropdown still does not open? any ideas?
sorry to be so off topic but does any of you know a trick to get back into an instagram account?
I somehow forgot the account password. I would appreciate any tips you can offer me
If you are a total beginner, You may be able to follow along. But you absolutely will not understand the code at all.
but then again this video will help you get an idea of what you need to learn.
I followed a tutorial from this channel when I was a newbie, didn't understand anything; just blindly followed the instructor. but then I googled each of the things I didn't understand and did my research. now when I followed this tutorial, everything was making sense. now I understand every bit of it...
This video is particularly CRAZY good because you work with most of the major elements regarding web designs in only one project. Thanks for your hardwork, man.
I am about halfway done with the tutorial. To anyone reading this comment,
You may be scared by how long the video is. Let me assure you, in coding, there is no such thing as fast and easy. I highly recommend this video because it is easy to follow along. I have almost no prior experience coding, and my website looks awesome. I would recommend trying to follow along with exactly what he is doing and pause often. Listen to what he says and try and understand what is happening. Even if you don't understand (because I don't) you will still be better of watching this and following along, than skipping this video. Awesome work Brian! (p.s... don't do this in one day. I am on day three and it's just really nice to see small changes each day, while not having to stress over much at one time.) Goodluck!
there is no coding lol, just scripting for web
For me, I copied the code down and I've been studying it to see how it works. I strongly suggest it to understand and memorize the code.
it was honestly a green flag for me that the video was longer, means that there will be good content and time dedicated to explaining the concepts not just presenting and moving on.
To be honest I thought this was a great video. I liked how things were explained in enough depth to know what’s going on but not overly complicate it. I dislike videos that show “how to do such and such” and literally whizz through without explaining much, just telling you what to type and where. You don’t learn that way.
I only found the video because I needed to know how the scroll at the end was done (and already thinking how best to refactor the code for the else statements) but ended up watching more because the guy was actually good at explaining his methodology and I was interested to see how another dev would build a site like this.
To those who say it goes to fast..UA-cam has the option to slow down the video!
Will go check out the other videos on the channel now and sub. Thank you!
Brian! You are a saver sent by God to me. Your this video helped me to complete my assignment. Thank you so much. I will keep you in my good prayers for helping me to finish my assignment. Hopefully, I am expecting first class by building my own website on your fundamental ideas from this video.
Apart from the assignment, there were many core fundamental ideas to learn from your video. CSS, HTML5 and JavaScript, all are clearer to me.
This channel is gonna explode soon with subs and likes!
Thanks Abhinav!
Very very true, once you do one mad full website with firebase and also admin panel maybe laravel
Yes
These are really great for when I don’t know what to do on a day but want to be productive
This channel has so many helpful tips, I try to help you out by not skipping the ads.
Appreciate it Edward!
great video I just started learning this today, and im only 12 minutes in and can already say this video is better than others i have watched. You go the perfect speed and i love it!
Thanks Herbie!
Just had a brief idea about HTML and JS. Not CSS. But even after that I understood your tutorial and made my first responsive and amazing looking website! Thanks a ton Brian! 💯🔥
I've watched hours and hours of tutorials on youtube but this video is way better than all of them combined
Thank you for all the shortcuts since I'm new to VS Code I had no idea how to do any. Love and appreciate the video my GUY!
You are an amazing teacher, dude. Thank you so much for holding our hands through this, and keep doing what you're doing!
Your videos are amazing, man. They're the first real contact I ever had with programming and helped me a lot! You should do more HTML/CSS website tutorials, I've already done all the other ones lol
I like your video because its less than 30 minutes which means that you go through the steps one by one! Thank you for taking the time I know it’s alot of preparation for you to make this video for us.
Thanks! Super helpful and professional video.
Thanks so much!
So Thankful rn, you saved my grade in school. Thank you a lot
from my heart i want to say that you made a pro website developer all credit goes to you. You are my lord!!
This channel is really great! Don't stop making more videos to help other developers. We're here we support Brian Design!
Much appreciated!
i have completed this omg this was crazy you really explained it well wow loved the video it took me 6 hours to complete ❤❤❤❤
This channel is turning out to be one if my favourite
I enjoyed this video. Easy to follow at a great pace. Saying everything you were coding helped a lot for me not to look at the video and just code while hearing what you are doing. Helped a lot. Thanks!
Awesome! Great to hear, thanks Eduardo!
@@briandesign I'm currently doing that, video in the background... just listening and writing code
My first real project using html css and java!
You are a great teacher and im glad i found this channel, now you have a new subscriber :D
javascript*
Completed over a few days! Thanks for this, coming from an embedded programming background I have much to learn so this was a good place to start
The first 1 minute of the video I knew this was gonna be good
I really appreciate you taking the time to make this tutorial.
777
Simple, great tutorial to follow along. I am grateful for this as it is helping me develop a website for tutoring and learn programming at the same time
Wayyyy too far, I start to learn coding a few weeks, decided to make it by myself and been through a bunch of tutorials (even in french cause I'm a native french speaker) that couldn't make it attractive to me... also I'd like to say this is a first class tutorial. Well explained, each step looks logic and normal cause in fact, it is. Thanks for all, simple clear, accurate. I HIGHLY RECOMMAND !
just finished my first project simply following your steps and learning more while doing so, 👍
I hope you make more vids like this . You deserve a million subs bro
I appreciate that! Thanks Bill!
When I saw what you did as the end product of your tutorial I knew it was something worth watching. Big thanks bro...awesome.
Thank you so much for this great tutorial. I had finished python and wanted to get into JavaScript. This tutorial helped a lot, and I will surely watch more!
Bro me too , I finished python now I'm learning js.
@@alliswell3828 how much time you take to learn pyton ??
@@mzeedev it's wayyy different. i mean it goes down to your background in computers, your learning ability, and your ability to grasp the concept. for me, it took about a month to full master it, but only about a week of tinkering to just simply learn it, though at the time of learning i had already learned lua which gave me a kickstart. (don't learn lua, its bad) the most popular tutorial is only about four hours, it shouldn't take you too long to get a grasp on it.
Thanks for giving such a simple website design using HTML & CSS with full responsive. This tutorial was very helpful for all.
Don't border watching if you are a total beginner
Great tutorial by the way
Thanks for this excellent tutorial, it helps to skill up my javascript. Though when the code implemented, my low budget PC cant seemed to handle the performance. My website is actually lagging and bugs due to my CPU and RAM, but I had fun learning the web building. Appreciate it : )
What a grateful you are :))
I really appreciate what Brian is doing and helping many but I am trying to change carriers and this is not for a beginner. There are several things mentioned that people like me cannot understand and a detail explanation is not provided cause it is focused on people who have previous programing experience. For example: what is a "link" , "class", "navbar". Brain, I mean this with all due respect. You seem like a good teacher. May I request if you could put something together for people like me, cause there are thousands of people out there who are looking to change careers. Once again, thank you and I hope I did not sound disrespectful. your efforts are truly appreciated
Exactly what i am thinking aswell
Thanks man, i cant thank you enough, but am watching ads till the end.
You are the best! Thanks
Great vid. Opened a PR for a small typo fix. Great stuff!
Thank you my man, if it wasn't for you I wouldn't have started
making videos on my own web deisgns.Thank you very much 😀😀
🔥🔥 i've learnt a lot of userful information. Thanks a bunch!
Super great tutorial. I have already been inspired to create a new website based on the structure you created with a few other bells, e.g. link to a calculator on another site.
This was honestly helpful mate. Thanks a lot.
Thanks again for this practical tutorial. Best so far cause i learned lots of effects and i can apply it in real world. I also learned proper blending of colors using linear-gradient and the background-clip and fill color. Please do more tutorials with fade effect, slideeffects etc in core javascripts, css and html
Thanks! forsure I'll make more soon
Omg this is great!!! I can't believe you just made me do such a beautiful thing n-n THANK YOU A LOT!!!!!!!!!!!!
This was an awesome video.. thank you Brian. Liked, subscribed, and going to watch more of your videos.. have a great day!
Can i just say Thankyou for the way you explained tNice tutorials it made super confident on the journey of making soft.
Thank you for your work. Starting my first project and this helped me a lot.
awesome stuff from this channel, keep it up bro!!!
Nice video!! I'm currently new in html, css and javascript and it help me a lot in my project!!
Awesome tutorial.This guy deserves 1 million sub 😍😍😍
I really love the video keep doing what you do mate!
He is best teacher 🤩👍🏼💞
Gracias, lo empecé ayer y lo acabe hoy. Ahora falta personalizarlo :3
Thank you so much Brian, learned a lot with you through this session!
Nice one Brian and thanks for this tutorial!I think it would be a liiiitle better for the beginners to slow just a lil bit,not because i cannot follow you along but because some things do need more time to be understood.I repeat,im talking from a beginners angle( 1 year ).Big up for the javascript part explanation,really so simply explained!Definitely added to my list, go on,personally id love to watch more tutorials like this!!
@考える人 you are right ,maybe i should just watch some parts again :)
This is awesome. Watched the whole thing.
Very good JS, CSS refresher. Thanks.
great work indeed. thanks sir for sharing this awesome design with us
I really enjoyed building this project without having to concern myself with Bootstrap or any other CSS library. There actually is one thing I didn't like; how you hide the mobile nav by setting top position to -1000px. Instead, I would have loved if you'd have positioned the main nav as relative and the mobile nav absolute and then hide the display by setting the property to display, only toggling it on the active class. It's a great project once again, with the right color scheme. One I can show off
I'm new to this, but thought about the -1000px as well. I tried defining all the properties in .navbar__menu with display set to none, and then under .navbar__menu.active I just set display to grid. This gives me the toggle behavior, but no transition effect. How would I get a transition on the toggled elements?
I solved it by using the visibility property.
Definitely the amazing tutorial, i have ever seen.
Loving your channel!
Why did the html shift @ 11:21 when you saved the html?
48:30 you didn't make a "highlight" class in html?
Thanks so much for this video!! It was super helpful ❤
Really really great tutorial.... learned a lot from it..... big up!!! :D
Glad to hear that!
Trying out this tutorial on my MacBook with VS code. at 17:09 time stamp you start doing #navbar__logo css unfortunately when I enter this into my script it doesn't display the Color icon on the navbar. If I put my cursor in the general area its suppose to be it does seem like its there. Its just not visible on the webpage when you open the live server. Would you happen to know why?? is there extensions I'm suppose to have that only works with the -webkit-background-clip:text; -moz-background-clip:text. because if i erase those two elements under #navbar__logo a colored box will appear just no text. Thanks for your time.
I can't see the COLOR on the nav logo please help
Great job bro 👌🏾
Hi.
At 1:04:15 where ".main__img--card" comes, it does not work for me with the icon. Does someone know how to fix it?
one of the best for beginners
I know this junt fire Im giving the thumbs up before I even begin...I need a good decent somewhat high-quality website for an earnings platform, so I need one the website and two an auth flow...i can check number one off now 😎
So much value brother!! Legend!
Really Great! Your a really great teacher!
Thanks!
Thank u ,it was so useful , i hope u make more projects with different ideas so we can Learn more .
Now i will be following this guy alone, i have lost more than three years because of following many channels and i think i will commit to only one channel and challenge myself to finish all his projects and repeat until i get comfortable with coding.
Thanks mate! Best advice is to just get inspiration from my projects and then try to create your own using your own designs and custom css. You can always learn something from someone, so I wouldn't limit yourself to just one resource, but definitely the best method is to just build a ton of projects and try to improve them each time
Thanks bro for the awesome tutorial! It really help me to understand HMTL CSS and JS. Now I am looking for any tutorial video to do with node.js and sqllite too.
Thankyou for video. Im a beginner and u gave lots of tips.
Love the tutorial. It's awesome.
one thing i noticed is that the hover animations at 1:03:51 just don't seem to work for some reason. Like the syntax was changed or something. When I looked it up online someone suggested writing out the code like this....
.main__btn a:hover {color: #fff}
instead of
.main__btn:hover {color #fff}
and the hover animation for just that text works, but no matter what I try I can't get the animation that happens at exactly 1:03:50.
Has anyone else also come across this in particular?
8:28 for windows: shift+alt+down arrow
Seriously I learned CSS in one week after practing this video
Killer video thanks so much man!
if you're a beginner, I suggest you watch a different(longer video) that goes more into depth. Great video though, but I'll have to come back to it after I learn some more html and css.
Nice! I am going to try to replicate this and add some personal concepts
*How to have that yellow followup that starts from a code and ends, line at **11:55**.*
one tip try to keep the live server scrolled to the thing you are working so we can see the effects being taken while being coded, since without it you might have just as well places your code on the screen while you talk
this video is insane good, thanks for de class, i love you
Thank you for this amazing tutorial.
Great Video! I got it to work!😃
Awesome!
Thank you so much and I love the design
It is easy to learn things on practice...
It's really help full for me buddy thank you so much❤️❤️
Great video bro Op it got recommended and I like the theme
32:42 Where does the trigram come from? I know its unicode but when did you type that in html because I dont see that.
Thanks for the tutorial !
Thanks!
Looks cool! Love this piece!
Thanks Ramon!
Thank you so much for the awesome tutorial.
Here watching this 2021...Nice tutorial 😻😻😻
I cant see my menu bar still, after declaring the " .navbar__toggle .bar{
display: block;
cursor:pointer;
}
helppp
Thanks! This was an awesome course!
This is so cool ❤️😎