Make a responsive one page website using HTML, CSS and JS [ With animations on scroll ]

Published: 17 June 2023
on channel: Modern Web
5,072
137

If you know HTML, CSS but still find making websites difficult. This video will teach you step by step to apply your knowledge to not only make a website from Figma design file but also make that responsive using CSS media query. Not only that but in the website you will find small CSS animations as well on scroll which we will achieve by using a library called “animate on scroll”. There is so much to learn in this video and to practice your web development skills. Let’s code then.


📌Files to start ( Github Link ) - https://github.com/kunaal438/digital-...

📌Figma File - https://www.figma.com/file/lHH5I39GBC...

📌Download Source Code

Patreon -   / 84706921  

Buymeacoffee - https://www.buymeacoffee.com/Modernwe...

** Use one of the two links above to get the source code **


📌 Social Links Of Not So Social Person
——————————————————————

Instagram ( Still figuring out how to use it ) -   / themodernweb  

Facebook ( Mark knows everything ) -   / themodernweb  

Twitter ( Never been on trending ) -   / modernweb438  

Dev.to ( Yes I write too. Sometimes ) - https://dev.to/themodernweb

Subscribe - https://www.youtube.com/c/modernweb?s...

Email - [email protected]

My name is Kunaal and I am from India. Modern Web is a channel where you can find tutorials related to HTML, CSS, JS, React and much more, In short if you master web development. You know wha channel to follow 😎. On this channel you will find a lot of stuffs from some crazy CSS effects to some actual practical Fullstack projects. ( Checkout the channel to explore ). But want to learn more in different platforms as well. Then follow me on my social media where I post ( whenever I get something useful ) web dev content and video updates too.

Don’t forget to like, share and subscribe 😉


⏰Time Stamps⏰
——————————-

00:00 - Intro
01:05 - Download Starter Files
01:46 - Hero Section
34:54 - Brands Section
39:07 - About Us Section
55:27 - Services Section
01:05:13 - FAQ Section
01:17:40 - Contact Section
01:33:24 - Footer
01:43:23 - Making it Responsive
02:23:30 - Creating Animation
02:31:00 - Outro

————— Thanks for watching —————

👇 Credit 👇
———————

Icons used in the video are from Flaticon.
Images used in making of this project are provided by freepik.
Like Video Template provided by Ashish 2808 from Pixabay.

—————— 😎 Tags ——————

#webdevelopment #responsivelandingpages #responsivewebdesign #htmltutorial #websitedevelopment #landingpage #css3 #website #codinglife #codingtutorials #react #cssanimations #mediaquery #js #javascript #learnwebdevelopment #coding #developer #websitedesign


Watch video Make a responsive one page website using HTML, CSS and JS [ With animations on scroll ] online without registration, duration hours minute second in high quality. This video was added by user Modern Web 17 June 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,072 once and liked it 137 people.