Summary of front end basics
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build tool
design pattern

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


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.

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:


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.

Build Tool:

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

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


Server Side:

NodeJS, Database...


Making your website user friendly.

  • UX principles
  • User Study Methods
  • Prototyping

Online Resource

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

Know How