How to Make a Responsive Website Using HTML CSS and JavaScript | GSAP Animation
HTML-код
- Опубликовано: 22 окт 2023
- In this tutorial, I'll show you, how to create an amazing and fully responsive website from scratch using HTML, CSS, JavaScript, and GSAP (GreenSock Animation Platform). Follow along as we walk you through each step of the web development process, making it easy for beginners and experienced developers alike to build a professional-looking Landing Page.
✅ If you found this tutorial helpful, please like, share, and subscribe for more web development tutorials!
🔔 Subscribe Now!
/ @bridgecode
Image Credit: freepik
GSAP CDN Link: bitly.ws/36Yk5
GSAP ScrollTrigger CDN Link: bitly.ws/36Yk5
Lenis (Smooth Scrolling) CDN Link:
Font Awesome CDN Link: bitly.ws/36Ykw
How to make a responsive website using HTML, CSS, and JavaScript
Step-by-step website tutorial
HTML CSS JavaScript GSAP tutorial
Responsive website development
Adventure travel website design
Create a website from scratch
Web development tutorial for beginners
Responsive web design with media queries
GSAP animations
HTML CSS tutorial in Hindi
Web development tips and trick
How to Make a Responsive Landing Page using HTML CSS and JavaScript
🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Konqeson - Rise
Music provided by Vlog No Copyright Music.
Video Link: bit.ly/3UHiBBL
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#html #css #htmltutorial #csstutorial #responsivewebsite #WebDevelopment #HTML #CSS #JavaScript #gsap #gsapanimation
The interface is so cooool!
what a combination of music and your skills, love you bru
Thank you very much for publishing your beautiful work.
Bro You are doing a great job. Love the Web Page ❤.
😍
ammmmmmaaazing😘😘😘😘 ..please can you tell us how to make or to get images like yours
Heavy bro love from pak
Thank you so much 😀
Love the vid and it helped me get back into it. I see lots of comments about the pictures, saying that they'd be in the link, but they're not... I did find it on Freepik, but I don't know Illustrator/photoshop. Would it be possible to have them or no? Thanks, still learned stuff :)
cool bro😏😏
Thank you
Bro where are images. Can you please share link
Could you add the source code too in the description. It would be great if images were also available. Great video
Your design so good please voice over that we will understand good job ❤❤❤
Thank you. Noted
@@bridgecode I want to contact you can you share your Instagram
Bro. I am not active at Instagram.
@@bridgecode bro I need web development project for final year
Seriously.
Can you give images used in this website
Bro in the thumbnail how do you create the website in pc view and mobile view, Can you share how you make the thumbnail if possible.
Just take a screenshot in PC and Mobile view, do some basic editing in Photoshop and done.
Thanks bhai@@bridgecode
😀
If you need more detail then I'll make the video for you
kindly make one if possible@@bridgecode
How these photo are overlapping each other? After adding 7 photos all goes out of screen
recheck your code, all the images must be positioned absolute and bottom = 0, width= 100% and height= 100vh
from where did you get this images or how can i generate such images?
From freepik, for image processing you need to know adobe illustrator and Photoshop
hermano como se llaman las imagenes o como busco en freepink
keyword suggestion: illustration, landscape, homepage and rest platform start showing you the related picx.
Bro which this theme on vscode?
Daracula
Bro, why you didn't share the photos? then what is the use of this video, then you are just showcasing your skill? what about the user?
Valid. Yet what about those who reupload the video on their channels after getting the images? I am seeking guidance on how to address this issue ? The intent behind sharing this video is to convey the concept to the audience. You have the option to substitute any image featured in the video with your preferred choice from the freepik platform. However I am now considering to provide the link of the image used in the video very soon. Thank you for your comment and feedback.
bro can you please tell me where did i get the images
Freepik
Bro images link evachi ga bro
Bro could you tell me what are dimension of images my images are not fiting properly
Bro, first of all you have to arrange all the images in photoshop layer by layer and once you've formed the complete image then start exporting each image in the same dimension as your background dimension. When you will do this all will be well. I hope you'll understand.
@@bridgecode i did the same thing but in my laptop the bottom trees part getting cut as soon as i resize the browser it perfectly fits in
@yadneshahirrao9406 then recheck your code, all the images must be positioned absolute and bottom = 0, width= 100% and height= 100vh
@@yadneshahirrao9406 This is the same problem I am having. I am sure my images are just not the right resolution or aspect ratio.
Bro How you break the image into the parts
Already answered.
hey man can I get souce code also???
Bro can you tell form where to get script code or script src
Thanks for your comment. Bro see in the description, CDN links are provided.
thanks
@@bridgecodeBro i loved you videos and you replyed to comment i sub to you
😄
@@Nischala7 simple, go to html file -> write "script" word, you got many options
Sir maira nhi hua
Bro plz say from where you get the images ...🤕🤕🤕🤕
Freepik
@@bridgecode Can I use it for commercial purpose ?
You have to read the instructions given there and follow accordingly.
where is the github link of the code ???
In the Video, watch carefully. Thanks
@@bridgecode github link ??
gsap not defined bta rha hai
You have to link the GSAP CDN in your html first right in the tag or you can add it in the tag just before the starting of tag. GSAP CDN is already provided in video description.
I want to recreate this can you share me the images please?
yes, need them too
Image link is now available in video description
thanks!!@@bridgecode
plz sir provide images
@@bridgecode
@@bridgecode can you pls tell which link is for image
images kaha haa
bro who to image kaha hay
Es website ke images mil sakti hai
Sure, in few hours.
Hi @@bridgecode Could I get the images to please :)
hey there,@@bridgecode i am also want the images : )
i cannot find source code bro please share link
In few days, the source code would be available either on Patreon or Buy Me a Coffee platform. Stay tuned.
bro give us image bro
where are the images dude?
Thank you for your comment. bro I am not the owner of the image. Just go at freepik and search "Welcome to India Website". After searching some pages, you'll find there.
@@bridgecode actually , i tried to search for it, but i was unable to do so . Atleast put the name of pics in description
i have a doubt bro
const menu = document.querySelector('.menu');
const toggle = document.getElementById('toggle');
toggle.oneclick = function() {
menu.classList.toggle('active');
}
is any problem here my commends are not working
and please see here also
in css
@media (max-width:800px)
{
header nav .menu{
flex-direction: column;
row-gap: 2rem;
position: absolute;
left:-100%;
top: 80px;
width: 100%;
padding-top: 110px;
background: #311822;
height: calc(100vh - 80px);
z-index: 10;
transition: left 0.4s ease;
}
header nav .menu.active
{
left:0;
}
header nav .menu li a
{
margin-left:unset;
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: #f3de88;
width: 250px;
height: 60px;
line-height: 60px;
display: block;
text-align: center;
border-radius: 5px;
transition: 0.25s ease;
}
header nav .menu li a:hover
{
background: #f3de88;
color: #311822;
}
}
plese cheak
what is the problem, is your toggle menu not working in responsive state? is this the problem?
if so, then correct the event listener
toggle.oneclick = function() {
menu.classList.toggle('active');
}
it is onclick not the oneclick.
THANK YOU SO MUCH @@bridgecode
bro please give us free picture used in this website little fast bro...in a git hub file please
Ok
@@bridgecode thankyou bro
bro give us image bro hello