Webflow'ta web siteleri oluşturma - kurs 31.900 RUB. Uprock'tan, 4 aylık eğitim, tarih 27 Kasım 2023.

instagram viewer

TEORİ

giriiş

Bu derste kurs hakkında bilgi edinecek ve eğitimin nasıl ilerleyeceğini öğreneceksiniz. Webflow'un ücretsiz ve ücretli planlarının özellikleri ve amaçları hakkında bilgi edinin. Ayrıca analizden lansmana kadar bir proje üzerinde çalışmayı nasıl yapılandıracağınızı da öğreneceksiniz.

• Bu kurs neyle ilgili?
• Kurs nasıl işliyor?
• Planlar ve oranlar
• Site Planları
• Hesap Planları
• İnceleme ve Yerleşim Analizi
• Düzen kabul kontrol listesi
• Çalışma planı
• Mizanpajın mizanpaj için hazırlanması
• Görüntüleri dışa aktarın ve optimize edin
• Diğer dosyaların hazırlanması

TEORİ

Web yapısı

Bu derste bir web sayfasının temel öğelerini ve Webflow hizmetinin üzerinde çalıştığı blok düzeninin ilkelerini öğreneceksiniz. Temel bilgiler, web geliştirmenin temel terminolojisini anlamanıza yardımcı olacaktır. Bir web sayfası hiyerarşisinin ne olduğunu ve nelerden oluştuğunu öğreneceksiniz. Öğe yapısının Webflow'ta nasıl oluşturulduğunu ve görüntülendiğini anlamak için Gezgin panelini keşfedin.

• Blok düzeni ve temel HTML ve CSS
• Site öğelerinin hiyerarşisi
• Gezgin paneli
• Alıştırma: Site yapısını planlama

TEORİ

Proje oluşturma ve yayınlama

Bu dersimizde Webflow web sitesine nasıl kayıt olup proje oluşturacağınızı, proje sayısı ve projedeki sayfa sınırlamalarını öğreneceksiniz. Webflow hizmetinde hangi çalışma modlarının mevcut olduğunu anlayacaksınız. Ayrıca, Yayınla açılır panelini kullanarak hesabınızı nasıl etkinleştireceğinizi ve sitenizi nasıl yayınlayacağınızı da öğrenin.

• Bir projenin kaydedilmesi ve oluşturulması
• Web sitesi yayınlama
• Projeyi paylaş
• Bir projeyi klonlama
• Özel bir şablonu klonlama

TEORİ

temel ayarlar

Proje Ayarları modunda temel proje ayarlarına aşina olacaksınız. Sonuç olarak projeyi kurun, görüntüleri klasörlere yükleyin ve UI Kitini oluşturun.

• Proje ayarları
• Alanınızı bağlama
• Site dosyaları
• Genel proje ayarları
• Temel stilleri ayarlama
• Görüntüler yükleniyor
• Ana öğelerden oluşan UI Kiti

PRATİK

Elementler

Bu derste bir site sayfasına öğe eklemenin yollarını ve hangi öğelerin kendi türlerinde bulunamayacağını öğreneceksiniz. Bir web sitesi oluşturmak için hangi temel öğelerin mevcut olduğunu ve bunların amaçlarının ne olduğunu öğrenin. Son olarak site yapısını oluşturun ve öğelere içerik ekleyin.

• Öğe ekleme
• Ana unsurlara genel bakış
• İşlevsel öğelere genel bakış
• Öğelerin kişiselleştirilmesi
• Alıştırma: Sitenin ana yapısının oluşturulması
• Alıştırma: Öğeler ve sınıflar ekleme

PRATİK

Öğe stilleri

Sınıflar ve Birleşik Sınıflar gibi kavramlara aşina olacak ve bunların amaçlarını öğreneceksiniz. Sonuç olarak Bölümlere, Kapsayıcılara, Görsellere, Metinlere sınıflar ekleyin.

• Genel İlkeler
• Stil panelinin basit bölümlerine genel bakış
• Stil Yöneticisi paneline genel bakış
• Eleman durumları
• Alıştırma: Öğelere İçerik Ekleme

PRATİK

Stil ayarları. 1 bölüm

Stil panelinin kompozisyonunu inceleyecek ve öğelerin birbirine göre düzenini yapılandırmak için kullanılan Düzen bölümünü inceleyeceksiniz.

• Stil Paneli: Düzen Bölümü
• Alıştırma: Bölüm 1 ve 2'nin ayrıntılı düzeni

PRATİK

Stil ayarları. Bölüm 2

Stil panelinin kompozisyonunu keşfetmeye ve ideal olan, öğelerin düzenlenme şeklinden sorumlu olan Izgara öğesini incelemeye devam edeceksiniz. Mobil cihazlarda kolayca kartlara dönüştürülebilen tablolar da dahil olmak üzere çeşitli karmaşık ızgara düzenleri oluşturmaya uygundur ekranlar.

• Stil Paneli: Izgara Elemanı
• Alıştırma: Bölüm 3 ve 4'ün ayrıntılı düzeni

PRATİK

Stil ayarları. Bölüm 3

