141 lines (122 loc) · 8.85 KB

Front-End Web Development

Front-End development adalah bidang dari web development yang berfokus pada pengembangan tampilan website. Alat utama yang digunakan pada bidang web development ini adalah HTML, CSS, dan JavaScript. Orang yang melakukan Front-End development disebut Front-End Developer.

Kisaran Gaji

Glassdoor (area Indonesia) 🇺🇸
Glints (area Indonesia) 🇮🇩

Jalur Pembelajaran Front-End Web Development

Dicoding (Free or Paid) 🇮🇩
Progate (Paid with Low Price) 🇮🇩
Codepolitan (Paid) 🇮🇩
Binar Academy (Paid) 🇮🇩
BuildWithAngga (Paid with Low Price) 🇮🇩

Kelas Online (Gratis)

Bahasa

HTML
- Belajar Web - HTML & CSS Dasar (Kelas Terbuka) [2023] 🇮🇩
- HTML 5 Dasar (BuildWith Angga) 🇮🇩
- HTML 5 Dasar (Unpas) [2015] 🇮🇩
- HTML Tutorial for Beginners: HTML Crash Course (Programming with Mosh) [2021] 🇺🇸
CSS
- Tingkat Dasar
  - CSS Website Design (BuildWith Angga) 🇮🇩
  - CSS Dasar (Skilvul) 🇮🇩
  - CSS Dasar (Unpas) [2021] 🇮🇩
  - CSS Layouting (Unpas) [2021] 🇮🇩
  - CSS Unit (Unpas) [2021] 🇮🇩
  - CSS 3 (Unpas) [2016] 🇮🇩
  - CSS Tutorial - Full Course for Beginners (freeCodeCamp) [2022] 🇺🇸
- Tingkat Menengah
  - TheCinCSS Series (array id) [2021] 🇮🇩
  - Belajar Flexbox (Unpas) [2020] 🇮🇩
  - CSS Grid (Unpas) [2020] 🇮🇩
JavaScript
- Tingkat Dasar
  - JavaScript Dasar (Skilvul) 🇮🇩
  - Tutorial JavaScript Dasar Bahasa Indonesia (Programmer Zaman Now) [2021] 🇮🇩
  - JS Dasar (Unpas) [2017] 🇮🇩
  - JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour (Programming with Mosh) [2018] 🇺🇸
- Tingkat Menengah
  - JavaScript Intermediate (Skilvul) 🇮🇩
  - JavaScript DOM Manipulation - Full Course for Beginners (freeCodeCamp) [2022] 🇺🇸
- Tingkat Mahir
  - JavaScript Lanjutan (Unpas) [2022] 🇮🇩

Library

React
- Belajar React JS Dari Awal Buat Yang Nggak Jago JavaScript (array id) [2021] 🇮🇩
- Satu Jam Jago React.js Hook Basic (IDStack) [2021] 🇮🇩
- 10 Reach Hooks Explained (Fireship) [2021] 🇺🇸
React Material UI
- React Material UI Tutorial (Codevolution) [2022] 🇺🇸
Bootstrap
- Bootstrap 5 - Membuat Website Landing Page (Skilvul) 🇮🇩
- CSS Bootstrap 4 Web Design (BuildWith Angga) 🇮🇩
- Bootstrap CSS Framework - Full Course for Beginners (freeCodeCamp) [2021] 🇺🇸
SASS
- Tutorial SASS (Unpas) [2020] 🇮🇩
- SASS Crash Course (Traversy Media) [2020] 🇺🇸
Tailwind
- CSS Tailwind Web Design (BuildWith Angga) 🇮🇩
- Belajar Tailwind CSS (Unpas) [2022] 🇮🇩
- Tailwind Crash Course | Project From Scratch (Traversy Media) [2022] 🇺🇸
Styled Components
- Styled Components Crash Course (freeCodeCamp) [2021] 🇺🇸
jQuery
- Tutorial jQuery Bahasa Indonesia (Framework Indonesia) [2019] 🇮🇩

Framework

Vue
- Vue JavaScript Framework (BuildWith Angga) 🇮🇩
- Dasar Vue Js 3 (SekolahKoding) 🇮🇩
- Tutorial Lengkap Vue JS 3 Untuk Pemula (M Fikri) [2021] 🇮🇩
- Vue.js 3 Tutorial (The Net Ninja) [2020] 🇺🇸
Angular
Svelte
- Tutorial Svelte Indonesia (Ipung Dev Academy) [2020] 🇮🇩
- Svelte Crash Course (Traversy Media) [2021] 🇺🇸

Kelas Online (Berbayar)

Bahasa

Coming soon...

Library

Coming soon...

Framework

Coming soon...

Buku/Bacaan

Modern React: Be Frontend Javascript Developer (Paid) 🇮🇩
Eloquent JavaScript (Free) 🇺🇸
Don't Make Me Think (Free) 🇺🇸
The Design of Everyday Things (Free) 🇺🇸

Proyek Latihan

Kalkulator Sederhana
To Do List
Landing Page
Website Travel
Toko Online (E-Commerce)

Platform Latihan

Frontend Mentor 🇺🇸
CSSBattle 🇺🇸
devChallenges 🇺🇸
Codewell 🇺🇸
CSS Flexbox (Flexbox Froggy) 🇮🇩
CSS Grid (Grid Garden) 🇮🇩

Cheat Sheet

Cheat Sheet dan Emmet HTML5 & CSS 🇺🇸
Cara Baik dan Buruk Penulisan Tag/Kode HTML 🇺🇸
Cara Baik dan Buruk Penulisan Tag/Kode HTML 🇮🇩

Media Sosial

Frontend Trend (Telegram) 🇺🇸
FrontEnd Development (Telegram) 🇺🇸
React Developers - ReactJS & React Native Professional Development Mastermind (LinkedIn) 🇺🇸
frontendjoe (Instagram) 🇺🇸
frontendchannels (Instagram) 🇺🇸
baby_wolf_codes (Instagram) 🇺🇸