Build a Responsive Hotel Website | HTML and CSS Tutorial

[@dfjama]

Julio you are the best HTML, CSS & JS instructor I have seen on KZbin. I completed The Rosa and Trevelix projects and I have learnt a lot. Both content and teaching style are simple, sleek to the point.

[@narcisussstoicone2275]

I can't seem to connect my Javascript file with HTML file even when I copy Julio word for word

[@CodingJourney]

Great tip on simplifying calculations when using rem units! html { font-size: 10px; } body { font-size: 1.6rem; } Wish I though of this earlier 🙂 Thank man, keep it up!!!

[@juliocodes]

Glad to help!

[@sadekurrahman4086]

Hey, brother I really didn't understand it. Why html and body has two different font sizes? Please make me understand.

[@CodingJourney]

@@sadekurrahman4086 Hey man! The rem unit is relative to the font-size of the root (or the html) element. In order to reset the root font-size (default is 16px) we have to do it in the html element. So, here we set the root font-size to 10px; If we don't specify font-size for the body, new default will be 10px, so if we want to set it back to 16px we set font-size to 1.6rem in the body. Hope this helps!

[@juliocodes]

@@sadekurrahman4086 Rem unit is relative to the root (html). By setting this to 10px then the calculations become easier (1.6rem = 16px). The body uses 1.6rem because it's the general font size I want unless I change it for other elements. But this font size could be anything.

[@sadekurrahman4086]

@@CodingJourney thanks brother.

[@publicspace234]

Thanks! This is a great walkthrough. Good explanations. Thanks for keeping the styling simple and pretty. Makes the functionality easier to understand. Good pacing. Much appreciated.

[@ManeelxAkosAdor]

Make it responsive is quite easy, difficult part is to come up with a nice and miningful design, a long with building a backend

[@coldestlin]

awesome tutorial demostrate the basic and essential part of responsive web design, especially the tricks that set the nav header by css @media query.

[@abusalehinrifat5516]

Always best... Keep gifting us these types of tutorials in this lockdown☺

[@barsaatmaaz8392]

one of the best instructor i have ever seen, lots of respect and love

[@juliocodes]

Thanks!

[@ln9808]

Thanks Julio! Looking forward for part 2

[@juliocodes]

Coming later today!

[@eduardofridryszewskisouza1359]

Man, I love your channel, it's amazing. Thanks for the teaching. Keep it up.

[@juliocodes]

I appreciate that!

[@masha-fr4bm]

thank you so much! this is a very good video, and i didn't know about those shortcuts

[@IsrafilGuseinov]

Hi, very useful tutorial. Thanks a lot! Keep it up! And do something like this more, please!

[@nayeemuddin4625]

Awesome!!!! So much interested to to do this with you. Thanks a lot for this one!!

[@juliocodes]

My pleasure!

[@snookems17]

Nice one. Can´t wait on part 2.

[@juliocodes]

Coming later today!

[@snookems17]

@@juliocodes cool. Thank you.

[@wilhelmusolejr4979]

Thank you!! I learned more in this video

[@ArtOfFun]

*It’s very perfectly channel! I so fun, that I finder this channel! Thank you!*

[@juliocodes]

Happy to hear that!

[@romelmadray6706]

great looking foward to the second one

[@juliocodes]

Coming later today!

[@yassiraziz7987]

Thank you bro you help me a lot in thus video keep gifting us. THANK YOU SO MUCH ❤❤❤

[@juliocodes]

Glad to hear that

[@carlosdapaixao]

Sensacional! Interessante projecto. Obrigado!

[@juliocodes]

Thanks!

[@onlydev23]

Hi Julio, Which IDE are you using? Nice tutorial by the way

[@LinhNguyen-tt1kj]

hi Julio! when starting to design the interface. I should design on mobie first or computer first

[@juliocodes]

Whichever you’re most comfortable with. I personally prefer mobile first since a lot of the initial styles one writes are already mobile friendly so makes no sense to change them for larger screens only to later change them back to mobile with media queries

[@LinhNguyen-uw7go]

Julio Codes thanks you so much.can i talk about with you on instagram

[@leslinks]

wonderful tutorial. looking forward to the next one. :-)

[@juliocodes]

Thanks, coming later today!

[@alyana982]

Sr plzz guide me ....what software u use in this video

[@michellewilliams1090]

Thanks so much for this project!

[@juliocodes]

You are so welcome!

[@SalmanKhan-pm2ng]

Carry on

[@hibritusta2642]

This is a very good tutorial

[@ahmedhameed5469]

anothere one to top ur work man ^^

[@juliocodes]

Appreciate that!

[@abhirukprashan221]

You're great! Bro ! !😎

[@frontendpaathshala6272]

Awesome Tutorial

[@juliocodes]

Glad you think so!

[@sakthivelganesan7310]

Oh You Are Good At Coding Too...

[@mounir101]

You're great! Thank you.

[@Coloring_Books_Zenthusiast]

Will do it, thank you.

[@hibritusta2642]

Hello, I just subscribed to your channel and I liked your videos very much. Can you do responsive web design for facebook? Can you prepare a tutorial on this? Facebook's homepage is very complex. I think it will be a good tutorial video.

[@harambeinhumanform]

bro next time you should use some familiar platforms cus kite at the moment is down to begin with

[@DuyTran-ss4lu]

