ESSENTIAL LINKS FOR FONTEND WEB DEVELOPER

2023-10-29

Software | Technology | Webdev | Internet | Lists

Html
Gems

ESSENTIAL LINKS FOR FONTEND WEB DEVELOPER

Page content

UPDATED ON: 2024-04-03
Page will be updated in the future, so check back later on

Here are some handy online tools and various mandatory links for front end developer.
This is a fine selection from me, which i accumulated during last month of web investigations.
Hope that you will find in this list what you are looking for.
If you have suggestions or any commentaries to following breakdown, [drop me a line] please.

░▒▓ WEBDEV ROADMAP ▓▒░

[LITE ROADMAP] ► LIte version for beginners
[FULL ROADMAP] ► Complete roadmap for serious fontend developer

░▒▓ WEB STANDARDS ▓▒░

[MOZILLA WEBDEV DOX] ► Mozilla docs for web developer
[MOZILLA HTML REF] ► Mozilla HTML reference
[MOZILLA CSS REF] ► Mozilla CSS reference
[HTML REF] ► HTML reference
[CSS REF] ► CSS reference
[JS REF] ► JS reference
[CANIUSE] ► Provides up-to-date browser compatibility of front-end web technologies on various browsers

░▒▓ GUIDES & HOWTOs ▓▒░

[INTERNETISHARD] ► Excelllent HTML/CSS guide
[W3SCHOOL HOWTOs] ► Various code snippets for daily use

░▒▓ HTML ▓▒░

[HTML2PUG] ► HTML to PUG converter
[PUG2HTML] ► PUG to HTML converter

░▒▓ CSS ▓▒░

[STYLELINT] ► Checker of CSS rules
[GRID GENERATOR #1] ► Very neat CSS grid automatic constructor
[GRID GENERATOR #2] ► Another grid generator
[TOOLTIP GENERATOR] ► Tooltip generator
[SHADOW GENERATOR] ► Make your CSS shadow fast!
[GRADIENTS] ► CSS gradient tool
[CSS BEAUTIFIER] ► Format your CSS code, make it minified or more readable
[AUTOPREFIXER] ► add -moz -webkit and -o prefixes in automatic way
[STYLE NORMALIZER] ► Normalize browser default style
[SCSS2CSS] ► SCSS to CSS converter
[CSS TRICKS] ► excellent resource with loads of CSS tips and tricks

░▒▓ CODE ▓▒░

[HTML VALIDATOR] ► Validate HTML code
[JS VALIDATOR] ► Validate JS code
[CODEPEN] ► Code online combining HTML, CSS, JS on one page
[JSON PLACEHOLDER] ► Free fake and reliable API for testing and prototyping

░▒▓ COLOR ▓▒░

[HTML COLOR CODES] ► Color codes for HEX/RGB/HSL spaces
[COLOR HEX] ► Another place for getting color HEX codes
[COLOR WHEEL] ► Color wheel palette
[COLOR CONVERTER] ► convenient color converter
[COLORA] ► Excellent offline color picker for desktop computer

░▒▓ FONTS ▓▒░

[FONT SHARE] ► 100% free fonts for personal and commercial use
[FONTS CONVERTER #1] ► Generate web compatible font packs WOFF2/WOFF/EOT/SVG
[FONTS CONVERTER #2] ► Excellent alternative to Fontsquirrel
[EM2PX] ► EM to PX converter
[UNICODE CHART] ► Comprehensive list of unicodes for various symbols
[SAFE FONTS] ► Safe web fonts list for various platforms
[GLYPHTER] ► Create custom fonts from SVG files
[COPYPASTE] ► Codes of hidden graphical symbols
[COOL TEXT GEN] ► Decorate your text with fancy graphics

░▒▓ SVG ▓▒░

[SVG URL ENCODER] ► URL-encoder for SVG
[SVGOMG] ► SVG optimizer
[SVG COLOR] ► Change SVG color using CSS filter
[SVG CLEANER] ► nice GUI-based SVG compressor
[SVGO] ► a bit more modern & efficient command line-based SVG compressor

░▒▓ GRAPHICS ▓▒░

[HERO ICONS] ► Change SVG color using CSS filter
[DIAGRAMS] ► Draw diagrams in online tool
[PINGA] ► Excellent PNG/JPG compressor
[GIFOPTIM] ► solid GIF optimizer, animated GIF are supported also
[SQUOOSH] ► online image optimizer with great functionality
[GIF OPTIMIZER] ► online animated GIF optimizer
[BETTER PLACEHOLDER] ► Generate custom placeholder images for your mockup webpages
[DUMMY IMAGE] ► Another placeholder alternative
[FAVICON GENE #1 ] ► Advance ico generator & bundler
[FAVICON GEN #2] ► Generate your icon from text input

░▒▓ FIREFOX ADDONS ▓▒░

[COLOR EYEDROPPER] ► excellent color picker for Firefox
[PIXEL PERFECT] ► tool to make pixel-perfect websites

░▒▓ VARIOUS TOOLS ▓▒░

[PAGESPEED] ► Measure your site for standard matching and other problems

░▒▓ WEB PLATFORMS / HOSTING ▓▒░

[VERCEL] ► cloud platform, which is specializing in deployment of static sites and other server functions
[NETLIFY] ► another modern development platform, where you can host your web projects
[CODEBERG] ► host static web sites like a PRO
[NEOCITIES] ► another nice place to store static pages
[GITHUB] ► host your webapps & websites

░▒▓ YT CHANNELS ▓▒░

[SLAYING THE DRAGON] ► excellent Canadian Web Developer
[GEEKPROBIN] ► coding frontend meditation