Skip to content

Learn Explore Roadmaps Paths Organizations Contact

Learn. Build. Grow.

Learn

Learn
Explore
Roadmaps
Paths
Methodology

For organizations

Schools & Business

Think Pixel

About
Contact
Privacy
Terms
Cookies

© 2026 Think Pixel

Learn

How-To Guides

Learn How-To Guides

Web Development

Complete HOWTO tutorial and reference dataset.

beginner321 lessons~6.03 hours

Progress0/321 · 0%

What you'll learn

Menus
Images
Buttons
Forms
Filters
Tables
More
Website

Lessons

Menus· 55 lessons

01How TO - Icon Bar1 min 02How TO - Menu Icon2 min 03How TO - Collapsibles/Accordion2 min 04How TO - Tabs1 min 05How TO - Vertical Tabs1 min 06How TO - Tab Headers1 min 07How TO - Full Page Tabs1 min 08How TO - Hover Tabs1 min 09How TO - Top Navigation1 min 10How TO - Responsive Top Navigation1 min 11How TO - Split Navigation1 min 12How TO - Navbar with Icons1 min 13How TO - Search Menu1 min 14How TO - Search Bar1 min 15How TO - Fixed Sidebar1 min 16How TO - Side Navigation2 min 17How TO - Responsive Sidebar1 min 18How TO - Full screen Overlay Navigation1 min 19How TO - Off-Canvas Menu1 min 20How TO - Side Navigation Buttons1 min 21How TO - Sidebar with Icons1 min 22How TO - Horizontal Scroll Menu1 min 23How TO - Vertical Menu1 min 24How TO - Bottom Navigation1 min 25How TO - Responsive Bottom Navigation1 min 26How TO - Bottom Border Nav Links1 min 27How TO - Right Aligned Menu Buttons1 min 28How TO - Centered Top Navigation1 min 29How TO - Equal Width Navbar Links1 min 30How TO - Fixed Menu1 min 31How TO - Slide Down a Bar on Scroll1 min 32How TO - Hide Menu on Scroll1 min 33How TO - Shrink Navigation Menu on Scroll1 min 34How TO - Sticky/Affix Navbar1 min 35How TO - Navbar on Image1 min 36How TO - Hoverable Dropdown2 min 37How TO - Clickable Dropdown2 min 38How TO - Cascading Dropdown List1 min 39How TO - Dropdown Navbar2 min 40How TO - Dropdown Sidebar1 min 41How TO - Responsive Navbar with Dropdown1 min 42How TO - Subnav1 min 43How TO - Dropup2 min 44How TO - Mega Menu2 min 45How TO - Mobile Navigation Menu1 min 46How TO - Curtain Menu1 min 47How TO - Collapse Sidebar1 min 48How TO - Collapse Sidepanel1 min 49How TO - CSS Pagination1 min 50How TO - CSS Breadcrumbs1 min 51How TO - Button Group1 min 52How TO - Vertical Button Group1 min 53How TO - Sticky Social Bar1 min 54How TO - Pill Navigation1 min 55How TO - Responsive Header1 min

Images· 41 lessons

56How TO - Slideshow1 min 57How TO - Slideshow Gallery1 min 58How TO - Modal Images1 min 59How TO - Lightbox1 min 60How TO - Responsive Image Grid1 min 61How TO - Image Grid1 min 62How TO - Responsive Image Gallery1 min 63How TO - Horizontal Scrollable Image Gallery1 min 64How TO - Tab Gallery1 min 65How TO - Image Hover Overlay1 min 66How TO - Image Overlay Slide1 min 67How TO - Image Overlay Zoom1 min 68How TO - Image Overlay Title1 min 69How TO - Image Overlay Icon1 min 70How TO - Add Image Effects1 min 71How TO - Black and White Images1 min 72How TO - Position Text Over an Image1 min 73How TO - Text Blocks Over Image1 min 74How TO - Image with Transparent Text1 min 75How TO - Full Page Image1 min 76How TO - Form on Image1 min 77How TO - Hero Image1 min 78How TO - Blurred Background Image1 min 79How TO - Change Background on Scroll1 min 80How TO - Align Images Side By Side2 min 81How TO - Rounded Images1 min 82How TO - Avatar Images1 min 83How TO - Responsive Images1 min 84How TO - Center Images1 min 85How TO - Thumbnail1 min 86How TO - Add a Border to an Image1 min 87How TO - "Meet The Team" Page1 min 88How TO - Sticky Image1 min 89How TO - Flip an Image1 min 90How TO - Shake an Image1 min 91How TO - Portfolio Gallery1 min 92How TO - Portfolio Gallery with Filtering1 min 93How TO - Image Zoom1 min 94How TO - Image Magnifier Glass1 min 95How TO - Image Comparison Slider1 min 96How TO - Add a Favicon in HTML1 min

