Scribd
Upload
599 views

Best Resources For Web Design and Development With HTML5 & CSS3

This e-book provides a comprehensive list of resources for web design and development using HTML5 and CSS3. It includes over 50 links to tools and sites for typography, colors, images, icons, user experience, inspiration, and keeping up with the latest in the web industry. The resources cover topics like Google fonts, stock image sites, icon libraries, UI patterns, design inspiration galleries, and top design blogs.

Uploaded by

helena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
599 views

Best Resources For Web Design and Development With HTML5 & CSS3

This e-book provides a comprehensive list of resources for web design and development using HTML5 and CSS3. It includes over 50 links to tools and sites for typography, colors, images, icons, user experience, inspiration, and keeping up with the latest in the web industry. The resources cover topics like Google fonts, stock image sites, icon libraries, UI patterns, design inspiration galleries, and top design blogs.

Uploaded by

helena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

BEST RESOURCES FOR WEB

DESIGN AND DEVELOPMENT


WITH HTML5 & CSS3

WELCOME TO THIS E-BOOK


In this e-book, I share a lot of resources with you, in order to make your life as a web
designer a lot easier! I found all of these tools and resources over a period of years,
spending days of my precious <me looking for things that I needed. So I decided to
pack all of them into this e-book, so that you dont have to go through the same
hassle!

1 INTRODUCTION TO WEBDESIGN
Design course in form of ar<cles:
hBps://hackdesign.org/lessons
Learn more about at design:
hBp://www.webdesignerdepot.com/2013/12/infographic-at-design-vs-
skeuomorphism/

2 TYPOGRAPHY
Google fonts: tons of free, easy to use webfonts:
hBps://www.google.com/fonts
Fonts for free download:
hBp://www.fontsquirrel.com/
List of best free fonts for designers:
hBp://www.crea<vebloq.com/graphic-design-<ps/best-free-fonts-for-
designers-1233380

Very good for nding good font combina<ons:


hBp://www.fastprint.co.uk/blog/the-art-of-mixing-typefaces.html
Find even more good font combina<ons:
hBp://fontpair.co/
learn even more about typography:
hBp://www.typogui.de/

3 COLORS
Cool Flat UI colors:
hBp://atuicolors.com/
Even more cool colors:
hBp://getuicolors.com/
Find varia<ons of colors (very good):
hBp://www.0to255.com/
Adobe Color CC, play around with colors:
hBps://color.adobe.com/create/color-wheel/
PaleBon, play around with colors:
hBp://paleBon.com
Beau<ful gradients for webdesign:
hBp://uigradients.com/
Learn about colors:
hBp://www.rocket-design.fr/color-template/

Learn even more about colors:


hBp://webdesign.tutsplus.com/ar<cles/an-introduc<on-to-color-theory-for-web-
designers--webdesign-1437

4 WORKING WITH IMAGES


Basically all free images in one place:
hBp://thestocks.im/
Images from many sources:
hBp://www.pexels.com/
Unsplash, a must see:
hBps://unsplash.com/
Food images:
hBp://foodiesfeed.com/
A curated collec<on of free resources:
hBp://www.imcreator.com/free
Huge paBern library:
hBp://thepaBernlibrary.com/
Subtle paBerns:
hBp://subtlepaBerns.com/
Free videos:
hBp://mazwai.com/
Techniques for working with images in CSS:
hBp://css-tricks.com/design-considera<ons-text-images/

5 WORKING WITH ICONS


Beau<ful icon font:
hBp://ionicons.com/
Another beau<ful icon set:
hBp://entypo.com/
Font awesome icons:
hBp://fontawesome.io/icons/
Big collec<on of SVG fonts:
hBp://iconmonstr.com/
Yet another icon font:
hBp://icon-works.com/

6 USER EXPERIENCE
UX crash course in 31 days
hBp://thehipperelement.com/post/75476711614/ux-crash-course-31-fundamentals
UI tricks that can lead to higher conversion rates:
hBp://www.goodui.org/

7 GETTING INSPIRED
Find beau<ful websites:
hBp://www.siteinspire.com/

Dribble, show and tell for designers:


hBps://dribbble.com/
Behance:
hBps://www.behance.net/
Inspira<on for one-page websites:
hBps://onepagelove.com/
Even more webdesign inspira<on:
hBp://www.admiretheweb.com/
Flat design inspira<on:
hBp://atdsgn.com/
Collec<on of specic design elements and paBerns:
hBp://paBerntap.com/
Another collec<on of design elements:
hBp://calltoidea.com/
Google fonts inspira<on:
hBp://femmebot.github.io/google-type/
Some amazing designers on Dribble:
hBps://dribbble.com/victorerixon
hBps://dribbble.com/benske
hBps://dribbble.com/peternlan
hBps://dribbble.com/Radium

8 EVEN MORE RESOURCES


Huge list of front-end development resources:
hBps://github.com/dypsilon/frontend-dev-bookmarks
Curated resources for everything crea<ve:
hBp://oozled.com/

9 KEEPING UP WITH THE WEB INDUSTRY


Treehouse show, weekly video about new things in webdesign and development:
hBp://teamtreehouse.com/library/the-treehouse-show
Sidebar: the 5 best design links, every day:
hBp://sidebar.io/
Codrops, webdesign blog with lots of freebies:
hBp://tympanus.net/codrops/
Webdesignerdepot, webdesign blog:
hBp://www.webdesignerdepot.com/
Smashing magazine, webdesign blog:
hBp://www.smashingmagazine.com/
1st webdesigner, webdesign blog:
hBp://www.1stwebdesigner.com/
Hey designer, curated list of webdesign ar<cles:
hBp://heydesigner.com/

You might also like