HTML CSS Javascript Website Tutorial - Responsive Beginner JS Project with Smooth Scroll

Learn how to build a website using HTML, CSS, and Javascript in this beginner tutorial. The site is fully responsive and has a smooth scroll effect that highlights the navbar menu based on your position scrolled. Easy beginner Javascript project that you can refactor and add your own design.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Timeline:
0:00 What we are building
3:30 Open up VSCode
4:03 Editing our index.html file
4:42 Creating our Navbar
11:34 Styling our Navbar
35:04 Toggle Mobile Menu with Javascript
40:40 Creating Hero Section
42:40 Styling the Hero Section
50:25 Creating About Section
53:02 Styling About Section
1:14:26 Creating Services Section
1:26:38 Creating Sign up Section
1:29:35 Creating Footer Section
1:37:14 Styling Footer Section
1:46:18 Adding Javascript Smooth Scroll
Source Code
github.com/briancodex/html-cs...
Other HTML, CSS, Javascript Website Tutorial
• HTML CSS and Javascrip...
Top 10 VS Code Themes
• Top 10 VS Code Themes
Host your website for Free
• How to Host a Website ...

[@briandesign]

Get the source code here: www.codavilla.com/posts/html-css-and-javascript-website-with-smooth-scroll

[@castorio8733]

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]

Dude, if I use your code for doing my website but I change so it fits mine, are the rights of my website yours?

[@tobiask346]

@@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?)

[@tej2ni]

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?

[@mackgerardo4152]

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

[@bet0neiro]

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.

[@iamkrishn]

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

[@AlleyDev]

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..KZbin has the option to slow down the video! Will go check out the other videos on the channel now and sub. Thank you!

[@icyvfireball]

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!

[@59123594]

there is no coding lol, just scripting for web

[@lukelevitt]

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.

[@t.l.e.e.]

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.

[@bet0neiro]

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

[@kopilkaiser8991]

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.

[@cmdaltctr]

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.

[@johnny6881]

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!

[@herbievance3173]

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!

[@briandesign]

Thanks Herbie!

[@AngusGaukrogerDev]

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

[@justb3m184]

This channel is really great! Don't stop making more videos to help other developers. We're here we support Brian Design!

[@briandesign]

Much appreciated!

[@yonk-oh7227]

These are really great for when I don’t know what to do on a day but want to be productive

[@benjaminagbonedeso7659]

When I saw what you did as the end product of your tutorial I knew it was something worth watching. Big thanks bro...awesome.

[@00el04]

This channel has so many helpful tips, I try to help you out by not skipping the ads.

[@briandesign]

Appreciate it Edward!

[@adrian2732]

I've watched hours and hours of tutorials on youtube but this video is way better than all of them combined

[@Webtricker]

Thanks for giving such a simple website design using HTML & CSS with full responsive. This tutorial was very helpful for all.

[@godfreyndiritu369]

This channel is turning out to be one if my favourite

[@CollectRED]

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!

[@briandesign]

Awesome! Great to hear, thanks Eduardo!

[@nem9187]

@@briandesign I'm currently doing that, video in the background... just listening and writing code

[@theswedishlaxswe1469]

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

[@RiCKY-zt3tl]

javascript*

[@againstthestate]

I really appreciate you taking the time to make this tutorial.

[@ahmadk2050]

777

[@samanyumittal5725]

from my heart i want to say that you made a pro website developer all credit goes to you. You are my lord!!

[@hanzhe5529]

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

[@muhammednahhas9963]

What a grateful you are :))

[@bswill5077]

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

[@briandesign]

Thanks! forsure I'll make more soon

[@BSingh-on4qr]

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

[@modaesth]

This was honestly helpful mate. Thanks a lot.

[@chrisduma]

just finished my first project simply following your steps and learning more while doing so, 👍

[@zainraza8521]

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!

[@alliswell3828]

Bro me too , I finished python now I'm learning js.

[@mzeedev]

@@alliswell3828 how much time you take to learn pyton ??

[@homebrew07]

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

[@NielsJensen1]

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.

[@caiqueribeiro7415]

Thank you so much Brian, learned a lot with you through this session!

[@earljohnmasaga6440]

Nice video!! I'm currently new in html, css and javascript and it help me a lot in my project!!

[@tommyatkins4806]

So much value brother!! Legend!

[@abhinavg916]

This channel is gonna explode soon with subs and likes!

[@briandesign]

Thanks Abhinav!

[@devglobalstech4331]

Very very true, once you do one mad full website with firebase and also admin panel maybe laravel

[@mubindaghost]

Yes

[@torrentirachristianbills.5942]

I hope you make more vids like this . You deserve a million subs bro

[@briandesign]

I appreciate that! Thanks Bill!

[@WebDesignTuts]

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

[@liborzmelik8173]

Thank you for your work. Starting my first project and this helped me a lot.

[@massihjafari6521]

Definitely the amazing tutorial, i have ever seen.

[@olulesolomon9698]

I really love the video keep doing what you do mate!

[@faridyufi5892]

awesome stuff from this channel, keep it up bro!!!

[@whateverwhatever18]

Loving your channel!

