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

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

Brian Your videos are absolutely fantastic. Unlike most web designers on the web your videos are Very well explained. Thank you a million for uploading this clear and precise web learning video. TO ANYONE READING THIS, THIS GUY IS THE VERY BEST.

Why when i make .main__btn: hover, blue color covers all the background page not the button itself?

This isn't for beginners
This only has 7k likes/ 300k views
figure it out :/

for whatever reason the .navbar__items { height: 80px;} property doesnt work as it should. it puts the navbar items near the bottom of the navbar, not near the center like what happens in the video. anyone have any ideas why? or how to fix?

how can i change the size of the image on home page (main__img)

Can anyone kindly explain why he is using display flex so many times. Thanks

hi nice work

i just had a doubt, that the icons showing for the following html and css files are not coming for me, does that interfere with the code response?

Got stuck on the CSS .navbar__menu not sure why our code is the same

52:27

the menu button doesnt show up

anyone having issues with the navbar logo?

dumb question LOL. once we have all this setup.. how do we link it to a domain?

Hi Brian, I love your video. Can you please tell me what program you are using to create your website. If you can answer that would be amazing!

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

Currently having trouble with z-index at around 23:33, as my classes within navbar__menu do not seem to move out of view after setting the z-index to -1?

Would this be characterized as static or a dynamic website?

great, now i have ms office activated, superb tutorial!!!

hello, thanks for this great video, however, you got me confused when you on the icon you clicked to activate the command , that made the whole .nav__links disappear at the 23:28 min of this video, if there is anyone that can help with this too, I would appreciate.

i followed all the tutorial as you did but when it come's navbar_menu it won't dispear can some one help pls

just watched the whole think, but i need more 😢

great explaination nice

the . tab enter not workingb for me i have to type out every thing any fixes?

Any idea why I can't get sign up to be centered like at 28:55?

More context:
For some reason, even though I have it all centered and exactly like how Brian has it, the button stretches all the way to the left. Wish I could post a pic, but it is not centered. I even messed with all the numbers (tried crazy adjustments to make sure I was tweaking the right values) and can't get it to be centered. Super strange!

I just can't get the dropdown to work, can anyone help me please? !?!?!?!?!?!?!? I redid the whole thing 3 or 4 times and I haven't managed it, when I click for the dropdown nothing happens ……

Thanks a lot for ur efforts, man! Your sharing and explanations are worth to see. Much appreciate this video. One issue that I got writing this code is that my navbar does not appear on top of the website when I fully open on my pc as well as social media icons don't at the bottom. They both just go on the right side, lol. maybe i missed smth.

Thank you so much ! something is wrong with my media version though. Can catch why ? drop down menu not really doing anything and the dropdown icon look too far to the left. Tried different things and no luck. ( beginner here ) :/

Great video, but I have one question.

How could you make the buttons fill with blue from right to left instead of left to right??
(Around 48min, '.main__btn:after')

Thanks in advance

this is great and has really help build my dads website so far but i have a couple of issued and wondered if anyone could help me please. 1. with the navbar I'm trying to use my dads logo so my own photo not the fa but i cant seem to get it on the navbar. 2. when doing the getting our photos my pictures aren't showing and they are in the background with transparent black over the front. same with most the writing and I cant get the 2 photos next to each other. if anyone could help it would be much appreciated as this is my first website as a 15 year and I want to build up a good portfolio as a web creator and designer. Many thanks, Billy

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

If this is genuinely aimed at a beginner, then there's definitely not enough explanation of what each element refers to. e.g. navbar, container, class, span, div etc. Yes this information can be found elsewhere, but if I'm going elsewhere that than defeats the purpose right? Just copying someone else's code isn't a great way to learn.

I installed LiveServer and I'm getting the 5500 port problem… Any help guys??

16:23

17:15

Under @media screen and (max-width: 960px) at line 173 changing margin to auto fixed alignment issues for me.

.button {
display: flex;

justify-content: center;

align-items: center;

width: 30%;

height: 70px;

margin: auto;
}

i love the video but if you can explain a little it would help

Is anyone else not getting the hamburger menu not popping up when they view the website in small mode? I get the mobile menu pop up automatically when I shrink the screen, but no button to collapse the menu in the top right corner.

Anyone else have the issue of no social media icons showing up? I have gone over the code and it seems to be correct…

Hey I know this is a pretty old video. But I really having a hard time getting my logo to be in the left corner as yours is mine is right next to the sign up button when in full screen.

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 😅

Excellent! Thank you for following my channel.

can you create a tutorial on how to actually upload the site to the internet pls?

My images are not showing up for the .services__card , does anyone have a solution?

Sweet

I can’t get the hamburger to display. Oof what am I doing wrong!

my navigation dropdown menu seems to be dropping down outside of my window so I can only see a fraction of it and I can't seem to figure out why

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