Tata letak dan pengembangan web situs web. Pengembangan Web tingkat lanjutan - kursus 1990 gosok. dari Stepik, pelatihan 131 pelajaran, Tanggal: 1 Desember 2023.
Miscellanea / / December 04, 2023
Halo!
Nama saya Dima. Dan saya mengundang Anda untuk menyelami kedalaman pembuatan dan tata letak situs web!
Kursus ini diperuntukkan bagi mereka yang sudah mengetahui dasar-dasarnya, namun ingin beralih dari tingkat pembuatan situs web yang baik ke tingkat yang sangat baik.
Kursus ini diperuntukkan bagi mereka yang mengetahui dasar-dasar HTML dan CSS, namun mengetahui bahwa masih banyak teknik, teknik pengembangan, dan teknologi yang digunakan oleh para pengembang profesional sejati.
Jika ini terdengar familier, maka kursus ini cocok untuk Anda)
Hidupkan situs web Anda dengan animasi modern melalui CSS
Kami akan mulai dengan memperkenalkan dinamika ke dalam situs kami, yaitu kami akan membuat animasi. Kita akan belajar cara menganimasikan tombol, teks, dan judul menggunakan CSS murni, mempelajari cara membuat animasi kartu, membuat menu navigasi dinamis, dan semua ini tanpa satu baris kode JS, hanya CSS murni.
Kursus ini berisi praktik terbaik dalam desain responsif.
Anda akan mempelajari cara dan trik baru untuk mendesain situs Anda secara responsif, menggunakan teknik baru untuk mendefinisikan dan menulis kueri media, dan mempelajari caranya sesuaikan semua elemen halaman dengan mengubah hanya satu properti CSS sehingga situs Anda terlihat lebih baik dari sebelumnya di perangkat seluler mana pun perangkat
Pelajari semua seluk-beluk dan keunggulan praprosesor modern
Anda akan mempelajari cara mempercepat pembuatan situs web Anda beberapa kali lipat dengan menggunakan kemampuan penuh praprosesor SASS, seperti mixin, variabel, dan fungsi.
Dasar-dasar penting untuk menggunakan NPM
Selain itu, paket NPM dengan plugin yang diperlukan untuk setiap pengembang profesional akan memberi kita kesempatan untuk membuat dan mengoptimalkan situs web lebih cepat dan efisien daripada sebelumnya.
Sistem kontrol versi Git akan membantu Anda dalam pengembangan Anda
Selain itu, Anda akan mempelajari dasar-dasar yang diperlukan untuk bekerja dengan sistem kontrol versi git sehingga Anda selalu memilikinya kemampuan untuk kembali ke versi situs Anda yang benar, tidak peduli seberapa parah kesalahan Anda terakhir kali perbarui situs)
Anda membuat 2 situs web modern untuk portofolio Anda
Kursus ini dibangun berdasarkan praktik dan dibagi menjadi pelajaran video kecil di mana kita akan selangkah demi selangkah membuat 2 proyek modern besar berdasarkan pada sistem float - sehingga Anda dapat mendukung proyek lama dan tentu saja pada sistem GRID CSS, yang memungkinkan Anda membuat tata letak dengan kompleksitas luar biasa.
Dan tentu saja, Anda tidak akan malu untuk menunjukkan proyek ini kepada calon pelanggan atau calon pemberi kerja.
Saya selalu berhubungan!
Dan yakinlah, Anda tidak akan ditinggalkan sendirian, karena setelah setiap pelajaran kecil, Anda akan memiliki kesempatan untuk membandingkan kode Anda dengan kode saya atau sekadar mengajukan pertanyaan; jawabannya biasanya tidak membutuhkan waktu lama untuk sampai.
Garansi uang kembali!
Dan jika Anda masih ragu, kursus ini memberikan kesempatan untuk mengembalikan uang yang dikeluarkan jika Anda tidak menyukainya dalam waktu 30 hari.
Bergabunglah dengan saya dan bersama-sama kita akan belajar cara membuat situs web yang profesional dan modern.
Sampai jumpa di kelas!
9
kursusSaya telah membuat kursus online asli sejak 2016. Saya secara profesional mengajar bekerja dengan editor grafis Adobe, mengajar desain dan pengembangan web.
Halo! Namaku Dima! Saya tidak ingin menyombongkan diri, tetapi saya harus melakukannya) Saya telah mengajar lebih dari 5.000 siswa di seluruh dunia dalam kursus online milik saya. Lebih dari 2.000 ulasan nyata dengan nilai rata-rata 4,83 dari 5,00! Saya mengajar desain web, pengembangan web dan perangkat lunak yang diperlukan (Photoshop Illustrator, Figma). Pengalaman mengajar saya terdiri dari 5 tahun bimbingan belajar lepas, serta mengajar melalui sekolah dan kursus online, pada platform pembelajaran jarak jauh global. Siswa kursus saya memperhatikan kualitas terbaik saya dalam cara saya menyajikan materi tanpa menjejalkan, dengan cara yang menyenangkan dan menarik.
Persiapan / Pengulangan / Animasi pertama
1. Halo!) Unduh materi untuk kursus
2. Instal dan konfigurasikan perangkat lunak yang diperlukanĀ
3. Jalur klip properti baru. Kami mulai membuat bagian pertama situsĀ
4. Jika aplikasi pramuka tidak berfungsi untuk Anda
5. Latihan: Buat bentuk Anda menggunakan Clip-path
6. Menyelaraskan elemen secara vertikal menggunakan pemosisian absolut
7. Temui @KeyFrames. Mari kita membuat animasi pertama.
8. Visibilitas bagian belakang dan pembuatan tombol melalui kelas semu
9. Menganimasikan tombol menggunakan elemen semu
10. Mode pengisian animasi. Memulai animasi dari titik tertentu.
11. 3 prinsip pengembangan web
12. Gunakan REM, bukan PX
Git dan GitHub
1. Tentang apa blok ini?
2. Perintah dasar di terminal
3. Cara mengedit file melalui terminal
4. Instal sistem git di komputer kita
5. Cara menjalankan git di proyek tertentu
6. Membuat komit pertama
7. Mengirimkan proyek ke GitHub
8. Jika Anda mengalami kesalahan saat mengirimkan proyek Anda ke GitHub
9. Kesalahan masuk saat mencoba memasukkan proyek ke GitHub
10. Latihan: Buat repositori Anda sendiri
11. Cara menghapus repositori GitHub
12. Cara mengunduh repositori dari GitHub
13. Kami meniru karya 2 pengembang dalam satu repositori
14. Cara menampilkan informasi tentang komit di terminal. catatan Git
15. Apa itu cabang
16. Cara membuat dan menavigasi cabang.
17. Kami menutup celah dari awal kursus mini dengan notasi -u dan -M
18. Kesalahan komit yang belum disimpan saat checkout
19. Cara mendorong perubahan yang dibuat ke cabang baru
20. Cara mendorong banyak komitmen ke cabang baru
21. Bagaimana kondisi kepala terlepas? KEPALA terpisah
22. Cara mengembalikan file tertentu dari komit sebelumnya
23. Git log tingkat lanjut dan git show
24. Cara menggabungkan cabang menggunakan Git merge. Metode maju cepat
25. Cara menghapus cabang
26. Cara menghapus file direktori dari keadaan tidak terlacak
27. Git mengatur ulang --keras. Cara mengembalikan komit dengan keras
28. Cara kedua untuk menemukan komit yang macet menggunakan ORIG_HEAD
29. Git reset --lunak
30. Git commit --amend mengubah komentar dari komit sebelumnya
31. Git reset --campuran
32. Perbedaan antara git reset dan git pemulihan
33. Pengantar git diff. Mencetak perbedaan beberapa komitmen ke konsol
34. Contoh praktis penggunaan git diff
35. Cara menampilkan diagram cabang di terminal. Git log --grafik
36. Kami menggabungkan cabang menggunakan git merge. Metode "Perpaduan Sejati"
37. Cara memutar kembali setelah penggabungan
38. Cara menyalin komit tertentu menggunakan git cherry-pick
39. Menggabungkan cabang dengan git rebase
40. Mana yang lebih baik git rebase atau git merge
41. Cara menggunakan file .gitignore
42. Kata terakhir
Tata letak tingkat lanjut - CSS/SASS
1. Tentang apa blok ini?
2. Cara kerja variabel SASS
3. Bagaimana mixin bekerja
4. Bagaimana cara menambahkan argumen ke mixin
5. Apa itu template SASS
6. Bagaimana fungsi SASS bekerja
7. Mengatur file SASS untuk proyek besar
8. 3 cara untuk memposisikan elemen
9. Bagaimana cara kerja pelampung?
10. Membuat sistem jaringan kita sendiri
11. Menerapkan gradien ke teks. Klip latar belakang
12. Cara Membuat Simbol Menggunakan HTML
13. Menganimasikan dan menyelesaikan bagian kedua
14. Cara membuat font ikon Anda sendiri
15. Kami menggunakan properti perspektif untuk mencerminkan perspektif elemen
16. Cara kerja blending mode di CSS
17. Menyelesaikan bagian dengan kartu
18. Cara membulatkan teks menggunakan properti shape-outside
19. Cara kerja filter CSS
20. Cara menambahkan video ke halaman
21. Mengenal Tag Form dan Isinya
22. Menganimasikan formulir
23. Membuat tombol radio Anda sendiri menggunakan CSS
24. Membuat footer situs web
25. Membuat menu navigasi menggunakan CSS murni part-1
26. Menyiapkan transisi kecepatan animasi menggunakan kubik-bezier
27. Menganimasikan hamburger
Desain adaptif
1. Tentang apa blok ini?
2. Cara membuat website responsif
3. Membuat mixin dengan aturan media
4. Adaptasi proyek bagian 1
5. Adaptasi proyek bagian 2
6. Adaptasi proyek bagian 3
7. Apa itu gambar responsif
8. Cara Mengadaptasi Gambar dalam HTML
9. Mari kita adaptasi gambar HTML di proyek kita
10. Adaptasi gambar CSS
11. Beberapa pengeditan situs terakhir
Manajer paket simpul
1. Tentang apa blok ini?
2. Apa itu node.js dan npm
3. Mempersiapkan paket npm pertama untuk digunakan
4. Meluncurkan paket npm pertama
5. Menggunakan gulp dalam proyek kami
6. Cara membuka website di ponsel
Pengantar CSS GRID
1. Tentang apa blok ini?
2. Persiapan
3. Cara membuat templat kisi. Templat kisi
4. Bagaimana unit fr bekerja
5. Cara memindahkan elemen ke sel lain
6. Menempatkan beberapa item dalam satu sel
7. Latihan: Membuat tata letak situs web
8. Contoh seorang guru. Buat tata letak
9. Cara mengganti nama setiap baris dalam kotak
10. Cara Membuat Template Grid Menggunakan Skema Penamaan
11. Apa yang dimaksud dengan grid eksplisit dan implisit?
12. Cara menyelaraskan elemen di dalam sel
13. Cara menyelaraskan grid di dalam wadah
14. Konten Min-Maks
15. Isi otomatis dan Pas Otomatis. Ukuran sel berdasarkan konten
16. Kesimpulan. Taman jaringan
Proyek GRID CSS
1. Tentang apa blok ini?
2. Persiapan
3. Membuat templat kisi bagian 1
4. Membuat templat kisi bagian 2
5. Cara kerja sprite SVG
6. Kami sedang menyelesaikan bagian kedua situs ini
7. Membuat bagian "Banner", bagian 1
8. Membuat bagian "Banner", bagian 2
9. Membuat bagian dengan kartu
10. Membuat galeri
11. Membuat catatan kaki
12. Membuat "Hamburger"
13. Membuat header bagian 1
14. Membuat header bagian 2
15. Kami mengadaptasi situsnya
Sampai jumpa lagi!
1. Selamat tinggal!
Dapatkan sertifikat Anda
1. Tes untuk mendapatkan sertifikat penyelesaian kursus