Step by Step Belajar Frontend untuk Pemula - Blog

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.

roadmap.shKamran Ahmed

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

YouTube

](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!

Frontend MastersBrian Holt

](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…

MDN

](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!

Frontend MastersJen Kramer

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

web.dev

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

The A11Y Project The A11Y ProjectMarcy Sutton

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

MDN Web Docs

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

MDN Web Docs

](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…

freeCodeCamp.orgBeau Carnes