Awesome

[@AndyDev404]

Good job!

[@juliocodes]

Thanks!

[@Coloring_Books_Zenthusiast]

In the Java script part of the video, why are adding the class(.menu-open) to header and not to the .nav-list (where the opacity and scale need to be changed)?

[@Kind123]

Thankyou Sir

[@Rvnlyz]

what software you are using?

[@ardatobelay5865]

You can build a template for the barbershop ?

[@mahmoudbayat4839]

we wait you on sunday

[@anuj7286]

I have a question like in safari browser doesn't support webp format images and ios has different input fields and select fields styles and don't i know how to fix it in css by using webkit-appreance:none and i put meta tags also to fix these problems so please make a video on how to fix issues in safari doesn't support.

[@Adoobie6]

I'm having the same problem, let me know if you find a solution.

[@djumalon1]

why after before and root is not highlighted in styles.css using sublime text

[@briandotes]

can i ask what plugin you are using coz i see u press tab and it will regenerate the html code.

[@juliocodes]

I'm using emmet, most modern text editors have this plugin built in.

[@northremembers5455]

Bro does this have backend in it??

[@ahmedhameed5469]

cool maxx ur awssomm

[@MadaraUchiha18190]

Which code editor is this? Is this sublime text editor? Pls reply🙁

[@masha-fr4bm]

webstorm

[@ItzJesse5]

Can you maybe make a tutorial on how to make a webshop with an option to pay?

[@juliocodes]

For the time being it's not likely. In the future when I'm able to dedicate more time to KZbin it's possible.

[@muratsemenov7294]

var header = document.querySelector('.header'); var hamburgerMenu = document.querySelector('.hamburger-menu'); hamburgerMenu.addEventListener('click', function () { header.classList.toggle('menu-open'); }) main.js:6 Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement. (main.js:6) See such an error, please tell me what the problem is?

[@lukelewis6394]

I'm using notepad++ can you please tell me what the css file is?

[@itsmo2312]

Can some one help me my Mac bar button on the top right won’t open.

[@northremembers5455]

Does this project has backend

[@04hkb]

Good day, the html file cant run. Once I clicked if from my files, it will load white and blank in chrome :((

[@thetremendousgallery1717]

Ive been struggling to open and work with "kite"

[@arathingzzz2308]

sir, my main.js is not working, how can I fix that? Thanks

[@nikhilrathod9319]

upload completed version of this project, i have to submit it urgently.

[@DiverseDose24]

What after submitting the form how the website holder will come to know about the users data submitted?

[@antonveber3541]

You need backend (server) part for it

[@dhunganaatish8643]

please provide the full code link of github

[@hamzailyas9053]

What Is This ? My Navbar Is Not Working Please Fix My Issue.

[@victoria-exito]

Hi Julio! the code is incomplete in Github

[@dhritimajumdar3397]

Javascript code is not working can you please help me

[@h.eduardolosoya9493]

soooo can someone explain what the CSS file is? and how can i get it?

[@LokirofRoriksted]

CSS is the designer tool of HTML. You can add styles there, like, background color, font size, add animations for buttons and mouse overs etc. Download the files in the description of the video (github link)

[@Amminnn]

Why did he set position: relative to the hamburger-menu here: 13:31 I have already tried to remove it and put it back to notice the difference and see what it really does but didn't help. I hope someone will reply soon, thanks a lot

[@juliocodes]

It’s mentioned on the video. Makes it so that I am able to use z-index which makes the hamburger menu stay on top of all the content on the site when active

[@Amminnn]

@@juliocodes I don't know how to thank you for all of this art You are a legend thanks to you

[@anushalekhireddy9732]

does it have database ?

[@deroqueaj5851]

Does this have admin page?

[@juliocodes]

No, it's just the ui

[@ayushkssk]

Can anyone give me complete source code...!?

[@lukelewis6394]

Is noone else's like his? Or is it just me? I'm using notepad++ and the style things are slightly working but not working the way his does.

[@itsmo2312]

Same

[@bishaladhikari8691]

but how we can book the room ?

[@dhunganaatish8643]

i really need full code link bro please help me

[@edwardsolang6071]

i've got some error ma javascript doesnt work when i click tht icon

[@toby7287]

did you manage to fix it? I got same problem.. Help

[@TheIEEE2011]

@@toby7287 same problem here

[@romelmadray6706]

Prefer the bite size coding exercises

[@ashishjha1783]

Can u provide me ur source code

[@itsmo2312]

Can some one please drop the codes

[@zainabjassim5129]

Language arabic please☹️

[@Sebastian-zs8cp]

sry trush you speak in one flow one line don't explain what happen in result not result explain. It are healthy sleeping pill.

[@Jet1323]

you need to stop using divs

[@victoria-exito]

Your Github is a fraude, it is incomplete...

[@juliocodes]

I never said there would be complete files there. Only files to get you started with the project. You’re not going to find the easy route here, if people truly want to learn they will have to write every single line of code

[@victoria-exito]

@@juliocodes u r a fraude confirmed with your own words! Faaaaaake

[@juliocodes]

@@victoria-exito No, you’re just lazy

[@victoria-exito]

@@juliocodes you are just selfish. You are mean because others were mean with you! selfish better videos with nice people that know how to SHARE KNOWLEDGE. FRAUDE