Dasar - dasar Desain Web yang Responsif adalah kursus intensif kode praktis tentang cara membuat situs web berkinerja tinggi dan responsif yang tampak hebat di berbagai ukuran layar dan perangkat.
DASAR-DASAR DESAIN WEB RESPONSIF
Kursus ini adalah pengantar strategi desain web responsif dan cara menerapkan strategi tersebut melalui HTML, CSS, dan JavaScript. Anda akan mempelajari bagaimana pemikiran responsif memengaruhi penulisan dan struktur konten serta alur kerja desain dan pengembangan Anda. Anda juga akan mempelajari praktik terbaik untuk tipografi dan gambar responsif, kiat kreatif untuk meningkatkan visual desain Anda, dan cara mengidentifikasi serta meningkatkan kinerja situs di seluruh seluler dan desktop.
SKEMA PEMBELAJARAN
Pelajaran 1: Mengatur Panggung
Anda akan mulai dengan melihat tujuan dan struktur kursus dan apa yang akan Anda pelajari. Kemudian Anda akan mulai menjelajahi pertimbangan teknis, konseptual, dan desain yang terlibat dengan Desain Web Responsif. Konsep yang dibahas mencakup pemahaman bagaimana penjelajahan web seluler memengaruhi desain dan pengembangan kami, mengapa pola desain menjadi semakin penting, dan cara mengidentifikasi tantangan saat merancang secara responsif untuk sistem manajemen konten.
Pelajaran 2: Mekanika Dasar Dan Naik Level
Dalam pelajaran ini, Anda akan mendalami konsep inti tata letak fluid, media fleksibel, dan kueri media CSS. Anda akan mempelajari strategi untuk mengubah tata letak statis menjadi tata letak yang fleksibel, cara terbaik menggunakan breakpoint kueri media untuk membuat tata letak tampak hebat, dan kapan harus menggunakan unit ukuran yang tepat untuk pekerjaan tersebut (piksel versus persentase versus em). Anda juga akan mendapatkan kesempatan untuk mempelajari tentang unit ukuran baru yang mendapatkan daya tarik di web dan memutuskan apakah itu masuk akal untuk proyek Anda yang akan datang.
Pelajaran 3: Tipografi Dan Tata Letak
Anda akan mempelajari praktik terbaik untuk menambahkan font web ke proyek Anda. Di bagian tipografi, Anda akan belajar cara menggunakan font web secara efektif untuk meningkatkan keterbacaan dan estetika desain Anda. Selain itu, Anda akan mempelajari metode terbaru tentang cara mengurangi performa yang dihadapi pengguna Anda saat memuat font. Di bagian tata letak, Anda akan menerapkan peningkatan pada desain Anda menggunakan Kolom CSS dan Flexbox. Anda juga akan mendapatkan pratinjau dari CSS Grid Layout, sebuah teknologi baru dengan potensi untuk merevolusi cara kami mendesain untuk web.
Pelajaran 4: Pola Navigasi
Pelajaran ini berfokus pada cara menentukan konteks yang sesuai untuk navigasi responsif dan cara menyesuaikan antarmuka pengguna Anda untuk layar sentuh serta untuk ponsel cerdas versus desktop. Anda akan mengikuti tur sejumlah pola navigasi desktop dan seluler serta mempelajari pro dan kontra dari masing-masing pola. Terakhir, Anda akan menjelaskan tutorial mendetail tentang cara membuat navigasi "di luar kanvas" yang berfungsi dengan baik di perangkat seluler dan diterjemahkan secara efektif ke layar desktop.
Pelajaran 5: Peningkatan Lanjutan
Temukan cara mengintegrasikan gambar responsif ke situs web Anda melalui serangkaian latihan langsung menggunakan elemen gambar dan teknik lainnya. Anda akan mengetahui masa lalu dengan melihat cara mendukung browser lama dengan polyfill dan melihat ke masa depan dengan diskusi tentang potensi Element Queries.
Pelajaran 6: Kinerja
Pelajari mengapa kinerja situs web adalah salah satu elemen terpenting dari proses desain, terutama untuk pengguna dalam skenario seluler dan / atau bandwidth rendah. Anda akan mempelajari alat mana yang berguna untuk menguji situs Anda dan menjalani sejumlah latihan yang melibatkan pengoptimalan situs contoh kami. Secara khusus, Anda akan mempelajari kapan Jaringan Pengiriman Konten (CDN) masuk akal. Anda juga akan mempelajari teknik terbaru yang melibatkan konfigurasi CSS dan JavaScript sebaris yang dapat memotong waktu muat halaman secara dramatis bagi pengguna Anda.
PRASYARAT
- Keakraban dengan konsep yang tercakup dalam kursus Desain Web Modern kami (atau yang setara).
- Pemahaman dasar tentang cara menggunakan alat pengembang browser.
PERSYARATAN
- Mac atau Windows desktop atau laptop
- Izin untuk mengunduh file pelajaran dari Github
- Editor teks yang dibuat untuk HTML / CSS (Kami menyarankan Atom , gratis, dan tersedia untuk Mac, Windows, dan Linux)
0 Comments