Web Development

Coding and web design: best practices, resources. Covers HTML, CSS, WordPress, quality/integrity testing tools and more.

"Old, stale site design scares people off. So do sites that load slowly. And sites that are cluttered with irrelevant ads. And sites that don’t work properly on mobile devices."

- Sonia Simone on Copyblogger, Apr 5, 2015.

Code Generation/Repair

 * Dan's Tools has powerful dev tools, including .htaccess generator
 * Prefixing CSS for compatibility: http://pleeease.io/play/
 * Remembering what to prefix: http://shouldiprefix.com
 * Generating compatible CSS3: http://css3generator.com/
 * CSS centering code generator: http://howtocenterincss.com/
 * Pattern designer/generator: http://www.patternify.com/
 * CSS3 gradient generator: http://www.colorzilla.com/gradient-editor/

Testing/Validation Tools
Linux command to find out website's server type (e.g. Apache, NGINX) and more: curl -I yourwebsite.com


 * Security Headers / Mozilla Observatory: HTTP Security Headers
 * Test website before domain migration / DNS change: https://hosts.cx
 * How to do it: Tutorial
 * Domain Routing checker: where is my domain routing? (DNS-MX, DNS-A records)
 * Cross Browser Testing: does what it says on the tin
 * W3 Validator to check code integrity
 * Check responsive display (Studiopress service)
 * Google's Mobile Friendly Test
 * Facebook's Debugger to see how content displays when shared
 * KnowEm Social Media Optimizer to test for various social media!
 * Favicon checker (check) at Real Favicon Generator

Resources
Best Practices
 * How to self-host Google Fonts (google webfonts helper)
 * In-depth CSS handbook
 * Full HTML reference table: http://htmlreference.io
 * CSS hover effect collection: http://ianlunn.github.io/Hover/
 * CSS3 gradient collection: https://webgradients.com
 * Great CSS3 flex cheat sheet | Another one
 * Flexbox Toolbox: collection of advice/info/tools for CSS flexbox
 * TinyPNG compresses PNG and JPG images/files
 * Device Metrics at Google - resolutions & detailed info about many mobile devices!
 * All-you-need introduction/tutorial for CSS3 animations (W3Schools)
 * Migrate a site from a multisite network
 * How to set up a multilingual / multi-language WordPress site
 * Article: Introduction to responsive web design
 * Article: Adaptive vs. Responsive Design
 * Article: CSS transitions & transforms (all about animation)
 * Free eBook: Creativity and Consistency in UI Design
 * Free eBook: How to code in HTML5 and CSS3
 * Reference for CSS selectors / how to combine them!
 * Article: Avoid sliders! They slow things down and distract, have no additional value
 * Article: Avoid centered logos in navigation. They confuse users more than they help

Design Research & Inspiration

 * Research:
 * Go to Yelp and check pages from my target industry
 * Best websites built with Beaver Builder: Beaver Bunch
 * Design inspiration: Awwwards | Abduzeedo | lapa.ninja | Behance | Designspiration
 * Large collection of web site templates: www.hitectemplates.com
 * Parallax pages: dustn | redline | FSBOicity | Les Productions Wild Box
 * More inspiring web pages: Numix | Couchsurfing | Mark Manson | Gary Vaynerchuk | Policymic
 * Using photography to great effect: Kimberly and the Dreamtime | Radeberger | DB Karriere
 * Great use of overlay image: Paquin Entertainment
 * Additional Brilliant Homepage Examples
 * Blog with full-size cover image
 * Pure CSS hover menus: www.prowebdesign.ro

Layout Creation

 * Free icon database: flaticon
 * 50 free social media icon sets
 * Annarita Tranfici's guide to responsive web design (Jan-Mar, 2013)
 * Article about full-page background images (aka full-screen)
 * Full-screen background fix for iOS (iPhone, iPad) (also here)

WordPress Plugins

 * Page Builder: Beaver Builder
 * Limited free "lite" version available
 * Full version highly recommended
 * Extensions: Ultimate Addons | PowerPack | Ninja Beaver | Vapor Modules | ZOOM Addons
 * Additional plugins by Brainstorm Force
 * Additional plugins by Beaver Team
 * Assistant to extend WP core functionality (e.g. duplicate posts) and make it accessible from the front end
 * Secure mailing: WP Mail SMTP | Alternative: FluentSMTP
 * Multi-language (multilingual/for translations): Polylang
 * String translation or editing for themes, plugins, WP core & more: Loco Translate
 * Troubleshooting: might require MU plugin to load translations from safe, custom directory (bottom of the page)
 * Security: Shield Security
 * Replaces Akismet!
 * Lightweight Lightbox: WP Featherlight
 * Personalized short URLs: Pretty Link plugin
 * Backups and migration: All-in-One WP Migration
 * SEO: SEO by Yoast | Rank Math is more awesome though
 * Favicon Generator: Real Favicon Generator
 * Tags and categories for pages: Post Tags and Categories for Pages
 * reGenerate Thumbnails Advanced (recommended by WP Johnny)
 * Contact Form: Contact Form 7
 * Forum/community/social: bbpress | BuddyPress might be better, have yet to test
 * Event Calendar: The Events Calendar
 * Feature-rich tables: TablePress
 * Add custom code (e.g. PHP): Code Snippets
 * However, it's much better to use your child theme's functions.php!
 * GDPR (DSGVO) compliant cookie notice: Complianz
 * This is fully-featured, connects to cookiedatabase.org to identify and block cookies on your website
 * Caching, image compression, database cleanup: WP-Optimize

Image/Content Sliders
Generally, you're advised not to use content carousels/sliders.
 * BEST ONE: Smart Slider 3

IE Compatibility Solutions

 * PIE (Progressive Internet Explorer)
 * StackOverflow re. opaque bg
 * StackOverflow re. PIE
 * PIE Website
 * Include behavior: url(PIE.htc);

CSS/Coding Solutions
Code Snippets

Slanted edges

ul li.menu-item { background-image: linear-gradient(235deg, white 35px, #333 35px); }

Corner frames

.corners {

width: 60%;

font-size: 2em;

padding: 80px;

margin: 10px auto;

text-align: center;

background:

linear-gradient(red, red)bottom right/ 80px 2px,

linear-gradient(red, red) top left / 80px 2px,

linear-gradient(red, red) left top/ 2px 80px,

linear-gradient(red, red) right bottom / 2px 80px,

#FFF;

background-repeat:no-repeat;

}

Links
 * Placing an underline behind content (content overlaps underline)
 * Generate content through CSS using content & attr
 * Stacking context/solutions: jsfiddle | explanation
 * How to use any font: Google Fonts / Typekit / manual
 * CSS3 :target tutorial including an awesome gallery! (z-index trick)
 * Awesome things to do with pseudo elements! (:before, :after)
 * Stripes in CSS (incl. image overlays): https://css-tricks.com/stripes-css/
 * Cycling (rotating) background images: discussion on stackoverflow
 * Flexbox guide
 * https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
 * For old browsers: https://css-tricks.com/using-flexbox/
 * Vertically centered horizontal lines before/after element
 * http://www.santaclaradesign.com/
 * Examples at StackOverflow
 * How to do it: SOLUTION!

Animations

 * Awwwards article for basics/introduction
 * Button hovering: hover.css
 * Great collection: animate.css

CSS Properties

 * box-sizing property to control how padding/margin affects box size

Fiddles

 * Experimenting with hover popups (:hover, :target)