One challenge of learning front end development is that universities normally don't have front end specific courses. They only teach you about OO language, database and basic knowledge about CS. The good news is that most of the front end development knowledge can be found online and there are tons of excellent tutorials. Through my study about front end, I get help from different people and varous online resource. Thus here I want to summarize what I know about front end development and share with anyone who is interested in becoming a Front End Developer/UI developer/UX Engineer/Design Technologist/Whatever you call.
Note: This material is designed for people of entry level. It is not for people who is seeking for high level knowledge. I will continue updating this respository. The table of contents might change.
Know How: Frankly speaking, the best way to study the front end development is to start to build something by yourself. There are tons of excellent tutorials in teaching you to build your first app. Here is a quick link to Know How.
- Web in General
- HTML
- CSS
- Javascript
- Design Pattern
- Framework
- Build Tool
- Algorithm
- Server Side
- UI/UX
- Online Resource
- Know How
How Browser works, Performance...
- Web History To understand why we have html, html5, XHTML, CSS, SQL, JS, PHP, ASP.NET, Web Services, frontend framework, backend framework(or web framework)...
- How broswer works
- High Perfomance
- Single Web App
- CDN
Understand the basic of HTML as well as new technology of the HTML5 is a key to manipulate the DOM.
- Semantic
- Attributes
- Cookie, sessionStorage and localStorage
- API
- Template
Even though developers are generally dealing with coding language like javascript, understanding how the css layout works is essential in making your UI works as desired. Besides, CSS is also important in creating responsive web so it can fit in different screen size.
- Box model
- How to center a div
- Check out my 20 POTATOES PROJECT on codepen to see how different styles of centering a div are used.
- Responsive web
- Flex
- CSS animation
JS is the key for front end development. Javascript basics: scope, closure, array manipulation, callback ...
Before going into the JS algorithm part, understand the below concepts is essential. I use a lot of JS specific coding style in the leetcode JS algorithm answers.
- Best Starting Point will be MDN JS guide
- Other
- Object
- Scope
- Prototype chain
- Array mainipulation, such as map, forEach, reduce, filter.
- 'bind' and bound/unbound function
- How to make 'bind' function
- Manage 'arguments'
- [Event delegation](./javascript/questions/event delegation)
- IIFE
- Hositing
- Asynchronous (callback)
- ES6
Before going into framework such as MVC and Flux, it is better to know the basic of design patterns. Below is a list of them in js:
- Singleton
- Observer Pattern
- Strategy Pattern
- Proxy Pattern
- Iterator Pattern
- Command Pattern
A deep understanding of framework is essential in making the website to be a functional application. A very good resource about MVC framework is TodoMVC. In fact, I think the best way to understand the MVC is to make a native JS MVC by yourself. I will update one soon.
Gulp, Webpack, Bower, Preprocessor, Testing, Git...
- [Background](./build tool/background)
- [Webpack](./build tool/webpack)
NodeJS, Database...
Making your website user friendly.
- UX principles
- User Study Methods
- Prototyping
W3School, CSS-Tricks, egghead.io, AngularJS, ReactJS...
- First App in React: Build your first ReactJS application.
- Angular and Webpack: A very good tutorial for understanding build tool webpack.
- RESTful api in NodeJS: A simple tutorial about REST and NodeJS.