-
HTML Examples
Forms
- Basic form example (with no styles)
- Form with top-aligned labels
- Form with left-aligned labels
- Form with right-aligned labels
- Inline form
- Accessible compact form
- Bootstrap form using grid system
- Bootstrap form with validation styles & feedback icons
Form Elements
button
textarea
select
select
withsize
attributeselect
with multiple items able to be selecteddatalist
fieldset
output
progress
meter
input type="hidden"
input type="text"
input type="color"
input type="number"
input type="range"
input type="date"
input type="search"
input type="tel"
input type="url"
input type="email"
input type="password"
input type="date"
input type="month"
input type="week"
input type="time"
input type="datetime-local"
input type="checkbox"
input type="radio"
input type="file"
input type="submit"
input type="image"
input type="reset"
input type="button"
Image Examples
- Basic image example
- Linked image
- Image with border
- Responsive image
Table Examples
- Basic table
- Table with
thead
,tbody
, andtfoot
- Table with border
- Table with alternating colors
- Table with border and alternating colors
- Table with
colspan
- Table with
rowspan
- Table with
colgroup
- Table with
colgroup
andcol
Text Examples
b
for bold textblockquote
for quotes from another sourcebr
for line breakscite
for citationscode
for codedfn
for defining instance of a termdel
for deleted textem
for stress emphasish1
-h6
for headingsi
for text in an alternate voice or moodins
for inserted Textkbd
for keyboard Textp
for paragraphspre
for preformatted Textsmall
for small print, side comments, etcq
for single-line quotes from another Sourcesamp
for sample output from a computer programvar
for a variable within the proseLink Examples
- Basic link
- Email link
- Email link with subject line
- "Nofollow" link
- Open link in new window
- Open link in a named window
- Link an image
- Link with hover effect
List Examples
Unordered Lists
- Basic unordered list
- Nested unordered lists
- Unordered list with square bullets
- Unordered list with circle bullets
- Unordered list with image bullets
Ordered Lists
- Basic ordered list
- Nested ordered list
- Ordered list with lowercase latin characters
- Ordered list with uppercase latin characters
- Ordered list with lowercase roman numerals
- Ordered list with uppercase roman numerals
- Ordered list with lowercase Greek characters
Definition Lists
- Basic definition list
- Definition list with a
dfn
- Nested definition list
- Definition list with multiple terms
- Definition list with multiple definitions
HTML Articles
Background Code
- Background Codes
- Background Image Code
- Background Music Code
- Fixed Background Code
HTML Text
- Text Codes
- Text Color Codes
- Font Size
- Font Style Codes
- Marquee Codes (scrolling text)
HTML Colors
- HTML Color Picker
- HTML Color Chart
Other HTML Codes
- Border Codes
- Comment Box Codes
- Cursor Codes
- Email Code
- HTML Marquees
HTML Generators
- Music Code Generator
- HTML Table Generator
-
CSS Examples
Color
- Background color
- Text color
- Border color
- Caret color
- Column rule color
- Outline color
- Text decoration color
- Text shadow color
- Filter
- Opacity/transparency
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
- Background-Attachment Example
- Background-Color Example
- Background-Image Example
- Background-Position Example
- Background-Repeat Example
- Background Shorthand Example
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
Borders
- Border color
- Border style
- Border width
- Border radius (rounded corners)
- Border image
- Border collapse
- Border All Sides Example
- Border Bottom Example
- Border Bottom Shorthand Example
- Border Shorthand Example
Margins
- Same margin on all sides
- Different margin on all sides
- Margin — top
- Margin — right
- Margin — bottom
- Margin — left
- Margin — auto
Padding
- Same padding on all sides (shorthand)
- Different padding on all sides
- Padding — top
- Padding — right
- Padding — bottom
- Padding — left
- Padding Box Model Border-Box Example
- Padding Box Model Example
- Padding Different For Each Side Example
- Padding Shorthand Example
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
- Font-Size-Adjust Example
- Font-Stretch Example
- Font-Style Example
- Font-Variant Example
- Font-Weight Example
- Font Property Shorthand Example
- Text-Align Example
- Text-Transform Example
- Text Direction Example
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
Lists
- List with circle bullets
- List with image bullets
- List style position
- List style shorthand
- Unstyled lists
- Inline lists
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
- Auto-placement form example 1
- Auto-placement form example 2
- Auto-placement form example 3
- Explicitly placed form example 1
- Explicitly placed form example 2
- Explicitly placed form example 3
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
Flexbox — Photo Gallery Examples
- Flex-direction row
- Flex-direction column
- Align items stretch
- Align items flex-start
- Align items flex-end
- Flexbox — Align items center
Flexbox — Card Examples
- Cards — Align items stretch
- Cards — Align items flex-start
- Cards — Align items flex-end
- Cards — Align items center
- Cards — Double-width
- Cards — Flex direction column
Flexbox — Grids
- Random grid
- 12 column grid 1
- 12 column grid 2
- Vertical 12 column grid 1
- Vertical 12 column grid 2
- Nested grid
Flexbox — Media Objects
- Image on left
- Image on right
- Nested media objects
- Using HTML entity instead of image
- Using Unicode emoji instead of image
Flexbox — Website Layout Examples
- Layout 1
- Layout 2
- Layout 3
- Layout 4
- Holy grail layout (method 1)
- Holy grail layout (method 2)
Flexbox — Form Examples
- Navbar form with adjacent search
- Basic form 1
- Basic form 2
- Form with stretchy textarea
- Form with stretchy textarea 2
- More form elements
Miscellaneous CSS Examples
- Class Example
- Class Nested Example
- Float Align Boxes Example
- Float Left Example
- Float Right Example
- Height Width Example
- Id Selector Example
- Implementing Css Embedded Example
- Implementing Css External Example
- Implementing Css Import Example
- Implementing Css Inline Example
- Layers Example
- Layers With Opacity Example
- Letter-Spacing Example
- Margin Shorthand Example
- Max-Height Max-Width Example
- Min-Height Min-Width Example
- Positioning Absolute Example
- Positioning Fixed Example
- Positioning Relative Example
- Unicode-Bidi Example
- White-Space Example
- Word-Spacing Example
-
CSS Properties
--*
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
appearance
backface-visibility
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
background
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-bottom
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-source
border-image-slice
border-image-width
border-left-color
border-left-style
border-left-width
border-left
border-radius
border-right-color
border-right-style
border-right-width
border-right
border-spacing
border-style
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-top
border-width
border
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
clip
color
color-interpolation-filters
columns
column-count
column-fill
column-gap
column-gap
(Flex)column-gap
(Grid)column-gap
(Multi Column)column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
flood-color
flood-opacity
font-family
font-feature-settings
font-kerning
font-size-adjust
font-size
font-stretch
font-style
font-synthesis
font-variant
font-variant-caps
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight
font
gap
(Flex)gap
(Grid)gap
(Multi Column)grid-area
grid-area
(Span)grid-auto-columns
grid-auto-columns
(Multiple Values)grid-auto-flow
grid-auto-flow
(Dense)grid-auto-flow
(Sparse)grid-auto-rows
grid-auto-rows
(Multiple Values)grid-column-end
grid-column-end
(Span)grid-column-gap
grid-column-start
grid-column-start
(Span)grid-column
grid-column
(Span)grid-gap
grid-row-end
grid-row-end
(Span)grid-row-gap
grid-row-start
grid-row-start
(Span)grid-row
grid-row
(Span)grid-template-areas
grid-template-columns
grid-template-rows
grid-template
grid
hanging-punctuation
height
hyphens
image-rendering
isolation
justify-content
justify-items
justify-self
left
letter-spacing
lighting-color
line-break
line-height
list-style-image
list-style-position
list-style-type
list-style
margin-bottom
margin-left
margin-right
margin-top
margin
max-height
max-width
min-height
min-width
mix-blend-mode
nav-up
nav-down
nav-left
nav-right
object-fit
object-fit
(Contain)object-fit
(Cover)object-fit
(Fill)object-fit
(None)object-fit
(Scale-Down)object-position
opacity
order
orphans
outline-color
outline-offset
outline-style
outline-width
outline
overflow
overflow-wrap
overflow-x
overflow-y
padding-bottom
padding-left
padding-right
padding-top
padding
perspective
perspective-origin
place-content
place-items
place-self
position
quotes
resize
right
row-gap
(Flex)row-gap
(Grid)tab-size
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-justify
text-indent
text-orientation
text-overflow
text-shadow
text-transform
text-underline-position
top
transform
transform-box
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
white-space
widows
width
will-change
word-break
word-spacing
word-wrap
writing-mode
z-index
-
CSS Animatable Properties
background
background-color
background-position
background-size
border
border-color
border-width
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-spacing
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bottom
box-shadow
caret-color
clip
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
content
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-weight
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column-end
grid-column-gap
grid-column-start
grid-column
grid-gap
grid-row-end
grid-row-gap
grid-row-start
grid-row
grid-template-areas
grid-template-columns
grid-template-rows
grid-template
grid
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
quotes
right
tab-size
text-decoration
text-decoration-color
text-indent
text-shadow
top
transform
vertical-align
visibility
width
word-spacing
z-index
-
CSS Functions
attr()
(title)attr()
(href)blur()
brightness()
calc()
calc()
— Calculate marginscalc()
— Position background imagecircle()
contrast()
counter()
counters()
cubic-bezier()
drop-shadow()
ellipse()
grayscale()
hsl()
hsla()
hue-rotate()
hwb()
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()
translate()
translate3d()
translateX()
translateY()
translateZ()
url()
-
JavaScript Examples
Windows
- Popup Window - onClick
- Popup Window - Unobtrusive
- Timed Redirect - onClick
- Timed Redirect - Unobtrusive
- Refresh Page - onClick
- Refresh Page - Unobtrusive
- Refresh Page Automatically
Dialogs/Boxes
- Alert Box - onClick
- Alert Box - Unobtrusive
- Confirmation Box - onClick
- Confirmation Box - Unobtrusive
- Jump Menu with Conditional Confirmation Box - Unobtrusive
- Basic Prompt - onClick
- Basic Prompt - Unobtrusive
- Conditional Prompt - Unobtrusive
- "Print this Page" - onClick
- "Print this Page" - Unobtrusive
Dates
- Current Date/Time
- Current Date/Time - Locale String
- Current Date/Time - Locale String with Locale Examples
- Current Date - MM/DD/YYYY
- Current Date - DD/MM/YYYY
- Current Time - 24hr
- Current Time - 12hr
- Current Date - Long Format (e.g. Saturday, November 26, 2016)
- Current Date - Short Format (e.g. Sat, Nov 26, 16)
Loops
- "For" Loop
- "While" Loop
- "Do While" Loop
- Break a "For" Loop
- Break a "While" Loop
- Break & Continue a "For" Loop
- Break & Continue a "While" Loop
- "For In" Loop (loop through the enumerable properties of an object)
- Nested "For" Loop
- Nested "While" Loop
JavaScript Math
Math.ceil()
Math.floor()
Math.max()
Math.min()
Math.PI
Math.pow()
Math.round()
Math.sqrt()
Random Numbers
Math.random()
Math.random()
as a rounded integer- Function: Random Integer (Max Excluded)
- Function: Random Integer (Max Included)
JavaScript Arrays
- Create an Array
- Concatenate Two Arrays
- Concatenate Three Arrays
- Join Array Elements into a String
- Remove last Element from Array
- Remove first Element from Array
- Add elements to the end of an Array
- Add elements to the beginning of an Array
- Sort Array Alphabetically (Ascending)
- Sort Array Alphabetically (Descending)
- Reverse an Array
- Extract Elements from an Array
Conditional Statements
- JavaScript "If" Statement
- JavaScript "If Else" Statement
- JavaScript "If Else If" Statement
- JavaScript "Switch" Statement
- JavaScript Conditional (ternary) Operator
JQuery Examples
Show/Hide
- Hide Current Element
- Hide Another Element
- Show Content
- Show & Hide Content
- Toggle Content
- Toggle Content - Fast
- Toggle Content - Slow
- Toggle Content - Really Slow
Fade In/Fade Out
- Fade Out Current Item
- Fade Out Another Item
- Fade In Content
- Fade In & Fade Out Content
- Toggle Fade In/Fade Out
- Toggle Fade In/Fade Out - Fast
- Toggle Fade In/Fade Out - Slow
- Toggle Fade In/Fade Out - Really Slow
- Fade To
jQuery Slide
- Slide Down
- Slide Up
- Slide Toggle
- Slide Toggle - Fast
- Slide Toggle - Slow
- Slide Toggle - Really Slow
- Slide Toggle - Ease Linear
jQuery Animation
- jQuery Animate
- jQuery Animate - Relative Values
- jQuery Animate - Toggle
- jQuery Animate - Chained
- jQuery Animate - Stop/Start
jQuery & CSS
- Get an Element's CSS Property Value
- Set CSS - Basic Example
- Set CSS - Multiple Declarations
- Set CSS - Increment a Value
- Set CSS - Add a Class
- Set CSS - Remove a Class
- Set CSS - Toggle a Class
AJAX with jQuery
- AJAX Example using
load()
- AJAX Example using
load()
with a Callback Function - AJAX Example - Load only a part of the Remote Page
- AJAX Example using
getJSON()
DOM Traversal
- The
find()
Method - The
has()
Method - The
eq()
Method - The
filter()
Method - The
not()
Method - The
siblings()
Method Add/Remove Content
- The
before()
Method - The
after()
Method - The
prepend()
Method - The
append()
Method - The
prependTo()
Method - The
appendTo()
Method - The
clone()
Method withprependTo()
- The
clone()
Method withappendTo()
- The
empty()
Method - The
remove()
Method - The
detach()
Method Set Content
- The
html()
Method (add HTML) - The
text()
Method (add text) - The
val()
Method (populate a form element) - The
attr()
Method (change an attribute value) - The
attr()
Method (change multiple attribute values) Get Content
- The
html()
Method (get HTML) - The
text()
Method (get text) - The
val()
Method (get value from a form element) - The
attr()
Method (get an attribute value) Set Dimensions
width()
&height()
- Excludes padding, margins, and borders.innerWidth()
&innerHeight()
- Includes padding.outerWidth()
&outerHeight()
- Includes padding and borders.Get Dimensions
width()
&height()
- Excludes padding, margins, and borders.innerWidth()
&innerHeight()
- Includes padding.outerWidth()
&outerHeight()
- Includes padding and borders.outerWidth( true )
&outerHeight( true )
- Includes padding, margins, and borders.- Get window width & height.