Resources for learning web design & front-end development

web-design-development-learning-resources.md

Resources for learning web design & front-end development:

---

ONLINE

Design

• http://52weeksofux.com
• http://thedesigncubicle.com
• http://smashingmagazine.com
• http://littlebigdetails.com
• http://markboulton.co.uk/archives
• http://mikeindustries.com/blog/archive/2004/05/getting-started-in-design
• http://webtypography.net
• http://cooper.com/journal
• http://adaptivepath.org/ideas
• http://zurb.com/blog
• http://google.com/design
• https://themanual.org/read

HTML

• http://diveintohtml5.info
• http://html5demos.com
• http://html5doctor.com
• http://html5rocks.com
• http://htmldog.com
• http://developer.mozilla.org/en/HTML
• http://developer.mozilla.org/en-US/learn/html
• http://html5boilerplate.com
• http://webplatform.org
• https://gist.github.com/nathansmith/0b46e5a76ccb20af9de063f7c3f58d5b
• https://websitesetup.org/html5-cheat-sheet

CSS

• http://css-tricks.com
• http://csstutorial.net
• http://csszengarden.com
• http://developer.mozilla.org/en/CSS
• http://developer.mozilla.org/en-US/learn/css
• http://meyerweb.com/eric/css
• http://css-101.org
• http://iamacamera.org/default.aspx?id=95
• http://stopdesign.com/archive/2004/07/27/throwing-tables.html
• https://websitesetup.org/css3-cheat-sheet

JavaScript

• https://pinboard.in/u:nathansmith/t:javascript
• http://adaptivepath.org/ideas/ajax-new-approach-web-applications
• http://developer.mozilla.org/en/javascript
• http://developer.mozilla.org/en-US/learn/javascript
• http://javascriptweekly.com
• http://badassjs.com
• http://dailyjs.com
• http://bonsaiden.github.com/JavaScript-Garden
• http://paulirish.com
• http://wait-till-i.com
• http://icant.co.uk
• http://davidwalsh.name
• http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript
• https://youtube.com/user/yuilibrary
• https://medium.com/javascript-scene
• https://gist.github.com/nathansmith/eda4ca58deda2d48203cd6bd4c229b0c
• https://developer.mozilla.org/en-US/docs/Learn/JavaScript

jQuery

• http://api.jquery.com
• http://docs.jquery.com
• http://learningjquery.com
• http://jqfundamentals.com
• https://websitesetup.org/jquery-cheat-sheet

React & Redux

• https://pinboard.in/u:nathansmith/t:react
• https://speakerdeck.com/nathansmith/getting-started-with-react
• https://facebook.github.io/react
• https://egghead.io/courses/getting-started-with-redux
• https://reactforbeginners.com
• https://learnredux.com
• https://react.statuscode.com
• https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918
• http://bonsaiden.github.io/JavaScript-Garden
• https://reactjs.co

---

BOOKS

Design

• http://alwaysreadthemanual.com
• http://sitepoint.com/books/design2
• http://rosenfeldmedia.com/books/webforms
• http://abookapart.com/products/the-elements-of-content-strategy
• http://sensible.com/dmmt.html
• http://ideo.com/by-ideo

HTML

• http://htmlmastery.com
• http://books.alistapart.com/products/html5-for-web-designers
• http://introducinghtml5.com
• http://htmldog.com/book

CSS

• http://apress.com/9781430223979
• http://oreilly.com/catalog/9780596527334
• http://books.alistapart.com/products/css3-for-web-designers
• http://abookapart.com/products/responsive-web-design
• http://fivesimplesteps.com/products/hardboiled-web-design

JavaScript

• http://domscripting.com
• http://apress.com/us/book/9781590598566
• http://oreilly.com/catalog/9780596517748
• http://oreilly.com/catalog/9780596805531
• http://eloquentjavascript.net
• http://oreilly.com/catalog/9780596806767
• http://jsdesignpatterns.com
• http://packtpub.com/object-oriented-javascript/book
• http://javascriptenlightenment.com
• http://oreilly.com/catalog/9780596802806
• http://javascriptrocks.com
• http://beginningjavascript.com
• http://sitepoint.com/books/jsdesign1
• http://shop.oreilly.com/product/9780596802806.do
• https://leanpub.com/front-end-fundamentals

jQuery

• http://packtpub.com/learning-jquery-1.3/book
• http://oreilly.com/catalog/9780596159788
• http://jqueryenlightenment.com
• http://manning.com/bibeault2

---

CURRICULUM & VIDEOS

• http://codecademy.com
• http://codeschool.com
• http://lynda.com
• http://teamtreehouse.com
• http://watchmecode.net
• http://theironyard.com

I thought the Opera Web Standard Curriculum stuff was pretty cool. Covers a lot: http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc

For JS online, I found http://bonsaiden.github.com/JavaScript-Garden/ a good collection of "gotchas"

JS Book: High Performance JavaScript http://oreilly.com/catalog/9780596802806/

Would love for you to check out Code School — http://codeschool.com

Another useful MDN link: https://developer.mozilla.org/en-US/learn/javascript

Also, I think it's a bit iffy to include http://cssplay.co.uk. Many CSS demos (original or not) require "permission" and "donation" to use commercially. And there are also demos that promote bad coding without any warning as to the consequences (e.g. http://www.cssplay.co.uk/menu/content100.html). Your call :)

@necolas — Good call. Gone. :)

Just a few more links!

Design:

http://www.material-designer.com/design

CSS:

http://www.css-101.org/

JS:

http://blog.reybango.com/2010/12/15/what-to-read-to-get-up-to-speed-in-javascript/

@davidcalhoun -- Thanks, added!

Would also suggest http://alwaysreadthemanual.com/

Great Stuff THX :]

Here is a book myself and a colleague just released which can help upcoming front-end developers. Hope it can help!
https://leanpub.com/front-end-fundamentals

http://codelesson.com doesn't work anymore :(

https://reactjs.co This is the official free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore - learn your way to use React and Redux altogether

http://fivesimplesteps.com/products/a-practical-guide-to-information-architecture
http://fivesimplesteps.com/products/a-practical-guide-to-designing-with-data
http://fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-webl
These sites doesn't work anymore

Hey guys, I started a pretty neat Youtube channel for learning the basics of HTML and CSS. If you like lots of animations and are a more visual learner, I think you'll love the vids. Producing the third episode now, so there's more to come.

https://www.youtube.com/channel/UC7vYUkA-s5XVjS7UoyGSFbg

Hello,

I added more resources to the HTML and CSS part. Kindly merge my addition. @nathansmith

Have a look at Front-End Developer Handbook 2017 @ https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/details

Thanks

Quite a number of useful resources but in order to find out which ones are truly worth your time, you could check out curated resources.

HTML5 - https://hackr.io/tutorials/learn-html-5
CSS - https://hackr.io/tutorials/learn-css
JS - https://hackr.io/tutorials/learn-javascript
JQuery - https://hackr.io/tutorials/learn-jquery

The Complete Front-End Web Development Course!
https://www.99udemycoupon.com/2018/08/100-off-udmy-free-coupon-complete-front.html

thanks, it's helpful

Just a few more Useful links! which I think will help all the learners to understand Easily with examples.

Javascript:

https://www.scaler.com/topics/javascript/

CSS:

https://www.scaler.com/topics/css/

HTML:

https://www.scaler.com/topics/html/