Skip to content

Instantly share code, notes, and snippets.

View cferdinandi's full-sized avatar

Chris Ferdinandi cferdinandi

1.9k followers · 2 following
View GitHub Profile
@cferdinandi
cferdinandi / htaccess
Created May 13, 2025 14:01
Gzip setup for .htaccess, taken from the old HTML5 Boilerplate template
# ----------------------------------------------------------------------
# | Compression |
# ----------------------------------------------------------------------
<IfModule mod_deflate.c>
# Force compression for mangled `Accept-Encoding` request headers
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
<IfModule mod_setenvif.c>
@cferdinandi
cferdinandi / 1-scroll.html
Created May 7, 2025 03:16
Watch the tutorial: https://youtu.be/Kws6l0Rp1Yg
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
@cferdinandi
cferdinandi / index-bs.html
Last active May 13, 2025 04:47
Watch the tutorial at https://youtu.be/_gZjjg0xu9A
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<style type="text/css">
body {
margin: 1em auto;
@cferdinandi
cferdinandi / attribute-utilities.css
Last active April 15, 2025 18:06
Watch the tutorial: https://youtu.be/kKdH6QLQGFk
.button-favorites[aria-pressed="true"] {
background-color: #ff4136;
border-color: #ff4136;
color: #ffffff;
}
@cferdinandi
cferdinandi / 1-nested.js
Created April 8, 2025 16:48
View the tutorial for this code: https://youtu.be/YCGWNaI8w1E
function handleClick (event) {
// Make sure clicked element has the .save-data class
if (event.target.matches('.save-data')) {
// Get the value of the [data-id] attribute
let id = event.target.getAttribute('data-id');
// Make sure there's an ID
if (id) {
@cferdinandi
cferdinandi / index.html
Created April 1, 2025 18:01
Watch the tutorial on YouTube: https://youtu.be/v-3O0MCl41k
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toast Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
@cferdinandi
cferdinandi / 1-promise-then.html
Created March 25, 2025 18:37
Watch the tutorial for this code: https://youtu.be/-KT7fSw0MuQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promise.then()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@cferdinandi
cferdinandi / 1-basics.css
Created March 18, 2025 15:45
Watch the tutorial: https://youtu.be/hKGX1jRpp6I
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
:is(h1, h2, h3, h4, h5, h6) {
font-weight: bold;
}
@cferdinandi
cferdinandi / count-up-display.js
Created March 12, 2025 15:56
Watch the tutorial for this code: https://youtu.be/Ap26IwDVOV8
customElements.define('count-up-display', class extends HTMLElement {
/**
* The class constructor object
*/
constructor () {
// Gives element access to the parent class properties
super();
@cferdinandi
cferdinandi / ajax-html.js
Created February 13, 2025 17:24
Follow the tutorial for this code: https://gomakethings.com/how-to-dynamically-update-content-with-an-html-web-component/
customElements.define('ajax-html', class extends HTMLElement {
/**
* The class constructor object
*/
constructor () {
// Always call super first in constructor
super();