Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Create A Responsive Website Design Using [ HTML CSS JQUERY ] – Step By Step

15.7K views on YouTube

how to make a complete responsive website design using html css and javascript / jquery from scratch.
create responsive a movie website design from scratch.

the main feature of this website are:
✔ responsive sticky navbar / header with toggle and scroll effect.
✔ responsive home section using flexbox.
✔ responsive gallery section with card hover effect using flexbox.
✔ responsive about section using flexbox.
✔ responsive movie section with card hover effect using flexbox.
✔ responsive product card section using flexbox.
✔ responsive footer card section using flexbox.

* SOURCE CODE *

download the source code from google drive ( includes images ):
https://drive.google.com/drive/folders/1qe_REIUGwuHA1hWDvWTADZT94W9Vz0Sm?usp=sharing

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

jquery cdn link:
https://cdnjs.com/libraries/jquery

fonts are from google fonts:
https://fonts.google.com/specimen/Yanone+Kaffeesatz?preview.text_type=custom

New To My Channel Subscribe Now And See More Stuff Like This:
https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw

TimeLine:
0:00 demo
3:28 file structure
4:27 header section
12:26 home section
16:31 gallery section
22:26 about section
25:17 movies section
30:10 product section
33:36 footer section
35:57 scroll top
37:12 scroll spy
38:37 smooth scrolling
39:36 final demo

#FrontEnd
#WebDesign
#CompleteWebsite
#ResponsiveWebsite
#WebDevelopment
#HTML5
#CSS3
#JQUERY