BEST  RESOURCES  FOR  WEB   DESIGN WITH  HTML5  &  CSS3

BEST RESOURCES FOR HTML AND CSS are here. Take your time and sift thru everything.

1. May  The  Nerd  Be  With  You

This article  is  a  collection  of  links  to  all  the  amazing  resources,  tools  and  articles  that  I  have  used  &  should  greatly  benefit anyone willing  to  learn.  All  the  tools  and  resources  I  have  added  in  this  article  can  be  found  online  for  free. These are the BEST RESOURCES FOR HTML AND CSS I could find.

Beside  that,  I  also  share  a  lot  of  other  resources  with  you  in  this  article,  in  order  to   make  your  life  as  a  web  designer  and  developer  a  lot  easier!  I  found  all  of  these  tools   and  resources  over  a  period  of  years,  spending  days  of  my  precious  time  looking  for   things  that  I  needed.  So  I  decided  to  pack  all  of  them  into  this  article,  so  that  you   don’t  have  to  go  through  the  same  hassle! Enjoy the BEST RESOURCES FOR HTML AND CSS.

2.  WEBDESIGN  BASICS

2.1  INTRODUCTION  TO  WEBDESIGN

• Design  course  in  form  of  articles:   https://hackdesign.org/lessons
• Learn  more  about  flat  design:   http://www.webdesignerdepot.com/2013/12/infographic-­‐flat-­‐design-­‐vs-­‐ skeuomorphism/

2.2  TYPOGRAPHY

• Google  fonts:  tons  of  free,  easy  to  use  webfonts:   https://www.google.com/fonts
• Fonts  for  free  download:   http://www.fontsquirrel.com/
• Very  good  for  finding  good  font  combinations:   http://www.fastprint.co.uk/blog/the-­‐art-­‐of-­‐mixing-­‐typefaces.html
• Find  even  more  good  font  combinations:   http://fontpair.co/
• Learn  even  more  about  typography:   http://www.typogui.de/

2.3  COLORS

• Canva: The best FREE online color & image editor
• Cool  Flat  UI  colors:   http://flatuicolors.com/
• Even  more  cool  colors:   http://getuicolors.com/
• Find  variations  of  colors  (very  good):   http://www.0to255.com/
• Adobe  Color  CC,  play  around  with  colors:   https://color.adobe.com/create/color-­‐wheel/
• PaleRon,  play  around  with  colors:   http://paleRon.com
• Beautiful  gradients  for  webdesign:   http://uigradients.com/
• Learn  even  more  about  colors:   https://webdesign.tutsplus.com/
  2.4 WORKING WITH IMAGES
• Basically  all  free  images  in  one  place:   http://thestocks.im/
• Images  from  many  sources:   http://www.pexels.com/
• Unsplash,  a  must  see:   https://unsplash.com/
• Food  images:   http://foodiesfeed.com/
• A  curated  collection  of  free  resources:   http://www.imcreator.com/free
• Free  videos:   http://mazwai.com/
• Techniques  for  working  with  images  in  CSS:   http://css-­‐tricks.com/design-­‐considerations-­‐text-­‐images/
  2.5  WORKING  WITH  ICONS
• Beautiful  icon  font:   http://ionicons.com/
• Canva: The best FREE online icon editor
• Another  beautiful  icon  set:   http://entypo.com/
• Font  awesome  icons:   http://fontawesome.io/icons/
• Big  collection  of  SVG  fonts:   http://iconmonstr.com/
• Yet  another  icon  font:   http://icon-­‐works.com/
  2.6  USER  EXPERIENCE
• UX  crash  course  in  31  days   http://thehipperelement.com/post/75476711614/ux-­‐crash-­‐course-­‐31-­‐fundamentals
• UI  tricks  that  can  lead  to  higher  conversion  rates:   http://www.goodui.org/
  2.7  GETTING  INSPIRED
• Find  beautiful  websites:   http://www.siteinspire.com/
• Dribble,  show  and  tell  for  designers:   https://dribbble.com/
• Behance:   https://www.behance.net/
• Inspiration  for  one-­‐page  websites:   https://onepagelove.com/
• Even  more  webdesign  inspiration:   http://www.admiretheweb.com/
• Another  collection  of  design  elements:   http://calltoidea.com/
• Some  amazing  designers  on  Dribble:
  • https://dribbble.com/victorerixon  
  • https://dribbble.com/benske  
  • https://dribbble.com/Radium

