Step by Step Belajar Frontend untuk Pemula

Insight Sep 03, 2022

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.

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

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!
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…
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!
Learn CSS
An evergreen CSS course and reference to level up your web styling expertise.

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…

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

Tag

Faldi

Manusia pada umumnya

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.