206

[ { "id": "fc-block-5-sx68p7du4", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "black", "paddingTop": 10, "paddingBottom": 10, "labelText": "Kenapa Fast campus?", "layoutType": "fc-label-type1", "labelColor": "white" }, "uniqueId": "fc-block-1-zbm1p45dm", "isChecked": false }, { "id": "fc-block-4-pyxlfhh1l", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "black", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "white", "text": "\"Learn by doing!\" Di sini Anda akan belajar dengan praktik secara langsung.
Materi ini disusun berbasis contoh nyata dari dunia kerja, jadi bukan hanya sekedar teori,
tapi langsung latihan yang relevan dan aplikatif." }, "uniqueId": "fc-block-2-orafjgfo0", "isChecked": false }, { "id": "fc-block-1-063bd875p", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n <% if (imageUrl || mobileImageUrl) { %>\n <% if(link) { %>\n \" class=\"container__link\" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n \n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "black", "useImageLeft": false, "imageUrl": "https://cdn.day1company.io/prod/uploads/202504/222805-17/ezgif.com-animated-gif-maker--1-.gif", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-3-gjenufpu9", "isChecked": false }, { "id": "fc-block-5-81u6o1xnu", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "black", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "white", "text": "(▲Contoh praktis) Meskipun kursus dasar, kualitas pembelajarannya berbeda dari yang lain.\n\n\n\n\n\n\n\n" }, "uniqueId": "fc-block-4-ccrk8o3ix", "isChecked": false }, { "id": "fc-block-5-rkp2wo3mu", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "black" }, "uniqueId": "fc-block-1-rw1itf0fk", "isChecked": false }, { "id": "fc-block-6-kbjktk7ix", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": "01. Keunggulan Kursus", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-2-mgr5iojbu", "isChecked": false }, { "id": "fc-block-3-c7husz5kz", "layout": { "id": "401", "description": "아이콘 세로형 카드 (1~4단)", "icon": "\n", "params": [ { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "90 x 90" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl2", "type": "image", "description": "90 x 90" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl3", "type": "image", "description": "90 x 90" }, { "name": "title3", "type": "text", "description": "title3" }, { "name": "content3", "type": "textarea", "description": "content3" }, { "name": "imageUrl4", "type": "image", "description": "90 x 90" }, { "name": "title4", "type": "text", "description": "title4" }, { "name": "content4", "type": "textarea", "description": "content4" } ], "values": { "useTextCenter": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "", "imageUrl3": "", "title3": "", "content3": "", "imageUrl4": "", "title4": "", "content4": "" }, "template": "

fc-text-align-center<% } %>\">\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% } %>\n <% if (imageUrl3 || title3 || content3) { %>\n

\n <% if (imageUrl3) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\"><%= title3 %>

\"><%= content3 %>

\n <% } %>\n <% if (imageUrl4 || title4 || content4) { %>\n

\n <% if (imageUrl4) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\"><%= title4 %>

\"><%= content4 %>

\n <% } %>\n

\n" }, "values": { "useTextCenter": false, "titleSize": "fc-h5-text", "contentSize": "fc-content-text", "imageUrl1": "", "title1": "Kurikulum Berbasis Praktik
yang Membangun Aplikasi
Seperti Layanan Nyata", "content1": "Di kursus ini, Anda akan membangun
aplikasi web lengkap menggunakan
TMDB API.
Mulai dari daftar konten, fitur pencarian,
halaman detail, autentikasi, manajemen
state global, hingga deployment. Setiap
konsep langsung diterapkan lewat proyek
nyata yang aplikatif.", "imageUrl2": "", "title2": "Belajar dengan Tech Stack
yang Digunakan di Dunia
Kerja", "content2": "Anda akan menggunakan teknologi yang
relevan dengan dunia kerja, seperti:\n
\n∙ Lingkungan development super cepat
berbasis Vite\n
\n∙ React Router untuk routing\n
\n∙ Swiper.js untuk komponen slider\n
\n∙ Firebase untuk autentikasi & hosting\n
\n∙ Manajemen state dengan useContext,
useReducer, dan Redux\n
\nStruktur pembelajarannya sudah disusun
mengikuti alur kerja profesional.", "imageUrl3": "", "title3": "Menguasai Berbagai
Keterampilan Frontend
dalam Satu Proyek
Komprehensif", "content3": "Dalam satu proyek, Anda akan mempelajari routing, integrasi API, autentikasi user,
manajemen state, desain UI/UX,
penanganan error, dark mode, dan proses
deployment. Semua keterampilan yang
dibutuhkan di dunia kerja, dirangkum dalam satu proyek nyata.", "imageUrl4": "", "title4": "", "content4": "" }, "uniqueId": "fc-block-3-2j4j9dkjz", "isChecked": false }, { "id": "fc-block-9-bmlxs5hvy", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": "02. Peserta yang Disarankan untuk Mengikuti Kursus Ini", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-4-66qb3nxdd", "isChecked": false }, { "id": "fc-block-22-gb8dhrwbv", "layout": { "id": "504", "description": "카드형 리스트", "icon": "\n", "params": [ { "name": "spacingTop", "type": "number", "description": "spacing-top" }, { "name": "spacingBottom", "type": "number", "description": "spacing-bottom" }, { "name": "cardWidth", "type": "number", "description": "card width" }, { "name": "titleTextSize", "type": "select", "description": "title text size", "options": [ 16, 20 ] }, { "name": "titleTextColor", "type": "text", "description": "title text color" }, { "name": "title", "type": "text", "description": "title" }, { "name": "mainTextSize", "type": "select", "description": "main text size", "options": [ 16, 20 ] }, { "name": "subTextSize", "type": "select", "description": "sub text size", "options": [ 14, 16 ] }, { "name": "mainText1", "type": "text", "description": "main text1" }, { "name": "subText1", "type": "text", "description": "sub text1" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "link1", "type": "text", "description": "link1" }, { "name": "mainText2", "type": "text", "description": "main text2" }, { "name": "subText2", "type": "text", "description": "sub text2" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "link2", "type": "text", "description": "link2" }, { "name": "mainText3", "type": "text", "description": "main text3" }, { "name": "subText3", "type": "text", "description": "sub text3" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "link3", "type": "text", "description": "link3" }, { "name": "mainText4", "type": "text", "description": "main text4" }, { "name": "subText4", "type": "text", "description": "sub text4" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "link4", "type": "text", "description": "link4" }, { "name": "mainText5", "type": "text", "description": "main text5" }, { "name": "subText5", "type": "text", "description": "sub text5" }, { "name": "useNewTab5", "type": "checkbox", "description": "" }, { "name": "link5", "type": "text", "description": "link5" }, { "name": "mainText6", "type": "text", "description": "main text6" }, { "name": "subText6", "type": "text", "description": "sub text6" }, { "name": "useNewTab6", "type": "checkbox", "description": "" }, { "name": "link6", "type": "text", "description": "link6" }, { "name": "mainText7", "type": "text", "description": "main text7" }, { "name": "subText7", "type": "text", "description": "sub text7" }, { "name": "useNewTab7", "type": "checkbox", "description": "" }, { "name": "link7", "type": "text", "description": "link7" } ], "values": { "spacingTop": 0, "spacingBottom": 0, "cardWidth": 0, "titleTextSize": 16, "titleTextColor": "#000000", "title": "", "mainTextSize": 16, "subTextSize": 14, "mainText1": "", "subText1": "", "useNewTab1": true, "link1": "", "mainText2": "", "subText2": "", "useNewTab2": true, "link2": "", "mainText3": "", "subText3": "", "useNewTab3": true, "link3": "", "mainText4": "", "subText4": "", "useNewTab4": true, "link4": "", "mainText5": "", "subText5": "", "useNewTab5": true, "link5": "", "mainText6": "", "subText6": "", "useNewTab6": true, "link6": "", "mainText7": "", "subText7": "", "useNewTab7": true, "link7": "" }, "template": "