2.8  EVEN  MORE  RESOURCES

• Curated  resources  for  everything  creative: http://oozled.com/ 
• This website, a great resource: https://nerdoffortune.org/
• Canva: The best FREE online color & image editor
• PlaceIt: Envato’s element creator (free trial)

3. DIVE  INTO  HTML

• The  best  text  editor  for  front-­‐end  web  development  in  the  world:   http://brackets.io/
• Complete  HTML  reference:   http://www.w3schools.com/html
• HTML  special  characters   https://css-tricks.com/snippets/html/glyphs/

 4. FORMATTING  WITH  CSS

• Complete  CSS  reference  (this  is  really  good):   http://tympanus.net/codrops/css_reference/

 5. THE  KILLER  WEBSITE  PROJECT

5.1  7  REAL-­‐WORLD  STEPS  TO  A  FUNCTIONAL  WEBSITE

1. Define  your  project  (goal  and  audience)

2. Plan  out  everything

3. Sketch  your  ideas  before  you  start  designing

4. Design  and  develop  your  website  with  HTML  and  CSS

5. It’s  not  done  yet:  optimization

6. Launch  the  masterpiece

7. Site  maintenance

• Learn how to maintain your website: https://nerdoffortune.org/

5.2  LINKS  YOU  CAN  USE  IN  YOUR  PROJECT

• Free,  simple  and  easy-­‐to-­‐use  fluid  grid:   http://www.responsivegridsystem.com/
• Get  random  user  profiles:   http://randomuser.me/
• Up-­‐to-­‐date  browser  support  tables  for  CSS  and  HTML:   http://caniuse.com/

 6. LET’S  ADD  SOME  COOL  EFFECTS

6.1  LINKS  FOR USE  IN  THIS  ARTICLE’

• Animate.css:   http://daneden.github.io/animate.css/
• Canva: The best FREE online effects editor
• PlaceIt: Envato’s effects creator (free trial)

6.2  COOL  JQUERY  PLUGINS

•  
• jQuery  Rain,  another  huge  list  of  plugins:   http://www.jqueryrain.com/
• OnePageScroll:   http://www.thepetedesign.com/demos/onepage_scroll_demo.html

 7. OPTIMIZING  AND  LAUNCHING  YOUR WEBSITE

• Favicon  Generator:   http://realfavicongenerator.net/
• Minify  JavaScript  code:   http://www.minifyjavascript.com/
• HTML  validation:   http://validator.w3.org/
• Preview  your  website  on  multiple  mobile  devices  at  once:   http://www.responsinator.com/
• SEO  checklist:   https://ahrefs.com/blog/seo-checklist/
  Google  analytics   http://www.google.com/analy.cs/

8.  KEEPING  UP  WITH  THE  WEB  INDUSTRY

• Treehouse  show,  weekly  video  about  new  things  in  webdesign  and  development:   http://teamtreehouse.com/library/the-­treehouse-show
• Sidebar:  the  5  best  design  links,  every  day:   http://sidebar.io/
• Codrops,  webdesign  blog  with  lots  of  freebies:   http://tympanus.net/codrops/
• Webdesignerdepot,  webdesign  blog:   http://www.webdesignerdepot.com/
• Smashing  magazine,  webdesign  blog:   http://www.smashingmagazine.com/
• 1st  webdesigner,  webdesign  blog:   http://www.1stwebdesigner.com/
• Hey  designer,  curated  list  of  webdesign  articles:   http://heydesigner.com/ 
• This website, a great resource: https://nerdoffortune.org/
• Sitepoint,  learn  HTML,  CSS  and  more:   http://www.sitepoint.com/

I  hope  you  found  this  article  really  useful!
So  now  that  you  have  all  these  resources  and  tools,  wouldn’t  it  be  great  to  learn  how   to  actually  use  them  for  a  real-­‐world  project?  Let  me  help  you  with  that!

Reach out to me HERE & I can tutor you live or just take on certain tasks. I will get you on the FAST TRACK to becoming a talented Web Designer & Developer.