Cara Membuat Web Sederhana, Web Portfolio (Mendesain dari Figma hingga Coding HTML CSS)

Di video ini, saya akan berbagi tutorial mendesain web menggunakan Figma dari nol. Setelah desain kerangka jadi, kalian akan saya ajak ngoding bareng HTML dan CSS nya di Visual Studio Code.

00:00 Salam
00:07 Penjelasan singkat
00:59 Buka Figma
02:41 Membuat Frame Desktop
03:22 Mendesain Navbar
08:00 Mendesain Hero/Header Section
15:40 Mendesain tumpukan 3 gambar projek terbaik
19:08 Mendesain bagian Layanan
23:40 Mendesain bagian Projek Terakhir
27:14 Mendesain bagian Testimonial
32:22 Mendesain bagian Footer
44:50 Waktunya ngoding HTML dan CSS dari desain Figma
49:15 Membuat file style.css
51:23 Mencari font Nunito di Google Fonts
52:00 Menambahkan font Nunito pada index.html dan style.css
58:08 Membuat Navbar
01:09:30 Membuat Hero/Header Section
01:21:07 Membuat tumpukan 3 gambar projek terbaik
01:28:05 Membuat bagian Layanan
01:34:54 Membuat bagian Projek Terakhir
01:41:45 Membuat bagian Testimonial
01:54:41 Membuat bagian Footer
02:07:04 Hore, SUDAH JADI!!!
02:07:11 Penutup

Google Fonts: https://fonts.google.com/
Download Visual Studio Code: https://code.visualstudio.com/

Desain Figma Web Portfolio Sederhana: https://www.figma.com/file/VQTA58cJH9...

Credit image dari Pexels
1. Michael Block https://www.pexels.com/photo/scenic-p...
2. Вальдемар https://www.pexels.com/photo/green-tr...
3. Simone Defendi https://www.pexels.com/photo/silhouet...
4. eberhard grossgasteiger https://www.pexels.com/photo/snowy-mo...

#html #webdesign #figma #css3 #vscode