How to Build Travel Website From Scratch Using HTML CSS JavaScript
HTML-код
- Опубликовано: 5 июн 2024
- Figma UI: www.patreon.com/posts/traveli...
Source code: www.patreon.com/posts/traveli...
Hello my Friends, Whats going on.
Today I came up with a new project tutorial for you.
how to build Travel website, and we gonna make it using html css javascript.
This website have many features, that we gonna make from scratch.
HI 👋
I'm Sadee(web dev)
In this channel, I make videos about the Complete Responsive website.
You can check out my channel 👇
📺 My Channel: / @codewithsadee
🔔 Subscribe: / @codewithsadee
🔗 Starter file
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Download the starter file to practice:drive.google.com/file/d/1Zuyz...
⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo & Project initial
10:56 - Preloader
19:05 - Header
52:25 - Hero section
1:10:38 - Service section
1:20:08 - Destination section
1:37:27 - Experience section
1:46:18 - Gallery section
1:50:40 - CTA section
1:55:53 - Footer section
2:15:09 - Media queries
💜💜 PATREON BUDDIES 💜💜
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Many thanks to our lovely Patreons (from / codewithsadee ) who support us every month and encouraged us to make this video:
Danish Khan, Jose Galvez, Kesu Endalkachew, vagdrak, Frank GP Systems, Stan Price, Tin Tran
👍 Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: / codewithsadee
Github: github.com/codewithsadee
Facebook: / codewithsadeefan
Instagram: / codewithsadee
⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use
#codewithsadee
#responsivewebsite
#travelwebsite
man dude wtf , i am just 10 min into the video and i can already tell the journey of searching the best tutorial ends here, this is the quality , you will soon be one of the top Developer RUclipsrs believe it !
I'm not the best developer 😁
but I'm really glad, It helps you ❤
Where is the part of Javascript dude
bhai lambi mat kara kar tujhe coding karna ati nahi ha or vice to bilkul hi bekar ha chal nikal tera account hack karata ho sabar@@codewithsadee
I have followed a few of your video's now and enjoy following along. So nice to have voice over as now I no longer have to read everything you type and can just listen 👍
Thank you so much!
This was really helpful Sadee. Thank you so much!
You're so welcome!
thank you man. as usual. awesome.
This is insane, Finally i got expected tutorial ☺️☺️ thank u sir.....
thank you so much, loved the clean code a the good design
Thank you Sadee.
Thank you Sadee! 👍👍👍
You're most welcome, sanjay! ❤
Hi Sadee first of all u r such an HUGEEE insipiration and tutor for me I learned a lot . Bro I just wanted to say plz plz plz give the git repo link with live website link in the description as u used to give earlier cuz it really helped me a lot I just open your live website bookmark it and start copying it as my practice project. Thanks☺
First time i finished a RUclips tutorial project. Feels good.
Well done!
Great content Sadee bhai. Make a video on the theme you use, extensions and Keyboard you use.❤
I love this account, always seem to learn something new with this account
Glad to hear that ❤
Amazing video...please make such design videos with MERN stack technologies.....Lots of love and good wishes brother from India
Its more usefull when using audio in the video
it so helpful thank you
LOVE U SIR JUST MAKE THIS STYLE TEACHING AND KEEP MAKIN MODERN WEBSITE LIKE THIS I'M A FREELANCER I GOT HELP FROM VIDEOS TY.
I can't wait bro plz upload your videos
Thank you to start teaching with voice over! that is really helpful!
What is the first video that you started with voice over?
Finally some voice effects❤️
Thanks
I've been waiting for you to speak 🎉
very good
Great Presentation Brother👍👍
Thank you so much brother ❤
Good.
Thank you very much for adding narration, turn it up a little more volume
okay I'll make sure it, thanks 😊
Love your channel. For when a course? :)
wooo man, are you allowed to post such good video tutorial on RUclips?? Thanks brother
You are always great...
Thanks a lot
*THUMBS UP*!!
Thanks!!!
Welcome!
Thanks for this beautiful website. It helps a lot
I have one question. How do you choose your palette color. You will answer the famous website coolors.
But when I tried to reconstruct the same palette as yours, it doesn't match. I can't have the same palette. For example, when I choose "english-vermillion", he never give me the "ocean-blue" with it.
Do you choose your colors from your mind or a mix between the website colors and your mind.
Thanks for your answer
Thank you very much for the great tutorial. And what is the font you use for VS code? and VS code theme
He is using the Fira code font and community material theme ocean
@@judyodiakose6838 thnx
So cool 😎 it's 👍 awesome
I'm glad you like it
Perfact video.
Thanks Rifat
KEEP MAKIN THIS STYLE VIDEO ADN TEACHING PERFECTLY IT HELP ME ALOT TY SO MUCH SIR PLZ MAKE MORE FIGMA TO HTML CSS AND KEEP MAKIN AND MAKE ME EXPERT I WANT TO BE CONVERT ANY FIGMA DESIGN IN TO HTML CSS TY. SO MUCH I LEANRNED ALOT
DONT MAKE VIDEO U LIK EPREIVIOUS ON MOBIL EEDITIN VIEW THIS METHOD WAS GOOD PLZ KEEP MAKIN VIDEOS LIK ETHIS TY SOOOO MUCHA GAIN
is this good enough for mvp? once I get amedeus GDS I can add an actually booking flights section ?
Hi Sir, Can I ask what Extension did you use in VS code?
The work... the perfect code 🔥
you are awesome Sir ❤️🔥
Thanks a ton
What theme are you using for vscode? Great work, looks very professional
font family ==> space mono ==> google font
fira code
The only tutorial in which I was able to understand what I was doing. Great work bro !
Great website design and cool presentation brother ❤️
Thanks
can i also use tailwindcss in place of scss ? as tailwindwas what i used to use ? but how to setup tailwind for that work ?
what is the name of the tool you used for mobile view inside the vs code ?
If I'm going to build a booking restaurant website for business using css, html and javascript, will that be enough? Or Do I still need to implement some back end language or framework to make sure the website will be functional?
Great video like always. Prefer these types of videos with voice over. I have a question, why is it that you use , then tags? Just curious.
This is for semantic html
Check this MDN Docs: developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html
Hi.. Sir.. some places you using. inline css.. like hero section.. is that any special requirement .. your point view.. and why it's not css sheet...please explain..
Awesome ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Thanks 🤗
@@codewithsadee Sir 😊🤗😊🤗😊🤗😊 Have a lovely day 🤗🤗
Hello sir can you tell me which them are u using and which comment extension are u using?
I hope make tutorial build website use Bootstrap 5 or Tailwind
How you did this kind of thumbnail for this video, using which app or website?
Pls where did u normally find your designs
Hello Sadee. Thanks a bunch. If it is not to much to ask, can you share the project in figma, so we can parallel code with you. Good luck.
You're welcome!
check description for figma
Kindly add design to html css conversion so that we can learn how convert . i have been following you you start this channel pleass look into my comment .
Hi bro.
Please help me out with your code.i am typing and executing each and every line but when we remove "navbar active" after that header names will be hidden but once you execute js code it start running same thing i did but its not working please help me out
What's the VS code theme you are using ??
Hii mr professional can you upload this project with php and MySQL because i have get this topic in my college and i have also need php and MySQL with html css and javascript
Sir can you a website of Photography Page ..pls
Which extension you use for mobile frame in right side?
MobileView
@@EmekaPeacewill Thank you so much
❤
❤❤
welcome 😎😎in previous videos
Why do you display the site on a mobile interface instead of displaying it on the browser, I mean Google or any browser, what is the purpose of that, such as the travel site, the gym, the fitness site, the books site, and many sites on the channel? This does not help me understand, brother.
How do you comment like that?
What extension do you use for that?
Do you think you will use reactjs in the future?
I will
Thanks a lot, I hoped that
You're welcome!
welcome 😎😎
in previous videos
Why do you display the site on a mobile interface instead of displaying it on the browser, I mean Google or any browser, what is the purpose of that, such as the travel site, the gym, the fitness site, the books site, and many sites on the channel? This does not help me understand, brother.
When the next voice over video for complete website coming??
What frameworks do you use in this video (if any)?
I didn't use any framwork
I can't buy the source code in India . My bank is not letting me pay due to security reasons . what to do?
Bro pls how to center img size mobole phone 768px ???
Thanks for the video, Sir please will you tell me how to create thumbnail like this video has? Any online tool ?
Hello... How can I get the iOS emulator on my VS Code?
Video not uploaded, you said it will be at 7 pm today brother
Bro video not uploaded yet you said it will be today .
Sir you're my inspiration please to heard your voice ☺
Thanks Tiwari
bhai lambi mat kara kar tujhe coding karna ati nahi ha or vice to bilkul hi bekar ha chal nikal tera account hack karata ho sabar
@@codewithsadee
I don't know how to code but I will need some of your script to create a website
That's cool
hope this video will help you
How to open mobile view plz tell
Today project uploade sir
backend???
from now on you will speak ok sir
Theme Name ?
Will you upload video today brother
I'll upload Tomorrow, stay tune
Video not uploaded please upload the video brother
Why your videos are not uploading since last one week
I'm coming up with a huge project, and It's almost done.
Stay tuned
@@codewithsadee ok bro 🙂
Make NGO website
Note it
Code please??
Hii sir i want one help😢
Video will be uploaded today brother plz
I'm sorry for waiting, and I'm trying hard to publish it. but this is huge, I hope you'll enjoy it.
and tomorrow I must upload ❤
Ok brother tomorrow i will wait
@@codingbyfaiz8069 I really appreciate it❤
Project uploade today
It's coming. just wait for that.
I'm working on that. ❤
the explanation is not good because There are many items described before explaining the video
Brother ??
We love you Sadee 🤍🙏🏼
Thanks for your love ❤