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/