Let's dive into web design and development resources and tools to make your projects easier and finish faster. This isn’t an exhaustive list, nor is it meant to be...
The purpose here isn’t to give you a list of everything available so when you actually need a resource you're completely overwhelmed and lose hours looking into each one.
Rather this list of resources is meant for you to actually use which is why you'll find no more than 5 resources and tools per category. So bookmark this list for future reference and let's get started!
Website Style Guides
- Create a consistent brand by organizing all digital assets, brand guidelines, images and more in a central location with Frontify.
- 575+ website style guide resources
- Documentcss for creating live style guides with interactive examples
- Generate a style guide from your toolkit code using Fabricator to make it easy for other developers to use
- Style Tiles helps to create a visual web design process for clients and the responsive web
Website Inspiration
- Inspiration every time you open your browser with Muzli
- Check out the web design showcase at Site Inspire
- The best inspiration for one page websites
- See other designers work on Dribble
- Check out Web Design Inspiration to see clean, great looking websites with great UX
Web Design Showcases
- The monthly Divi Showcase features the best Divi sites from the past month
- And as you can guess, the Elementor Showcase shows off the best sites built using Elementor
- Web Design Showcases features 875+ web design showcases
- Beaver Bunch showcases the best websites built with Beaver Builder
- Get inspired by the best website examples made with Visual Composer Website Builder
Fonts
- Identify any font with What Font Is
- RightFont is a professional font manager app for Mac to help designers preview & manage font files
- Access a library of 990+ free licensed fonts at Google Fonts
- Get free commercial fonts at Font Squirrel
- DaFont has tons of downloadable fonts
- One of the biggest collections of fonts
Icons
- Access packs of icon bundles for your next project at Round Icons
- Find beautifully crafter symbols for common actions and items at Material Design
- Find free icons, mockups and templates at Uplabs
- IconFinder is the leading search engine and market place for vector icons in SVG, PNG, CSH and AI format
- Flaticon is the largest search engine of free icons in the world
Moodboards
Color Palettes
- At Contrast Grid, you can test many foreground and background color combos for compliance
- Find variations of a color with 0 to 255
- Create a color palette from a specific image with PaletteGenerator
- Coolors is a super fast color scheme generator
- Choose your favorite colors and get your Material Design palette generated and downloadable
Images
- Storyblocks has royalty-free stock images, video and audio
- Find over 1.7 million+ high quality free images and royalty free stock and images at Pixabay
- Unsplash features beautiful, free images and photos you can download and use for any project
- Find stock images, photos, vectors videos and music at Shutterstock
- Explore 300,000+ free stock photos and royalty free images at Free Images
Image Optimizers
- Compress PNG for…wait for it….compressing PNG files
- Compress JPEG for compressing JPEG files (shocker!)
- Use Smush for compressing images inside of WordPress
- You can optimiz 4 different file types with Compressor
- Kraken adds more flexibility for optimizing images
Lorem Ipsum Generators
- Cupcake Ipsum is a sugar-coated lorem ipsum generator
- Lorem Ipsum generator with origins and meaning
- Office Ipsum is a dummy copy for the corporate world
- Find all the ipsums in one place at Meet the Ipsums
- Learn about lorem ipsum and generate dummy text at Lipsum
Placeholder Images
- Place Holder is a free image placeholder service for web designers featuring billions of images
- Just as it sounds, the Dynamic Dummy Image Generator will generate dummy images with options including height, width, background color and more.
- Lorem Picsum is an easy to use, stylish placeholders using images from Unsplash
- Choose size, colors and text and generate images with a URL with Fake Images Please
- At Lorem Pixel use random images of a specific width and height in a variety of categories
Grids & Guides
- With the Guide Guide extension, quickly and easily create grids and manipulate guides with a consistent UI in Photoshop, Illustrator, Sketch and Adobe XD
- CSS Grid Generator is a visual interface builder for CSS Grid so you can create your custom layouts and copy the code
- Griddy is a visual tool to learn CSS Grid
- Modular Grid Pattern is an app for web designers to help create a modular grid for Adobe Photoshop
- Here’s a flexible way to create a responsive website using Responsive Grid System
Browser Extensions
- What Font is the easiest way to identify fonts on web pages.
- CSS Peeper is a smart CSS viewer tailored for designers
- Detect the different technologies any website uses with Wappalyzer
- Web Developer is a toolbar with various helpful web developer tools
- Grab a color from any website with the advanced eyedropper, color picker and color analyzer using ColorZilla
Mockups & Wireframes
- Use InVision for quickly creating interactive mockups of your designs to be shared with your team or clients
- Moqups is a streamlined web app that helps you create and collaborate in real-time on wireframes, mockups, diagrams and prototypes
- Create a website wireframe kit for Sketch using Platforma
- MockFlow is a super easy wireframing software to create and collaborate on UI designs
- InVision Studio is a powerful screen design tool to design, prototype and animate in one place
Also check out the 11 Ways to Present Web Design Mockups to Clients
Freebies
- DevKinsta - A completely free local WordPress development tool available for macOS, Windows, and Ubuntu.
- Find Free Landing Page Templates at Inovatik
- Find web design freebies at Dribble
- Creative Market shares weekly freebies
- Graphic Burger features free PSD design resources
- Find hand-picked resources for web designers and developers from designers at Design Hooks
- Freebiesbug has more freebies for web designers and developers
WordPress Page Builders
- Divi is a drag and drop page builder that allows you to build just about any type of website without any coding
- The Elementor page builder plugin replaces the basic WordPress editor with a live frontend editor, so you can create complex layouts visually, and design your website live, without having to switch between the editor and the preview mode
- Beaver Builder is a drag and drop WordPress page builder for building responsive WordPress pages
- Build website layouts fast and easy with Visual Composer, the all-in-one website WordPress plugin
- Use CSS Hero to easily customize the look of your site, with an easy and intuitive point and click interface.
Website Builders
- Webydo is a white label website builder for web design freelancers and agencies with build-in CMS and hosting
- Page Cloud is a drag and drop website builder with visual editing and 100s of integrations
- Build websites together in real-time without code using Bildr
- Design, build and launch responsive websites visually with Webflow
- Create an ecommerce website with tools to sell, ship and manage products using Shopify
Themes & Templates
- Qode Interactive Premium Themes - 400+ premium WordPress themes working with Elementor & WPBakery
- Use Elegant Themes for creating unique websites without any coding
- Thrive Themes is excellent for generating more leads and customers from a website
- Use popular mobile-responsive themes and design framework for WordPress with StudioPress
- Find lots of premium templates for Elementor at Easy Theme Packs
- Find unique and easy to set up WordPress templates at Muffin Builder
Favicon Generators
- Real Favicon Generator is a favicon generator for perfect icons on all browsers
- Use Favicon.cc to create and generate favicons including animated ones
- With Genfavicon you can turn any image into a favicon for your website
- Favic-o-Matic lets you upload an image or use the platform’s icons to create a favicon
- Xiconeditor is an easy, free tool for designing a favicon from scratch
Website Content & Resources
- Hemingway App to make your writing bold and clear
- SEO Writing Assistant for recommendations to make your content SEO-friendly
- A WordPress editorial calendar to manage your content schedule
- Powtoon: for creating custom animations and videos as a new source of content
- ZenPen: a minimal text editor made to stay out of the way while you get words down
Classes & Tutorials
- Udemy has 1,000s of courses on web design, development, marketing & more
- Take online classes with creative projects at SkillShare
- SkillCrush where you can learn to code and finally do the work you love
- Enjoy a free creative class at Creative Live
- Learn web design, coding and more at your own pace at Treehouse
- Learn to code by actually doing it with Codecademy
- Learn UI/UX and coding with real world projects lead by mentors at Springboard with a job guarantee
Design to Code Conversion
- Get styles, specs, images and auto-generated code from layers with Avocode
- Direct Basing turns your design into a website, webshop or email template
- Need HTML? HTML Slice Mate will convert your PSD into HTML
Web Design & Development Podcasts
- Ask questions directly with the Portable Entrepreneur podcast to learn how to effectively and profitably run a web design business
- Divi Chat talks about a variety of web design topics related to the Divi theme by Elegant Themes
- The Weekly Dev Tips podcast discusses technical tips, problems, and solutions
- JavaScript Jabber podcast covers JavaScript, frontend development, frameworks and more
Managing Multiple Websites
- Manage multiple WordPress websites from one dashboard using ManageWP
- InfiniteWP is a free self hosted, multiple WordPress site management solution
- MainWP is a free, self-hosted WordPress management plugin for managing multiple WordPress sites from one location
- Update plugins for all your sites from a centralized location with Jetpack Manage
- iThemes Sync allows you to manage and maintain multiple WordPress websites from one central dashboard
CSS Compatibility Checker
- Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- BrowseEmAll let’s you check if your CSS code is cross browser compatible
- The W3C CSS Validation Service checks CSS and XHTML docs with style sheets
HTML Compatibility Checkers
- The W3C validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc
- Find out if your HTML code is cross browser compatible with BrowseEmAll
- See how well your browser supports HTML5 using HTML5 Test
- The HTML Validator extension is a Mozilla extension that adds HTML validation inside Firefox, Mozilla
- HTML Validator is an HTML, CSS, accessibility, link, SEO, spelling, JavaScript, and PHP checker for Windows
Web Accessibility Resources
- WAVE browser extensions evaluable web content for accessibility issues directly from your browser
- The Firefox Accessibility Extension is a toolbar you can use to inspect all aspects of a webpage to determine its accessibility
- Max Access scans your site, analyzes it for compliance issues and then automatically fixes many of the issues using AI
Browser Testing
- Automate website browsers testing with 25+ web and mobile browsers with BrowseEmAll
- Browser Shots captures screenshots of a website on different browsers
- Sauce Labs tests of over 250+ different versions of browsers and devices
- See differences and errors on your site with Browsera by testing the cross-browser layout of your website
Mobile Responsive Testing
- Window Resizer is a free browser extension to resize the browser window to view a website at different screen resolutions
- Let Google check if your webpage is mobile-friendly using the Google Mobile Responsive Test
- Mobile Test tests your websites in smartphone & tablet emulators
- The Responsive Design Checker is just as it sounds, a great resource to see how responsive your website is
- With Browser Stack, conduct responsive design testing on real iOS and Android devices
Page Speed Performance
- WP Rocket is a caching plugin to make WordPress websites load faster in a few clicks
- See how your website performs with GT Metrix as it reveals why your site is slower, plus discover optimization opportunities
- Get your PageSpeed score and use PageSpeed suggestions from Google to make your website faster with Google Pagespeed Insights
- The Pingdom Website Speed Test is a free website speed test to analyze the load speed of your websites and learn how to make them faster
Usability Testing
- Use Inspectlet to discover where visitors are getting confused on your site and what’s getting their attention
- Userfeel is a remote usability testing tool that gives you videos of real users speaking their thoughts as they use your website
- The Five Second Test is a simple usability test to optimize the clarity of your designs and improve conversion rates by measuring people’s first impressions.
Web Design Awards
- Awwwards recognizes the best talent and effort of developers and designers and web agencies
- CSS Design Awards showcases CSS used in creative ways
- Webby Awards recognizes excellence on the internet in various categories
- CSS Winner is an award gallery for web designers and developers
- See a showcase of the best designs on the web at The Best Designs
WordPress Maintenance & Service Providers
- GoWP is a complete solution for outsourcing your agency’s tedious and low value work
- Receive 24/7 WordPress management and support services for digital growth with WP Buffs
- Access WP offers unlimited WordPress support from US based web developers
- Find WordPress and WooCommerce help at WP Tangerine
- WP Site Care offers WordPress support to help manage, maintain, safeguard and improve websites
Website Conversion Optimization Tools
- Improve user engagement and generate more leads with GetSiteControl’s forms and pop-ups
- See exactly how to improve your site’s performance by revealing your site visitor’s behavior by using analysis and feedback tools with HotJar
- Mouseflow lets you replay the full site visitor experience to identify why visitors aren’t converting into customers
Deal Sites for Web Designers & Developers
- DealJumbo offers discounted design bundles with extended licenses
- Mighty Deals has daily deals for designers, developers and other creatives
- Inky deals has great deals for digital design assets for designers, photographers and freelancers
- Find tech deals for designers, developers, marketers, bloggers, startups, and learners at Deal Fuel
Domain Name Generators
- Type a keyword into Name Mesh to find domain names and see suggestions for common, short, fun domain names and more.
- Panabee is a simple way to search for domain names, app names, website names, and business names.
- Use Domain Wheel’s free short website name generator with the help of AI for instant ideas.
Code Style Guidelines
- JavaScript code style guide with a syntax cheat sheet.
- Google Developers Web Fundamentals is a thorough resource covering web development best practices. Who better to listen to then Google?
- Google Style Guides is an open-source project on GitHub
- Web Field Manual is jam packed with coding resources, best practices and materials.
Code Validator / Review Tools
- Review Board is a web-based collaborative code review tool.
- When using GitHub, use their inbuilt code review tool in its pull requests.
- Reviewable is a code review tool for GitHub pull requests.
- JSLint is a JavaScript code quality tool which takes JavaScript source and scans it to identify problems.
Backgrounds, Textures & Patterns
- When using GitHub, use their inbuilt code review tool in its pull requests.
- Discover lots of patterns at Subtle Patterns by Toptal.
Web Design & Development Business Resources
Marketplaces for Selling Designs, Templates, Graphics & Scripts
- Make money selling your scripts, themes and more to thousands of buyers at Code Grape
- Pixel Buddha offers you free and premium resources for exposure or pay
- Sell your digital assets to one of the largest, most popular online creative community at Envato
- Codester gives you the opportunity to make money selling scripts, themes and plugins to thousands of buyers
- Design Modo Market sell digital products for designers and developers
Client Design Feedback Tools
- Project Huddle a WordPress plugin for website and design sticky-note style feedback
- For an easy way to communicate with clients about their project, use WP Feedback
- GoVisually is godo for design feedback and approval without the chaos
- InVision is a free design feedback and collaboration tool for sharing web & mobile designs with clients to gather feedback
- One of the easiest and fastest ways for web designers, developers, and agencies to collect feedback on the websites they’re building is by using Pastel
Audits
- MyWebAudit helps you close more deals with clients faster and easier using awesome audit reports
- Hubspot’s Website Grader is a free online tool that grades your site against key metrics like performance, mobile readiness, SEO, and security
White Label WordPress Videos for Clients
- The WP101 Plugin provides a 90 white-labeled WP video tutorials plus videos for Jetpack, WooCommerce, Yoast SEO & more, inside the client’s WordPress dashboard
- With Visual User Manuals, use white label WordPress videos to train clients to use their sites
Business Strategy & Lead Generation
- Portable Entrepreneur helps 100,000+ web design & SEO entrepreneurs find high-paying clients and scale their business
- Receive insight and information from Jennifer Bourn on how to grow your web design business
- WP Elevation is an online program designed specifically for WordPress consultants designed to teach you how to improve workflow & business practices
Project Management Tools
- Use BeeWits for easily organizing web design projects and keeping clients informed.
- Monday is a project management tool to help you run process and projects
- Paymo is a work management software including time tracking, resource planning, kanban boards, invoices and expenses
- If you’re looking for one app to manage your entire business from proposals to time tracking to project management and a CRM, check out Plutio
- Nutcache is a collaborative project management software for freelancers including estimates, project budgeting, time tracking, expense management and more
Domain Names
- Grab .design and .ink TLDs at Top Level design
- Google Registry is perfect for for acquiring .dev TLDs
- NameCheap offers cheap domain names
- See website domain availability and registry plus hosting at BlueHost
Hosting
- FlyWheel is managed WordPress hosting built for designers and creative agencies to build, scale and manage hundreds of WordPress sites with ease
- SiteGround web hosting services are known for speed, security and good 24/7 support
- Kinsta is a managed WordPress hosting with fast load times and 24/7 support, powered by Google Cloud
- Manage WordPress hosting for mission critical sites around the world using WP Engine
- Webdock is a developer friendly VPS hosting environment
Invoicing & Proposals Resources
- Send professional looking proposals with Better Proposals in half the time with in-depth analytics and digital signatures
- Create and send free invoices and estimates, track time and expenses and accept online payments with Invoicely
- Bonsai has everything you need from proposals, contracts, CRM, invoices and more
- Use Proposify to create, send, track, and e-sign winning proposals, contracts, and agreements
- Bidsketch is a proposal software that lets you create, electronically sign, and track professional looking client proposals in 50% less time
Collecting & Organizing Client content & Files
- Content Snare is a content gathering tool that helps digital agencies get website & marketing content from their clients on time, in the right format, without email
- Client Portal is perfect for keeping your clients deliverables in one place
- Unify content creation, workflow, and collaboration with Gather Content
- Contentful is an API-first content management platform to create, manage and publish content on any digital channel
- Find content collaboration and workflow management platform enabling teams to create and review content and publish it to WordPress with one click of a button using Easy Content
Web Design & Development Freelance Websites
- Find short-term, recurring and full-time web design and development contract work on UpWork
- Sign-up to offer crowdsourced logo, graphic and web design at DesignCrowd
- Become one of Toptal’s top-tier professionals and find great clients
- Find web design and creative jobs on Dribbble’s job board
- Authentic Jobs is a job board for designers, developers, and creative pros
