Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jesselpalmer/the-front-end-architect-resource-list

Front End Architecture resources
https://github.com/jesselpalmer/the-front-end-architect-resource-list

front-end front-end-architecture front-end-development front-end-engineering web-dev web-developer web-development

Last synced: 15 days ago
JSON representation

Front End Architecture resources

Awesome Lists containing this project

README 

        
# The Front End Architect Resource List



The resources here are to help you build a strong foundation in becoming a well-rounded front end architect. This includes understanding HTML, CSS, and JavaScript as well as topics such as networking, software design, and design patterns.



## Table of Contents



1. [Websites](#websites)

1. [Tools](#tools)

1. [Newsletters](#newsletters)

1. [Interview Prep](#interview-prep)

1. [Nanodegrees](#nanodegrees)

1. [Books](#books)

1. [Articles](#articles)

1. [GitHub Learning List](#github-learning-list)

1. [Tweets](#tweets)



## Websites



### Web Development



[Google Web Fundamentals](https://developers.google.com/web/)\

[Mozilla Developer Network](https://developer.mozilla.org/en-US/)\

[web.dev](https://web.dev/)



### Standards



[World Wide Web Consortium (W3C)](https://github.com/w3c)\

[ECMA-262 specification](ecma-international.org/publications-and-standards/standards/ecma-262/)\

[Ecma International, Technical Committee 39 - ECMAScript](https://github.com/tc39)



### JavaScript



[javascript.info](https://javascript.info/)



### Compatibility Tables



[CanIUse](https://caniuse.com/)\

[ECMAScript Compatibility Table](https://kangax.github.io/compat-table/es6/)



### Performance

[Measure performance with the RAIL model](https://web.dev/rail/)\

[Apply instant loading with the PRPL pattern](https://web.dev/apply-instant-loading-with-prpl/)



### Browser

[Inside look at modern web browser](https://developers.google.com/web/updates/2018/09/inside-browser-part1)



### Networking



[How DNS Works](https://howdns.works/)\

[What is a CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/)  



**[⬆ back to top](#table-of-contents)**



## Tools



[Lighthouse](https://developers.google.com/web/tools/lighthouse/)\

[Google Tag Manager](https://tagmanager.google.com/)\

[Google Search Console](https://search.google.com/search-console)\

[Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)



**[⬆ back to top](#table-of-contents)**



## Newsletters



### JavaScript



[JavaScript Weekly](http://javascriptweekly.com/)



### Web



### Front End



[FrontEnd Focus](https://frontendfoc.us/)



### CSS



[CSS Weekly](http://css-weekly.com/)



**[⬆ back to top](#table-of-contents)**



## Interview Prep



[Interview Questions for front-end-Developer](http://thatjsdude.com/interview/index.html)\

[Front End Web Development Quiz](http://davidshariff.com/quiz/)\

[Front-end-Developer-Interview-Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)\

[Cracking the front-end interview](https://medium.freecodecamp.com/cracking-the-front-end-interview-9a34cd46237)\

[Been interviewing with a lot of tech startups as a frontend dev, here are the technical questions I've been asked](https://www.reddit.com/r/webdev/comments/3f7q3q/been_interviewing_with_a_lot_of_tech_startups_as/)\

[Front End Job Interview Questions](https://github.com/yangshun/tech-interview-handbook/blob/master/front-end/interview-questions.md)\

[5 Typical JavaScript Interview Exercises](https://www.sitepoint.com/5-typical-javascript-interview-exercises/)\

[Front End Specific Coding Practice Questions & Problems](https://bigfrontend.dev/)\

[Eric Elliot's "Master the JavaScript Interview" Series](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36)



**[⬆ back to top](#table-of-contents)**



## Online Courses / Training



### Udacity



#### Nanodegrees



[Front End Web Developer](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011)\

[Full Stack Web Developer](https://www.udacity.com/course/full-stack-web-developer-nanodegree--nd0044)\

[Full Stack JavaScript](https://www.udacity.com/course/full-stack-javascript-developer-nanodegree--nd0067)\

[Intermediate JavaScript](https://www.udacity.com/course/intermediate-javascript-nanodegree--nd032)\

[React](https://www.udacity.com/course/react-nanodegree--nd019)



### Treehouse



#### Tracks



[Learn React](https://teamtreehouse.com/tracks/learn-react)\

[Front End Web Development](https://teamtreehouse.com/tracks/front-end-web-development)



**[⬆ back to top](#table-of-contents)**



## Books



### JavaScript



[JavaScript: The Good Parts](https://amzn.to/2MPGt6Y)\

[Eloquent JavaScript](https://amzn.to/2IjCtre)\

[Leaning JavaScript Design Patterns](https://www.amazon.com/Learning-JavaScript-Design-Patterns-Developers/dp/1449331815)



### Web Performance



[Web Performance in Action](https://amzn.to/2Xb67as)\

[High Performance Web Sites](https://amzn.to/2N4jTrJ)\

[High Performance Browser Networking](https://amzn.to/2WLiTbb)\

[Even Faster Web Sites Performance](https://amzn.to/2IE9VYg)



### Algorithms & Data Structures



[Algorithm Design Manual (Free PDF)](https://mimoza.marmara.edu.tr/~msakalli/cse706_12/SkienaTheAlgorithmDesignManual.pdf)\

[Algorithm Design Manual (Book)](https://www.amazon.com/Algorithm-Design-Manual-Steve-Skiena/dp/0387948600)



### Design Patterns

[Learning JavaScript Design Patterns](https://www.amazon.com/Learning-JavaScript-Design-Patterns-Developers/dp/1098139879)



**[⬆ back to top](#table-of-contents)**



## Articles



[What Happens When You Type google.com Into Your Browser and Press Enter?](https://github.com/alex/what-happens-when)\

[A Guide to Becoming a Full-Stack Developer in 2017](https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c)\

[Our entire team of engineers use this front end development guide](https://medium.freecodecamp.org/grabs-front-end-guide-for-large-teams-484d4033cc41)\

[Lydia Hallie's "JavaScript Visualized" Series' Articles](https://dev.to/lydiahallie/series/3341)



**[⬆ back to top](#table-of-contents)**



## GitHub Learning List



[Become A Full Stack Web Developer](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer)\

[Web Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap)



**[⬆ back to top](#table-of-contents)**



## Tweets



[HTTP What?](https://twitter.com/kosamari/status/859958929484337152/photo/1)



**[⬆ back to top](#table-of-contents)**