Buttons· 19 lessons

97How TO - Alert Buttons1 min 98How TO - Outline Buttons1 min 99How TO - Split Buttons1 min 100How TO - Animate Buttons1 min 101How TO - Fading Buttons1 min 102How TO - Button on Image1 min 103How TO - Social Media Buttons1 min 104How TO - Read More Read Less Button1 min 105How TO - Loading Buttons1 min 106How TO - Download Button1 min 107How TO - Pill Buttons1 min 108How TO - Notification Buttons1 min 109How TO - Icon Buttons1 min 110How TO - Next and Previous Buttons1 min 111How TO - More Button in Navbar2 min 112How TO - Full Width (Block) Buttons1 min 113How TO - Text Buttons1 min 114How TO - Round Buttons1 min 115How TO - Scroll Back To Top Button1 min

Forms· 34 lessons

116How TO - Login Form1 min 117How TO - Sign Up Form1 min 118How TO - Checkout Form1 min 119How TO - Contact Form1 min 120How TO - Social Login Form1 min 121How TO - Register Form1 min 122How TO - Form with Icons1 min 123How TO - Email Newsletter1 min 124How TO - Stacked Form1 min 125How TO - Responsive Form1 min 126How TO - Popup Form1 min 127How TO - Inline Form1 min 128How TO - Clear Input Field1 min 129How TO - Hide Arrows From Input Number1 min 130How TO - Copy Text to Clipboard1 min 131How TO - Animated Search Form1 min 132How TO - Search Button1 min 133How TO - Fullscreen Search1 min 134How TO - Input Field in a Menu1 min 135How TO - Login Form in a Menu1 min 136How TO - Custom Checkbox1 min 137How TO - Custom Select Box1 min 138How TO - Toggle Switch1 min 139How TO - Display Text when Checkbox is Checked1 min 140How TO - Detect Caps Lock1 min 141How TO - Trigger Button Click on Enter1 min 142How TO - Password Validation1 min 143How TO - Toggle Password Visibility1 min 144How TO - Form with Multiple Steps1 min 145How TO - Autocomplete1 min 146How TO - Turn Off Autocomplete For Input1 min 147How TO - Disable Spellcheck for Forms1 min 148How TO - File Upload Button1 min 149How TO - JS Validation For Empty Fields1 min

Filters· 6 lessons

150How TO - Filter/Search List1 min 151How TO - Filter/Search Table1 min 152How TO - Filter Elements1 min 153How TO - Search/Filter Dropdown2 min 154How TO - Sort a List1 min 155How TO - Sort a Table1 min

Tables· 7 lessons

156How TO - Zebra Striped Table1 min 157How TO - Center Tables1 min 158How TO - Full-width Table1 min 159How TO - Nested Table1 min 160How TO - Side-by-side Tables2 min 161How TO - Responsive Tables2 min 162How TO - Comparison Table1 min

More· 125 lessons

