A list of useful resources for Front End Developers
Table of Contents
- Learning
- Blogs
- Tools
- CSS Frameworks
- Icons
- Colors
- Typography
- Animation Frameworks
- Stock Resources
- Geolocation
- Apis
- Mockups
- Books
- Challenges
Learning
- A Complete Guide to Flexbox | CSS-Tricks - A comprehensive guide to the Flexbox layout.
- CodeCademy👍 - A series of interactive courses teaching the world how to code. Offering free and paid subscriptions across a variety of languages.
- Coursera - A selection of courses from highly reputable schools like Stanford and Yale.
- CSS Almanac | CSS-Tricks👍 - A quick reference guide to the many features of CSS.
- Design Resources - Design Resources from Skullface.
- edx - A series of University-level courses from Harvard, MIT, Wharton and more.
- EggHead - Web development video tutorials in "bite-size" segments. Has both free and "Pro" (paid) memberships.
- Flexbox👍 - Level up your Flexbox knowledge – an online, Zombie-centric story course.
- Flexbox Froggy
- freeCodeCamp👍 - A free resource incorporating programming projects and interview preparation for developer jobs.
- Grid Garden - Interactive CSS code game. Practice your CSS skills by watering your garden!
- LearnAnything - Search interactive mind maps to learn anything.
- Mozilla Developer Network👍 - The latest information about Open Web technologies.
- Pluralsight - Unlimited online developer training from industry experts.
- Saylor - An open, online learning solution offering college credit opportunities for students.
- Scotch - Many web development courses. Has both free and "Premium" (paid) memberships.
- Search Courses - A selection of trending courses and tutorials.
- Team Treehouse - Self-paced learning across a variety of languages and subjects.
- The Odin Project - An Open-Source Curriculum for Learning Web Development
- Tutorials point - Tutorials for many different languages with interactive code examples.
- Udacity👍 - Learn anything online – deep learning, machine learning, front end languages.
- Udemy - An online learning and teaching marketplace.
- W3School - Web developlment reference library. Covers HTML, CSS, Javascript (jQuery, AJAX, and more), as well as some server-side langages. Includes descriptions and interactive examples.
- Web APIs | MDN - Everything a beginner needs to know about Web APIs.
Blogs
- 100 Ways to Be more creative - 100 Ways to be More Creative from Shaunta Grimes.
- 50 Things You [Probably] Forgot To Design – UX Power Tools – Medium - 50 Things You Probably Forgot to Design from Jon Moore
- ACM Month Of Code 2k17: Building Moodify - ACM Month Of Code 2k17: Building Moodify from Ajay NS.
- An Illustrated Guide for Setting Up Your Website Using Github & Cloudflare - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar.
- CSS Animations vs the Web Animations API: A Case Study
- Design and Creativity quotes - 72 Quotes about Design and Creativity from Margaret Kelsey.
- Design Resources
- Domain registrars DNS and hosting - Domain Registrars, DNS, and Hosting from Kirby Kohlmorge
- How I Animated the bitsofcode Logo with CSS
- How the minmax() Function Works
- How to Build an Impressive Portfolio When You're New to Tech - How to Build an Impressive Portfolio When You’re New to Tech from Randle Browning
- How to build a random quote generator with JavaScript and HTML, for absolute beginners - How to Build a Random Quote Generator with JavaScript and HTML, for Absolute Beginners from Sophanarith Sok.
- Let’s code a Neural Network from scratch — Part 1 – TypeMe – Medium - Let’s Code a Neural Network from Scratch from Charles Fried
- Music Player Inspirations - Music Player Inspiration 2017 from Muzli.
- What it’s like to build and market a chatbot when you’re only 14 years old - What it’s Like to Build and Market a Chatbot When You’re Only 14 Years Old from Alec Jones
- What's the Deal with Collapsible Margins?
Tools
- API Directory | ProgrammableWeb
- Better Code Hub
- Browserling - Live interactive cross-browser testing
- Can I use... Support tables for HTML5, CSS3, etc👍
- Codepen
- Create a new fiddle - JSFiddle
- Critical Path CSS Generator - by Jonas Ohlsson
- CrossBrowserTesting App
- CSS Triggers👍
- DirtyMarkup · Tidy up your HTML, CSS, and JavaScript code👍
- Favicon Generator
- Favicon Generator for iOS/Google Progressive Web App Manifest👍
- Generate favicon based on text👍
- Google Analytics
- Google APIs Explorer
- Javascript Console in Sublime Text
- jQuery mega cheat sheet
- JS Bin
- PageSpeed Insights👍
- Responsinator
- Sans Francisco - a tool for designers
- Sizzy:Browser Testing Tool
- Stack Overflow
- The W3C Markup Validation Service
- The W3C CSS Validation Service
- Web Developer Checklist👍
CSS Frameworks
- Bootstrap
- Bulma CSS
- Caramel
- Cardinal
- Element CSS
- Flexbox Froggy
- Foundation CSS
- Jeet
- Petal CSS
- Pure CSS
- Less
- Material Design Lite
- Materialize CSS👍
- Neat
- Semantic UI
- Skeleton CSS
- Tacit
- UI Kit
- Unsemantic
- Vital CSS
Icons
- Brandicons
- Flat Icon
- Font Awesome👍
- Glyphicon
- Google Material Design Icons👍
- Icomoon
- Ionicons
- Mapicons
- MfgLabs-Iconset
- Micon
- Octicons
- Open Iconic, a free and open icon set
- OpenWebIcons
- Stackicons
- Typicons
- Weather Icons
- Zocial | CSS3 Button Set
Colors
- Color Hunt
- Color Theory by Natalya Shelburne
- Color wheel | Color schemes - Adobe Color CC
- Coolors👍
- Designing in Color
- Palettable
- Paletton - The Color Scheme Designer
Typography
- Circular Font Combinations | Free Alternatives | Typewolf
- Font Pair - Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
- Fontspiration
- Google Fonts👍
- Just My Type
- Table of Contents | The Elements of Typographic Style Applied to the Web
- Typekit
- Typography Terms
Animation Frameworks
Stock Resources
- Free stock images and Videos
- MakerBook - The best free resorces for creatives
- Pexels
- The Stocks
- UnSplash👍
Geolocation
Apis
Mockups
Books
- HTML Basics
- HTML Tutorialspoint
- HTML5 Pocket Reference (Pocket Reference (O'Reilly)
- HTML5 for Masterminds, 2nd Edition
- Learn How To Code Im HTML5 and CSS3
- Responsive Web Design with HTML5 and CSS3
Challenges
- CSS Zen Garden A demonstration of what can be accomplished through CSS-based design, and a chance to do your own.
- JavaScript30 A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript.