Free Coding Tutorials

Learn to Build.
Pay with $YFIN.

Free beginner tutorials for Chrome Extensions, VS Code, JavaScript tools, CSS animations, and WordPress plugins. Buy the full ebook with $YFIN for complete step-by-step code.

16

Free Tutorials

16

Ebooks Available

$YFIN

Only Payment

30%

Burned Per Purchase

#01Chrome Extension

How to Build Your First Chrome Extension — A Beginner's Guide

Learn how to build a real Chrome Extension from scratch using HTML, CSS, and JavaScript. This guide covers the manifest.json structure, popup UI, and fetching live crypto prices.

chrome extensionjavascriptbeginner

3 min readRead article →

#02Chrome Extension

Build a Chrome Extension Tab Manager — View and Close All Open Tabs

Learn how to build a Tab Manager Chrome Extension using the chrome.tabs API. View all your open browser tabs, search through them, switch to any tab, and close them — all from a clean popup.

chrome extensionchrome.tabs APItab manager

2 min readRead article →

#03Chrome Extension

Build a Chrome Extension to Highlight and Save Text from Any Webpage

Learn how to build a Chrome Extension that captures selected text from any webpage using the Selection API, saves it with chrome.storage.sync, and lets you copy or delete saved snippets.

chrome extensionSelection APIchrome.storage

2 min readRead article →

#04Chrome Extension

Build a Dark Mode Chrome Extension — Toggle Dark Mode on Any Website

Learn how to build a Chrome Extension that injects CSS to toggle dark mode on any website. Uses chrome.scripting to inject styles, and chrome.storage to remember your preference per domain.

chrome extensiondark modeCSS injection

2 min readRead article →

#05Chrome Extension

Build a Crypto Price Ticker Chrome Extension with Live Prices and 24h Change

Learn how to build an advanced Crypto Price Ticker Chrome Extension using the free CoinGecko API. Shows live prices, 24h percentage change, color indicators, auto-refresh, and a favorites list.

chrome extensionCoinGecko APIcryptocurrency

2 min readRead article →

#06VS Code Extension

How to Build Your First VS Code Extension — Commands, Status Bar & Output Channel

Learn how to build a real VS Code extension from scratch using Node.js and the Yeoman generator. Register custom commands in the Command Palette, add a clickable status bar item, and write to an Output Channel.

VS Code extensionvscode APINode.js

2 min readRead article →

#07VS Code Extension

Build a VS Code Snippet Pack Extension — 22 Custom Code Shortcuts

Learn how to build a VS Code snippet extension with 22 ready-to-use code shortcuts for HTML, CSS, JavaScript, and PHP. Includes tab stops, placeholders, and scoped snippets — packaged as a .vsix file.

VS Code extensioncode snippetsproductivity

2 min readRead article →

#08VS Code Extension

Build a Custom VS Code Color Theme — Dark Gold and Light Clean Editions

Learn how to build a VS Code color theme extension from scratch. Design a dark gold YFIN theme and a light clean theme — covering UI workbench colors and syntax token colors.

VS Code extensioncolor themedark mode

2 min readRead article →

50 JavaScript Snippets Every Beginner Should Know — Ready to Copy and Use

50 practical JavaScript snippets across 5 categories: DOM manipulation, arrays & strings, functions & logic, dates & numbers, and browser & storage. Every snippet tested and explained.

javascriptsnippetsDOM

2 min readRead article →

Build 5 Working Web Tools with Pure HTML and JavaScript — No Framework Needed

Learn how to build 5 real web tools from scratch: a calculator with keyboard support, a countdown timer with sound, a to-do list with localStorage, a password generator, and a color picker.

javascriptHTMLCSS

2 min readRead article →

Build an Interactive Webpage Without a Framework — Pure Vanilla JavaScript

Learn how to build 5 interactive webpage components using only HTML, CSS, and JavaScript — no React, no Vue. Includes a product gallery with filter and search, tab switcher, accordion FAQ, character counter, and modal popup.

vanilla JavaScriptinteractive webpageDOM

2 min readRead article →

How to Add a Dark Mode Toggle to Any Website — CSS Variables and localStorage

Learn how to add a professional dark/light mode toggle to your website using CSS custom properties, a single data attribute, smooth transitions, OS preference detection, and localStorage persistence.

dark modeCSS variableslocalStorage

2 min readRead article →

Build Professional Form Validation with JavaScript — No Libraries Needed

Learn how to build form validation from scratch with JavaScript — real-time feedback, beautiful error states, password strength meter, and 8 field types including email, phone, select, and checkbox.

form validationjavascriptUX

2 min readRead article →

CSS Animations for Beginners — 20 Ready-to-Use Effects for Buttons, Cards & Loaders

Learn CSS animations with 20 copy-paste ready effects across 5 categories: button hover effects, card animations, loading indicators, text animations, and page entry effects. No JavaScript required.

CSS animationskeyframeshover effects

2 min readRead article →

Build a Simple Analytics Dashboard with Chart.js — Bar, Line, Pie & Doughnut Charts

Learn how to build a real analytics dashboard with 4 interactive charts using Chart.js loaded via CDN. No npm needed. Includes stats cards, gradient line fills, a custom center label, and live data refresh.

Chart.jsdashboarddata visualization

2 min readRead article →

Build Your First WordPress Plugin — Admin Settings, Hooks & Front-End Output

Learn how to build a real WordPress plugin from scratch using PHP. Create an announcement banner plugin with an admin settings page, Options API, color picker, and properly enqueued CSS and JavaScript.

WordPress pluginPHPWordPress hooks

2 min readRead article →

📚

Want the Full Step-by-Step Code?

Every article is a preview of a complete ebook. Get the full guide with detailed code, explanations, and bonus sections — pay with $YFIN on BNB Smart Chain.

Browse All Ebooks →