Stil panelinin kompozisyonunu incelemeye ve öğenin boyutunu belirlemenize olanak tanıyan Boyut bölümünü incelemeye devam edeceksiniz. minimum ve maksimum genişlik ve yükseklik değerlerini belirleyin ve sınırların ötesine geçen alt öğelerin davranışını özelleştirin ana öğe.

• Stil Paneli: Beden Bölümü
• Alıştırma: 5. ve 6. bölümlerin ayrıntılı düzeni

PRATİK

Site sayfaları

Sayfalar paneline bir göz atacağız. Hangi tür sayfaların mevcut olduğunu ve bunların nasıl özelleştirileceğini öğrenelim. Sonuç olarak sitenin 7-8 bölümünü oluşturacaksınız.

• Site sayfaları
• Alıştırma: 7. ve 8. bölümlerin ayrıntılı düzeni

PRATİK

İkincil işlevler

Bir proje üzerinde çalışırken ve eğitim materyalleri bulurken size yardımcı olacak ek özellikler hakkında bilgi edineceksiniz. Sonuç olarak sitenin 9-10 bölümünü oluşturacaksınız.

• Tasarımcı modunda yardımcı işlevler
• Pratik. Bölüm 9 ve 10'un ayrıntılı düzeni

PRATİK

Semboller ve Desenler

Yinelenen blokları ve içeriği yönetmek için Webflow'taki öğelerden veya öğe gruplarından nasıl Semboller oluşturacağınızı öğrenin. Sonuç olarak, gezinme menüsünü ve Gezinti Çubuğunu düzenleyecek, bağlantı bağlantıları kuracak ve Menü ve Alt Bilgi için semboller oluşturacaksınız.

• Semboller paneline genel bakış
• Hazır Düzenlerin gözden geçirilmesi
• Karakter Oluşturma
• Pratik

PRATİK

Uyarlanabilir düzen

Bu derste uyarlanabilir düzenin temellerini öğrenecek ve "Kesme Noktaları" kavramına aşina olacaksınız. Sonuç olarak, uyarlanabilir bir tablet ve mobil sürüm, büyük ekranlar için uyarlanabilir bir sürüm ve uyarlanabilir bir menü oluşturun.

• Uyarlanabilir düzenin temelleri
• Kesme noktaları
• Uyarlanabilirlik kontrolü
• Mobil ekranlar için web sitesi uyarlaması
• Büyük ekranlar için web sitesi uyarlaması
• Uyarlanabilirliğin test edilmesi

GENİŞLETİLMİŞ ÖZELLİKLER

Animasyon. 1 bölüm

Animasyonun genel ilkelerini öğrenecek, bağlantı düğmelerine ve diğer fareyle üzerine gelme öğelerine nasıl animasyon uygulanacağını ve ilk ekrana nasıl animasyon uygulanacağını öğreneceksiniz.

• Genel Animasyon İlkeleri
• Tetikleyiciler
• Tetikleyicileri ayarlama
• Fareyle üzerine gelindiğinde öğelerin animasyonu
• Çapa bağlantıları

GENİŞLETİLMİŞ ÖZELLİKLER

Animasyon. Bölüm 2

Küresel animasyonun ne olduğunu öğreneceksiniz. Sonuç olarak, onu nasıl oluşturacağınızı öğrenin.

• Küresel animasyon
• Bileşen Animasyonu
• Sayfayı yüklerken ve kaydırırken animasyon

GENİŞLETİLMİŞ ÖZELLİKLER

Üçüncü taraf kodunu ekleme

Neden üçüncü taraf kodunu eklemeniz gerektiğini anlayacaksınız. Embed bileşenini tanıyın. Yorum hizmetlerine veya harita widget'ına bağlanma gibi üçüncü taraf kodlarını nasıl entegre edeceğinizi öğrenin. Uygulamalı olarak kart kodunun nasıl girileceğini öğrenin.

• Bileşeni Göm
• Sayfa ayarlarına kod ekleme
• Proje ayarlarına kod ekleme
• Öğe ayarlarına kod ekleme (Özel Özellikler)
• Haritanın siteye eklenmesi

GENİŞLETİLMİŞ ÖZELLİKLER

Analitik ve SEO

Web analitiği ve SEO'nun ne olduğunu ve neden gerekli olduklarını öğrenin. Analytics'i nasıl bağlayacağınızı ve SEO sayfalarını nasıl ayarlayacağınızı anlayacaksınız.

• Analytics'i Bağlama
• Yandex Metrica ile Google Analytics'i Bağlama
• Sayfa ayarlarında SEO'yu ayarlama

GENİŞLETİLMİŞ ÖZELLİKLER

Projenin tamamlanması

Bir kez daha web sitesi oluşturmanın tüm aşamalarını geçin. Siteyi nasıl onaylayıp müşteriye aktaracağınızı anlayacaksınız. Bir web sitesini Webflow barındırmadaki bir etki alanına nasıl bağlayacağınızı, web sitesini nasıl yükleyeceğinizi ve barındırma sisteminize nasıl yükleyeceğinizi öğrenin.

• Siteyi kontrol etmek için kontrol listesi
• Projenin onaylanması ve müşteriye teslimi
• Bir web sitesini Webflow barındırmadaki bir etki alanına bağlama
• Siteyi yükleme ve hostinginize yükleme

GENİŞLETİLMİŞ ÖZELLİKLER

Bonus

Mezuniyet projesi