Post

List of Useful Bookmarks

List of useful bookmarks, mostly for web development. Previously from html-demos repository

Posted Updated
By Ben Scarletti
9 min read

Useful Bookmarks

Below is a list of URLs to useful sites for HTML / CSS / JavaScript development

  • CSS Buttons
    • Examples of CSS buttons with varying styles and animations
  • CSS Box Shadows
    • Examples of CSS box shadows with varying styles
  • CodePen
    • Three panel editor for HTML / CSS / JavaScript
    • Great for prototyping site layout, with live reloading
  • Mozilla Playground
    • Three panel editor for HTML / CSS / JavaScript
    • Very simplified, click to run, and an in-built formatter
  • GitHub CSS Buttons
    • Buttons from GitHub with options to customise
    • Easy options to copy and paste CSS or as an HTML element
  • Open Source Google Fonts
    • A set of open-source fonts for use in personal and commercial projects without attribution
  • Open Source Google SVG Icons
    • A set of open-source icons for use in personal and commercial projects without attribution
    • Follows the Google Material style
    • Can be used individually or as font served via CDN
    • You can get the actual SVG code, rather than a reference to their stylesheet, if you press copy on the SVG icon itself
  • W3 CSS Playground
    • Site for learning / testing CSS variables and how they affect different HTML elements
  • Image Clip Paths
    • Can also be used for image transitions
  • Viewport Size Checker
    • Check viewport size, test with zoom and fullscreen via F11
  • Contrast Ratio Checker
    • Site for checking the contrast ratio between any two colours to make sure that text / elements are readable
  • Free Dictionary API
    • Simple to use dictionary API that allows word lookup via simple GET request to URL eg. https://api.dictionaryapi.dev/api/v2/entries/en/hello
  • Colour Palette Generator
    • Creates a 5 colour palette of random but complementary colours with many options for exporting
  • Flask App Tester
    • Three panel editor for HTML / Python / CSS with JavaScript inside the HTML
    • Pyodide powered site with an editor for app.py, index.html and styles.css to build a test site with Flask
  • Gemini AI
    • Large Language Model / LLM
    • Alternative to ChatGPT
    • Fast but mostly useless
  • Claude AI
    • Large Language Model / LLM
    • Alternative to ChatGPT
    • Very detailed, often overcomplicates things
  • DeepSeek
    • Large Language Model / LLM
    • Alternative to ChatGPT
    • Untested
  • Google AI Studio
    • Large Language Model / LLM
    • Alternative to ChatGPT
    • Specifically tuned for full-stack web developement
    • Untested
  • CSS Gradient Generator
    • Create CSS for colour gradients
    • Note: Many other sites do this as well, make sure to shop around!
  • Anvil Pure Python Web Apps
    • Online IDE / cloud-based coding environment
    • Platform for building and hosting full-stack web apps
    • Python as the main code window with a drag-and-drop designer for visual components
    • Untested
  • JSONBlob
    • Used to create and edit .json files, without an API key
    • Uses static URLs that can be accessed publically
    • Useful for creating persistent storage across multiple sites for serverless / static sites
    • Files are deleted if not accessed for 30 days
  • ngrok API Gateway
    • Used for sharing localhost servers and applications
    • Creates a secure tunnel to expose your local development server to the internet
  • Google Colab
    • Google Colab (Colabaratory) is a Jupyter Notebook service that requires no setup to use and provides free access to computing resources, including GPUs
    • Connects to Google Drive for saving files
    • Allows you to run and test Python code in your browser
  • GitHub Dev
    • Online IDE / cloud-based coding environment
    • The github.dev web-based editor is a lightweight editing experience that runs entirely in your browser. You can navigate files and source code repositories from GitHub, and make and commit code changes
    • Switch the .com of any repository to .dev to test, eg. https://github.com/scarletti-ben/html-demos to https://github.dev/scarletti-ben/html-demos
  • VSCode Dev
    • Online IDE / cloud-based coding environment
    • The vscode.dev web-based editor is a lightweight editing experience that runs entirely in your browser. You can navigate files and source code repositories from GitHub, and make and commit code changes
    • More general than GitHub Dev but similar general principle
    • Slightly more features and allows editing local files
  • CodeSandbox
    • Online IDE / cloud-based coding environment
    • Create and edit projects in the browser with live previews
    • Supports React, Vue, and Next.js with NPM integration
    • Connects to GitHub and uses the VSCode interface
    • Instant dev environment with no setup needed, useful for prototyping
    • Simple test project here
    • Untested
  • Replit
    • Online IDE / cloud-based coding environment
    • Allows the creation of projects in many different languages with templates
    • Has an AI assistant to setup new apps
    • Limit of 10 apps at a time
    • Allows you to write and run Python in the browser
  • W3 Schools Editor
    • Single document editor for HTML / CSS / JavaScript
    • Decent for prototyping site layout, no live reloading
  • Programiz HTML Editor
    • Simplified online IDE / cloud-based coding environment
    • File based editor for HTML / CSS / JavaScript
    • Great for prototyping site layout, with live reloading
  • OneCompiler
    • Online IDE / cloud-based coding environment
    • Edit and run code in the browser
    • Has many different templates eg. React, Angular, Bootstrap, and Vue
    • Compilation / building is done simply by hitting the Run button
  • Stackblitz
    • Online IDE / cloud-based coding environment
    • Edit and run code in the browser
    • Automatically compiles and runs in WebContainer to run Node.js in browser, great for React prototyping
  • Tiiny Host
    • Quick host a single HTML file to a live URL
  • PyScript
    • A CDN import and syntax to allow the usage of Python in HTML using custom <py-script> tags
    • Also provides an online IDE / cloud-based coding environment that runs Python code here and automatically hosts at a public URL
  • Base64 Decoder
    • Encode and decode to and from Base64
  • Stable Diffusion
    • AI text-to-image model / generator
  • The Noun Project
    • Sets of free icons and stock photos
    • Might cost money to sign up and access content royalty-free
  • Python Anywhere
    • Online IDE / cloud-based coding environment
    • Platform for building and deploying / hosting web apps
    • Gives access to server-based Python in browser
    • Many pre-configured templates / environments eg. Flask, web2py, Django
    • Untested
  • JSDoodle
    • Online IDE / cloud-based coding environment
    • Write and run JavaScript in a Node.js environment
    • Also has options for many other languages, such as Python
    • Easily share projects / “doodles”
  • Terminal CSS
    • Customisable download for terminal.css which is a site theme that modifies base HTML selector styling eg. body / h1 etc.
    • Uses Fira Code font by default
    • Comes from the Terminal Repository here
  • Ace Kitchen Sink
    • Testing ground for Ace Editor
    • Also has a similar page here for multiple editors
  • GoDot Web Engine
    • Allows you to create and edit Godot projects in-browser without installing anything
  • Isotope Grid Library
    • A JavaScript library for HMTL / CSS grids with a simple documented syntax for grid filtering / sorting
    • The main page has a demo for testing purposes
  • Rocket Powered Pastebin
    • Simple version of Pastebin with a no-key API for POST, GET, and DELETE requests by URL
    • The web version can be found here
    • Easy to share the URL to others
    • Not safe to assume a URL is fixed forever as anyone can edit or delete
  • Pastebin
    • Simple site for sharing raw code / snippets
    • Makes it easy to share text files
  • Logo Generator
    • AI logo generator
    • Costs money to download but good for prototyping

