Welcome to Cause Coders
Join a growing community of coding enthusiasts like you. Sign up today!
Sign Up

List of Useful Web Design Links. Will stay updated

TopSilver

web designer
Administrator
Joined
Mar 10, 2017
Messages
244
Likes
37
#1
Here are some to start us off. This is an official sticky thread. I will continually be adding to this list and I'm asking the community to post more useful links for web design and I will update the post as you provide them.

Gradient Generator:
Typography Calculator (for responsive typography):
Rem Calculator:
Box Shadow Generator (and more):
Pixel to Em Generator:
Color hexadecimal and RGB/RGBA Generator:
Free Vectors and Icons:

Code Testers:
Free Interactive Learning Sites:

Font Sites:

UI Color Scheme Sites:

Frameworks:

CSS Libraries:

Cheatsheets:

IDE's/Editors:

CSS Resets:

Extras:

Feel free to suggest things to be added. I plan on constantly updating this list with useful web design links.
 
Last edited by a moderator:

Scheibe

Web Designer
Super Moderator
Joined
Mar 11, 2017
Messages
194
Likes
20
#2
Change Log:

April 5th:

  • added sass website
  • fixed font squirel
April 6th:
  • added CSS compiler
  • added hover.css library
  • added animate.css library
  • added css loader (animations) library
  • added tooltip generator
  • added minireset.css
  • added icono
  • added cssreference.io
April 7th:
  • added sass colour codes
    • 36 social media colour codes are included
April 12th:
  • added simplesvg
    • added simplesvg icon finder
    • added index repo link
  • better presentation
  • added cheatsheets.org
  • added brew.sh
    • homebrew is a package manager for macOS. Homebrew is a package manager - it's in this list because you can install packages with it to assist you in web development/design.
  • added getbem.com
April 13th:
  • added svgomg
  • added netbeans, sublime text, and visual studio to IDE editors
  • added Eric Meyers CSS Reset
  • placed php.net and getbem in extras
  • added cheat-sheets.org to cheat sheets
  • put simplesvg in list of free vectors and icons
April 15th:
  • added HTML5 doctor reset
  • added mini-reset
  • added HTML5 reset
April 23rd:
  • removed placekitten
  • added placehold.it
May 3rd:
  • added flexbox cheat sheet
August 23rd:
  • general re-ordering/clean-up
  • added materialize css to the list
  • added another reset in the post below
 
Last edited:
Likes: TopSilver

Scheibe

Web Designer
Super Moderator
Joined
Mar 11, 2017
Messages
194
Likes
20
#3
Another CSS Reset:
Code:
/* CSS RESET
====================================================================================================
====================================================================================================
*/


html, body, div, main, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, button, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
::before, ::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
}

/* HTML5 - Older browser support
====================================================================== */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}


/* BODY
====================================================================== */
body { line-height: 1; }


/* LISTS - Clear bullets
====================================================================== */
ol, ul { list-style: none; }


/* QUOTES
====================================================================== */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* TABLES
====================================================================== */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
Last edited: