HTML CSS and Javascript Website Design Tutorial - Beginner Project Fully Responsive 

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

took me over eight hours to watch an one and a half hour video

Watching a hand on tutorial helps much more. Watching this has given me a much more simplified teaching than most 10 hour "tutorials". Thank you so much for this!

For anyone who has cold feet about this tutorial, it is PERFECT! It's actually taught me more than some of the other beginner tutorials I've watched in the past!

Hey man, your tutorials are one of the better ones on here. Many people fail to actually explain what everything does, they just tell us what they're typing which is annoying. But you do tend to tell us what stuff does sometimes, it would be great if you did that more!

Dude this is way better than watching my udemy videos that drag so long it gets boring. I like how you just basically do everything and explain a little bit as you go. Of course i know some basics not everything but this makes so much more sense when i see you performing it all together instead of in sections to create a real functioning website.

So I decided to learn to code websites and this was the first tutorial I watched. You have no idea how good it feels to have a little website this beautiful after a few hours with literally no experience at all! You sir are amazing!! Thank you so much! :))

You are awesome! I love that you give clear explanations and open code resources. I tried to follow along other tutorials but they end up using other programs and don't provide any pictures from the app. Keep up the great work!!

Well done Brian! I'm learning and for me this is GOLD, i appreciate it mate. Thank you! wish you the best!

Please do more of these videos where you only use HTML CSS and JS. They're so great for beginners like me

I can't believe how could this video reach 71k views only!!! Keep up bro, as the others said you are the best out there and we all learn so much from you. I'm sure your channel will thrive soon. GOOD JOB 👌

This was amazing. I learnt so much from this. Thankfully I had VSC all set up with the extensions etc. Thanks for this video mate! :)

Thanks so much, this tutorial is good for people who went out of tutorial hell just now... things are much more clearer now, and not all over the place

Great video!! It's so easy to follow along and really informative. Thank you. 🙏

Beginner here and this is better than the UCF Coding Bootcamp I had to pay $1k for until I realized everything is on RU-vid! Keep it up and thank you!

Great tutorial. I'm catching back up with the rest of the world right now. Been working in print industry for too many years, but now i have a new job with web design opportunities.

Hey, nice tutorial ! I have been doing it from the beginning and I found it was easy to follow for a beginner. You also showed some basic html and css trick and it really helpful to me. Thanks ! 1:05:13 At this time, I think there should be also .services__card button:hover{ } part because it kinda feel weird as there is a button but seem unresponsive when hovered on it. Just a suggestion as a user 😅

This video is truly amazing what you taught us here is months worth of learning tutorials. Thank you!

I have to say that this is hands down one of the best tutorials on RU-vid. Thanks for sharing.🔥🔥🔥

🙌🌟 Website wizardry! This tutorial is a breath of fresh air in the coding world. Thanks, Brian Design! ✨

I just learned some new things here. Actually it was too hard to code, it is for a little more experienced beginners than definitely new beginners but I enjoyed to code while watching. :)

Great video as usual! A little side note for navbar__container in media - you only need padding 0 as it inherits all the rest by default... just to make the code a bit shorter, hope this makes sense ;)

Nice tutorial, but I think it is better that you also mention what the codes do. Like just a general definition of it so we can understand what each code do.

Learned how to build from this video and got some new skills. Thank you!

I watched the whole video , every single second of it , and I must say, you my friend just taught me more things in hour and a half, than my teacher could in 2 years.

Suddenly, everything started to make sense! Thank you.

Brian Your videos are absolutely fantastic. Unlike most web designers on the web your videos are Very well explained. My Grid does not work however, cant seem to know whats wrong

Really helpful tutorial. I used some of it to create my own website. Thanks a lot 😉

Subscribed bro! Literally spent 5 hours on this video because I was testing many things and learning instead of copy-pasting, now I feel free to sleep midnight but it was definitely worth it ! It would be better if you explain difficult/strange CSS things a little bit more! (Y)

