Website Design Resources

If you are designing websites then you will find these resources invaluable.

Blumentals software : Their WeBuilder is the IDE this site was built in. It is full featured, covering HTML, CSS, PHP and JavaScript with many add-ons and libraries, and it makes writing a page and testing it straight away really easy.

depositphotos : Many high quality photos that can be used for free by providing a credit link to the author. The free images on this site come from here.
ICONPACKS : Have really nice sets of free icons.
flaticon : Another source of free icons, and the one we use in our own projects.
kapwing : Some nice illustrations for error pages, all for free.
ILOVEIMG : Compresses images for free, which saves bandwidth and makes pages load faster. Every image on our websites goes through it. It is easy to use, though you do have to upload the files rather than work locally.
favicon.io : Generates a full favicon set, in every size, from an image, an emoji or just text. Free, and it made the favicons for all our websites.

developer.mozilla : Decent documentation with examples on html entities.
HTML The Living Standard : Current HTML Specification.
An SEO Guide to URL Parameter Handling : Learn six ways to avoid potential SEO issues with URL parameters.
The Truth About Multiple H1 Tags : It is okay to use multiple H1 tags.
A HTML Color Picker : It shows you colours in shades, hues, saturation and lightness.
Colour Palette : Gives you a palette of colours based on your selection.
Contact Form Generator : Allows to design your contact form with various elements and options.
Mobile Input Types : Demonstrates different HTML5 input types and how they appear on mobile devices.

Layout and the containing block : Examples of what determines a containing block for CSS.
CSS: Cascading Style Sheets : Very good documentation with on all aspects of css.
A complete guide to Grid : Decent documentation with examples on css Grid.
smashingmagazine : Top 10 CSS Table Designs.
A Complete Guide To Variables : In CSS, with examples.
How to Tame Line Height in CSS : Comprehensive guide to understanding and controlling line-height.
A Complete Guide to calc() : In CSS.
An explanation on accent-color : This property allows you to style some of the elements that the browsers control.
Going to Print : CSS Design for print friendly pages.
Couple Takes on Sticky Footer : Different techniques for creating sticky footers that stay at the bottom.
Box Shadow Generator : Design the box shadow and then copy the css.
Animated Gradient Background Generator : Design the Gradient and copy the css.
CSS Layout Generator 1 : Design the Layout and copy the css and html.
CSS Layout Generator 2 : Design the Layout and copy the css and html.
CSS Grid Generator : Design a grid and download the html and css.
CSS Selectors : What does ">", "+" and"~" do in CSS.

WCAG : Guidelines and Test : Run a WCAG compliance test to see if your website is accessible to people with disabilities.
WAVE : Web Accessibility Evaluation : A graphic display of alt, titles and aria label tags.
Colorblind Filter : See your page from the POV of a colour blind person.
Readability Test Tool : Test the readability / comprehension of your website.
Screen Reader : Screen Reader for Google Chrome.

Robots Text Generator Tool: Quickly generate a robots.txt for your site.
WebPageTest : Tool to test web pages load time.
seo.entireweb tools : Nice set of tools. You need an account, but its free and not hobbled.
ahrefs seo-toolbar : Free toolbar for Chrome or Firefox to quickly show you some SEO data about your website.

HTML, CSS, Images, Icons and Accessibility Tools

Back to Developer Links
Website Security
Website Checking