Ini adalah daftar materi tentang Frontend untuk menunjang belajar kalian.
Pastikan kalian pelajari terlebih dahulu sebelum masuk kelas, agar mempermudah aktifitas belajar kita.
Selamat belajar!
Introduction:
- Software Development Life Cycle
- Web Developer Roadmap - 2020
- What is a Frontend Developer?
- Fronted x Backend:
Installation & Configuration:
- Install dual boot: Ubuntu 18.04 x Windows10
- Visual Studio Code Extensions For Web Development
- Sublime Text Plugins For Web Development
- Installing Git
- Installing NodeJS
Linux Command:
HTML-CSS:
- Udacity Free Course: Responsive Web Design Fundamentals
- Intro HTML
- HTML Table
- HTML Form
- HTML Layout
- Intro CSS
- CSS Units
- CSS Specificity
- CSS Selector: A Fun Way to Learn Selector
- CSS Box Model
- CSS Margin
- CSS Padding
- CSS Grid
- CSS Flexbox
- CSS Flexbox: A Fun Way to Learn Flexbox
- Media Query
Git:
- Intro Git
- Interactive Git Playground
- Udacity Free Course: Version Control with Git
- Git Cheatsheet
- Git Simple Guide
- Github Pages
- Mastering Markdown
- Markdown Cheatsheet
- Markdown and VS Code
- Gitlab Beginner Tutorial (Video)
Javascript Fundamentals:
Javascript & ES:
- Javascript Functions
- Function Definitions
- Javascript DOM
- DOM in JavaScript
- What is ECMAScript 6 (ES6–2015)?
- ECMAScript 6 Tutorial
- What’s the difference between JavaScript and ECMAScript?
- ES6 JavaScript Tutorial for Beginners (Video)
- ECMAScript 6 — New Features: Overview & Comparison
- Import & Export Modul dalam ES6
- JS ES6 Cheatsheet
- Exploring ES6
- Using Default Parameters in ES6
- When & Why You Should Use ES6 Arrow Function
- JS Regex
- You dont know JS
- JS Brief and ES Features
- JS Books
- The Modern JavaScript Tutorial
jQuery:
- jQuery Learning Center
- jQuery Tutorial: W3Schools
- jQuery Tutorial: BitDegree
- jQuery Tutorial: CSS Tricks
- jQuery to Grab JSON Files
- You Might Not Need jQuery
OOP:
- Part 1 OOP in JS: Class-Object-Constructor-Property-Method
- Part 2 OOP in JS: Getter-Setter
- JS and OOP Part:1
- JS and OOP Part:2
- JS and OOP Part:3
- Video: Traversy Media
- Video: Programming with Mosh
Javascript Asynchronous:
- Belajar Callback, Promise, dan Async — Await
- Asynchronous JS: Part 1
- Asynchronous JS: Part 2
- Asynchronous JS: Part 3
- Asynchronous JS: Part 4
- Mengenal CallBack, Promise dan Async / Await pada Javascript (Video)
- Asynchronous Javascript (Video)
- Using Promise, Avoid Callback Hell
- Why Async?
Package Manager:
ReactJS:
- React Tutorial: An Overview and Walkthrough
- Article about ReactJS: freecodecamp.org
- Using React in Visual Studio Code
- Tutorial ReactJS: Part 1
- Tutorial ReactJS: Part 2
- Memulai ReactJS & dasar JSX
- Tutorial Lengkap ReactJS
- Understand Virtual DOM
- Apa itu Virtual DOM?
- Style React Components: 7 Ways Compared
ReactJS Component Lifecycle:
Fetching Data:
- Web API Concept
- Microservices
- API Testing Using Postman
- Video: REST API
- When Do You Need AXIOS
- Easy to Use AXIOS
- Using AXIOS
React Router:
React Hooks:
Store Data:
- Session Storage vs Local Storage vs Cookie
- How to use localStorage with React
- Session Storage and Local Storage in React
- Perbedaan Cookie - Session Storage - Local Storage
- Cookies vs. LocalStorage: What’s the difference?
Redux:
- Passing Data Between React Components — Parent, Children, Siblings
- You Might Not Need Redux
- Apa itu Redux
- Mengenal Redux Dengan Sederhana
- Pengenalan State Management Menggunakan Redux
- Memahami konsep Redux - Part 1
- Memahami konsep Redux - Part 2
React-Redux:
- React Redux Tutorial Untuk Pemula
- Penerapan Redux Pada React App - Part 1
- Penerapan Redux Pada React App - Part 2
- Penerapan Redux Pada React App - Part 3
- Codesandbox - Fetch in React
- Codesandbox - React Router Basic
- Codesandbox - React Router Nested
- Codesandbox - React Simple Layout
- Codesandbox - Basic Template React
- Codesandbox - Hook Basic
- Codesandbox - API Post
- Codesandbox - React Hooks Exercice Sample
- Codesandbox - Router useParams Sample
- Codesandbox - Paging Sample
- Codesandbox - Login Sample