This was amazingly well done. Thank you!!!

Thanks for the tutorial. Question, is it good practise to use more then one on the same page?

I am having a slight problem at 28:30 - I have written the code exactly and checked the whole styles.css for errors but there are none. But i can't get the drop menu bar to appear? Am i missing an extension or? Thanks

Thank god i found this channel last week.

I just subbed you today... Love your vids! Cant wait to binge them!!! You're awesome bro!

Amazing tutorial even after all this time! I was able to do everything correctly! Thanks so much 👍

This guy deserves MILLIONS of subscribers!

Good job, I've been learning a lot from your videos! Please keep posting these awesome tutorials!

You sir are the man thank you for breaking it down Barney style.

Awesome! I enjoyed watching every bit of it. Wonderful job.

OMG! Thank you so much, this tutorial is amazing, I use that to practice developing! Infinite thanks!!

Such a great tutorial! One thing, it would be great if you could explain each part of the code a little more. EG, why are you making the Mobile Menu transform: translate (%5, 20%). Knowing some of the context would really help for beginners. Big thanks.

Whatching the boring basic tutorials and what you perform using those codes boosts my understanding ❤❤🎉

Man, your designs are fcking awesome. I love the colors you use and generally your own style. I hope this channel will go far ;)

Thank you mate for this video. Throughtout the tutorial I made lots of mistakes in multiple times specially in the css, however I decided to fix it by myself to make it to the end of the video and let me tell you it helped me a lot... cheers !

This helped me a lot thanks, but how would you make the navbar active at the specific slide? (great video btw)

I just finished this 3rd day Yayyy Your details are impressive Thank you for this.

Hello from Bangladesh. Loved your videos, your work is really good n elegant. As a non-CSE background newbie, I hope you will create comprehensive javascript lessons (playlist) for beginners

im just blindly following it without understanding whats going on

The navbar_toggle .bar doesn’t work for me at 28:28 i copies ur code from github and still no please help

Thank you, I just finished it, and looks fab 😀!

It's really helpful, if you can show demo website same time you coding, and show what code mean, it will be perfect for new coders

shit i feel bad for people who haven't discoverd this hidden gem yet

Hi! Great content, love all the work you're doing. I was trying to follow along with your code here, but for some reason my mobile menu button isn't opening on click. When I comment out the "top" and "opacity" portions of the navbar__menu, I can see the menu open with the all the links just as your example showed. Any ideas as to why this might be happening? To note: I can hover on the mobile menu button but only on each of the 3 individual bars, it isn't really acting like a whole button.

just what i have been looking for online for a very long time thank you so much its better than paying for a course to teach you this,when i can just subscribe to brian designs on youtube, keep doing the good work

Yooooo. Dope tutorial. I'm legit learning a lot from you brother. Suggestion, and I don't know if you have already, but can you make a video breaking down this code{explain the attributes you use and maybe why you used them. What's considered good practices in webdev.. }. It would be a long one, I know, but I'm 1000% sure that thousands of us would benefit tremendously from a video like that. This video actually building the site, but then a separate video explaining everything. thanks again! love your content!

Great video! I seem to have an issue where I'm testing the site on the live server and then when I upload it to my web server some parts of my CSS seem to not apply. Any idea why this might occur? For example, I have made the navbar links to max-content because the text was wrapping, and it works fine in testing on the live server, but when I upload the site to my domain the text is wrapped even though the code is exactly the same as the live server in testing. I'm confused.

mobile menu not working

Thank you so much man! Great work.

Thank you so much you were so easy to follow and understand!!

This is a good tutorial but I wouldnt exactly say its for beginners. For people that know nothing about html and css, I can easily see them getting lost watching this video.

I've entered all the CSS and HTML correctly. I dont seem to be able to see the nav bar toggle icon at 28:30 . I have absolutely no idea why and I've troubleshooted so many things. Any popular bugs with it or is it my end still? FIXED: Had two closing divs.

in 32:47 if you want to get the navbar toggle (the 3 line for the mobile version) make sure to check is written like this in the index.html

With this pace and content..you'll rise and shine soon..i love everything about you

I'm glad found these tutorials.

I'm trying to follow along with this code, but at the #navbar__logo part in styles.css, my website doesn't show the "NEXT" in ff8177. Instead, it's just completely black right there. The lines in particular that make it disappear are -webkit-background-clip: text; and -moz-background-clip: text; (Is typed at 14:49). Does anyone know why this is happening?

Is it just me or I found out that vs code can auto fill

clean and neat! well done mate

You just gained one more sub ;) tysm i kinda suck at coding and this really helped