Useful Guides and Learning Resources

  • CSS Flexbox Layout Guide
    • Very good diagrams and some explanation of the more complex side of CSS’s flexbox
  • Web Development Resources
    • A GitHub README guide with many resources helpful for web development
  • Web Dev Learning Site
    • Helpful cheat sheet for HTML: https://htmlcheatsheet.com/
    • Helpful cheat sheet for CSS: https://htmlcheatsheet.com/css/
    • Helpful cheat sheet for HTML: https://htmlcheatsheet.com/js/
  • Pyodide Documentation
    • Documentation for Pyodide which allows running Python in browser via WebAssembly (WASM)
  • YouTube Playlist History
    • Site for remembering where in a YouTube playlist you are
  • Clippy
    • A CSS clip-path generator eg. clip-path: polygon(50% 0%, 0% 100%, 100% 74%);
  • Spotify for Developers
    • Gives access to your Spotify data which can be managed with via with an interactive code window
    • Uses JavaScript to make queries like “top 5 most played tracks this year”
  • Connect Google Form to Google Drive
    • Guide on how to use Google App Script (.gs) to connect a form to Google Drive
  • One-Minute CSS Tutorials
    • Very simple / shot CSS tutorials, testable via built-in CodePen
  • List of Free Web Development Tools
    • Reddit post of free resources and tools for web development
  • CSS Animation Generor
    • Generates CSS code for different animations
    • Allows customising different parts of the animation with a visual representation on the right
  • Favicon Generator
    • Icon generator for web development to give a uniform icon across browser / mobile
    • Generates icons with a colour background for contrast and adds border radius
    • Had some issues with the icon generation recently
  • JS Paint
    • Clone of the old-school Microsoft Paint application, in your browser
    • Allows copy / paste / cut and saving to device
  • Future Tools
    • Collection of the newest AI tools

Miscellaneous

Other

miscellaneous
miscellaneous web dev ai bookmarks websites tools useful reminder
This post is licensed under CC BY 4.0 by the author.