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 / 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();
@cferdinandi
cferdinandi / ajax-form.js
Created February 12, 2025 17:04
Read the tutorial: https://gomakethings.com/progressively-enhancing-forms-with-an-html-web-component-part-2/
customElements.define('ajax-form', class extends HTMLElement {
/**
* The class constructor object
*/
constructor () {
// Always call super first in constructor
super();
@cferdinandi
cferdinandi / 1-loop-and-string.html
Created January 28, 2025 18:00
Watch the tutorial: https://youtu.be/YDPpt5KO9Zs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loop + String</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.html
Created January 23, 2025 20:06
Watch the tutorial: https://youtu.be/yisEDBIl9Yk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ecommerce Platform</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.html
Created January 21, 2025 04:25
https://gomakethings.com/how-would-you-share-state-between-web-components/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ecomerce Platform</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.jquery.html
Last active January 24, 2025 19:44
Watch the tutorial for this source code at https://www.youtube.com/watch?v=TnQ0ooEMRqc
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lettering.js Examples</title>
<meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
<meta name="author" content="Dave Rupert">
@cferdinandi
cferdinandi / index.html
Last active December 23, 2024 14:55
Source code for this article: https://gomakethings.com/testing-dom-manipulation/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mocha Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>