Tata letak web dengan CSS Grid, Flexbox, dan teknik modern lainnya
A course by Javier Usobiaga FerrerDesainer web
A course by Javier Usobiaga Ferrer, Desainer web
Tata letak web dengan CSS Grid, Flexbox, dan teknik modern lainnya
Web terus berubah, dan dengan hadirnya CSS Grid dan Flexbox, aturan mainnya kembali berubah. Javier Usobiaga—desainer web, pengembang front-end, dan salah satu pendiri studio Swwweet—memiliki 13 tahun pengalaman dalam menciptakan berbagai proyek untuk klien seperti Dewan Kota Barcelona. Dengan pengalamannya yang luas, ia mengundang Anda untuk menemukan teknik dan alat paling modern yang merevolusi sektor ini.
Jika dalam kursus Pengantar Pengembangan Web Responsif dengan HTML dan CSS Anda sudah memulai di dunia web responsif, dalam kursus ini Anda akan mempelajari berbagai teknik tingkat lanjut dengan alat-alat seperti CSS Grid, Flexbox, CSS Shapes, unit viewport, variabel CSS, transformasi 3D, atau efek jenis paralaks.
Apa yang akan Anda pelajari dalam kursus daring ini?
1 pelajaran & 1 unduhan
Unit tampilan
1 menit, 1 detik
Gambar yang sesuai dengan objek
1 menit, 1 detik
Kolom CSS
1 menit, 1 detik
Bentuk CSS
1 menit, 1 detik
Variabel dalam CSS
1 menit, 1 detik
Pengantar flexbox
1 menit, 1 detik
Apa yang termasuk dalam kursus ini?
Hal pertama yang akan Anda lakukan adalah mempelajari tentang Javier Usobiaga, karier profesionalnya, dan proyek-proyeknya yang paling terkenal.
Anda akan mulai dengan mempelajari cara membentuk tata letak Anda dengan unit viewport, object- , dan cara mendistribusikan teks dalam kolom dengan kolom CSS. Anda akan melihat bagaimana bentuk web dapat diubah dari persegi panjang menjadi dengan clip- dan CSS Shapes. Anda juga akan mempelajari cara mengoptimalkan kode Anda dengan variabel properti kustom bawaan.
Anda akan menemukan revolusi yang dibawa Flexbox ke dunia __ . Javier akan mengajarkan Anda semua kemungkinan untuk menyelaraskan elemen. Untuk melakukannya, ia akan menjelaskan properti kontainer dan konten, serta kemampuan penyelarasan dengan sumbu utama, sumbu silang, dan sumbu alternatif.
Anda akan terus mempelajari aturan main baru dengan CSS Grid, yang akan sepenuhnya mengubah cara Anda menyusun dan . Anda akan mempelajari beberapa fungsi grid, properti tata letak dan ukuran[/i] serta cara mendesain grid yang beradaptasi dengan berbagai ukuran layar dengan fungsi dan [i]
Javier akan menjelaskan teknik CSS Grid yang lebih canggih seperti area grid, perataan dan penataan, penyusunan bertingkat, dan, melalui contoh, Anda akan melihat cara menggunakan Grid dan Flexbox bersama-sama dalam sebuah proyek.
Anda akan mempelajari secara singkat tentang transformasi 3D dengan contoh praktis kedalaman dan efek di gulir untuk akhirnya melihat proyek, contoh, dan sumber daya yang dipilih oleh Javier untuk dijadikan inspirasi.
What is this course's project?
Anda akan menyelesaikan latihan gratis menggunakan satu atau beberapa teknik yang telah Anda pelajari. Javier akan membuat halaman informatif tentang penaklukan Kutub Selatan. Anda dapat memilih topik dan proyek yang Anda inginkan.
Proyek oleh mahasiswa kursus
Who is this online course for?
Siapa pun yang tertarik dengan tata letak dan teknik modern menggunakan CSS Grid, , dan teknik modern lainnya.
Requirements and materials
Untuk mengikuti kursus ini, Anda memerlukan pemahaman yang kuat tentang HTML dan CSS, komputer, dan editor kode.
Ulasan
- 8 bulan yang lalu
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 9 bulan yang lalu
increíble
- creative_250792PLUS9 bulan yang lalu
Cours très instructif, agréable, très complet
- 1 tahun yang lalu
Es un curso muy bueno
- 1 tahun yang lalu
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Isi
- U 1
Perkenalan
- Presentasi
- Pengaruh
- U 2
Membentuk tata letak
- Unit tampilan
- Gambar yang sesuai dengan objek
- Kolom CSS
- Bentuk CSS
- Variabel dalam CSS
- U 3
Tata letak satu dimensi dengan flexbox
- Pengantar flexbox
- Properti Kontainer
- Properti konten
- Penyelarasan sumbu utama dan sumbu silang
- Jajaran lanjutan
- Tata letak lanjutan dengan flexbox
- U 4
Tata letak dua dimensi dengan kisi CSS
- Pengantar grid CSS
- Fungsi grid
- Distribusi dan ukuran
- Kisi responsif otomatis
- U 5
Kisi CSS Lanjutan
- Area pada grid
- Keselarasan dan ketertiban
- Bersarang
- Grid (dan flexbox) dalam praktik
- U 6
Dimensi ketiga: kedalaman dan efek gulir
- Pengantar transformasi 3D
- Kepala tempat tidur tetap
- Animasi disinkronkan dengan gulir
- Inspirasi dan sumber daya
- FP
Proyek akhir
- Teknik tata letak web
Apa yang diharapkan dari kursus Domestika
Belajar dengan kecepatan Anda sendiri
Nikmati belajar dari rumah tanpa jadwal tetap dan dengan metode yang mudah diikuti. Anda bisa mengatur kecepatan belajar Anda sendiri.
Belajar dari para profesional terbaik
Pelajari metode dan teknik berharga yang dijelaskan oleh para ahli terkemuka di sektor kreatif.
Bertemu dengan guru ahli
Setiap pakar mengajarkan apa yang paling mereka kuasai, dengan pedoman yang jelas, semangat yang membara, dan wawasan profesional dalam setiap pelajaran.
Certificates
PLUSIf you're a Plus member, get a sertifikat khusus signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Dapatkan kursi baris depan
Video berkualitas tinggi, jadi Anda tidak akan melewatkan satu detail pun. Dengan akses tak terbatas, Anda dapat menontonnya sesering yang Anda butuhkan untuk menyempurnakan teknik Anda.
Berbagi pengetahuan dan ide
Ajukan pertanyaan, minta masukan, atau tawarkan solusi. Bagikan pengalaman belajar Anda dengan siswa lain di komunitas yang sama bersemangatnya dengan Anda dalam hal kreativitas.
Terhubung dengan komunitas kreatif global
Komunitas ini merupakan rumah bagi jutaan orang dari seluruh dunia yang ingin tahu dan bersemangat untuk mengeksplorasi dan mengekspresikan kreativitas mereka.
Tonton kursus yang diproduksi secara profesional
Domestika menyusun daftar guru dan memproduksi setiap kursus secara internal untuk memastikan pengalaman belajar daring berkualitas tinggi.
Tanya Jawab Umum
This course is designed for people with basic CSS knowledge who want to dive deeper into advanced layouts, modern techniques, and experimenting with the latest properties. You don’t need to be an expert, but you should know the basics of HTML and CSS.
You should have basic knowledge of HTML and CSS, plus a code editor and a modern browser. No special tools or framework experience required.
You’ll learn to build advanced, responsive layouts with Flexbox and CSS Grid, parallax animations, custom shapes, viewport units, image and column control, CSS variables, and 3D transforms for innovative web interfaces.
The course covers element alignment, advanced properties, differences between Flexbox and Grid, responsive layouts, nested grids, custom areas, distribution techniques, and when to choose each method based on design needs.
Viewport units like vh and vw are used to size blocks, text, and images relative to the browser window, creating responsive interfaces and avoiding horizontal scroll or poor proportions.
Yes, you’ll learn to create parallax animations, sticky headers, and scroll-synced effects using pure CSS and advanced visual interaction techniques.
Yes, the course teaches how to adjust images with object-fit, object-position, media queries, and techniques to make images adapt to any container or screen.