Sering kali di Twitter atau saat ngopi bareng temen, banyak banget yang menanyakan terkait Roadmap apa saja yang harus dipelajari oleh seorang Frontend, Bahkan sebenarnya mereka sudah mengerti apa yang akan dipelajari, namun tidak memiliki cukup banyak informasi  / sumber belajar maka dari itulah aku mencoba mengkurasi beberapa sumber belajar yang bisa dijadikan salah satu referensi untuk belajar Frontend.

#Roadmap

Roadmap secara general bisa dilihat pada tautan dibawah ini :

Frontend Developer Roadmap: Learn to become a modern frontend developer

Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.

Kamran Ahmedroadmap.sh

Siapa saja sebenarnya bisa menggunakan guide yang saya buat ini. Karena dasarnya sama, fundamentalnya sama entah otodidak atau belajar dari kampus.

Sayangnya, memang benar mungkin tidak semua sumber belajar yang saya bagikan ini bersifat gratis. Ada beberapa yang berbayar. Jadi mungkin bisa menabung / meminta kantor untuk membayarkan hehe. Subsidilah ya..

Kalau masih mahasiswa malah bagus, bisa menggunakan Github Education Pack yang memberikan beberapa course secara gratis seperti Educative dan Frontend Master

Pengenalan Web

• Mempelajari bagaimana cara kerja internet
• Apa saja yang mempengaruhi Web Apps bisa diakses oleh orang banyak
• Bagaimana cara deploy Web Apps
• Susunan sebuah Web Apps

Highlight Materi

• Server
• IP Address
• DNS

How The Internet Works

Featuring Vint Cerf, the inventor of TCP/IP, David Karp the founder of Tumblr to explain HTTP and HTML, Google’s “Security Princess” to explain SSL and cyber...

YouTube

HTML

• Mempelajari Struktur sebuah Web Apps itu apa saja
• Cara Kerja HTML
• Struktur HTML

Highlight Materi

• Accesibility
• Semantic HTML
• Attribute HTML

Introduction to HTML

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Learn Complete Introduction to Web Development with Brian Holt from Microsoft

More than an introduction, in this course you’ll go from building your first website to having the foundation for becoming a professional web developer!

Brian HoltFrontend Masters

Introduction to HTML - Learn web development | MDN

At its heart, HTML is a language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A…

MDN

freeCodeCamp.org

Learn to Code — For Free

CSS

• Bagaimana sebuah CSS bekerja
• Cara Menuliskan CSS
• Styntax CSS
• CSS Best Practice
• Specifity CSS

Highlight

• Atomic CSS / BEM
• Box Model
• Position CSS
• Selector CSS
• Relative Unit and Absolute Unit
• PX, EM, dan REM

freeCodeCamp.org

Learn to Code — For Free

Learn CSS to build a portfolio website in this course with Jen Kramer.

Get to know CSS in the right way without the fluff. You’ll style text, build navigation bars, headers/footers, add icons, and more. You’ll even build a professional portfolio website by the end of the course!

Jen KramerFrontend Masters

Learn CSS

An evergreen CSS course and reference to level up your web styling expertise.

web.dev

CSS Layout

• Design to Code
• Satu dimensi dan dua dimensi

Highlight

• Flexbox
• Grid
• Subgrid
• Multicolumn
• CSS Writing Modes

https://frontendmasters.com/courses/css-grid-flexbox-v2

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Animasi

• Membuat Animasi
• Perbedaan transition dan transform
• Motion

Highlight

• Keyframe
• CSS Transition

Accesibility

• a11y
• ARIA Label

Home - The A11Y Project

The A11Y Project is a community-driven effort to make digital accessibility easier.

Marcy SuttonThe A11Y Project The A11Y Project

aria-label - Accessibility | MDN

The aria-label attribute defines a string value that labels an interactive element.

MDN Web Docs

Accessibility in React - Learn web development | MDN

In our final tutorial article, we’ll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.

MDN Web Docs

Javascript Dasar

• Async await
• Promise
• Array
• Array manipulation

Highlight

• JS ECMA

Full JavaScript Course for Beginners

JavaScript is used everywhere. If you don’t already know how to program inJavaScript, this is a great time to learn. We just released a 7-hour beginner’s JavaScript course on the freeCodeCamp.orgYouTube channel. Per Borgen created the course. He is the founder of Scrimba.com and he is agreat te…

Beau CarnesfreeCodeCamp.org

Javascript Animasi

anime.js

Javascript animation engine

JavaScript animations

Struktur Data dan Algoritma

TBD

Problem Solving

Javascript Handling Data

TBD

ReactJS

State Management di ReactJS

TBD

Testing

TBD

Typescript

TBD