Tools. Tips. Tutorials.
A collection of favorite tutorials, components, plugins and articles relating to Web design and development.
Select a tab and begin learning!
Bootstrap Resources
Bootstrap Framework
Bootstrap (current version: 4.1.3) is a popular and open source framework for developing with HTML, CSS, and JS. Responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Explore Bootstrap 4 documentation, examples, themes and expo.
Start Bootstrap
Start Bootstrap is a collection of free to download Bootstrap themes and templates. The themes, built with HTML5, CSS3, and Bootstrap 4, are open source and can be used for any purpose, even commercially. The templates are a perfect starting point for projects or custom pages.
Bootstrapious
A collection of exclusive Bootstrap templates and themes ready to be used in your next project. All templates are fully responsive, HTML valid, premium quality, and a majority of them are free. To boost your coding skills, take a look at Bootstrapious' collection of Bootstrap tutorials, tips, and tricks.
Azmind
Bootstrap templates (free & premium), tutorials, experiments, and articles. All templates are responsive and can be used in personal and commercial projects.
Design Resources & Tools
Inspiration
Codrops
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
CodePen
CodePen is a social development environment for front-end designers and developers. It's the best place to build and deploy a website, show off your work, build test cases, and find inspiration.
Design Shack
Design Shack is a daily source of articles, inspiration, news, and guides for the design community.
Graphics
Gimp
A free and open-source image editor. Download for Linux, Mac, & Windows. Whether you are a graphic designer, photographer, or illustrator, GIMP provides you with sophisticated tools to get your job done. You can further enhance your productivity with GIMP thanks to many customization options and 3rd party plugins. An alternative to Photoshop.
Canva
Create beautiful designs and documents. Use Canva's drag-and-drop feature and professional layouts to design presentations, social media graphics, and more. Thousands of layouts. Millions of stock photos, vectors and illustrations, or upload your own. A great selection of fonts.
Crello
Crello is a visual editor launched by Depositphotos. It allows creating social media images, ad banners, posters, email headers, and other popular formats. It's easy to use — it doesn't matter if you are an experienced designer or a beginner. Crello is for for marketers, social media specialists, entrepreneurs, bloggers, or anyone who needs a simple solution for their creative projects.
Flaticon
A large database of free icons available in PNG, SVG, EPS, PSD, and BASE 64 formats. Browse icons individually or in packs.
Vecteezy
Free vector art. Each vector is fully customizable. Easily change sizes, colors, fonts and more.
Color
Duotones
Instant duotone effect generator. Create beautiful duotone color pairings and effects for free. Use their images or upload one of your own. Download the finished product in JPG format.
Adobe Color Wheel
Choose from 6 color harmonies, explore preset themes, or create your own!
Mockup
Multi-Device Website Mockup Generator
A website mockup generator. Enter the URL, and it shows your website on iMac, Macbook, iPad, and iPhone. You can set the background with the color picker. Individual devices can be turned off if you want only a screenshot of a single device. The devices can be moved around to change the look. Three perspective views — right, left, and front.
Development Resources & Tools
Building & Troubleshooting
w3Schools
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples.
Stack Overflow
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's built and run by its users as part of the Stack Exchange network of Q&A sites. Their goal is to build a library of detailed answers to every question about programming. This is a great site for troubleshooting!
GitHub
GitHub brings together the world's largest community of developers to discover, share, and build better software. A development platform where you can host and review code, manage projects, and build software alongside 31 million developers.
Coding Tools
DirtyMarkup Formatter
Online tool that cleans and formats HTML, CSS, and JavaScript. Can also be used to un-minify code.
Diffchecker
Diffchecker is an online diff tool to compare text differences between two text files. Easy to use, just enter the contents of two files and click Find Difference.
UnCSS Online
An online tool that removes unused CSS. If you have bundled styles for an entire site but only need a few lines of CSS for certain elements to work, copy and paste your HTML and CSS in the boxes, click a button, and the unused CSS is removed.
JSHint
JSHint is an online tool that detects errors and potential problems in JavaScript code. You can easily adjust it in the environment you expect your code to execute. JSHint is community-driven and open source.
PHP Code Checker
A free online service that performs a line-by-line analysis for common mistakes and errors in your PHP syntax.
Special Characters
HTML Arrows
HTML Arrows is a comprehensive reference website for finding HTML symbol codes and entities, ASCII characters, and Unicode hexadecimal values to use in your Web design. Categories include arrows, currency, letters, math, numbers, punctuation, and symbols.
Using Emojis in HTML, CSS, & JavaScript
For everyday users, emojis are great. They are fun and easy to use. For Web developers wanting to use emojis in HTML, CSS, and JavaScript, the story is a bit different. There are a few hoops we need to learn how to jump through! This informative tutorial will help you master the use of emojis in your Web pages.
Responsive Design
Am I Responsive?
Easily see how responsive design looks across different browsers with this 4-in-1 viewport tool. See how your site looks on desktop, laptop, iPad & iPhone.
Animations
Animista
CSS animations on demand! Animista is both a collection of pre-made CSS animations and a playground where you can tweak and test them out. Download only what you need to use.
Google Page Speed Tools
Analyze and optimize your website with Google PageSpeed tools.
Google Mobile Friendly Test
Google's Mobile-Friendly Test tool. It also gives a report on loading issues and specifies which elements aren't loading.
Google Webmasters
Track your site's search performance with Google Search Console and other webmaster resources.
Embed a Google Map
Step-by-step instructions for embedding a Google Map in the HTML of a Web page using the iframe element.
Image & Video Resources
Pixabay
Pixabay is a community of creatives, sharing copyright-free images and videos. All contents are released under Creative Commons CC0, and you can copy, modify, distribute, and use the images, even for commercial purposes, all without asking for permission or giving credits to the artist.
Unsplash
All photos published on Unsplash can be used for free for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
Pexels
All photos on Pexels can be used for free for commercial and non-commercial use. Attribution is not required. Giving credit to the photographer or Pexels is not necessary but always appreciated.
Awesome Images
A curated list of free stock photo resources for your projects.
Vidveo
Free stock videos, motion graphics, music tracks and sound effects. Most content is licensed as either Royalty-Free or Videvo Attribution License. Royalty-Free content can be used as many times as you like and in as many projects as you like, forever. There’s also no need to credit the artist. The Videvo Attribution License allows for unlimited use in the same way as Royalty-Free, but you must credit the artist.
Validation Tools
W3C Markup Validation Service
A free markup validation tool that checks for errors in markup. It checks the syntax of Web documents written in formats such as HTML and XHTML.
CSS Validation Service
A free CSS validation tool that checks Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.
AChecker
A tool that checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone.
WAVE
A Web accessibility tool that evaluates Web content to ensure content is accessible to people with disabilities.
SEO Web Page Analyzer
An online SEO page analyzer tool. In addition to analyzing for SEO, it also includes information on page heading structure and alt attribute.
WordPress Resources
How to Install WordPress on your Windows Computer Using WAMP
Did you know that you can install WordPress on your own Windows computer for learning and testing? Working with WordPress for Windows is a great way to test plugins, updates, and other website changes before pushing them live to your audience. This step-by-step tutorial will show you how to install WordPress locally using WAMP.
How to Manually Install WordPress with cPanel
A step-by-step video tutorial on how to manually install WordPress on GoDaddy server using cPanel. Presented by Dom Garofalo.
How to Move WordPress From Local Server to Live Site
Once you've finished perfecting your website on your own computer, the next step is to move the website live and share your creation with the world. This tutorial will show you how to move WordPress from a local server to a live site, step-by-step.
How to Create a WordPress Child Theme
Child themes are considered the best way to customize your WordPress themes. A child theme inherits all the features and appearance of its parent theme, but it can be customized without affecting the parent theme. This allows you to easily update the parent theme without worrying about losing your changes. This tutorial will show you how to create a child theme in WordPress.
Beaver Builder
A complete WordPress design system that includes a drag-and-drop page builder plugin and a framework theme. The front end drag-and-drop interface gives you total control over the layout of your pages. Position images and text with precision, and build column-based layouts in minutes.
GeneratePress (GP)
A lightweight, performance-based WordPress theme focused on speed, security and usability. Search engine optimized and accessibility ready. GP Premium offers premium modules, full access to the site library, and unlimited websites. Compatible with Beaver Builder page-builder plugin.