Web sitelerinin düzeni ve web geliştirme. İleri düzey Web Geliştirme - kurs 1990 ovmak. Stepik'ten, 131 ders eğitimi, Tarih: 1 Aralık 2023.
Miscellanea / / December 04, 2023
Merhaba!
Benim adım Dima. Ve sizi web sitesi oluşturma ve düzeninin derinliklerine dalmaya davet ediyorum!
Bu kurs, temelleri zaten bilen ancak iyi bir web sitesi oluşturma seviyesinden mükemmel bir seviyeye geçmek isteyenler içindir.
Kurs, HTML ve CSS'nin temellerini bilen ancak gerçek profesyonel geliştiriciler tarafından kullanılan birçok teknik, geliştirme tekniği ve teknolojinin hala mevcut olduğunu bilenler içindir.
Eğer bu size tanıdık geliyorsa bu kurs tam size göre)
CSS aracılığıyla modern animasyonlarla web sitelerinize hayat verin
Sitelerimize dinamikleri kazandırarak başlayacağız, yani animasyon yapacağız. Saf CSS kullanarak düğmelere, metinlere ve başlıklara nasıl animasyon uygulayacağımızı, kart animasyonları oluşturmayı, dinamik bir gezinme menüsü oluşturmayı ve tüm bunları tek bir JS kodu satırı olmadan, yalnızca saf CSS kullanarak nasıl oluşturacağımızı öğreneceğiz.
Bu kurs, duyarlı tasarımdaki en iyi uygulamaları içerir.
Sitelerinizi duyarlı bir şekilde tasarlamanın yeni yollarını ve püf noktalarını öğrenecek, medya sorgularını tanımlamak ve yazmak için yeni teknikler kullanacak ve bunları nasıl yapacağınızı öğreneceksiniz. Sitenizin herhangi bir mobil cihazda her zamankinden daha iyi görünmesi için yalnızca bir CSS özelliğini değiştirerek tüm sayfa öğelerini uyarlayın cihaz
Modern ön işlemcilerin tüm inceliklerini ve avantajlarını öğrenin
SASS ön işlemcisinin karışımlar, değişkenler ve işlevler gibi tüm yeteneklerini kullanarak web sitenizin oluşturulmasını nasıl birkaç kat hızlandıracağınızı öğreneceksiniz.
NPM'yi kullanmanın temel temelleri
Ayrıca her profesyonel geliştirici için gerekli eklentileri içeren NPM paketleri, bize web sitelerini her zamankinden daha hızlı ve daha verimli bir şekilde oluşturma ve optimize etme fırsatı verecektir.
Git sürüm kontrol sistemi gelişiminizde size yardımcı olacaktır
Ek olarak git sürüm kontrol sistemiyle çalışmak için gerekli temel bilgileri de öğreneceksiniz, böylece her zaman elinizin altında olur. En son ne kadar berbat durumda olursanız olun, sitenizin doğru sürümüne geri dönme yeteneği siteyi güncelleyin)
Portföyünüz için 2 modern web sitesi oluşturuyorsunuz
Bu kurs uygulamaya dayalıdır ve adım adım 2 büyük modern proje oluşturacağımız küçük video derslerine bölünmüştür. şamandıra sisteminde - böylece eski projeleri destekleyebilirsiniz ve tabii ki inanılmaz karmaşıklıkta düzenler oluşturmanıza olanak tanıyan GRID CSS sistemi üzerinde.
Ve elbette bu projeleri potansiyel müşterilerinize veya gelecekteki işverenlerinize göstermekten utanmayacaksınız.
Her zaman iletişim halindeyim!
Ve emin olun ki yalnız kalmayacaksınız, çünkü her küçük dersten sonra kodunuzu benimkiyle karşılaştırma veya sadece bir soru sorma fırsatına sahip olacaksınız; cevapların gelmesi genellikle uzun sürmez.
Para iade garantisi!
Ve eğer hala şüpheleriniz varsa, bu kurs, beğenmediğiniz takdirde harcadığınız parayı 30 gün içinde iade etme fırsatı sunuyor.
Bana katılın ve birlikte profesyonel, modern web sitelerinin nasıl oluşturulacağını öğrenelim.
Sınıfta görüşürüz!
9
dersler2016'dan beri orijinal çevrimiçi kurslar oluşturuyorum. Profesyonel olarak Adobe grafik editörleriyle çalışmayı, tasarım ve web geliştirmeyi öğretiyorum.
Merhaba! Benim adım Dima! Övünmek istemiyorum ama mecburum) Özel çevrimiçi kurslarımda dünya çapında 5.000'den fazla öğrenciye ders verdim. 5,00 üzerinden ortalama 4,83 puan alan 2.000'den fazla gerçek yorum! Web tasarımı, web geliştirme ve gerekli yazılımları (Photoshop Illustrator, Figma) öğretiyorum. Öğretmenlik deneyimim, 5 yıllık serbest özel ders vermenin yanı sıra, küresel uzaktan eğitim platformlarında çevrimiçi okullar ve kurslar aracılığıyla öğretmenlik yapmaktan oluşmaktadır. Derslerimin öğrencileri, materyali sıkışıklık yaratmadan, eğlenceli ve ilginç bir şekilde sunmamdaki en iyi niteliklerimi not ediyorlar.
Hazırlık / Tekrar / İlk animasyonlar
1. Merhaba!) Kurs materyallerini indirin
2. Gerekli yazılımı yükleyin ve yapılandırın
3. Yeni özellik klip yolu. Sitenin ilk bölümünü oluşturmaya başlıyoruz
4. Scout uygulaması işinize yaramıyorsa
5. Alıştırma: Clip-path'i kullanarak şeklinizi oluşturun
6. Mutlak konumlandırmayı kullanarak öğeleri dikey olarak hizalama
7. @KeyFrames ile tanışın. İlk animasyonu oluşturalım.
8. Arka yüz görünürlüğü ve sözde sınıflar aracılığıyla düğmeler oluşturma
9. Sahte öğeler kullanarak bir düğmeyi canlandırma
10. Animasyon doldurma modu. Animasyonun belirli bir noktadan başlatılması.
11. Web geliştirmenin 3 ilkesi
12. PX yerine REM kullanın
Git ve GitHub
1. Bu blok neyle ilgili?
2. Terminaldeki temel komutlar
3. Dosyalar terminal aracılığıyla nasıl düzenlenir?
4. Git sistemini bilgisayarımıza kurun
5. Belirli bir projede git nasıl çalıştırılır
6. İlk taahhüt oluşturma
7. GitHub'a proje gönderme
8. Projenizi GitHub'a gönderirken hatayla karşılaşırsanız
9. Bir projeyi GitHub'a aktarmaya çalışırken oturum açma hatası
10. Alıştırma: Kendi deponuzu oluşturun
11. GitHub deposu nasıl silinir
12. GitHub'dan depolar nasıl indirilir
13. 2 geliştiricinin çalışmasını tek bir depoda taklit ediyoruz
14. Terminaldeki taahhütler hakkındaki bilgiler nasıl görüntülenir? Git günlüğü
15. Şubeler nelerdir
16. Dallar nasıl oluşturulur ve gezinilir.
17. Mini kursun başından itibaren boşluğu -u ve -M notasyonlarıyla kapatıyoruz
18. Ödeme sırasında kaydedilmemiş taahhüt hatası
19. Oluşturulan değişiklikler yeni bir şubeye nasıl aktarılır
20. Birden fazla taahhüt yeni bir şubeye nasıl aktarılır
21. Müstakil kafa durumu nedir? Müstakil BAŞLIK
22. Önceki bir işlemden belirli bir dosya nasıl geri yüklenir
23. Gelişmiş git günlüğü ve git gösterisi
24. Git birleştirmeyi kullanarak dalları birleştirme. Hızlı ileri sarma yöntemi
25. Şubeler nasıl silinir
26. Dizin dosyaları izlenmeyen durumdan nasıl kaldırılır
27. Git sıfırlama --hard. Bir taahhüt nasıl sert bir şekilde geri alınır
28. ORIG_HEAD kullanarak takılıp kalmış bir işlemi bulmanın ikinci yolu
29. Git sıfırlama --soft
30. Git taahhüdü --önceki bir taahhüdün yorumunu değiştirerek değişiklik yapın
31. Git sıfırlama --mixed
32. Git sıfırlama ve git geri yükleme arasındaki fark
33. Git diff'e giriş. Birkaç işlemin farkını konsola yazdırma
34. git diff kullanmanın pratik örneği
35. Şube şeması terminalde nasıl görüntülenir? Git günlüğü --grafik
36. Git merge kullanarak şubeleri birleştiriyoruz. Yöntem "Gerçek Füzyon"
37. Birleştirmeden sonra nasıl geri alınır?
38. Git kiraz toplama kullanarak belirli bir taahhüt nasıl kopyalanır
39. Dalları git rebase ile birleştirme
40. Hangisi daha iyi git rebase veya git merge
41. .gitignore dosyası nasıl kullanılır?
42. Son söz
Gelişmiş düzen - CSS/SASS
1. Bu blok neyle ilgili?
2. SASS değişkenleri nasıl çalışır?
3. Karışımlar nasıl çalışır?
4. Karışımlara argümanlar nasıl eklenir?
5. SASS şablonları nelerdir
6. SASS işlevleri nasıl çalışır?
7. Büyük bir proje için SASS dosyalarını düzenleme
8. Elemanları konumlandırmanın 3 yolu
9. Şamandıra nasıl çalışır?
10. Kendi ızgara sistemimizi oluşturma
11. Metne degrade uygulama. Arka plan klibi
12. HTML Kullanarak Semboller Nasıl Oluşturulur
13. İkinci bölümün animasyonu ve bitirilmesi
14. Kendi simge yazı tiplerinizi nasıl oluşturabilirsiniz?
15. Elemanların perspektifini yansıtmak için perspektif özelliğini kullanırız.
16. CSS'de karıştırma modu nasıl çalışır?
17. Bölümü kartlarla bitirme
18. Shape-outside özelliği kullanılarak metin nasıl yuvarlanır?
19. CSS filtreleri nasıl çalışır?
20. Bir sayfaya nasıl video eklenir?
21. Form etiketini ve içeriğini tanıma
22. Formu canlandırma
23. CSS kullanarak kendi radyo düğmenizi oluşturma
24. Web sitesi altbilgisi oluşturma
25. Saf CSS bölüm-1 kullanarak gezinme menüsü oluşturma
26. Cubic-bezier kullanarak animasyon hızı geçişlerini ayarlama
27. Hamburger animasyonu
Uyarlanabilir tasarım
1. Bu blok neyle ilgili?
2. Duyarlı web siteleri nasıl oluşturulur?
3. Medya kurallarıyla bir karışım oluşturma
4. Projenin 1. bölümünün uyarlanması
5. Projenin 2. bölümünün uyarlanması
6. Projenin 3. bölümünün uyarlanması
7. Duyarlı görseller nelerdir
8. HTML'deki Görseller Nasıl Uyarlanır?
9. Projemizde HTML görsellerini uyarlayalım
10. CSS görsellerinin uyarlanması
11. Birkaç son site düzenlemesi
Düğüm paketi yöneticisi
1. Bu blok neyle ilgili?
2. node.js ve npm nedir
3. İlk npm paketini kullanıma hazırlama
4. İlk npm paketinin başlatılması
5. Projemizde gulp kullanımı
6. Cep telefonunda bir web sitesi nasıl açılır
CSS GRID'e giriş
1. Bu blok neyle ilgili?
2. Hazırlık
3. Izgara şablonu nasıl oluşturulur? Izgara şablonu
4. fr birimleri nasıl çalışır?
5. Bir öğeyi başka bir hücreye nasıl taşıyabilirim?
6. Birden fazla öğenin tek hücreye yerleştirilmesi
7. Alıştırma: Bir web sitesi düzeni oluşturun
8. Bir öğretmen örneği. Bir düzen oluşturun
9. Izgaradaki her satırı nasıl yeniden adlandırabilirim?
10. Adlandırma Düzeni Kullanarak Izgara Şablonu Nasıl Oluşturulur
11. Açık ve örtülü ızgaralar nelerdir?
12. Hücrelerin içindeki öğeler nasıl hizalanır
13. Bir kabın içindeki ızgara nasıl hizalanır
14. Min-Maks içerik
15. Otomatik doldurma ve Otomatik sığdırma. İçeriğe göre hücre boyutları
16. Çözüm. Izgara bahçesi
GRID CSS Projesi
1. Bu blok neyle ilgili?
2. Hazırlık
3. Izgara şablonu oluşturma bölüm 1
4. Izgara şablonu oluşturma bölüm 2
5. SVG sprite'ları nasıl çalışır?
6. Sitenin ikinci bölümünü bitiriyoruz
7. "Banner" bölümünün oluşturulması, bölüm 1
8. "Banner" bölümünün oluşturulması, bölüm 2
9. Kartlarla bölüm oluşturma
10. Galeri oluşturma
11. Altbilgi oluşturma
12. "Hamburger" yapımı
13. Başlık bölümü oluşturma 1
14. Başlık bölümü 2 oluşturma
15. Siteyi uyarlıyoruz
Tekrar görüşürüz!
1. Güle güle!
Sertifikanızı alın
1. Kursu tamamlama sertifikası almak için yapılan test