Decent tutorial, but not exactly targeted to total beginners who just finished HTML, CSS and JS courses. I understand this is like second language to you, but to us, we need many of the steps broken down/explained. You did stop to elaborate on some things, but overall skipped over the vast majority of the why's behind doing something. This is frustrating to us beginners because we're spending 1.5 hours of our time to learn the reason behind doing all of this and 80% or better is skipped right over. Sure, the video would be longer but it would be a much more thorough tutorial. This almost feels like watching someone solve a complex math equation, yet not learning enough from observing to be able to solve a similar equation on your own. Of course the majority of learning happens via trail and error. But, for absolute beginners who are overwhelmed, we want a thorough follow-along in order to see how it all connects together in practice. Since we can't remember everything from the courses we took, we really want to see the functionality and purpose of all the syntax used.

Thank you so much for getting me started!

I really appreciate the effort you put on this was far by the best tutorial ever i have come across.

This is a really great tutorial. easy to follow along for startups like myself. I struggling to get the toggle bar though, not sure where i made a mistake. but otherwise, having a blast learning on here.

Good job.Your content is clean and crisp. Would be happy if u add more complex reactjs/ vanillajs kinda projects like clones,e-commerce,social messaging etc. Also make a singe page react tutorial on navigation to different sections on the same page instead of using routers like u did in the previous tutorial.Also wishing u 1M subs soon🔥

Thank you so much - incredibly helpful!

This tutorial rocks! It cleared up alot of unkowns about website coding for me and it's all done in such a professional way!

This tutorial is amazing tysm!

It's really a good learning video for the beginners. Thanks, if its possible, I am goona mention you in my 1st project.

I love this video, I learned a lot from you :) Thanks a lot

Excellent video, I learned a lot during this project!

I love your teaching bro, you know how to break things down properly, please make more of js trainings and examples

Bro keep doing what you doing. You videos are incredible you are up there bro with best tutorials.

Came through! Thank you!!!

Im an on the fly learner so this was a perfect intro for me

It's amazing video. Really awesome... Everthings works!!! I awalys enjoy your videos. Congrats!!!

Hey, thanks a lot man I was able to learn a lot from this tutorial and this is actually the first time I have been able to build a responsive website and even the first time I didn't have any issue with the width, most of the time I usually hide the width but this tutorial was perfect. probably gonna do more tutorials with you. thanks a lot, man. Keep up the good work. For anyone who wants to practice building a website, I suggest y'all follow this tutorial, its step by step and you will get to learn a lot of things because he explains literally everything.

Awesome! You helped me out a lot!

This vid made me understand coding easily!!

Enjoyed this video very much. Thanks. Good Design

Very straight forward and helpful thank you

BRO, THANK YOU! BLESS YOUR SOUL!!

Thank you so mutch i learned alot from this video it took me 3days to understand most of the work but i finnaly got it.

There is interesting stuff taught here, I would like to learn all three HTML, CSS, and JAVA I have a tour company and have major issues with getting a proper website developed.

PERFECT TUTORIAL.

this is oneof the best videos you can find

this tutorial really helped me with the @media property

Thank you, this is awesome.

I'm having issues with my toggle bar apart from that this tutorial is flawless!!!!!

Thank you for this video, it truly is a lifesaver.

This is tge best way to teach Practically and it work well for me

Thank you for this amazing video.