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

1. Web in General
2. HTML
3. CSS
4. Javascript
5. Design Pattern
6. Framework
7. Build Tool
8. Algorithm
9. Server Side
10. UI/UX
11. Online Resource
12. 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
  • window.onload vs $(document).ready
  • window.onload vs document/onload
• High Perfomance
  • where to put script tag
  • Thinking Async
• Single Web App
• CDN

HTML:

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

CSS:

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

Javascript:

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

Design Pattern:

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

Framework:

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.

• MVC
  • Basic
  • Simplified TodoMVC
• React: a collection of react tutorials(you dont need to use webpack to run them).

Build Tool:

Gulp, Webpack, Bower, Preprocessor, Testing, Git...

• [Background](./build tool/background)
• [Webpack](./build tool/webpack)

Algorithm:

• Leetcode Javascript Solution

Server Side:

NodeJS, Database...

• NodeJS

UI/UX:

Making your website user friendly.

• UX principles
• User Study Methods
• Prototyping

Online Resource

W3School, CSS-Tricks, egghead.io, AngularJS, ReactJS...

Know How

• 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.