[@agustinacasarone2331]

Omg this is great!!! I can't believe you just made me do such a beautiful thing n-n THANK YOU A LOT!!!!!!!!!!!!

[@bloket.]

The first 1 minute of the video I knew this was gonna be good

[@scottscherzer6725]

Great vid. Opened a PR for a small typo fix. Great stuff!

[@mrparadox7955]

Awesome tutorial.This guy deserves 1 million sub 😍😍😍

[@abdulhannankhan7413]

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

[@user-rb5kz4xv4l]

This was an awesome video.. thank you Brian. Liked, subscribed, and going to watch more of your videos.. have a great day!

[@karenmep5572]

Gracias, lo empecé ayer y lo acabe hoy. Ahora falta personalizarlo :3

[@Elizabeth_Calmau]

🔥🔥 i've learnt a lot of userful information. Thanks a bunch!

[@discordbotdev-xj989]

Thanks! This was an awesome course!

[@ramonbullock6630]

Looks cool! Love this piece!

[@briandesign]

Thanks Ramon!

[@Der_Garry]

So Thankful rn, you saved my grade in school. Thank you a lot

[@traphyper8711]

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

[@traphyper8711]

@考える人 you are right ,maybe i should just watch some parts again :)

[@isuruuyanage2]

This is awesome. Watched the whole thing.

[@ChristantoMaulanaAdityanugraha]

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.

[@tife8201]

Thanks so much for this video!! It was super helpful ❤

[@SabrielNix]

Killer video thanks so much man!

[@louiskelly5458]

great work indeed. thanks sir for sharing this awesome design with us

[@antofofo1]

amazing work, thank you!!!

[@thefourhourtalk]

i have completed this omg this was crazy you really explained it well wow loved the video it took me 6 hours to complete ❤❤❤❤

[@TheHilarioushuman]

Loved this tutorial!

[@briandesign]

Thanks Brittany!

[@FYF123]

Thank you so much for the awesome tutorial.

[@claytonstrickland8336]

Very good JS, CSS refresher. Thanks.

[@victoriaigbonoba9308]

Nice! I am going to try to replicate this and add some personal concepts

[@inocdcosta1161]

Great job bro 👌🏾

[@devserendipity3063]

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

[@parthgupta4850]

Thanks for the tutorial !

[@briandesign]

Thanks!

[@mubindaghost]

Great video bro Op it got recommended and I like the theme

[@olivermisik639]

Really really great tutorial.... learned a lot from it..... big up!!! :D

[@briandesign]

Glad to hear that!

[@logeshhilalogu2091]

Thank you so much and I love the design It is easy to learn things on practice...

[@carlosabrahamduenasmontero8159]

Thank you for this amazing tutorial.

[@kirstykirsty5706]

Subscribed. Thank you soooooooo much

[@DailyIntern]

Thanks man, i cant thank you enough, but am watching ads till the end.

[@briandesign]

You are the best! Thanks

[@AvinashNair]

Great work!

[@NIN674]

Really Great! Your a really great teacher!

[@briandesign]

Thanks!

[@subhamgupta2211]

It's really help full for me buddy thank you so much❤️❤️

[@yuvalshalom9106]

Thank you very much! I like this video and it helped me so much :)

[@onuaugustine7276]

Thank you for this 🎉

[@luffycdp2541]

Can i just say Thankyou for the way you explained tNice tutorials it made super confident on the journey of making soft.

[@ViirusR]

Your video the best thanks!!!

[@sorenayousefi]

Thank u ,it was so useful , i hope u make more projects with different ideas so we can Learn more .

[@sarahlindstedt374]

this is so helpful thank you!!!!

[@chaiyootpunyasit316]

Thankyou for video. Im a beginner and u gave lots of tips.

[@lololoxd54]

Looks so good!

[@briandesign]

Thanks! Yeah I gotta make a new one soon with react.

[@ahti6624]

Thank you so much!

[@joy_sam_raj]

Very Useful Bro :)

[@calebrowley7295]

Thanks! Super helpful and professional video.

[@briandesign]

Thanks so much!

[@tosifkankod1300]

one of the best for beginners

[@r4ulzito]

this video is insane good, thanks for de class, i love you

[@khalidsharker5110]

It was a great website overall. thanks

[@MMMMMM-kh2iy]

thank you so much for your help.

[@antemeridiem5884]

Thanks man I love you

[@bene.the.noobster9700]

thanks for this it will sure help me and ideas to build a portfolio

[@rahilmokashi3277]

Thanks man really helped me

[@briandesign]

Glad to hear it

[@D.Dee_]

This is so cool ❤️😎

[@Ryan-py7xx]

Great Video! I got it to work!😃

[@briandesign]

Awesome!

[@yalord5378]

thanks man, you're a great tutor

[@briandesign]

Thanks!

[@yousafwazir286]

Thank you so much your a life saver

[@ndukesam4043]

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

[@moritz3185]

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?

[@moritz3185]

I solved it by using the visibility property.

[@davidmanyasa5848]

I enjoyed the class.Thank

[@briandesign]

Thanks David

[@atufashamsi3565]

It's amazing 👏 👏