explaingit

chalarangelo/30-seconds-of-code

★ 127,716JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

30 seconds of code is a learning site with thousands of short, practical code snippets and articles for JavaScript, CSS, HTML, and Git, each readable in under a minute.

Mindmap

mindmap
  root((repo))
    What It Is
      Code snippet site
      Learning articles
      Searchable library
    Topics
      JavaScript
      CSS
      HTML
      Git
    Features
      Browse by tag
      Browse by language
      Short explanations
    License
      CC-BY-4.0 snippets
    Audience
      Frontend developers
      Web learners
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Search the site for a specific JavaScript array or string method snippet to quickly understand how it works with a real example.

USE CASE 2

Browse CSS snippets to find a copy-paste solution for a common layout or animation problem.

USE CASE 3

Use the Git snippets to look up the exact command for a workflow you don't run often.

Tech stack

JavaScriptCSSHTMLAstroNetlify

Getting it running

Difficulty · easy Time to first run · 5min
Free to share and adapt the snippets with credit for any purpose, including commercial use, under Creative Commons BY 4.0.

In plain English

This repository backs a learning website called 30 seconds of code, described in the README as coding articles to level up your development skills. The README directs readers to the project's website, where the articles are organized into collections and snippets that you can browse or search by name, tag, language, or description, with each card opening into a full article that includes code snippets, an explanation, and examples. Topics listed for the repo cover JavaScript, CSS, HTML, Git, and a few related themes. New content contributions are no longer accepted, but you can open an issue to report site problems. The README notes the project is maintained by Angelos Chalaris, the snippets are under a CC-BY-4.0 license, and the website is powered by Netlify, Astro, and GitHub.

Copy-paste prompts

Prompt 1
Give me a JavaScript snippet in the style of 30-seconds-of-code for deep-cloning an object without using JSON.parse, with an explanation and example.
Prompt 2
Find me 3 CSS approaches for centering an element both horizontally and vertically, in the style of 30 seconds of code with code and explanation for each.
Prompt 3
Show me Git snippets for undoing mistakes: how to undo the last commit, discard unstaged changes, and reset a branch to match the remote.
Prompt 4
Give me a JavaScript snippet for debouncing a function call, explain what problem it solves, and show a real-world use case.
Open on GitHub → Explain another repo

← chalarangelo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.