Step by Step Belajar Frontend untuk Pemula - Blog - Naufaldi Rafif Satriya

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.

](https://roadmap.sh/frontend?ref=blog.naufaldi.com)

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

](https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7&ref=blog.naufaldi.com)

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.

](https://www.w3schools.com/html/html_intro.asp?ref=blog.naufaldi.com)

[

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!

](https://frontendmasters.com/courses/web-development-v2/?ref=blog.naufaldi.com)

[

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…

](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML?ref=blog.naufaldi.com)

[

freeCodeCamp.org

Learn to Code — For Free

](https://www.freecodecamp.org/learn/responsive-web-design/?ref=blog.naufaldi.com#basic-html-and-html5)

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

](https://www.freecodecamp.org/learn/responsive-web-design/?ref=blog.naufaldi.com#basic-css)

[

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!

](https://frontendmasters.com/courses/getting-started-css/?ref=blog.naufaldi.com)

[

Learn CSS

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

](https://web.dev/learn/css/?ref=blog.naufaldi.com)

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.

](https://www.a11yproject.com/?ref=blog.naufaldi.com)

[

aria-label - Accessibility | MDN

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

](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label?ref=blog.naufaldi.com)

[

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.

](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility?ref=blog.naufaldi.com)

# 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…

](https://www.freecodecamp.org/news/full-javascript-course-for-beginners/?ref=blog.naufaldi.com)

Javascript Animasi

[

anime.js

Javascript animation engine

](https://animejs.com/?ref=blog.naufaldi.com)

[

JavaScript animations

](https://javascript.info/js-animation?ref=blog.naufaldi.com)

Struktur Data dan Algoritma

TBD

Problem Solving

Javascript Handling Data

TBD

ReactJS

State Management di ReactJS

TBD

Testing

TBD

Typescript

TBD

Bagikan[](https://twitter.com/share?text=Step by Step Belajar Frontend untuk Pemula&url=https://blog.naufaldi.com/step-by-step-belajar-frontend-untuk-pemula/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/step-by-step-belajar-frontend-untuk-pemula/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/step-by-step-belajar-frontend-untuk-pemula//&title=Step by Step Belajar Frontend untuk Pemula "LinkedIn")[](/cdn-cgi/l/email-protection#ccf3bfb9aea6a9afb8f19fb8a9bcecaeb5ec9fb8a9bcec8ea9a0ada6adbeec8abea3a2b8a9a2a8ecb9a2b8b9a7ec9ca9a1b9a0adeaada1bcf7aea3a8b5f1a4b8b8bcf6e3e3aea0a3abe2aaada0a8a5e2b4b5b6e3bfb8a9bce1aeb5e1bfb8a9bce1aea9a0ada6adbee1aabea3a2b8a9a2a8e1b9a2b8b9a7e1bca9a1b9a0ade3 "Email")

Topik Insight Lesson Learned NextJS ReactJS Tutorial

[

Firefox Relay, For Anonymous Email

Firefox Relay⁩ email masks protect your true email address from public view,…

19 Sep 2022

](/firefox-relay-for-email-anonymous/)[

Menulis untuk Membuat Sejarah

Sejak zaman SMA, saya sangat menyukai menulis. Bahkan saat itu saya memiliki…

02 Sep 2022

](/menulis-untuk-sejarah/)