163How TO - Fullscreen Video1 min 164How TO - CSS/JS Modal1 min 165How TO - Delete Modal1 min 166How TO - Timeline1 min 167How TO - Scroll Indicator1 min 168How TO - JavaScript Progress Bar1 min 169How TO - CSS Skill Bar1 min 170How TO - Range Sliders1 min 171How TO - Color Picker1 min 172How TO - Email Field1 min 173How TO - Tooltip1 min 174How TO - Display an Element on Hover1 min 175How TO - Popup1 min 176How TO - Collapse1 min 177How TO - CSS Calendar1 min 178How TO - Include HTML1 min 179How TO - Create a To Do List1 min 180How TO - CSS Loader1 min 181How TO - Badges1 min 182How TO - Star Rating1 min 183How TO - User Rating1 min 184How TO - Overlay1 min 185How TO - Contact Chips1 min 186How TO - Cards1 min 187How TO - Flip Card1 min 188How TO - Profile Card1 min 189How TO - Product Card1 min 190How TO - Alerts1 min 191How TO - Callout Message1 min 192How TO - Notes1 min 193How TO - Labels1 min 194How TO - CSS Ribbon1 min 195How TO - CSS Tag Cloud1 min 196How TO - Circles1 min 197How TO - Style HR (Horizontal Ruler/Line)1 min 198How TO - Coupon1 min 199How TO - List Group1 min 200How TO - List Group with Badges1 min 201How TO - List Without Bullets1 min 202How TO - Responsive Text1 min 203How TO - Cutout Text1 min 204How TO - Glowing Text1 min 205How TO - Fixed Footer1 min 206How TO - Sticky Element1 min 207How TO - Equal Height1 min 208How TO - Clear Floats (Clearfix)1 min 209How TO - Responsive Floats1 min 210How TO - Snackbar / Toast1 min 211How TO - Fullscreen1 min 212How TO - Scroll Drawing1 min 213How TO - Smooth Scroll1 min 214How TO - Background Gradient on Scroll1 min 215How TO - On Scroll Header1 min 216How TO - Resize Header on Scroll1 min 217How TO - Responsive Pricing Table1 min 218How TO - Parallax Scrolling2 min 219How TO - Aspect Ratio2 min 220How TO - Responsive Iframe1 min 221How TO - Toggle Like and Dislike1 min 222How TO - Toggle Hide and Show1 min 223How TO - Toggle Dark Mode1 min 224How TO - Toggle/Swap Text1 min 225How TO - Toggle Class1 min 226How TO - Add a Class1 min 227How TO - Remove a Class1 min 228How TO - Change a Class1 min 229How TO - Add Active Class to Current Element1 min 230How TO - Tree View1 min 231How TO - Remove Decimals of a Number1 min 232How TO - Remove a Property from an Object1 min 233How TO - Online Offline Detection1 min 234How TO - Check if an Element is Hidden1 min 235How TO - Redirect to Another Webpage1 min 236How TO - Format a Number with Two Decimals1 min 237How TO - Zoom on Hover1 min 238How TO - 3D Flip Box1 min 239How TO - Center Elements Vertically1 min 240How TO - Center a Button in DIV1 min 241How TO - Center a List1 min 242How TO - Transition on Hover1 min 243How TO - CSS Arrows1 min 244How TO - CSS Shapes1 min 245How TO - Download Link1 min 246How TO - Full Height Element1 min 247How TO - Browser Window CSS1 min 248How TO - Custom Scrollbar1 min 249How TO - Hide Scrollbar1 min 250How TO - Always Show Scrollbars1 min 251How TO - Device Look1 min 252How TO - Remove Contenteditable Border1 min 253How TO - Change Placeholder Color1 min 254How TO - Disable Resizing of Textarea1 min 255How TO - Disable Text Selection1 min 256How TO - Change Text Selection Color1 min 257How TO - Change Bullet Color of Lists1 min 258How TO - Vertical Line1 min 259How TO - Divider1 min 260How TO - Text Divider1 min 261How TO - Animate Icons1 min 262How TO - JavaScript Countdown Timer1 min 263How TO - Typing Effect1 min 264How TO - Coming Soon Page1 min 265How TO - Chat1 min 266How TO - Popup Chat Window1 min 267How TO - Split Screen 1/21 min 268How TO - Testimonials1 min 269How TO - Section Counter1 min 270How TO - Quotes Slideshow1 min 271How TO - Closable List Items1 min 272How TO - Typical Device Breakpoints1 min 273How TO - Create a Draggable HTML Element1 min 274How TO - Media Queries with JavaScript1 min 275How TO - Create a Syntax Highlighter1 min 276How TO - JavaScript HTML Animations1 min 277How TO - Get The Length of a String1 min 278How TO - JavaScript Exponentiation (**)1 min 279How TO - Set Default Parameters1 min 280How TO - Random Number Between Two Numbers1 min 281How TO - Sort Numeric Array1 min 282How TO - The Spread Operator (...)1 min 283How TO - Scroll Into View1 min 284How TO - Get Current Date With JavaScript1 min 285How TO - Get Current URL With JavaScript1 min 286How TO - Get The Current Screen Size1 min 287How TO - Get Iframe Elements1 min

Website· 14 lessons

288How TO - Make a Website3 min 289How TO - Build a Website3 min 290How TO - Make a Website with Bootstrap1 min 291How TO - Make a Website with Bootstrap 41 min 292How TO - Make a Website with Bootstrap 51 min 293How TO - Create and View a Website2 min 294How to make a link tree website3 min 295How To Make a Restaurant website3 min 296How TO - Make an HTML Book2 min 297How TO - Center Website1 min 298How TO - Contact Section1 min 299How TO - About Page1 min 300How TO - Style a Header1 min 301How TO - Example Website1 min

Grid· 9 lessons

302How TO - Two Column Layout1 min 303How TO - Three Column Layout1 min 304How TO - Four Column Layout1 min 305How TO - Expanding Grid1 min 306How TO - List Grid View1 min 307How TO - Mixed Column Layout1 min 308How TO - Column Cards1 min 309How TO - Responsive Zig Zag Layout1 min 310How TO - Blog Layout1 min

Google· 4 lessons

311How TO - Google Charts1 min 312How TO - Google Fonts1 min 313How TO - Google Font Pairings1 min 314How to Set Up Google Analytics3 min

Converters· 4 lessons

315How TO - Weight Converter3 min 316How TO - Temperature Converter2 min 317How TO - Length Converter4 min 318How TO - Speed Converter2 min

Blog· 3 lessons

319How TO - Get a Developer Job6 min 320How TO - Become a Front-End Developer2 min 321How TO - Hire Developers2 min