rem; margin-bottom: <%= spacingBottom/10 || 0 %>rem;\">\n

rem;\">\n <% if(title) { %>\n

; font-size: <%= titleTextSize/10 %>rem;\"><%= title %>

\n <% } %>\n

\n <% if(link1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText1) { %>\n
rem;\"><%= mainText1 %>
\n <% } %>\n <% if(subText1) { %>\n rem;\"><%= subText1 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText1) { %>\n
rem;\"><%= mainText1 %>
\n <% } %>\n <% if(subText1) { %>\n rem;\"><%= subText1 %>\n <% } %>\n <% } %>\n
\n <% if(link2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText2) { %>\n
rem;\"><%= mainText2 %>
\n <% } %>\n <% if(subText2) { %>\n rem;\"><%= subText2 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText2) { %>\n
rem;\"><%= mainText2 %>
\n <% } %>\n <% if(subText2) { %>\n rem;\"><%= subText2 %>\n <% } %>\n <% } %>\n
\n <% if(link3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText3) { %>\n
rem;\"><%= mainText3 %>
\n <% } %>\n <% if(subText3) { %>\n rem;\"><%= subText3 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText3) { %>\n
rem;\"><%= mainText3 %>
\n <% } %>\n <% if(subText3) { %>\n rem;\"><%= subText3 %>\n <% } %>\n <% } %>\n
\n <% if(link4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText4) { %>\n
rem;\"><%= mainText4 %>
\n <% } %>\n <% if(subText4) { %>\n rem;\"><%= subText4 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText4) { %>\n
rem;\"><%= mainText4 %>
\n <% } %>\n <% if(subText4) { %>\n rem;\"><%= subText4 %>\n <% } %>\n <% } %>\n
\n <% if(link5) { %>\n \" <% if(useNewTab5) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText5) { %>\n
rem;\"><%= mainText5 %>
\n <% } %>\n <% if(subText5) { %>\n rem;\"><%= subText5 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText5) { %>\n
rem;\"><%= mainText5 %>
\n <% } %>\n <% if(subText5) { %>\n rem;\"><%= subText5 %>\n <% } %>\n <% } %>\n
\n <% if(link6) { %>\n \" <% if(useNewTab6) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText6) { %>\n
rem;\"><%= mainText6 %>
\n <% } %>\n <% if(subText6) { %>\n rem;\"><%= subText6 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText6) { %>\n
rem;\"><%= mainText6 %>
\n <% } %>\n <% if(subText6) { %>\n rem;\"><%= subText6 %>\n <% } %>\n <% } %>\n
\n <% if(link7) { %>\n \" <% if(useNewTab7) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText7) { %>\n
rem;\"><%= mainText7 %>
\n <% } %>\n <% if(subText7) { %>\n rem;\"><%= subText7 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText7) { %>\n
rem;\"><%= mainText7 %>
\n <% } %>\n <% if(subText7) { %>\n rem;\"><%= subText7 %>\n <% } %>\n <% } %>\n

\n" }, "values": { "spacingTop": 0, "spacingBottom": 0, "cardWidth": 0, "titleTextSize": 16, "titleTextColor": "#000000", "title": "", "mainTextSize": "16", "subTextSize": 14, "mainText1": "Untuk Kamu yang Sudah Belajar React Tapi Belum Pernah Membangun Proyek Nyata", "subText1": "Kalau kamu sudah bisa membuat komponen kecil tapi masih bingung membangun satu aplikasi secara utuh, kursus ini akan membimbingmu menyelesaikan aplikasi web lengkap dari awal hingga akhir, sekaligus memahami keseluruhan struktur frontend modern.", "useNewTab1": true, "link1": "", "mainText2": "Untuk yang Masih Bingung dengan Konsep Praktis seperti API, Autentikasi, dan State Management", "subText2": "Kalau kamu sering bingung dengan useEffect, async/await, dan pola manajemen state, di sini kamu akan belajar langsung melalui implementasi nyata—memahami konsep dan pola penulisan kode yang digunakan dalam dunia kerja.", "useNewTab2": true, "link2": "", "mainText3": "Untuk yang Ingin Memahami Perbedaan React Context dan Redux Lewat Praktik Langsung", "subText3": "Kursus ini membandingkan dua pendekatan manajemen state (React Context vs Redux) lewat contoh kasus yang sama, sehingga kamu bisa memahami kapan dan kenapa masing-masing digunakan secara lebih praktis dan jelas.", "useNewTab3": true, "link3": "", "mainText4": "", "subText4": "", "useNewTab4": true, "link4": "", "mainText5": "", "subText5": "", "useNewTab5": true, "link5": "", "mainText6": "", "subText6": "", "useNewTab6": true, "link6": "", "mainText7": "", "subText7": "", "useNewTab7": true, "link7": "" }, "uniqueId": "fc-block-5-cq68swjkl", "isChecked": false }, { "id": "fc-block-21-p0kov0aai", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": "03. Preview Kursus", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-6-oiix6qh2s", "isChecked": false }, { "id": "fc-block-11-bhgle0ejz", "layout": { "id": "302", "description": "1~3단 동영상과 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "fontColor", "type": "text", "description": "font color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "videoPlatformType1", "type": "select", "description": "videoPlatformType1", "options": [ "Youtube", "Vimeo" ] }, { "name": "video1", "type": "video", "description": "video1" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType2", "type": "select", "description": "videoPlatformType2", "options": [ "Youtube", "Vimeo" ] }, { "name": "video2", "type": "video", "description": "video2" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType3", "type": "select", "description": "videoPlatformType3", "options": [ "Youtube", "Vimeo" ] }, { "name": "video3", "type": "video", "description": "video3" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" } ], "values": { "backgroundColor": "", "fontColor": "#000000", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "videoPlatformType1": "Youtube", "video1": "", "title1": "", "content1": "", "videoPlatformType2": "Youtube", "video2": "", "title2": "", "content2": "", "videoPlatformType3": "Youtube", "video3": "", "title3": "", "content3": "" }, "template": "

background-color: <%=backgroundColor%><% } %>\">\n

\">\n

\n <% if (video1 || title1 || content1) { %>\n

\n <% if (video1) { %>\n

\n <% if (videoPlatformType1 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title1) { %>\n

\"><%= title1 %>

\n <% } %>\n <% if(content1) { %>\n

\"><%= content1 %>

\n <% } %>\n

\n <% } %>\n <% if (video2 || title2 || content2) { %>\n

\n <% if (video2) { %>\n

\n <% if (videoPlatformType2 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title2) { %>\n

\"><%= title2 %>

\n <% } %>\n <% if(content2) { %>\n

\"><%= content2 %>

\n <% } %>\n

\n <% } %>\n <% if (video3 || title3 || content3) { %>\n

\n <% if (video3) { %>\n

\n <% if (videoPlatformType3 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title3) { %>\n

\"><%= title3 %>

\n <% } %>\n <% if(content3) { %>\n

\"><%= content3 %>

\n <% } %>\n

\n" }, "values": { "backgroundColor": "", "fontColor": "#000000", "titleSize": "fc-h6-text", "contentSize": "fc-h6-text", "videoPlatformType1": "Youtube", "video1": "https://cdn.day1company.io/prod/uploads/202504/223302-17/ch1-1.-pendahuluan-dan-konfigurasi-environment.mp4", "title1": "Ch1-1. Pendahuluan dan konfigurasi environment", "content1": "", "videoPlatformType2": "Youtube", "video2": "https://cdn.day1company.io/prod/uploads/202504/133901-17/ch9-2.-mengapa-responsive-design-penting-1-.mp4", "title2": "Ch1-10. Membuat halaman Content Detail Page", "content2": "", "videoPlatformType3": "Youtube", "video3": "", "title3": "", "content3": "" }, "uniqueId": "fc-block-7-y917kdj82", "isChecked": false }, { "id": "fc-block-10-3h5eltnfg", "layout": { "id": "302", "description": "1~3단 동영상과 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "fontColor", "type": "text", "description": "font color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "videoPlatformType1", "type": "select", "description": "videoPlatformType1", "options": [ "Youtube", "Vimeo" ] }, { "name": "video1", "type": "video", "description": "video1" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType2", "type": "select", "description": "videoPlatformType2", "options": [ "Youtube", "Vimeo" ] }, { "name": "video2", "type": "video", "description": "video2" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType3", "type": "select", "description": "videoPlatformType3", "options": [ "Youtube", "Vimeo" ] }, { "name": "video3", "type": "video", "description": "video3" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" } ], "values": { "backgroundColor": "", "fontColor": "#000000", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "videoPlatformType1": "Youtube", "video1": "", "title1": "", "content1": "", "videoPlatformType2": "Youtube", "video2": "", "title2": "", "content2": "", "videoPlatformType3": "Youtube", "video3": "", "title3": "", "content3": "" }, "template": "

background-color: <%=backgroundColor%><% } %>\">\n

\">\n

\n <% if (video1 || title1 || content1) { %>\n

\n <% if (video1) { %>\n

\n <% if (videoPlatformType1 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title1) { %>\n

\"><%= title1 %>

\n <% } %>\n <% if(content1) { %>\n

\"><%= content1 %>

\n <% } %>\n

\n <% } %>\n <% if (video2 || title2 || content2) { %>\n

\n <% if (video2) { %>\n

\n <% if (videoPlatformType2 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title2) { %>\n

\"><%= title2 %>

\n <% } %>\n <% if(content2) { %>\n

\"><%= content2 %>

\n <% } %>\n

\n <% } %>\n <% if (video3 || title3 || content3) { %>\n

\n <% if (video3) { %>\n

\n <% if (videoPlatformType3 === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n

\n <% } %>\n <% if (title3) { %>\n

\"><%= title3 %>

\n <% } %>\n <% if(content3) { %>\n

\"><%= content3 %>

\n <% } %>\n

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": "04. Profil Pengajar", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-9-1qzwce2wm", "isChecked": false }, { "id": "fc-block-17-icq4kagex", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "\n Fachran Dhani Achmad\n\n\n\n#React.Js #Next.js #Node.js #GraphQL #CI/CD\n" }, "uniqueId": "fc-block-1-s7puifhl2", "isChecked": false }, { "id": "fc-block-18-vfnb4ahti", "layout": { "id": "802", "description": "강사소개 + 링크버튼", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "imageUrl", "type": "image", "description": "60 x 60" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "url", "description": "link url" }, { "name": "linkLabel", "type": "text", "description": "link label" } ], "values": { "paddingTop": 0, "paddingBottom": 0, "backgroundColor": "", "imageUrl": "", "titleSize": "fc-h5-text", "title1": "", "title2": "강사님 한마디", "contentSize": "fc-content-text", "content1": "", "content2": "", "useNewTab": true, "link": "", "linkLabel": "강사님 인터뷰 보기" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n <% if (imageUrl || title1 || title2 || content1 || content2) { %>\n

\n <% if (imageUrl) { %>\n

\" loading=\"lazy\">

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\"><%= title2 %>

\"><%= content2 %>

\n <% if (link) { %>\n target=\"_blank\" rel=\"noopener noreferrer\" <% } %> href=\"<%=link%>\"><%= linkLabel %>\n <% } %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "20", "backgroundColor": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202403/141937-472/point-2-3.webp", "titleSize": "fc-h5-text", "title1": "Pengalaman kerja", "title2": "Pengalaman lainnya", "contentSize": "fc-content-text", "content1": "\nSaat Ini :
\nSoftware Engineer (Web) di
Perusahaan “T”, E-commerce
ternama\n
\n\nSebelumnya :
\nFrontend Developer & UX/UI
Designer di Kata.ai, Ralali.com,
impruvmi\n\n", "content2": "\n∙ Mentor Frontend Development untuk Program GoTo “Generasi Gigih 2.0”\n", "useNewTab": true, "link": "", "linkLabel": "강사님 인터뷰 보기" }, "uniqueId": "fc-block-11-7pxba218f", "isChecked": false }, { "id": "fc-block-18-gz57vpbgm", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "\n“Frontend Developer seharusnya peduli lebih dari sekedar membuat interface.”\n\n
\nDi dunia Frontend yang terus berkembang, interface yang kompleks dan animasi canggih menjadi hal yang umum serta membawa tantangan
seperti halnya performance. Oleh karena itu, Next.js baru-baru ini mendapat sorotan di dunia Frontend karena kinerjanya yang cepat dengan efek
canggih. Namun kursus Frontend lain cenderung fokus hanya pada frameworks mainstream seperti React.js, lalu berpindah ke Next.js. Kursus ini
dibangun secara unik dengan pengalaman proyek React.js dan Next.js yang berkualitas, mempersiapkan kamu bukan hanya untuk hari ini tapi juga
jauh ke depan. Selain itu, kami melampaui desain interface dan menyertakan server web development yang mudah, unit testing, dan continuous
deployment, yang ngasih kamu keahlian menyeluruh agar membuat kamu lebih dilirik ketika mencari pekerjaan." }, "uniqueId": "fc-block-2-aezhbfvqh", "isChecked": false }, { "id": "fc-block-15-geho0ok25", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": " 05. Hal yang Akan Anda Kuasai Lewat Kursus Ini", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-3-2a8yjfuym", "isChecked": false }, { "id": "fc-block-8-2bhndoyum", "layout": { "id": "504", "description": "카드형 리스트", "icon": "\n", "params": [ { "name": "spacingTop", "type": "number", "description": "spacing-top" }, { "name": "spacingBottom", "type": "number", "description": "spacing-bottom" }, { "name": "cardWidth", "type": "number", "description": "card width" }, { "name": "titleTextSize", "type": "select", "description": "title text size", "options": [ 16, 20 ] }, { "name": "titleTextColor", "type": "text", "description": "title text color" }, { "name": "title", "type": "text", "description": "title" }, { "name": "mainTextSize", "type": "select", "description": "main text size", "options": [ 16, 20 ] }, { "name": "subTextSize", "type": "select", "description": "sub text size", "options": [ 14, 16 ] }, { "name": "mainText1", "type": "text", "description": "main text1" }, { "name": "subText1", "type": "text", "description": "sub text1" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "link1", "type": "text", "description": "link1" }, { "name": "mainText2", "type": "text", "description": "main text2" }, { "name": "subText2", "type": "text", "description": "sub text2" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "link2", "type": "text", "description": "link2" }, { "name": "mainText3", "type": "text", "description": "main text3" }, { "name": "subText3", "type": "text", "description": "sub text3" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "link3", "type": "text", "description": "link3" }, { "name": "mainText4", "type": "text", "description": "main text4" }, { "name": "subText4", "type": "text", "description": "sub text4" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "link4", "type": "text", "description": "link4" }, { "name": "mainText5", "type": "text", "description": "main text5" }, { "name": "subText5", "type": "text", "description": "sub text5" }, { "name": "useNewTab5", "type": "checkbox", "description": "" }, { "name": "link5", "type": "text", "description": "link5" }, { "name": "mainText6", "type": "text", "description": "main text6" }, { "name": "subText6", "type": "text", "description": "sub text6" }, { "name": "useNewTab6", "type": "checkbox", "description": "" }, { "name": "link6", "type": "text", "description": "link6" }, { "name": "mainText7", "type": "text", "description": "main text7" }, { "name": "subText7", "type": "text", "description": "sub text7" }, { "name": "useNewTab7", "type": "checkbox", "description": "" }, { "name": "link7", "type": "text", "description": "link7" } ], "values": { "spacingTop": 0, "spacingBottom": 0, "cardWidth": 0, "titleTextSize": 16, "titleTextColor": "#000000", "title": "", "mainTextSize": 16, "subTextSize": 14, "mainText1": "", "subText1": "", "useNewTab1": true, "link1": "", "mainText2": "", "subText2": "", "useNewTab2": true, "link2": "", "mainText3": "", "subText3": "", "useNewTab3": true, "link3": "", "mainText4": "", "subText4": "", "useNewTab4": true, "link4": "", "mainText5": "", "subText5": "", "useNewTab5": true, "link5": "", "mainText6": "", "subText6": "", "useNewTab6": true, "link6": "", "mainText7": "", "subText7": "", "useNewTab7": true, "link7": "" }, "template": "

rem; margin-bottom: <%= spacingBottom/10 || 0 %>rem;\">\n

rem;\">\n <% if(title) { %>\n

; font-size: <%= titleTextSize/10 %>rem;\"><%= title %>

\n <% } %>\n

\n <% if(link1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText1) { %>\n
rem;\"><%= mainText1 %>
\n <% } %>\n <% if(subText1) { %>\n rem;\"><%= subText1 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText1) { %>\n
rem;\"><%= mainText1 %>
\n <% } %>\n <% if(subText1) { %>\n rem;\"><%= subText1 %>\n <% } %>\n <% } %>\n
\n <% if(link2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText2) { %>\n
rem;\"><%= mainText2 %>
\n <% } %>\n <% if(subText2) { %>\n rem;\"><%= subText2 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText2) { %>\n
rem;\"><%= mainText2 %>
\n <% } %>\n <% if(subText2) { %>\n rem;\"><%= subText2 %>\n <% } %>\n <% } %>\n
\n <% if(link3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText3) { %>\n
rem;\"><%= mainText3 %>
\n <% } %>\n <% if(subText3) { %>\n rem;\"><%= subText3 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText3) { %>\n
rem;\"><%= mainText3 %>
\n <% } %>\n <% if(subText3) { %>\n rem;\"><%= subText3 %>\n <% } %>\n <% } %>\n
\n <% if(link4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText4) { %>\n
rem;\"><%= mainText4 %>
\n <% } %>\n <% if(subText4) { %>\n rem;\"><%= subText4 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText4) { %>\n
rem;\"><%= mainText4 %>
\n <% } %>\n <% if(subText4) { %>\n rem;\"><%= subText4 %>\n <% } %>\n <% } %>\n
\n <% if(link5) { %>\n \" <% if(useNewTab5) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText5) { %>\n
rem;\"><%= mainText5 %>
\n <% } %>\n <% if(subText5) { %>\n rem;\"><%= subText5 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText5) { %>\n
rem;\"><%= mainText5 %>
\n <% } %>\n <% if(subText5) { %>\n rem;\"><%= subText5 %>\n <% } %>\n <% } %>\n
\n <% if(link6) { %>\n \" <% if(useNewTab6) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText6) { %>\n
rem;\"><%= mainText6 %>
\n <% } %>\n <% if(subText6) { %>\n rem;\"><%= subText6 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText6) { %>\n
rem;\"><%= mainText6 %>
\n <% } %>\n <% if(subText6) { %>\n rem;\"><%= subText6 %>\n <% } %>\n <% } %>\n
\n <% if(link7) { %>\n \" <% if(useNewTab7) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n <% if(mainText7) { %>\n
rem;\"><%= mainText7 %>
\n <% } %>\n <% if(subText7) { %>\n rem;\"><%= subText7 %>\n <% } %>\n \n <% } else { %>\n <% if(mainText7) { %>\n
rem;\"><%= mainText7 %>
\n <% } %>\n <% if(subText7) { %>\n rem;\"><%= subText7 %>\n <% } %>\n <% } %>\n

\n" }, "values": { "spacingTop": 0, "spacingBottom": 0, "cardWidth": 0, "titleTextSize": 16, "titleTextColor": "#000000", "title": "", "mainTextSize": "16", "subTextSize": 14, "mainText1": "🎬 Membangun Aplikasi SPA Layanan Film & TV dengan TMDB API", "subText1": "∙ Membangun halaman utama lengkap dengan video banner, kartu konten, dan bagian slide yang bisa digeser;\n
\n∙ Menyusun halaman khusus untuk film, TV series, dan fitur pencarian;\n
\n∙ Menampilkan detail konten secara dinamis dengan data dari TMDB API.\n", "useNewTab1": true, "link1": "", "mainText2": "📌 Pengelolaan Halaman dan Navigasi dengan React Router", "subText2": "∙ Mengatur perpindahan antar halaman dengan routing yang efisien dan rapi\n
\n∙ Menampilkan konten berdasarkan URL yang berubah lewat fitur routing dinamis\n", "useNewTab2": true, "link2": "", "mainText3": "🔐 Autentikasi Pengguna dengan Firebase Authentication", "subText3": "∙ Menerapkan fitur sign up, login, dan logout menggunakan Firebase;\n
\n∙ Menyesuaikan tampilan aplikasi berdasarkan status autentikasi pengguna;\n", "useNewTab3": true, "link3": "", "mainText4": "☁️ Deployment Langsung ke Web dengan Firebase Hosting", "subText4": "∙ Menyelesaikan pembangunan aplikasi dan langsung mendistribusikannya secara online melalui Firebase Hosting", "useNewTab4": true, "link4": "", "mainText5": "🌐 Manajemen State Global dengan React Context API + useReducer", "subText5": "∙ Mengatur state global dan alur pengiriman data form menggunakan Context dan useReducer\n
\n∙ Membagikan status dan hasil input antar komponen dengan cara yang terstruktur\n", "useNewTab5": true, "link5": "", "mainText6": "🔄Perbandingan Praktis React Context vs Redux", "subText6": "∙ Membangun store Redux, menyusun reducer, dan mengatur alur dispatch serta select\n
\n∙ Memahami perbedaan utama antara Redux dan Context lalu menentukan penggunaannya sesuai kebutuhan proyek\n", "useNewTab6": true, "link6": "", "mainText7": "", "subText7": "", "useNewTab7": true, "link7": "" }, "uniqueId": "fc-block-13-1d061smaj", "isChecked": false }, { "id": "fc-block-2-7jccugo14", "layout": { "id": "002", "description": "컴포넌트 라벨", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "

\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\n" }, "values": { "backgroundColor": "white", "paddingTop": "60", "paddingBottom": 10, "labelText": " 06. Road Map", "layoutType": "fc-label-type1", "labelColor": "" }, "uniqueId": "fc-block-1-d9r7fbfnb", "isChecked": false }, { "id": "fc-block-23-8nxux4qes", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#000000", "text": "Anda bisa mulai dengan paket [All-in-One], untuk akses penuh,
atau pilih jalur [StackUp] jika ingin belajar secara bertahap." }, "uniqueId": "fc-block-4-sadpb6qot", "isChecked": false }, { "id": "fc-block-24-sr4go9qqy", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "

\">\n

<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n

\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\">\n

\"><%= title || '' %>

\"><%= content || '' %>

\n" }, "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "https://cdn.day1company.io/prod/uploads/202504/193004-17/fe-all.png", "imageWidth": 480, "title": "\nAll-in-One

Frontend Web Development : From Zero To Hero\n", "content": "
\nDengan harga paling terjangkau, kamu bisa mengakses semua kursus StackUp hanya dalam satu paket saja.\n\n
\n
\n
\n\n\n▶ Lihat Selengkapnya\n\n" }, "uniqueId": "fc-block-5-je2zo5qtr", "isChecked": false }, { "id": "fc-block-29-d6p3nketk", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "30", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-6-7p20vg2im", "isChecked": false }, { "id": "fc-block-28-7emcc3a4i", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "

\">\n

<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n

\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\">\n

\"><%= title || '' %>

\"><%= content || '' %>

\n" }, "values": { "reverseColumn": true, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--content1", "imageUrl": "https://cdn.day1company.io/prod/uploads/202504/223922-17/adv.jpg", "imageWidth": 480, "title": "\nStackUp

\n\nBelajar dasar HTML, CSS, JS\nmelalui proyek clone halaman utama Apple\n\n", "content": "- Ini adalah kursus tingkat pemula yang mengajarkan dasar-dasar HTML, CSS, dan JavaScript dengan membangun ulang tampilan situs web Apple.\n

\n- Kursus ini merupakan program master tingkat pemula untuk web frontend, yang dirancang dengan sangat solid — mulai dari dasar-dasar pengembangan web hingga proyek praktik langsung.\n
\n
\n\n\n▶ Lihat Selengkapnya\n\n" }, "uniqueId": "fc-block-7-9zclo0pds", "isChecked": false }, { "id": "fc-block-26-pujwx59f1", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "30", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-8-lomamx0ph", "isChecked": false }, { "id": "fc-block-27-j4ts8aiub", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "

\">\n

<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n

\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\">\n

\"><%= title || '' %>

\"><%= content || '' %>

\n" }, "values": { "reverseColumn": true, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--content1", "imageUrl": "https://cdn.day1company.io/prod/uploads/202504/194756-17/jsts.jpg", "imageWidth": 480, "title": "\nStackUp

\n\nKuasai Javascript dan Typescript: Bangun dan Deploy Website film\n\n", "content": "- Ini adalah kursus level menengah di mana kamu akan belajar JavaScript dan TypeScript secara mendalam dengan membangun halaman daftar film (movie list website).\n

\n- Ini adalah kursus praktik frontend yang komprehensif, mencakup segala hal mulai dari dasar JavaScript, TypeScript, pemrograman asinkron, API browser, hingga pengembangan dan deployment frontend modern.\n
\n
\n\n\n▶ Lihat Selengkapnya\n\n" }, "uniqueId": "fc-block-9-dgg61aagz", "isChecked": false }, { "id": "fc-block-25-zo17x27vd", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "30", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-10-qx89g2glr", "isChecked": false }, { "id": "fc-block-20-4rufacxbw", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "

\">\n

<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n

\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n

\">\n

\"><%= title || '' %>

\"><%= content || '' %>

\n" }, "values": { "reverseColumn": true, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--content1", "imageUrl": "https://cdn.day1company.io/prod/uploads/202504/223938-17/123.jpg", "imageWidth": 480, "title": "\nStackUp

\n\nClone Disney+\nWebsite Frontend\nuntuk menguasai React\n\n", "content": "- Ini adalah kursus level menengah di mana kamu akan mempelajari cara menggunakan React dan Redux dalam konteks nyata dengan membangun ulang situs web Disney+.\n

\n- Ini adalah kursus proyek praktik frontend modern, di mana kamu akan membangun langsung aplikasi web mirip layanan streaming menggunakan Vite, React, Firebase, Redux, dan teknologi terkini lainnya.\n
\n
\n\n\n\n▶ Lihat Selengkapnya\n\n" }, "uniqueId": "fc-block-11-4r0eq0yet", "isChecked": false }, { "id": "fc-block-1-rocnps28w", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "100", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-1-ab3s4pmaf", "isChecked": false }, { "id": "fc-block-1-c0m0rx80p", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "80", "paddingBottom": 10, "backgroundColor": "#F2F2F2", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#000000", "text": "Kurikulum Lengkap" }, "uniqueId": "fc-block-1-vef8iqd6a", "isChecked": false }, { "id": "fc-block-2-io0p974dw", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "30", "backgroundColor": "#F2F2F2", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "Kamu bisa mengikuti semua kursus di bawah dengan paket All-in-One.
Bayar sekali sekarang dan kamu bisa simpan semua video kursus frontend ini seumur hidup!" }, "uniqueId": "fc-block-2-iovy3avjc", "isChecked": false }, { "id": "fc-block-8-xh4c19g5i", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "20", "backgroundColor": "#F2F2F2", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#4d4d4d", "text": "Bagian 8. Lakukan Proyek untuk memulai React \n▸ React 18, Node.js, CSS 3, Virtual DOM\n" }, "uniqueId": "fc-block-3-r0uiylgyz", "isChecked": false }, { "id": "fc-block-9-ywhhs8ijo", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 1. Apa itu React dan mengapa mempelajari
React?", "content1": "1. Mengulik struktur dasar React yang diinstal dengan create-react-app
\n2. Mencoba menjalankan React App menggunakan npm run start
\n3. Apa itu SPA (Single Page Applicationl)?
\n4. Pengenalan aplikasi TicTacToe dan pengenalan JSX
\n5. Mulai membuat UI untuk aplikasi TicTacToe
\n6. Memecah UI yang ada menjadi komponen-komponen individual
\n7. Apa itu ‘State’dan untuk apa?
\n8. Membuat ‘State’ pertama dan pengenalan ke hook useState()
\n9.Apa itu ‘Props’
\n10. Bagaimana cara sebuah ‘Component’ berkomunikasi dengan ‘Component’ lainnya?
\n11. Mengimplementasikan ‘event handler’ ketika component Square diklik
\n12. Menentukan pemenang
\n13. Menambahkan tombol “reset”
\n14. Apa itu konsep “immutability” dan mengapa penting di React.js?
", "imageUrl1": "", "title2": "Bab 2. Pelajari React dengan membuat aplikasi
TicTacToe", "content2": "1. Instalasi dan konfigurasi TypeScript
\n2. Konversi Store menjadi TS
\n3. Type dari Movie
\n4. Type dari State dan Props Setiap Component
\n5. Migrasi component menjadi TS
\n6. Type dari API movie
\n7. Penyesuaian deployment untuk TS
", "imageUrl2": "" }, "uniqueId": "fc-block-4-3ki2phyoj", "isChecked": false }, { "id": "fc-block-10-41wla63cg", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "20", "backgroundColor": "#F2F2F2" }, "uniqueId": "fc-block-5-zrywhpvbn", "isChecked": false }, { "id": "fc-block-6-6kz7k76ib", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 3. Mengubah aplikasi TicTacToe menjadi
komponen fungsional", "content1": "1. Apa itu ReactHooks?
\n2. Ubah aplikasi TicTacToe menjadi komponen fungsional menggunakan React Hooks
\n3. Menambahkan ‘code’ dan ‘logic’ untuk permainan
\n4. Menentukan pemenangnya
\n", "imageUrl1": "", "title2": "Bab 4. Tambahkan perjalanan waktu ke aplikasi
TicTacToe", "content2": "1. Menyimpan daftar langkah yang dibuat pemain
\n2. Apa itu ‘spread iperator’
\n3. Menampilkan langkah sebelumnya(menggunakan ‘map’)
\n4. Memahami prop key pada React.js
\n5. Menulis fungsi ‘jump to’
\n6. Mengubah ‘style’ aplikasi TicTacToe
\n7. Deploy menggunakan github
\n\n", "imageUrl2": "" }, "uniqueId": "fc-block-6-r7ws6ym1l", "isChecked": false }, { "id": "fc-block-12-tswwf1ruw", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "20", "backgroundColor": "#F2F2F2" }, "uniqueId": "fc-block-7-fvlusnqja", "isChecked": false }, { "id": "fc-block-13-xe83me2s9", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 5. Meningkatkan kinerja aplikasi React", "content1": "1. Apa itu React Dev Tools dan untuk apa?
\n2. Apa yang ada di dalam React Dev Tools dan bagaimana menggunakannya
\n3. Membuat aplikasi untuk mengukur kinerja Profiler
\n4. Apa itu ‘Code Splitting’
\n5. Ukur kinerja dengan React Profiler
\n6. Optimalisasi kinerja menggunakan React.memo
\n7. Pengoptimalan aplikasi menggunakan useCallback() dan useMemo()
\n", "imageUrl1": "", "title2": "Bab 6. Unit Testing", "content2": "1. Apa itu Unit Testing dan mengapa diperlukan?
\n2. Menulis Unit Test pertamamu menggunakan
3. React Testing Library
\n4. Apa itu ‘mocking’ dan cara melakukannya
\n5. Menjalankan Tes Unit Anda
\n\n\n", "imageUrl2": "" }, "uniqueId": "fc-block-8-a1sxg893d", "isChecked": false }, { "id": "fc-block-16-tzujtdohs", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "20", "backgroundColor": "#F2F2F2", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#4d4d4d", "text": "Bagian 9. Gunakan React untuk membuat service\n▸ React 18, React Router DOM v6, React Router DOM APIs, Firebase v9\n" }, "uniqueId": "fc-block-9-tbhr0wuyv", "isChecked": false }, { "id": "fc-block-15-c1eppb04v", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 1. Mulai membuat aplikasi DisneyPlus", "content1": "1. Melihat Aplikasi Disney Plus yang akan kita buat nanti
\n2. Instal React dengan create react app
\n3. Buat Kunci API TheMovieDB
\n4. Memulai membuat struktur aplikasi DisneyPlus
\n5. Menggunakan ‘fetch’ API untuk memanggil ke API TheMovieDB
\n6. Pengenalan ke css-in-js melalui ‘emotion.js’
\n7. Membuat dan meletakan komponen Navigation
\n8. Membuat komponen Movie Card
\n9. Membuat komponen Search
\n10. Membuat komponen Video Banner
\n11. Membuat komponen Carousel
\n12. Membuat komponen Episode Item
\n13. Membuat komponen Category Title
\n14. Membuat Banner di dalam halaman Home
\n15. Membuat daftar film di dalam halaman Home
", "imageUrl1": "", "title2": "Bab 2. Ubah contoh daftar film dengan TS", "content2": "1. Melihat Aplikasi Disney Plus yang akan kita buat nanti
\n2. Instal React dengan create react app
\n3. Buat Kunci API TheMovieDB
\n4. Memulai membuat struktur aplikasi DisneyPlus
\n5. Menggunakan ‘fetch’ API untuk memanggil ke API
TheMovieDB
\n6. Pengenalan ke css-in-js melalui ‘emotion.js’
\n7. Membuat dan meletakan komponen Navigation
\n8. Membuat komponen Movie Card
\n9. Membuat komponen Search
\n10. Membuat komponen Video Banner
\n11. Membuat komponen Carousel
\n12. Membuat komponen Episode Item
\n13. Membuat komponen Category Title
\n14. Membuat Banner di dalam halaman Home
\n15. Membuat daftar film di dalam halaman Home
\n", "imageUrl2": "" }, "uniqueId": "fc-block-10-cvc6muomr", "isChecked": false }, { "id": "fc-block-14-cpb0qhy0v", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "20", "backgroundColor": "#F2F2F2" }, "uniqueId": "fc-block-11-q95t09ti9", "isChecked": false }, { "id": "fc-block-17-eabhz2vd1", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 3. Menerapkan pemrosesan autentikasi
menggunakan Firebase", "content1": "1. Apa itu Firebase?
\n2. Hubungkan aplikasi Anda dengan Firebase
\n3. Buat halaman masuk
\n4. Menulis CSS untuk halaman login
\n5. Login Google menggunakan Firebase
\n6. Pemeriksaan autentikasi menggunakan Firebase
\n7. Logout menggunakan Firebase
\n8. Menulis CSS untuk tombol logout
\n9. Tambahkan data pengguna ke Local Storage
\n10. Deploy static app menggunakan Firebase
", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "uniqueId": "fc-block-12-e68w5au68", "isChecked": false }, { "id": "fc-block-3-fqrcli7ry", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "20", "backgroundColor": "#F2F2F2", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#4d4d4d", "text": "Bagian 10. 2 State Management yang paling populer\n▸ React 18, Redux 8\n" }, "uniqueId": "fc-block-13-9nz7yy4o6", "isChecked": false }, { "id": "fc-block-11-9oddy7hhb", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "

\">\n

\n <% if (title1 || content1 || imageUrl1) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title1 %>\n \n \n

;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n

; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n

\">\n <%= title2 %>\n \n \n

; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n

\n \n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#F2F2F2", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "Bab 1. Membuat aplikasi sederhana menggunakan
React Context", "content1": "1. Apa yang dimaksud dengan pengelolaan negara?
\n2. Apa itu React Context?
\n3. Menjelajahi Context API
\n4. Menggunakan hook useContext
\n5. Perkenalan ke aplikasi yang akan dibuat menggunakan
Context
\n6. Memulai proyek dan membuat struktur keseluruhan
\n7. Menerapkan UI halaman form
\n8. Membuat halaman pratinjau formulir akhir
\n9. Implementasi Provider Component
\n10. Memperbarui data Context saat mengedit sebuah input
\n11. Membaca data dari Context
\n12. Menggunakan data dari konteks untuk menunjukkan total input formulir yang telah diisi
\n13. Mengirim dan menangani data formulir
\n14. Menerapkan halaman pengisian formulir
", "imageUrl1": "", "title2": "Bab 2. Membuat aplikasi sederhana menggunakan
Redux", "content2": "1. Apa itu Redux?
\n2. Membuat aplikasi counter menggunakan Redux tanpa middleware
\n3. combineReducers
\n4. Redux Provider
\n5. Pengenalan ke useSelector & useDispatch
\n6. Redux Middleware
\n7. Redux Thunk
\n8. Redux Toolkit
", "imageUrl2": "" }, "uniqueId": "fc-block-14-n4wyeee7x", "isChecked": false }, { "id": "fc-block-5-9yqdhdauu", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "50", "backgroundColor": "#F2F2F2" }, "uniqueId": "fc-block-15-arvpb7356", "isChecked": false }, { "id": "fc-block-18-qopa3gcds", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#1B52B7", "useImageLeft": false, "imageUrl": "https://cdn.day1company.io/prod/uploads/202410/165558-1395/웹---상세페이지-배너.webp", "mobileImageUrl": "https://cdn.day1company.io/prod/uploads/202410/165615-1395/모바일---상세페이지-배너.webp", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "https://forms.gle/c5rroDMAPEujmH9f8" }, "uniqueId": "fc-block-16-vwi97p69g", "isChecked": false, "hidden": true }, { "id": "fc-block-19-v117eivwi", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "60", "paddingBottom": "30", "backgroundColor": "#000000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#ffffff", "text": "\nKursus tingkat kepuasan \n\n\n *dari 10\n
\nIni adalah ulasan asli dari para peserta kursus.\n" }, "uniqueId": "fc-block-17-7psr6oh7d", "isChecked": false }, { "id": "fc-block-20-uu0g2yczw", "layout": { "id": "212", "description": "자동재생 캐러셀 (인피니티루프, 셔플)", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "autoPlay", "type": "checkbox", "description": "default - on", "options": [ "3", "2" ] }, { "name": "shuffleOption", "type": "checkbox", "description": "컨텐츠의 순서를 셔플해서 보여주는 기능입니다.", "options": [ "3", "2" ] }, { "name": "autoPlayDelay", "type": "number", "description": "숫자를 입력하여 자동 재생되는 타이밍을 조절할 수 있습니다.
단위는 ms(밀리세컨드)로 조절됩니다.
1초 = 1000ms" }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) content1(14px)", "options": [ "text--h5", "text--h6", "text--content1" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) content1(14px)", "options": [ "text--h5", "text--h6", "text--content1" ] }, { "name": "cards", "type": "list", "description": "카드는 반드시 규칙을 맞춰서 작성해주세요.
- 2단 설정 : 3개 이상 작성할 것
- 3단 설정 : 4개 이상 작성할 것", "maxLength": 20, "params": [ { "name": "link", "type": "text", "description": "클릭시 열릴 페이지의 URL을 입력하세요." }, { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "autoPlay": true, "shuffleOption": false, "autoPlayDelay": 2500, "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "text--h5", "text2Size": "text--h6", "cards": [ { "imageUrl": "", "text1": "", "text2": "", "link": "" }, { "imageUrl": "", "text1": "", "text2": "", "link": "" }, { "imageUrl": "", "text1": "", "text2": "", "link": "" } ] }, "template": "rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>;\n \"\n>\n

\">\n

\n \"\n data-column-count=\"<%= columnCount %>\"\n data-shuffle=\"<%= shuffleOption %>\"\n data-autoplay=\"<%= autoPlay %>\"\n data-delay=\"<%= autoPlayDelay %>\"\n >\n <% cards.forEach(({ imageUrl, text1, text2, link }) => { %>\n

\n <% if (link) { %> \"> <% } %> \n

\">\n <% if (imageUrl) { %>\n

\" alt=\"\" loading=\"lazy\" />\n <% } %>\n

\n <% if (text1) { %>\n

\"><%= text1 %>

\n <% } %> <% if (text2) { %>\n

\"><%= text2 %>

\n <% } %>\n <% if (link) { %> <% } %> \n

\n <% }); %>\n \n

\n\n" }, "values": { "paddingTop": "0", "paddingBottom": "100", "columnCount": "2", "autoPlay": true, "shuffleOption": false, "autoPlayDelay": "2000", "backgroundColor": "#000000", "colorTheme": "theme-dark-mono", "text1Size": "text--h5", "text2Size": "text--h6", "cards": [ { "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153024-199/review-1.webp", "text1": "", "text2": "", "link": "" }, { "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153028-199/review-2.webp", "text1": "", "text2": "", "link": "" }, { "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153031-199/review-3.webp", "text1": "", "text2": "", "link": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153036-199/review-4.webp", "text1": "", "text2": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153047-199/review-5.webp", "text1": "", "text2": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153052-199/review-6.webp", "text1": "", "text2": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153057-199/review-7.webp", "text1": "", "text2": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153102-199/review-8.webp", "text1": "", "text2": "" }, { "link": "", "imageUrl": "https://cdn.day1company.io/prod/uploads/202412/153107-199/review-9.webp", "text1": "", "text2": "" } ] }, "uniqueId": "fc-block-18-wqcqvpvdd", "isChecked": false }, { "id": "fc-block-21-kp20dvodn", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#191919", "useImageLeft": false, "imageUrl": "https://cdn.day1company.io/prod/uploads/202403/125606-472/introduction---trust.webp", "mobileImageUrl": "https://cdn.day1company.io/prod/uploads/202403/131455-472/introduction---trust-mob-1.webp", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-19-8ydxf29c2", "isChecked": false }, { "id": "fc-block-23-jwuhpwphq", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#000000" }, "uniqueId": "fc-block-20-2jrq3hwtx", "isChecked": false }, { "id": "fc-block-24-17uu3drb9", "layout": { "id": "502", "description": "1단 아코디언 리스트 (FAQ 전용)", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapseAll", "type": "checkbox", "description": "" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "title1", "type": "text", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content1 text" }, { "name": "title2", "type": "text", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content2 text" }, { "name": "title3", "type": "text", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content3 text" }, { "name": "title4", "type": "text", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content4 text" }, { "name": "title5", "type": "text", "description": "title5 text" }, { "name": "content5", "type": "textarea", "description": "content5 text" }, { "name": "title6", "type": "text", "description": "title6 text" }, { "name": "content6", "type": "textarea", "description": "content6 text" }, { "name": "title7", "type": "text", "description": "title7 text" }, { "name": "content7", "type": "textarea", "description": "content7 text" }, { "name": "title8", "type": "text", "description": "title8 text" }, { "name": "content8", "type": "textarea", "description": "content8 text" }, { "name": "title9", "type": "text", "description": "title9 text" }, { "name": "content9", "type": "textarea", "description": "content9 text" }, { "name": "title10", "type": "text", "description": "title10 text" }, { "name": "content10", "type": "textarea", "description": "content10 text" }, { "name": "title11", "type": "text", "description": "title11 text" }, { "name": "content11", "type": "textarea", "description": "content11 text" }, { "name": "title12", "type": "text", "description": "title12 text" }, { "name": "content12", "type": "textarea", "description": "content12 text" }, { "name": "title13", "type": "text", "description": "title13 text" }, { "name": "content13", "type": "textarea", "description": "content13 text" }, { "name": "title14", "type": "text", "description": "title14 text" }, { "name": "content14", "type": "textarea", "description": "content14 text" }, { "name": "title15", "type": "text", "description": "title15 text" }, { "name": "content15", "type": "textarea", "description": "content15 text" }, { "name": "title16", "type": "text", "description": "title16 text" }, { "name": "content16", "type": "textarea", "description": "content16 text" }, { "name": "title17", "type": "text", "description": "title17 text" }, { "name": "content17", "type": "textarea", "description": "content17 text" }, { "name": "title18", "type": "text", "description": "title18 text" }, { "name": "content18", "type": "textarea", "description": "content18 text" }, { "name": "contentLinkTitle", "type": "text", "description": "content link title" }, { "name": "contentLink", "type": "url", "description": "content link" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "contentLinkDescription", "type": "text", "description": "content link description" } ], "values": { "backgroundColor": "", "collapseAll": false, "textSize": "fc-h6-text", "title1": "", "content1": "", "title2": "", "content2": "", "title3": "", "content3": "", "title4": "", "content4": "", "title5": "", "content5": "", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "1:1 문의하기", "contentLinkDescription": "해당 사항이 없다면 1:1 문의 게시판을 이용해주세요", "useNewTab": true, "contentLink": "https://fastcampus.co.kr" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\n <% if (title1 || content1) { %>\n

\n \">\n >\n \n <%= title1 %>\n \n \"><%= content1 %>\n \n

\n <% } %>\n <% if (title2 || content2) { %>\n

\n \">\n >\n \n <%= title2 %>\n \n \"><%= content2 %>\n \n

\n <% } %>\n <% if (title3 || content3) { %>\n

\n \">\n >\n \n <%= title3 %>\n \n \"><%= content3 %>\n \n

\n <% } %>\n <% if (title4 || content4) { %>\n

\n \">\n >\n \n <%= title4 %>\n \n \"><%= content4 %>\n \n

\n <% } %>\n <% if (title5 || content5) { %>\n

\n \">\n >\n \n <%= title5 %>\n \n \"><%= content5 %>\n \n

\n <% } %>\n <% if (title6 || content6) { %>\n

\n \">\n >\n \n <%= title6 %>\n \n \"><%= content6 %>\n \n

\n <% } %>\n <% if (title7 || content7) { %>\n

\n \">\n >\n \n <%= title7 %>\n \n \"><%= content7 %>\n \n

\n <% } %>\n <% if (title8 || content8) { %>\n

\n \">\n >\n \n <%= title8 %>\n \n \"><%= content8 %>\n \n

\n <% } %>\n <% if (title9 || content9) { %>\n

\n \">\n >\n \n <%= title9 %>\n \n \"><%= content9 %>\n \n

\n <% } %>\n <% if (title10 || content10) { %>\n

\n \">\n >\n \n <%= title10 %>\n \n \"><%= content10 %>\n \n

\n <% } %>\n <% if (title11 || content11) { %>\n

\n \">\n >\n \n <%= title11 %>\n \n \"><%= content11 %>\n \n

\n <% } %>\n <% if (title12 || content12) { %>\n

\n \">\n >\n \n <%= title12 %>\n \n \"><%= content12 %>\n \n

\n <% } %>\n <% if (title13 || content13) { %>\n

\n \">\n >\n \n <%= title13 %>\n \n \"><%= content13 %>\n \n

\n <% } %>\n <% if (title14 || content14) { %>\n

\n \">\n >\n \n <%= title14 %>\n \n \"><%= content14 %>\n \n

\n <% } %>\n <% if (title15 || content15) { %>\n

\n \">\n >\n \n <%= title15 %>\n \n \"><%= content15 %>\n \n

\n <% } %>\n <% if (title16 || content16) { %>\n

\n \">\n >\n \n <%= title16 %>\n \n \"><%= content16 %>\n \n

\n <% } %>\n <% if (title17 || content17) { %>\n

\n \">\n >\n \n <%= title17 %>\n \n \"><%= content17 %>\n \n

\n <% } %>\n <% if (title18 || content18) { %>\n

\n \">\n >\n \n <%= title18 %>\n \n \"><%= content18 %>\n \n

\n <% } %>\n

\n <% if (contentLinkTitle || contentLinkDescription) { %>\n \n <% } %>\n

\n" }, "values": { "backgroundColor": "#000000", "collapseAll": false, "textSize": "fc-content-text", "title1": " Penting untuk Diketahui", "content1": "\n\n- Informasi di halaman ini dapat berubah sewaktu-waktu tanpa pemberitahuan sebelumnya.
\n- Kurikulum dapat ditambah, dikurangi, atau dimodifikasi selama proses pengembangan.
\n- Promosi diskon dapat berakhir lebih awal atau diperpanjang tanpa pemberitahuan sebelumnya, tergantung pada situasinya.
\n- Kursus ini menggunakan Mac sebagai platform utama, namun tetap dapat diakses oleh pengguna Windows.
\n- Dalam keadaan force majeure, seperti bencana alam atau penutupan usaha, layanan kami mungkin terpaksa dihentikan.
\n- Kami akan menyediakan spesifikasi perangkat keras dari pengajar dan rekomendasi spesifikasi sebagai referensi dalam mengikuti kursus.
\n", "title2": "", "content2": "", "title3": "", "content3": "", "title4": "Kebijakan Pengembalian Dana", "content4": "\n- Ingin tahu lebih lanjut tentang kebijakan pengembalian dana kami? Pelajari di link berikut ►\n", "title5": "Hak Cipta", "content5": "\n- Fast Campus melarang keras semua tindakan pelanggaran hak cipta, termasuk distribusi dan pengolahan yang tidak sah, berbagi melalui tangkapan layar atau perekaman, dan penjualan materi kursus yang tidak sah. Jika penggunaan yang tidak sah terdeteksi, Anda dapat dikenakan sanksi hukum berdasarkan undang-undang hak cipta.\n", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "", "contentLinkDescription": "", "useNewTab": true, "contentLink": "" }, "uniqueId": "fc-block-21-soa9i0l8r", "isChecked": false } ]

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

; font-size: <%= titleTextSize/10 %>rem;\"><%= title %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

; font-size: <%= titleTextSize/10 %>rem;\"><%= title %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

StackUp : Clone Disney+ Website Frontend untuk menguasai React

Class Details

(IDN) StackUp : Clone Disney+ Website Frontend untuk menguasai React Details