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

The DOM in Motion: Animating web designs with CSS Animation and Transitions

<p> Animation is crucial to developing interactive designs and interfaces, and CSS and the Web Animation API offer some of the most performant ways to animate today.</p><p> This workshop gives attendees the skills they need to animate in the most performant and up to date way. Rich with fun exam…

Rachel NaborsLearn with Rachel Nabors

Accesibility

TBD

Javascript Dasar

TBD

Javascript Animasi

TBD

Struktur Data dan Algoritma

TBD

Problem Solving

Javascript Handling Data

TBD

ReactJS

State Management di ReactJS

TBD

Testing

TBD

Typescript

TBD