Premium Edition

Full-Stack Web Designer: Handoff dan Front-End

Build an online shop for furniture from scratch

Member

1,846 enrolled

Tingkatan
Sertifikat
Konsultasi

Develop Your Skills

Full-Stack Designer adalah role di mana seseorang tersebut dapat mengusai keahlian design dan juga code (terutama Front-End). Misalnya kita sudah selesai membuat design untuk projek website, android, atau juga ios. Lalu, kita akan menerapkan design tersebut kepada tahap development agar bisa dioperasikan oleh end-user (pengguna).

Pada kelas Full-Stack Web Designer kali ini kita akan belajar bagaimana menggunakan metode Design Handoff demi menerapkan design yang sudah ada dan siap dilanjutkan kepada tahap development menggunakan software Zeplin, Visual Studio Code, dan juga CSS Framework Tailwind versi terbaru. Silakan bergabung pada kelas Full-Stack Web Designer ini untuk mempelajari techstack terbaru dan kami akan tunggu kalian di kelas.

Demo Project

Key Points

Deploy projek website ke Netlify

Slicing Design ke HTML Template

Bekerja sama Designer dan Developer (Handoff)

Membuat Prototype Pada Design

Designed For

Cocok untuk yang ingin belajar proses design ke code

Cocok untuk yang sedang belajar membuat Prototype

Learn With Expert

Angga Risky

Full-Stack Developer

Profile Mentor

Yein Narayana

Full-Stack Developer

Profile Mentor

Course Prerequisite

Kami rekomendasikan untuk mempelajari kelas di bawah

Happy Learning

Materi kelas yang bermanfaat untuk karir kita

1

Design Things

play_circle

Apa itu Design Handoff?

3 mins

lock

Tools Utama Handoff

4 mins

play_circle

Review Project

4 mins

lock

Membuat Prototype

2 mins

lock

Undang Developer

2 mins

lock

Export Design Assets

3 mins

play_circle

Upload ke Zeplin

5 mins

lock

Penutup Handoff

1 mins

2

Introduction Frontend

lock

Introduction

6 mins

play_circle

Journey FE Designer

6 mins

lock

Tools Required

4 mins

lock

Sneak peak landing page

6 mins

lock

Sneak peak detail page

3 mins

lock

Sneak peak cart page

3 mins

lock

Sneak peak success page

2 mins

3

Prerequisites

lock

Why tailwind

4 mins

lock

CSS Units

5 mins

4

Setup

lock

Setup Webpack (1)

9 mins

play_circle

Setup Webpack (2)

10 mins

lock

Setup Postcss

1 mins

lock

Tailwind Config

7 mins

lock

Setup git

3 mins

lock

Quick Break :)

4 mins

5

Slicing Landing Page

lock

Getting Started

7 mins

lock

Header Component (1)

11 mins

lock

Header Component (2)

12 mins

lock

Meta Tag

4 mins

lock

Section Hero (1)

9 mins

lock

Section Hero (2)

12 mins

lock

Section Hero (3)

7 mins

lock

Section Hero (4)

9 mins

lock

Section Hero (5)

6 mins

lock

JS menu toggler

11 mins

lock

JS Modal

10 mins

lock

Browse the room (1)

9 mins

lock

Browse the room (2)

9 mins

lock

Browse the room (3)

10 mins

lock

JS anchor link

8 mins

lock

Just Arrived (1)

8 mins

lock

Just Arrived (2)

9 mins

lock

JS Carousel (1)

10 mins

lock

JS Carousel (2)

10 mins

lock

JS Carousel (3)

13 mins

lock

Clients

5 mins

lock

Footer (1)

10 mins

lock

Footer (2)

11 mins

lock

JS Accordion

13 mins

lock

Icon Cart Fill

4 mins

6

Slicing Details Page

lock

Breadcrumb (1)

8 mins

lock

Breadcrumb (2)

8 mins

lock

Details Product (1)

7 mins

lock

Details Product (2)

7 mins

lock

Details Product (3)

10 mins

lock

JS Slider

11 mins

lock

Suggestion section

12 mins

lock

Review Details Page

5 mins

7

Slicing checkout page

lock

Shopping Cart (1)

10 mins

lock

Shopping Cart (2)

12 mins

lock

Shipping Details (1)

8 mins

lock

Shipping Details (2)

9 mins

lock

Shipping Details (3)

10 mins

lock

JS Cart (1)

10 mins

lock

JS Cart (2)

10 mins

lock

JS Shipping details (1)

11 mins

lock

JS Shipping details (2)

11 mins

8

Slicing success page

lock

Success page

9 mins

9

Setup Netlify

lock

Get up and running live

11 mins

Tools Pendukung

Lengkapi semua pendukung di bawah sebelum belajar

Visual Studio Code

Software Gratis

Download Now

Netlify

Software Gratis

Download Now

Tailwind CSS

Software Gratis

Download Now

HTML

Software Gratis

Download Now

Zeplin

Software Gratis

Download Now

1,846 Happy Members

Review setelah bergabung di kelas Full-Stack Web Designer: Handoff dan Front-End

Sonia Irawan

Full-Stack Developer

terima kasih penjelasannya mantap

I Kadek Teo Prayog

Full-Stack Developer

Mantap

Dava Daviar Saputr

Front-End Developer

Kelas yang bagus untuk pemula yang ingin tau bagaimana mengerjakan real project

Wahid Arinanto Nug

Lifetime Learner

bermanfaat

Hilmi Razib Yusuf

Lifetime Learner

Materinya sangat mudah dicerna, ringkas dan juga padat. Terimakasih

Habieb Fathur Rahm

Front-End Developer

