Build a Responsive Hotel Website | HTML and CSS Tutorial
HTML-код
- Опубликовано: 12 сен 2024
- In this video we will take a look at the first part of building a responsive hotel booking website using html and css. Stay tuned for part 2 coming soon.
☕ Buy me a coffee
Become a member and access the premium SCSS source code for my responsive layout templates for free.
🔗 www.buymeacoff...
🌐 Hostinger
Get affordable domain and web hosting service with Hostinger. Save up to 91%* off your entire order by using the link below and my coupon code.
🔗 hostinger.com/juliocodes
Discount code: JULIOCODES
🔔 Subscribe
🔗 bit.ly/2Q3pCiB
📱 Social Media
🔗 / juliocodes
📁 Assets & Resources
GitHub 🔗 github.com/jlo...
Travelix 🔗 colorlib.com/p...
⚠️ Disclaimer
This video description contains affiliate links, which means that if you purchase one of the products or click on certain links, I’ll receive a small commission.
#webdesign #responsivewebsite
Julio you are the best HTML, CSS & JS instructor I have seen on RUclips. I completed The Rosa and Trevelix projects and I have learnt a lot. Both content and teaching style are simple, sleek to the point.
I can't seem to connect my Javascript file with HTML file even when I copy Julio word for word
Make it responsive is quite easy, difficult part is to come up with a nice and miningful design, a long with building a backend
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!!!
Glad to help!
Hey, brother I really didn't understand it. Why html and body has two different font sizes? Please make me understand.
@@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!
@@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.
@@CodingJourney thanks brother.
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.
awesome tutorial demostrate the basic and essential part of responsive web design, especially the tricks that set the nav header by css @media query.
Always best... Keep gifting us these types of tutorials in this lockdown☺
*It’s very perfectly channel! I so fun, that I finder this channel! Thank you!*
Happy to hear that!
Hi, very useful tutorial. Thanks a lot! Keep it up! And do something like this more, please!
one of the best instructor i have ever seen, lots of respect and love
Thanks!
Carry on
Thanks Julio! Looking forward for part 2
Coming later today!
thank you so much! this is a very good video, and i didn't know about those shortcuts
Thank you!! I learned more in this video
Man, I love your channel, it's amazing. Thanks for the teaching. Keep it up.
I appreciate that!
Nice one. Can´t wait on part 2.
Coming later today!
@@juliocodes cool. Thank you.
Awesome!!!! So much interested to to do this with you. Thanks a lot for this one!!
My pleasure!
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)?
You're great! Bro ! !😎
great looking foward to the second one
Coming later today!
What Is This ? My Navbar Is Not Working Please Fix My Issue.
Hi Julio, Which IDE are you using? Nice tutorial by the way
wonderful tutorial. looking forward to the next one. :-)
Thanks, coming later today!
This is a very good tutorial
Sensacional! Interessante projecto. Obrigado!
Thanks!
anothere one to top ur work man ^^
Appreciate that!
Awesome Tutorial
Glad you think so!
Awesome
Good day, the html file cant run. Once I clicked if from my files, it will load white and blank in chrome :((
You're great! Thank you.
Will do it, thank you.
Oh You Are Good At Coding Too...
bro next time you should use some familiar platforms cus kite at the moment is down
to begin with
Thanks so much for this project!
You are so welcome!
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?
Thank you bro you help me a lot in thus video keep gifting us. THANK YOU SO MUCH ❤❤❤
Glad to hear that
Sr plzz guide me ....what software u use in this video
Good job!
Thanks!
why after before and root is not highlighted in styles.css using sublime text
Can some one help me my Mac bar button on the top right won’t open.
Thankyou Sir
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.
hi Julio! when starting to design the interface. I should design on mobie first or computer first
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
Julio Codes thanks you so much.can i talk about with you on instagram
cool maxx ur awssomm
Ive been struggling to open and work with "kite"
what software you are using?
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.
I'm having the same problem, let me know if you find a solution.
Hi Julio! the code is incomplete in Github
can i ask what plugin you are using coz i see u press tab and it will regenerate the html code.
I'm using emmet, most modern text editors have this plugin built in.
sir, my main.js is not working, how can I fix that? Thanks
we wait you on sunday
Bro does this have backend in it??
I'm using notepad++ can you please tell me what the css file is?
Javascript code is not working can you please help me
You can build a template for the barbershop ?
Does this project has backend
upload completed version of this project, i have to submit it urgently.
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.
Same
but how we can book the room ?
Which code editor is this? Is this sublime text editor?
Pls reply🙁
webstorm
What after submitting the form how the website holder will come to know about the users data submitted?
You need backend (server) part for it
Can you maybe make a tutorial on how to make a webshop with an option to pay?
For the time being it's not likely. In the future when I'm able to dedicate more time to RUclips it's possible.
does it have database
?
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
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
@@juliocodes I don't know how to thank you for all of this art
You are a legend thanks to you
please provide the full code link of github
soooo can someone explain what the CSS file is? and how can i get it?
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)
i really need full code link bro please help me
Can anyone give me complete source code...!?
i've got some error ma javascript doesnt work when i click tht icon
did you manage to fix it? I got same problem.. Help
@@toby7287 same problem here
Does this have admin page?
No, it's just the ui
Can some one please drop the codes
Can u provide me ur source code
Prefer the bite size coding exercises
Language arabic please☹️
sry trush you speak in one flow one line don't explain what happen in result not result explain. It are healthy sleeping pill.
you need to stop using divs
Your Github is a fraude, it is incomplete...
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
@@juliocodes u r a fraude confirmed with your own words! Faaaaaake
@@victoria-exito No, you’re just lazy
@@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