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

Glassmorphism PORTFOLIO Website Design Using [ HTML CSS JS ] – Step By Step

57.8K views on YouTube

how to make complete portfolio website design with glassmorphism effect using html, css and vanilla javascript from scratch.
create a complete portfolio website design with glass morphic effect and theme toggler.

the main feature of this website are:

✔ header / navigation bar section with glassmorphism effect
✔ home, about, service, education and contact section with glassmorphism effect
✔ theme toggler buttons with glassmorphism effect using vanilla javascript.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE:
https://drive.google.com/file/d/1uSiJ6VJp-mU-0Njp0808naQH8yxGeU5Y/view?usp=sharing

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

type.js cdn link:
https://cdnjs.com/libraries/typed.js

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

TimeLine:
0:00 demo
2:06 file structure
2:38 header / navbar section
7:09 content container
7:49 home section
13:33 about section
18:11 service section
20:38 education section
23:38 contact section
28:23 theme toggler
31:04 final demo

#FrontEnd
#GlassMorphism
#Portfolio
#completeWebsite
#htmlWebsite
#html5
#css3
#vanillaJavascript
#WebDesign