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.
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!
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
- 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/
- 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:
2.8 EVEN MORE RESOURCES
- Curated resources for everything creative: http://oozled.com/
- This website, a great resource: https://nerdoffortune.org/
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/
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/
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.
