Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web tasarım eğitimidir. Eğitmen, izleyicilere adım adım HTML ve CSS kullanarak web sayfası oluşturma sürecini göstermektedir.
- Video, web sayfasının farklı bölümlerinin (navbar, "Bizi Seç" bölüm, hizmetler section, footer) oluşturulmasını kapsamaktadır. Eğitmen önce HTML etiketlerini (div, section, header, h1 vb.) kullanarak sayfanın yapısını oluşturur, ardından CSS ile bu yapıyı biçimlendirir. Hizmet kartları tasarımı, responsive tasarım için media queries kullanımı ve mobil görünüm için gerekli düzenlemeler detaylı şekilde anlatılmaktadır.
- Eğitimde renk, yazı tipi, konumlandırma, padding, margin, z-indeksi gibi CSS özellikleriyle ilgili kodlar gösterilmekte ve web tasarım, yazılım geliştirme ve markalaşma gibi hizmet kartlarının oluşturulması adım adım açıklanmaktadır.
- 00:01HTML ve CSS ile Web Sayfası Tasarımı
- Video, bir web sayfasının tasarım sürecini göstermektedir.
- Tasarım sırasında HTML ve CSS kodları kullanılarak sayfanın farklı bölümleri oluşturulmaktadır.
- Sayfanın renk ayarları ve düzenlemeleri yapılmaktadır.
- 02:16"Bizi Seç" Bölümünün Oluşturulması
- "Bizi Seç" adlı bir bölüm oluşturulmaktadır.
- Bu bölüm için HTML kodları yazılırken "id" ve "class" özellikleri belirlenmektedir.
- Bölümün başlığı "Hayalinizdeki web sitesini oluşturmak için bizi seçin" şeklinde düzenlenmektedir.
- 05:14Buton Oluşturma ve CSS Ayarları
- "Bizi Seç" bölümünde bir buton oluşturulmaktadır.
- Buton için CSS ayarları yapılıyor: renk, yazı tipi, padding gibi özellikler belirlenmektedir.
- Butona fare üzerine geldiğinde renk değişimi için CSS kodları yazılmaktadır.
- 12:51Alt Menü Oluşturma
- İletişim bilgilerini içeren bir alt menü oluşturulmaktadır.
- Alt menü için "footer" adlı bir section oluşturulmakta ve içine iletişim bilgileri eklenmektedir.
- İletişim bilgileri arasında e-posta ve telefon numarası yer almaktadır.
- 17:51Sosyal Medya İkonları Ekleme
- Alt menüde sosyal medya takip etme seçeneği eklenmektedir.
- Instagram, Twitter ve WhatsApp için ikonlar oluşturulmaktadır.
- İkonlar için CSS ayarları yapılıyor: renk, boyut ve konumlandırma işlemleri gerçekleştirilmektedir.
- 26:57Responsive Tasarım
- Web sayfasının masaüstü ve tablet için responsive tasarımı yapılmaktadır.
- CSS'de media query kullanılarak ekran boyutuna göre ayarlar yapılıyor.
- Menü ve içeriklerin konumlandırması için CSS kodları yazılmaktadır.
- 30:36Navbar ve Header Oluşturma
- Bir section oluşturulup id'si "navbar" ve class'ı "konteyner" olarak tanımlanıyor.
- Header elementi oluşturulup class'ı "now var" olarak belirleniyor.
- İçerisinde div, h1 ve navigation disk gibi öğeler eklenerek navbar yapısı oluşturuluyor.
- 44:50Hizmetler Section Oluşturma
- Hizmetler section'ı oluşturulup id'si "hizmetler" ve class'ı "hizmetler konteyner" olarak tanımlanıyor.
- Header ve içerik için div'ler eklenerek hizmetler kısmının yapısı oluşturuluyor.
- Web tasarım, yazılım geliştirme ve markalaşma gibi hizmetler için kartlar oluşturuluyor.
- 59:24CSS ile Hizmetler Section Düzenleme
- Hizmetler section'ı için CSS kodları yazarak düzenlemeler yapılıyor.
- Header'ın font size, uppercase ve boşluk değerleri ayarlanıyor.
- Hizmet kartlarının pozisyon, transition ve transform özellikleri belirlenerek animasyon efekti ekleniyor.
- 1:12:26CSS Hizmetler Sınıfı Tanımlama
- Nokta hizmetler, ufo nokta hizmet, nokta hizmet, kart hizmet gibi sınıflar tanımlanıyor.
- Transform özelliği kullanılarak rotasyon işlemi yapılıyor ve 180 derece dönüş uygulanıyor.
- Nokta hizmetler info ve nokta hizmet front sınıfları için font size, font weight ve marjin değerleri ayarlanıyor.
- 1:15:16Sınıf Özelliklerini Düzenleme
- Class özelliği kullanılarak hizmet front sınıfı tanımlanıyor ve font size, font weight değerleri ayarlanıyor.
- Mobil görünümde hizmetler yan yana yerleştirilecek, ancak şu anda mobil görünüm olarak gösteriliyor.
- Nokta hizmetler hizmet over ve hizmet kart sınıfları için transform rotate işlemi uygulanıyor.
- 1:19:03İçerik Düzenleme ve Resim Ekleme
- Nokta hizmetler hizmet kart hizmet back sınıfı için font size, marjin ve line değerleri ayarlanıyor.
- Hizmetlerin üç farklı görünümü oluşturuluyor ve ortadaki hizmetin rengi koyu yapılıyor.
- Hizmet front sınıfına background image özelliği ekleniyor ve resim URL'si belirleniyor.
- 1:23:13Son Düzenlemeler
- Hizmetler hizmetler info nokta hizmet iki hizmet hizmet bot sınıfı için content, position, width ve height değerleri ayarlanıyor.
- Background cover özelliği belirleniyor ve z indeksi değeri değiştiriliyor.
- Ortadaki hizmetin diğerlerine göre daha koyu renkte gösterilmesi sağlanıyor.