How to Make a Website using HTML CSS Javascript & GSAP - Responsive with Animations
HTML-код
- Опубликовано: 2 июн 2024
- Learn how to make a website using HTML, CSS, Javascript, and GSAP animations. The site is fully responsive and uses CSS Grid + Flexbox for the design.
Access Source Code (Scroll to bottom of page)
briandesigns.gumroad.com/l/hS...
Timeline:
0:00 What we are making
5:03 Creating Navbar Section
20:04 Creating Mobile Menu
32:30 Creating Hero Section
44:52 Creating Services Section
54:16 Creating Membership Section
1:08:35 Creating Team Section
1:30:00 Creating Email Section
1:40:15 Creating Footer Section
1:53:43 Adding Animations
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
My VS Code Theme
• Top 10 VS Code Themes
How to Host your Website for Free
• How to Host a Website ...
Build a website without any code
• How to Make a Website ...
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
I would like to say 'thank you so much💜💜' for uploading such content. The tutorial was simple and so easy to understand. Good job man!!
Amazing videos ! Love your channel Brian ! Keep it up !
i started learning front end about a year now but ive a bachelor in PE&Sports Science ,worked in a couple of gyms.This project was fun and weird for me lol, thanks Brian!
GSAP was in my to do list. Thanks Brian
This is a great content, Brian. I find it particularly helpful because it uses no css frameworks; just good old plain css. This is cool tutorial for students hoping to solidify their frontend fundamentals, particularly CSS. Thank you very much. Much appreciated.
Amazing tutorials, man, I've sub!
you are the best , buddy !!
just keep impressing us with these amazing contents .
keep up the good work
Thanks Ahmed!
Please Dont stop uploading such quality contents❤
We need more videos on React
Thanks Mudassir! yeah I got some plans to make more for the future
++++++++++++++++++++++++++
Brian Design, I learn more from this video thn in the last 10 years of trying to learn to code
Awesome tutorial thanks
My mind exploded at 27:55. This might be the coolest and simplest thing I have seen that makes sense. Great content, Im so happy I found your channel.
Awesome, thanks Nolan!
How would I go about centering the hero content so that the texts and button are centered (versus on the left hand side like yours is) on standard view and mobile?
@@Noland08 Use display: flex; then align and justify acc to your need
you are a god...keep the content coming
Damn this is clean. I love it as always
Thanks Louis!
Liked before watching !! Coz i know the tutorial gonna be the best 🔥🔥
Thanks Rahul!
Thanks alot, great video
great stuff man much appreciated
best parts are when you add a line and then explain what that line does in the site. really helps solidify the content.
You are the best about responsive !!! Please more videos !!!
Thanks!
Many thanks for sharing with us, bro!! 👍 👌 👌 👌
Please more videos like that!!
Thanks Ibrahem!
Thank you so much Sir Brian ;) from Philippines
Thanks Pobreng!
I cant say much, your teaching style is awesome bro! Project based tutorial is the only way to learn coding. Thanks again,
I'm so impressed brother, youre great, thanks for share knowledge
Thanks Jaime!
Hello! I just found your channel last night and have fallen in love with your high quality videos! Over my upcoming holiday break imma code like all of the websites in your videos!
Awesome thanks Samantha!
Love it, thank you.
Thanks
Good video broh applying grid knowledge, thanks!
Thanks Mateus!
Nice Brian. Just flew through that one. Gonna convert the build to Gatsby now with a Sanity CMS - should be fun.
aye nice!
Good job brian, it could've been better if you apply more semantic html tags. Cheers!!
Beautiful design..❤️
Love From Bangladesh
Thanks!
More GSAP or other animation framework tutorials please ❤️
for sure! I got some ideas for new animations I wanted to make
Awesome, thanks!
Thanks Sai!
@@briandesign :)
Thank you sir ❤️❤️🙏🏻🙏🏻🙏🏻
Thanks!
Thanks for the video! Jess's card has more height than the other cards in the grid, how can I fix it?
Your explanation on grid setup in team section is not clear. i mean that what you did is not working on my setup. However it forced me to spend additional time on grid and now I'm well know how to do it so I did on my way. Now it works. Appreciate your tutorial. I'm falling in love with grid now :D
yeah it's easier if you draw out your design then recreate it with grid. Trying to understand it with code can get confusing at first, but glad you were able to find more info about it. Thanks
How did you get the photo on the grid to work? it's stretched out for me and I can't figure it out
HI Brian, do you mind if i use the same navbar in my project?
Sir, Could you tell me any tips to make a quiz site which has a different result page depends on a score?
waiting for landing page like this using tailwind... ❤
I haven't studies about the backend How do I connect mysql data base to the project using nodejs
Hii, Where you are getting these Designs for your all websites? If you know any site please tell me, Thank you.
I just make these on my own
King
Man, you're a genius. how long have you been coding for now?
Thanks Edward, it's been about 9 months now
Only 9month bro how do you learn
These things fast??????how
@@ishworgautam16 just gotta grind all day and put in the hours
@@briandesign Can you please talk about in a video how you learned coding, the sources you used and the methods and techniques you followed? Please
@@ayyasudeen3118 I pretty much documented everything for the first 2 months, then after I just started showing people things I made in a tutorial format. In short feynman technique is mainly what I used to learn
Please upload playlist for react Material UI eagerly wating
my mobile menu shows up now but it doesn't function when I click on it it shows I am hovering and I even copied the code
How did you create template of your website i mean how can u show my website template in my portfolio wesbite
Hey Brian! How did you learn to create designs for your websites?
just build a bunch of websites and look at popular designs for inspiration. Try designing a website from scratch using figma and then each day you focus on making it look better and better. That will help a lot + try designing other style of websites you've never made before
Wow Amazing watched all your video, Amazing stuff
Please provide the source code.
i have been folowing the tutorial abut my code looks nothing like it should can somebody help me please? the nav bar has no logos its just black and says stuff
my menu bar doesnt show up is something wrong with my java or CSS
Followed the tutorial but my navbar doesn't appear when minimizing the browser tab ...
Any tips?
Hey yo what color theme is that?
Nice
Thanks Julian
@@briandesign contact me brian
@@julianvelez6563 what’s up?
@@briandesign i need to ask you somenthing about react js
@@julianvelez6563 what's your question?
5:19 that didn't appear when i did it why is that ?
I am getting error while doin navbar part could you help me plz?
What’s the error?
where does team__text come from in the team section??
what do you mean?
@@briandesign there's no class called team__text
@@godwinebikwo6544 what do you mean? It's in the team section
Could have provided images separately. Love from Srilanka
Thanks Adrian!
Could have... but Brian is teaching code. At some point you'll need to learn how to select images for yourself. Failing that - just grab any.
Ngon bạn ơi
Awesome video is it suitable for react JS in terms of performance?. Also, I want to ask you, can you please make a video on how to host our React portfolio with custom domain name and also how to implement a contact form so that recruiter can contact me
yeah you could convert this to react and I'll prob make a new video doing that soon, but it will have a different design
@@briandesign Thank you replying and please make detailed video on hosting
for sure!
IDK if you still care about this channel but, if you do, the three bars in the corner is hiding the regular menu even in full screen. How do I fix that?
At 1:59:31 my button disappear anyone know how to solve this?
Hello, my Master's!)))
🙌
Do you have any Udemy courses to purchase?
I don't, just have my free youtube videos up for now
what's your VSCODE font family?
Hey i am a beginner and i dont get when you put values on padding margin ext. For example in 59:50 like wtf is that padding lol. Good video tho
that just sets the left and right padding to be within a certain screen size, so if you change the px value to like 500px it makes it shrink super small and vice versa if you switch it to 1800px it spreads wide. It's just a way I center my sections without having to wrap everything with another vid and add extra lines of code
@@briandesign thank you for the fast response! I get it now but i will still need to research it more cheers
@@filipmilovanovic5989 forsure! yeah I saw it from one course and thought it was magic, so I basically used it ever since haha
can you send me th figma storyboarding for this please
bro 1 project with sass and js ,animation
One video on pagination in react plzzzzzzzzzzZzzzzzzzzzzz 🥺
I have it on my video list!
give us image folder bro
What is calc for I don’t understand you didn’t even explain
make this website in react
10:21 When i click Services, it shows cannot GET/services.html
make this website in react