Mantap kali the bestlah

Canu Edra S.P

Full-Stack Developer

Materi sangat mudah di pahami

Juan Firmansyah

Full-Stack Developer

The best mau beli kelas yang lain laggi, semoga jadi portofolio yang baik

Aldi Tegar Prakoso

Full-Stack Developer

Mantap mas yein dan mas angga

Shandy Maulana Y

Full-Stack Developer

good

Egi Permana

Full-Stack Developer

BWA Emang Terz baikz

Wizan pratama

Full-Stack Developer

good

Rony Noor Saroni

Logo Designer

Keren..

Yordan Andy Christ

Full-Stack Developer

Mantabs

Billy Petra Gilber

Full-Stack Developer

Mentor luar biasa, rinci dan santai. sisanya tinggal self-learning...

Muhammad Aqmal Kha

Front-End Developer

Pembawaan materinya sangat bagus dan mudah dipelajari serta mengikuti pelajaran dengan baik

Patrick Martinus

Full-Stack Developer

jadi gak sabar lanjut

Maulana Lucky Yuli

Full-Stack Developer

Bang Yein belajar frontend udah berapa tahun bang? heuheu pro sangad

Drigo Alexander Si

Full-Stack Developer

sangat bermanfaat

Dini Adiarnita

Project Manager

materi urutan JS Shipping details nya kebalik. harusnya JS Shipping details (2) urutan setelah JS Cart (2), dan JS Shipping details (1) urutan kedua setelah JS Shipping details (2). Terima kasih

Hariyanto

Full-Stack Developer

Materinya bener bener daging, tapi belajar tailwind bikin kepala panas ya hehe, tidak seperti bootstrap simplelan, tapi kelas bwafeho bener - bener daging bangat materinya, terima kasih mas yein (y)

Dhany Yudi Prasety

Full-Stack Developer

Materi yang keren dari desain nya yang minimalist hingga gaya koding yang komprehensif dari mas yein, dan terhibur ditengah ngoding mas yein yang terheran heran dengan harga-harga yang ada di desain :D Terimakasih Mas Angga dan Mas Yein

Dani Ramdani

Full-Stack Developer

video slide yg Bagus dan penjelasan tenting matter Bagus

dimas pradipto

Full-Stack Developer

Sangat mudah di pahami

Fauzi Kurniawan

Full-Stack Developer

kelasnya mantap, materi yang disampaikan santai dan mudah di fahami

anggra ini

Full-Stack Developer

trainer cukup jelas dalam menjelaskan

Idrus danuarsa

Full-Stack Developer

penjelasannya gampang masuk di otak

Eka Rizwan

Back-End Developer

good

Bima Ketut R Putra

Full-Stack Developer

Iya Bang, yang bikin "saya" doang, bukan "kita". Padahal g rugi kalo bilang "kita" doang. kalimat kyk gitu baiknya g keluar dari pengajar.

Zainal Abidin

Full-Stack Developer

Video journey FE Designer, pembahasan nya sudah jelas, cuma tampilan video nya yang bikin monoton,tidak ada gerakan yang bikin suasana jadi menarik, mungkin di tambahkan rekaman video orang nya juga

Featured Projects

0 Hasil karya terbaik di kelas Full-Stack Web Designer: Handoff dan Front-End

Belum ada hasil karya.

Are You The Next?

Lihat hasil karya member lainnya

View All Portfolio
#BeyondPremium

Start to Invest 100%

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

Selamanya

Rp 355,000

Miliki kelas Premium secara permanen
dan bangun sebuah projek nyata

Akses kelas selamanya

Assets & group konsultasi

Tools pendukung belajar

Sertifikat kelulusan

Free update materi

Free akses kelas Freemium

Lowongan pekerjaan

Beli Kelas Lihat Benefit Lainnya

Pertanyaan Umum

Langkah yang tepat untuk berinvestasi kepada
ilmu pengetahuan yang baru di bidang IT

WhatsApp Admin

Tingkatan kelas Premium yang kami miliki dibangun untuk All Levels yang memberartikan bahwa cocok untuk seluruh tingkatan. Kami juga menyarankan calon member untuk mengikuti kelas Starter (gratis) terlebih dahulu sebagai permulaan.

Kami telah menyediakan kelas yang terstruktur dan well-designed oleh mentor yang berpengalaman sehingga akan sangat mudah untuk dipahami oleh siapa saja.

Sertifikat kelulusan kelas hanya tersedia pada kelas Premium. Dan untuk mendapatkannya, para member diwajibkan untuk menyelesaikan seluruh materi kelas dan juga Quiz yang telah disediakan oleh mentor.

Salah satu benefit unggulan kami adalah group konsultasi yang diberikan sebagai bonus untuk member yang telah mengikuti kelas Premium di platform BuildWith Angga. Silahkan menghubungi Admin untk mendapatkan akses pada group tersebut.

Kami mengizinkan member yang telah mengikuti kelas Premium untuk menjual kembali projek kelas kepada klien, perusahaan, etc. Syarat utamanya adalah dengan memodifikasi sedikitnya yaitu 30% dari original project buatan mentor kelas tersebut.

Kami melarang member menjual atau membagikan hak akses kelas Premium kepada orang lain yang tidak terdaftar pada kelas tersebut. Mari kita support creators Indonesia dengan cara membeli kelas secara resmi dan satu akun hanya untuk satu pengguna saja.

Kami tidak memperbolehkan member menjual kembali materi kelas di BuildWith Angga. Kami siap melanjutkan kepada proses hukum apabila Anda terbukti benar memperjualbelikan kelas kami secara ilegal.

Rp 355,000

Beli Kelas