BranchesTags

Latest commit

History

196 Commits

Folders and files

NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website

Repository files navigation

100 Projects In 100 Days - HTML, CSS & JavaScript

100+ mini web projects using HTML, CSS and JavaScript.

See all projects on CodePen

#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo

This repository is mostly based on 2 courses by Brad Traversy (2020):

The other projects are adapted from various YouTube channels:

About

100+ mini web projects using HTML, CSS and JavaScript.

codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Latest commit
History
196 Commits
Folders and files
NameName
Last commit message
Last commit date
000-boilerplate
000-boilerplate
001-expanding cards
001-expanding cards
002-progress steps
002-progress steps
003-rotating navigation
003-rotating navigation
004-hidden search widget
004-hidden search widget
005-blurry loading
005-blurry loading
006-scroll animation
006-scroll animation
007-split landing page
007-split landing page
008-form wave animation
008-form wave animation
009-sound board
009-sound board
010-dad jokes
010-dad jokes
011-event KeyCodes
011-event KeyCodes
012-FAQ collapse
012-FAQ collapse
013-random choice picker
013-random choice picker
014-animated navigation
014-animated navigation
015-incrementing counter
015-incrementing counter
016-drink water
016-drink water
017-movie app
017-movie app
018-background slider
018-background slider
019-theme clock
019-theme clock
020-button ripple effect
020-button ripple effect
021-drag n drop
021-drag n drop
022-drawing app
022-drawing app
023-kinetic loader
023-kinetic loader
024-content placeholder
024-content placeholder
025-sticky navigation
025-sticky navigation
026-double vertical slider
026-double vertical slider
027-toast notification
027-toast notification
028-github profiles
028-github profiles
029-double click heart
029-double click heart
030-auto text effect
030-auto text effect
031-password generator
031-password generator
032-good cheap fast
032-good cheap fast
033-notes app
033-notes app
034-animated countdown
034-animated countdown
035-image carousel
035-image carousel
036-hoverboard
036-hoverboard
037-pokedex
037-pokedex
038-mobile tab navigation
038-mobile tab navigation
039-password strength background
039-password strength background
040-3d boxes background
040-3d boxes background
041-verify account UI
041-verify account UI
042-live user filter
042-live user filter
043-feedback UI design
043-feedback UI design
044-custom range slider
044-custom range slider
045-netflix mobile navigation
045-netflix mobile navigation
046-quiz app
046-quiz app
047-testimonial box switcher
047-testimonial box switcher
048-random image generator
048-random image generator
049-todo list
049-todo list
050-insect catch game
050-insect catch game
051-video background
051-video background
052-portfolio grid
052-portfolio grid
053-touch slider
053-touch slider
054-css loaders
054-css loaders
055-glass dashboard
055-glass dashboard
056-image comparison slider
056-image comparison slider
057-parallax background svg
057-parallax background svg
058-3D product card
058-3D product card
059-form validator
059-form validator
060-movie seat booking
060-movie seat booking
061-custom video player
061-custom video player
062-exchange rate calculator
062-exchange rate calculator
063-DOM array methods
063-DOM array methods
064-menu slider modal
064-menu slider modal
065-hangman game
065-hangman game
066-meal finder
066-meal finder
067-expense tracker
067-expense tracker
068-music player
068-music player
069-infinite scroll posts
069-infinite scroll posts
070-typing game
070-typing game
071-speech text reader
071-speech text reader
072-memory cards
072-memory cards
073-lyrics search app
073-lyrics search app
074-relaxer app
074-relaxer app
075-breakout game
075-breakout game
076-new year countdown
076-new year countdown
077-sortable list
077-sortable list
078-speak number guessing game
078-speak number guessing game
079-creative agency website
079-creative agency website
080-health dashboard
080-health dashboard
081-animated SVG
081-animated SVG
082-parallax landing page
082-parallax landing page
083-full screen image slider
083-full screen image slider
084-fluid image lightbox
084-fluid image lightbox
085-sneaker shop
085-sneaker shop
086-coming soon page
086-coming soon page
087-sliding signin signup form
087-sliding signin signup form
088-promo code
088-promo code
089-one color UI
089-one color UI
090-tooltip
090-tooltip
091-chat interface
091-chat interface
092-music streaming service
092-music streaming service
093-creative portfolio
093-creative portfolio
094-laptop UI
094-laptop UI
095-headphones product page
095-headphones product page
096-cloud hosting service
096-cloud hosting service
097-terminal style landing page
097-terminal style landing page
098-magazine layout
098-magazine layout
099-parallax website
099-parallax website
Repository files navigation
100 Projects In 100 Days - HTML, CSS & JavaScript
100+ mini web projects using HTML, CSS and JavaScript.
See all projects on CodePen
#ProjectLive Demo
001Expanding CardsLive Demo
002Progress StepsLive Demo
003Rotating Navigation AnimationLive Demo
004Hidden Search WidgetLive Demo
005Blurry LoadingLive Demo
006Scroll AnimationLive Demo
007Split Landing PageLive Demo
008Form WaveLive Demo
009Sound BoardLive Demo
010Dad JokesLive Demo
011Event KeycodesLive Demo
012FAQ CollapseLive Demo
013Random Choice PickerLive Demo
014Animated NavigationLive Demo
015Incrementing CounterLive Demo
016Drink WaterLive Demo
017Movie AppLive Demo
018Background SliderLive Demo
019Theme ClockLive Demo
020Button Ripple EffectLive Demo
021Drag N DropLive Demo
022Drawing AppLive Demo
023Kinetic LoaderLive Demo
024Content PlaceholderLive Demo
025Sticky NavbarLive Demo
026Double Vertical SliderLive Demo
027Toast NotificationLive Demo
028GitHub ProfilesLive Demo
029Double Click HeartLive Demo
030Auto Text EffectLive Demo
031Password GeneratorLive Demo
032Good Cheap FastLive Demo
033Notes AppLive Demo
034Animated CountdownLive Demo
035Image CarouselLive Demo
036HoverboardLive Demo
037PokedexLive Demo
038Mobile Tab NavigationLive Demo
039Password Strength BackgroundLive Demo
0403D Background BoxesLive Demo
041Verify Account UILive Demo
042Live User FilterLive Demo
043Feedback UI DesignLive Demo
044Custom Range SliderLive Demo
045Netflix Mobile NavigationLive Demo
046Quiz AppLive Demo
047Testimonial Box SwitcherLive Demo
048Random Image FeedLive Demo
049Todo ListLive Demo
050Insect Catch GameLive Demo
051Video BackgroundLive Demo
052Portfolio with CSS GridLive Demo
053Touch SliderLive Demo
054CSS LoadersLive Demo
055Glass DashboardLive Demo
056Image Comparison SliderLive Demo
057Parallax Background with SVGLive Demo
0583D Product CardLive Demo
059Form ValidatorLive Demo
060Movie Seat BookingLive Demo
061Custom Video PlayerLive Demo
062Exchange Rate CalculatorLive Demo
063DOM Array MethodsLive Demo
064Menu Slider & ModalLive Demo
065Hangman GameLive Demo
066Meal FinderLive Demo
067Expense TrackerLive Demo
068Music PlayerLive Demo
069Infinite Scroll PostsLive Demo
070Typing GameLive Demo
071Speech Text ReaderLive Demo
072Memory CardsLive Demo
073Lyrics Search AppLive Demo
074Relaxer AppLive Demo
075Breakout GameLive Demo
076New Year CountdownLive Demo
077Sortable ListLive Demo
078Speak Number Guessing GameLive Demo
079Creative Agency WebsiteLive Demo
080Health DashboardLive Demo
081Animated SVGLive Demo
082Parallax Landing PageLive Demo
083Full-Screen Image SliderLive Demo
084Fluid Image LightboxLive Demo
085Sneaker ShopLive Demo
086Coming Soon PageLive Demo
087Sliding Sign In & Sign Up FormLive Demo
088Promo CodeLive Demo
089One Color UILive Demo
090TooltipLive Demo
091Chat InterfaceLive Demo
092Music Streaming ServiceLive Demo
093Creative PortfolioLive Demo
094Laptop UILive Demo
095Headphones Product PageLive Demo
096Cloud Hosting ServiceLive Demo
097Terminal Style Landing PageLive Demo
098Magazine LayoutLive Demo
099Parallax WebsiteLive Demo
100Hulu Webpage CloneLive Demo
This repository is mostly based on 2 courses by Brad Traversy (2020):
The other projects are adapted from various YouTube channels:
About
100+ mini web projects using HTML, CSS and JavaScript.
codepen.io/collection/DKLgmm?grid_type=grid&sort_by=item_created_at
Resources
Readme
MIT license
Activity
Stars
0 stars
Watchers
0 watching
Forks
1 fork
Report repository
Releases
Packages
Contributors
Languages