List of Useful Bookmarks

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
• API Tester
  • Allows you to test API requests from within your browser
  • Incredibly useful for testing your own API endpoints eg. serverless functions on Vercel
  • Example would be a GET request to https://scarletti-ben.vercel.app/api/test-proxy?url=https://www.example.com
• Google Takeout
  • Allows you to download all your data for specific Google services
  • Example, you can download all notes and images from Google Keep
  • You can download all services at once, or pick and choose which
  • POSTIT - You can also set to periodically create backups for you to download

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

• Python Logging Module
  • Simply logging library for Python
• Ryven
  • “Flow-based” visual scripting for Python
  • Shows a diagram of sorts with visual nodes when executing Python code
• Code Golf
  • Coding puzzles
• Frontend Mentor
  • Full-stack app building projects
• Example Pygame WASM
  • An example of a game made for browser using Python / Pygame running via WebAssembly (WASM)
• EveryNoise
  • Spotify song genre site from previous Spotify employee
• Flask Dashboard Template
  • Downloadable template for a Flask dashboard app
• Bootstrap Icons
  • A set of downloadable SVG icons for web development
  • Use npm i bootstrap-icons or manually copy SVG code
• Feather Icons
  • A simple SVG icon set for web development
• Radio Garden
  • Click-to-pan globe of global radio stations
• Vimm’s Lair
  • Repository of retro game roms
• Deck of Cards
  • Simple implementation of a deck of cards in HTML / CSS / JavaScript
  • Also has a multiplayer here
• Google Chrome Bookmark Separator
  • Site with a | as the icon to serve as a bookmark toolbar separator
• Cursor AI Code Editor
  • IDE with built in AI
  • Untested
• Jungle Flashcard Genrator
  • AI generated flash cards from slides / YouTube videos
• AutoDraw
  • AI powered site that guesses your drawing and provides clip art
• Midjourney
  • AI image generator with a unique style
  • No free tool

Other