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

How To Make Responsive Website Design Using HTML CSS & Javascript Step By Step

11.5K views on YouTube

create a complete responsive website design using html css and javascript / jquery from scratch.
complete responsive website design tutorial for beginners.
learn to make a loan provider simple website design using html and css.

the main feature of this website are:
✔ responsive sticky navbar / header with toggle and scroll effect.
✔ responsive home section with responsive icons using flexbox.
✔ responsive service section using flexbox.
✔ responsive process section using flexbox.
✔ responsive review section using flexbox.
✔ responsive contact section using flexbox.
✔ responsive footer section using flexbox.

* SOURCE CODE *

download the source code from google drive:
https://drive.google.com/drive/folders/14xKWaMPvEExDczpTnuk2ILbd9OxL0Vu7?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/Poppins?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:18 file structure
4:17 header section
11:36 home section
19:11 service section
23:05 process section
26:50 review section
30:49 contact section
36:52 footer section
40:39 scroll top
41:57 scroll spy
43:41 smooth scrolling
45:00 final demo

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