Front End 101 - beginner tutorial for front end.
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.
Table of Contents
- Web in General
- Design Pattern
- Build Tool
- Server Side
- Online Resource
- Know How
Web in General:
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
Understand the basic of HTML as well as new technology of the HTML5 is a key to manipulate the DOM.
- Cookie, sessionStorage and localStorage
- 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
- CSS animation
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
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:
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.
- React: a collection of react tutorials(you dont need to use webpack to run them).
Gulp, Webpack, Bower, Preprocessor, Testing, Git...
- [Background](./build tool/background)
- [Webpack](./build tool/webpack)
Making your website user friendly.
- UX principles
- User Study Methods