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

Подписаться 112 тыс.

Просмотров 701 тыс.

50% 1

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

Опубликовано:

5 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 566

@briandesign 3 года назад

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

@castorio8733 3 года назад

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 3 года назад

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 2 года назад

@@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 2 года назад

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 2 года назад

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

@AngusGaukrogerDev 2 года назад

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

@iamkrishn 3 года назад

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

@johnny6881 2 года назад

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!

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

@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

@icyvfireball 2 года назад

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 2 года назад

there is no coding lol, just scripting for web

@lukelevitt 2 года назад

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.

@cmdaltctr 3 года назад

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.

@benjaminagbonedeso7659 2 года назад

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

@adrian2732 2 года назад

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

@Webtricker 2 года назад

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

@yonk-oh7227 3 года назад

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

@AlleyDev 3 года назад

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

@chrisduma Год назад

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

@justb3m184 3 года назад

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

@briandesign 3 года назад

Much appreciated!

@kopilkaiser8991 3 года назад

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.

@godfreyndiritu369 3 года назад

This channel is turning out to be one if my favourite

@samanyumittal5725 3 года назад

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

@caiqueribeiro7415 2 года назад

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

@NielsJensen1 2 года назад

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.

@BSingh-on4qr 10 месяцев назад

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

@liborzmelik8173 Год назад

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

@earljohnmasaga6440 3 года назад

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

@tommyatkins4806 3 года назад

So much value brother!! Legend!

@WebDesignTuts 2 года назад

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

@karenmep5572 3 года назад

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

@modaesth 3 года назад

This was honestly helpful mate. Thanks a lot.

@herbievance3173 3 года назад

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 3 года назад

Thanks Herbie!

@massihjafari6521 3 года назад

Definitely the amazing tutorial, i have ever seen.

@CollectRED 3 года назад

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 3 года назад

Awesome! Great to hear, thanks Eduardo!

@nem9187 Год назад

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

@scottscherzer6725 Год назад

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

@00el04 3 года назад

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

@briandesign 3 года назад

Appreciate it Edward!

@mehehehe. 2 года назад

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

@againstthestate 3 года назад

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

@ahmadk2050 2 года назад

777

@faridyufi5892 3 года назад

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

@theswedishlaxswe1469 2 года назад

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 2 года назад

javascript*

@discordbotdev-xj989 2 года назад

Thanks! This was an awesome course!

@victoriaigbonoba9308 3 года назад

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

@antofofo1 3 года назад

amazing work, thank you!!!

@olulesolomon9698 2 года назад

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

@Sara_Simon 3 года назад

Loving your channel!

@louiskelly5458 2 года назад

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

@tife8201 Год назад

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

@user-rb5kz4xv4l 2 года назад

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

@devserendipity3063 3 года назад

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

@ChristantoMaulanaAdityanugraha 2 года назад

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.

@Der_Garry 11 месяцев назад

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

@hanzhe5529 3 года назад

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 3 года назад

What a grateful you are :))

@abdulhannankhan7413 2 года назад

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

@FYF123 2 года назад

Thank you so much for the awesome tutorial.

@agustinacasarone2331 3 года назад

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

@mrparadox7955 3 года назад

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

@zainraza8521 3 года назад

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 2 года назад

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

@benwelcometols9999 2 года назад

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

@homebrew07 2 года назад

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

@bswill5077 3 года назад

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 3 года назад

Thanks! forsure I'll make more soon

@ahti6624 3 года назад

Thank you so much!

@ayushhya 3 месяца назад

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

@logeshhilalogu2091 Год назад

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

@isuruuyanage2 2 года назад

This is awesome. Watched the whole thing.

@abhinavg916 3 года назад

This channel is gonna explode soon with subs and likes!

@briandesign 3 года назад

Thanks Abhinav!

@devglobalstech4331 3 года назад

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

@mubindaghost 3 года назад

Yes

@Elizabeth_Calmau Год назад

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

@luizquerobin Год назад

Vídeo ótimo, projeto muito top

@subhamgupta2211 3 года назад

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

@tosifkankod1300 2 года назад

one of the best for beginners

@claytonstrickland8336 2 года назад

Very good JS, CSS refresher. Thanks.

@SabrielNix Год назад

Killer video thanks so much man!

@torrentirachristianbills.5942 3 года назад

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

@briandesign 3 года назад

I appreciate that! Thanks Bill!

@bene.the.noobster9700 3 года назад

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

@carlosabrahamduenasmontero8159 Год назад

Thank you for this amazing tutorial.

@sarahlindstedt374 Год назад

this is so helpful thank you!!!!

@chaiyootpunyasit316 2 года назад

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

@TheHilarioushuman 3 года назад

Loved this tutorial!

@briandesign 3 года назад

Thanks Brittany!

@ramonbullock6630 3 года назад

Looks cool! Love this piece!

@briandesign 3 года назад

Thanks Ramon!

@sorenayousefi 2 года назад

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

@inocdcosta1161 2 года назад

Great job bro 👌🏾

@yuvalshalom9106 2 года назад

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

@rozrutskiy 2 года назад

Hi Brian, excellent tutorial, thank you for preparing and sharing. Do you have a video on how to deploy a developed website? or can you recommend a tutorial for that?

@mubindaghost 3 года назад

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

@AvinashNair 3 года назад

Great work!

@parthgupta4850 3 года назад

Thanks for the tutorial !

@briandesign 3 года назад

Thanks!

@onuaugustine7276 9 месяцев назад

Thank you for this 🎉

@traphyper8711 3 года назад

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 3 года назад

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

@madaeyeprod634 2 года назад

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 !