HTML Codes
Code Snippets
-
Navbars
- Minimalist Navbar [Preview]
- Bold & Brutalist Navbar [Preview]
- Neumorphic Navbar [Preview]
- Glassmorphic Navbar [Preview]
- Corporate & Professional Navbar [Preview]
- Playful & Animated Navbar [Preview]
- Retro 90s Navbar [Preview]
- Animated Gradient Navbar [Preview]
- Dark Mode / Themed Navbar [Preview]
- Classic Sticky Navbar [Preview]
- Shrink on Scroll Sticky Navbar [Preview]
- Reveal on Scroll Up Sticky Navbar [Preview]
- Change on Scroll Sticky Navbar [Preview]
- Mega Menu Navbar [Preview]
- Off-Canvas Slide-in Navbar [Preview]
- Full Screen Overlay Navbar [Preview]
- Search-Focused Navbar [Preview]
- Collapsible Vertical Sidebar [Preview]
- CTA-Focused Navbar [Preview]
- Progress Bar Navbar [Preview]
- Centered Logo Navbar [Preview]
- Split Navbar [Preview]
- Top Bar & Main Nav Combo [Preview]
- Single-Page Anchor Link Navbar [Preview]
- Icon-Only Navbar [Preview]
- Classic Hamburger-to-Dropdown [Preview]
- Responsive Top/Bottom Combo [Preview]
- Priority+ Responsive Navbar [Preview]
- Swipeable Mobile Menu [Preview]
- Accessible Mega Menu [Preview]
- Magnetic Links Navbar [Preview]
- Command Palette Navbar [Preview]
- Circular/Radial Menu [Preview]
- Animated SVG Border Navbar [Preview]
-
Backgrounds
- Background image — whole page
- Background image — all instances of an element
- Background image — using a class
- Background image — using an ID
- Background image — non-repeating
- Background image — blended with background color
- Mix an element with the backdrop
- Background color — whole page
- Background color — all instances of an element
- Background color — using a class
- Background color — using an ID
-
Borders
-
Color
-
Form Codes
-
Flexbox — Photo Gallery Examples
-
Flexbox — Card Examples
-
Flexbox — Grids
-
Flexbox — Media Objects
-
Flexbox — Website Layout Examples
-
Flexbox — Form Examples
-
CSS Grid — Photo Gallery Examples
- Responsive - Using same-size images
- Responsive - Align items to stretch (default)
- Responsive - Align items to start
- Responsive - Align items to center
- Responsive - Align items to end
- Responsive - Span 5 columns
- Responsive - Span 3 columns, 2 rows
- Responsive - Span 3 columns, 3 rows
- Fluid - Using same-size images
- Fluid - Align & justify items stretch
- Fluid - Align & justify items start
- Fluid - Align & justify items center
- Fluid - Align & justify items end
- Fluid - Span 5 columns
- Fluid - Span 3 columns, 2 rows
- Fluid - Span 3 columns, 3 rows
-
CSS Grid — Card Examples
- Responsive cards — Align items to stretch (default)
- Responsive cards — Align items to start
- Responsive cards — Align items to center
- Responsive cards — Align items to end
- Responsive cards — Span 2 columns
- Responsive cards — Span 2 rows
- Responsive cards — Span 2 columns, 2 rows
- Fluid cards — Align items to stretch (default)
- Fluid cards — Align items to start
- Fluid cards — Align items to center
- Fluid cards — Align items to end
- Fluid cards — Span 2 columns
- Fluid cards — Span 2 rows
- Fluid cards — Span 2 columns, 2 rows
-
CSS Grid — Forms
-
CSS Grid — Website Layouts
- Website layout template 1
- Website layout template 2
- Website layout template 3
- Website layout template 4
- Website layout template 5
- Website layout template 6
- Website layout template 7
- Website layout template 8
- Website layout template 9
- Website layout template 10
- Website layout template 11
- Website layout template 12
-
CSS Grid — 12 Column Grids
- 12 column grid - Basic example
- 12 column grid - Responsive (media query)
- 12 column grid - Mobile first
- 12 column grid - Vertical
- 12 column grid - Vertical responsive (media query)
- 12 column grid - Vertical mobile first
- 12 column grid - Example 2
- 12 column grid Example 2 - Responsive (media query)
- 12 column grid example 2 - Mobile first
-
Gradients
- Linear gradient — default, 2 colors
- Linear gradient — 3 colors inc transparent
- Linear gradient — offset
- Linear gradient — to bottom
- Linear gradient — to top
- Linear gradient — to right
- Linear gradient — to left
- Linear gradient — to bottom, right
- Linear gradient — to bottom, left
- Linear gradient — specific angle
- Repeating linear gradient
- Repeating linear gradient — diagonal
- Radial gradient
- Radial gradient — circle
- Repeating radial gradient
- Repeating radial gradient — circle
-
Image Codes
-
Link Codes
-
Lists
-
Margins
-
Padding
-
Tables
- All Background Styles
- Cell Backgrounds
background-color- Non-Repeating Background Image
- Background Image
- Single Cell Color
- Color with CSS Classes
- Table & Row Color
- Full Table Color
- Alternating Row Colors
- Bottom Border
- Collapse Table Borders
- Curved Corners
- Double Border & Padding
- Border Except Header
- Rounded Corners
- Cell Borders
- Borders with CSS Classes
- Separate Borders
- Basic Table Border
- Table Background Color
- Table Border Color
- Table Text Color
- Text Formatting
- Basic HTML Table
-
Text
- Font size
- Bold text
- Italic text
- Font family
- Font family — using Google Fonts
- Small-caps
- Small-caps vs all-small-caps
- Font shortcut property
- Text color
- Text background color
- Text shadows
- Text indent
- Line height
- Letter spacing
- Word spacing
- Text decoration
- Text alignment — center
- Text alignment — right
- Text alignment — justify
-
Video/Music Codes
-
CSS Animatable Properties
backgroundbackground-colorbackground-positionbackground-sizeborderborder-colorborder-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-spacingborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthbottombox-shadowcaret-colorclipcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnscontentfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-weightgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-column-endgrid-column-gapgrid-column-startgrid-columngrid-gapgrid-row-endgrid-row-gapgrid-row-startgrid-rowgrid-template-areasgrid-template-columnsgrid-template-rowsgrid-templategridheightleftletter-spacingline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originquotesrighttab-sizetext-decorationtext-decoration-colortext-indenttext-shadowtoptransformvertical-alignvisibilitywidthword-spacingz-index
-
CSS Functions
attr()blur()brightness()calc()calc()— Calculate marginscalc()— Position background imagecircle()contrast()counter()counters()cubic-bezier()drop-shadow()ellipse()grayscale()hsl()hsla()hue-rotate()hwb()image()inset()invert()linear-gradient()matrix()matrix3d()opacity()perspective()polygon()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()rgb()rgba()rotate()rotate3d()rotateX()rotateY()rotateZ()saturate()sepia()scale()scale3d()scaleX()scaleY()scaleZ()skew()skewX()skewY()symbols()translate()translate3d()translateX()translateY()translateZ()url()
-
CSS Selectors
- Universal selector
- Element selector
- Element selector — list of elements
- Attribute selector — attribute presence
- Attribute selector — exact value
- Attribute selector — find a word within a list
- Attribute selector — multiple attributes
- Attribute selector — language subcode matching
- Attribute selector substring matching — starts with value
- Attribute selector substring matching — ends with value
- Attribute selector substring matching — contains value
- Class selector
- Class selector — limited to a specific element
- Class selector — match multiple classes
- ID selector
- ID selector — limited to a selected element
- Pseudo-class
- Pseudo-class — target
- Pseudo-class — language
- Pseudo-class — enabled/disabled
- Pseudo-class — checked
- Pseudo-class — negation
- Pseudo-class — nth-child alternating rows (odd/even)
- Pseudo-class — nth-child alternating three rows
- Pseudo-class — nth-child (specific child)
- Pseudo-class — first-child
- Pseudo-class — last-child
- Pseudo-class — nth-last-child
- Pseudo-class — nth-last-child alternating rows (odd/even)
- Pseudo-class — nth-of-type
- Pseudo-class — nth-of-type alternating odd/even images
- Pseudo-class — nth-of-type alternating three images
- Pseudo-class — nth-last-of-type
- Pseudo-class — nth-last-of-type alternating odd/even images
- Pseudo-class — nth-last-of-type alternating three images
- Pseudo-class — first-of-type
- Pseudo-class — last-of-type
- Pseudo-class — only-child
- Pseudo-class — only-of-type
- Pseudo-class — empty
- Pseudo-class — adjacent sibling combinator
- Pseudo-element — first-line
- Pseudo-element — first-letter
- Pseudo-element — before (unicode)
- Pseudo-element — after (unicode)
- Pseudo-element — before/after (open and closing quotes)
- Adjacent sibling combinator selector
- General sibling combinator selector
- Descendant combinator selector
- Child combinator selector
-
Bootstrap 5 - Alerts
-
Bootstrap 5 - Badges & Tags
-
Bootstrap 5 - Breadcrumbs
-
Bootstrap 5 - Buttons & Button Groups
-
Bootstrap 5 - Cards
-
Bootstrap 5 - Carousel
-
Bootstrap 5 - Collapse & Accordion
-
Bootstrap 5 - Dropdowns
-
Bootstrap 5 - Forms & Layouts
-
Bootstrap 5 - Images
-
Bootstrap 5 - Input Groups
-
Bootstrap 5 - List Groups
-
Bootstrap 5 - Modals
-
Bootstrap 5 - Navbars
-
Bootstrap 5 - Navs (Tabs & Pills)
-
Bootstrap 5 - Pagination
-
Bootstrap 5 - Progress Bars
-
Bootstrap 5 - Tables
-
Bootstrap 5 - Typography
- Abbreviations
- Centered Blockquote
- Right-Aligned Blockquote
- Reversed Blockquote
- Blockquote with Source
- Basic Blockquote
- Code Snippets
- Heading Classes
- Display Headings
- Basic Headings
- Initialism
- Keyboard Inputs
- Lead Body Copy
- Horizontal Description List
- Description List
- Inline List
- Unstyled List
- Marked Text
- Preformatted Text
- Sample Output
- Sub-Headings
- Text Alignment
- Text Transformation
- Variables
Articles with Code Examples
HTML Templates
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties