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 Complete Responsive Website Using HTML/CSS ( SASS )/JQUERY From Scratch

17.8K views on YouTube

Complete Animated Responsive Website Tutorial In One Video Using HTML CSS ( SASS ) Javascript / JQuery From Scratch.
Full Responsive Mobile First Modern Website Design Tutorial Using HTML 5 / CSS 3 / SASS / Javascript / Jquery.
Learn How To Make Complete Responsive Mobile First Website In Less Than One Hour And In One Video From Scratch With Source Code.

In Video You Will Learn How To Make Mobile First Complete Responsive Website With SASS Compiler.
The Main Feature Of This Website Is:
Theme Color Switcher,
Scroll To Top On Click,
Navbar Toggle Menu Using Hamburger Icons,
Floating Share Icons From Font Awesome,
Scroll Down Animated Indicator,
Responsive Home Page With Vector Image,
Responsive Service Section With Box Hover Effects,
Responsive Gallery Section With Hover Effects,
Responsive Testimonials Section,
Responsive Footer Section and More.

Timestamps:
0:00 introduction
0:07 demo
3:33 header and navigation
6:14 menu bars
6:58 making navbar responsive
9:56 home section
13:18 scroll down indicator
16:01 service section
19:40 gallery section
24:15 testimonials section
28:15 footer section
35:40 floating share icon
38:45 scroll to top icon
41:05 theme color switcher

The Reason I Used SASS Instead Of Pure CSS and The Reason Why You Should Start Using SASS Also…
because Sass is a CSS pre-processor. Sass is completely compatible with all versions of CSS. Sass reduces repetition of CSS and therefore saves time.
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other.
Sass facilitates you to write clean, easy and less CSS in a programming construct. It contains fewer codes so you can write CSS quicker. It is more stable, powerful, and elegant because it is an extension of CSS.
hence there are lots of benefits of using sass.
You Can use Sass In Your Project Using Scss Extension.

*SOURCE CODES*

Download The Source Code From Google Drive From Here:
https://drive.google.com/drive/folders/1qPJ-sm3O84yEcdWS0zKrJ4B10_8otnIG?usp=sharing

Gallery Images From Unsplash:
https://unsplash.com/

Icons From Font Awesome:
https://fontawesome.com/

Service Section Icons Are From FlatIcons:
https://www.flaticon.com/

Download and Edit The Main Home Section Image From Here:
https://stories.freepik.com/illustration/devices/bro

watch the full playlist of how to create responsive websites:

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

#Website
#WebDesign
#CompleteWebsite
#ResponsiveWebsite
#FullPageWebsite
#HTML5
#CSS3
#Javascript
#Jquery
#SASS
#SCSS
#Responsive
#WebDevelopment
#websitedesign

Easy Jam by Kevin MacLeod is licensed under a Creative Commons Attribution 4.0 licence. https://creativecommons.org/licenses/by/4.0/

Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100245

Artist: http://incompetech.com/