• Buradasın

    Front-End Programlama Eğitim Videosu: HTML ve CSS ile Tasarım Oluşturma

    youtube.com/watch?v=9I3YC0xZ2Bw

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan front-end programlama eğitim içeriğidir. Eğitmen, Twitter'da front-end'e yeni başlayanlar için bir görsel tasarım sorusu sormuş ve bu videoda bu tasarımın nasıl yapılacağını adım adım göstermektedir.
    • Video, HTML ve CSS kullanarak bir tasarım oluşturma sürecini detaylı şekilde anlatmaktadır. İlk bölümde HTML yapısı oluşturma ve CSS ile tasarım özellikleri (renk, boyut, hizalama, boşluk) ayarlama adımları gösterilirken, ikinci bölümde CSS Flexbox ve after/before pseudo-elementlerinin kullanımı ele alınmaktadır.
    • Videoda flexbox ile div'leri yan yana getirme, justify content center ve align items center gibi hizalama özellikleri, gap ile boşluk doldurma ve repeating linear gradient ile tekrarlanan gradyan ekleme gibi teknikler gösterilmektedir. Ayrıca, CSS bilgisinin geniş olmasıyla birlikte JavaScript öğrenmenin önemi vurgulanmakta ve yeni başlayanlar için kendini zorlayacak örnekler yapmanın gerekliliği belirtilmektedir.
    Front-end Tasarım Sorusu
    • Konuşmacı, Twitter'da front-end'e yeni başlayanlar için bir tasarım sorusu sorduğunu belirtiyor.
    • Soruda gösterilen görselin nasıl yapılacağı sorulmuş ve birçok yorum gelmiş.
    • Konuşmacı, bu videoyu özellikle yeni başlayanlar için hazırladığını, kendisinin de yeni başladığında benzer bir tasarım yapmakta zorlandığını ifade ediyor.
    00:56HTML Yapısı
    • Görselde bir ana bölüm ve bu bölümün kendi içinde ikiye ayrılan iki alt bölümü bulunuyor.
    • Ana bölümün içinde turuncu renkle gösterilen kapsayıcı etiketi ve çocuk etiketleri yer alıyor.
    • Mavi renkli alanlarda herhangi bir etiket (div, span, h6, p, button) kullanılabilir ve pembe ile işaretlenen "before" etiketi de tasarımın bir parçası.
    03:03CSS Sıfırlama
    • CSS dosyasına dahil edildikten sonra tüm elemanlar için genel sıfırlama yapılıyor.
    • "not:style" ve "not:script" etiketleri hariç tüm elemanlar için sıfırlama yapılıyor.
    • Sıfırlama yapıldığında paragraflar yan yana geliyor ve blog veya satırcı seviyesi kavramları kayboluyor.
    04:37Item Etiketi ve Flexbox Kullanımı
    • Item etiketine "display: block" verilerek yan yana gelmesi sağlanıyor.
    • Item içindeki child elemanlara "flex" özelliği verilerek yan yana yerleştiriliyor.
    • İlk child'a "flex-shrink: 1" ve "flex: 1" değerleri verilerek belirli bir genişlik ve kalan alanı doldurma özelliği veriliyor.
    06:38Container ve İçerik Düzenlemesi
    • Item'ın içine "container" adında bir div eklenerek padding verilebiliyor.
    • Container'a "display: block" ve "font-family: Arial, Sans-Serif" özellikleri veriliyor.
    • İlk child'ın içindeki div'e "width: 100%", "height: 50 piksel", "border: 1px solid dd d" ve "border-radius: 10 piksel" özellikleri veriliyor.
    07:54Ortalama ve Mesafe Ayarları
    • İçerik yatay ve dikey olarak ortalama için "display: grid place-items: center" veya "display: flex align-items: center justify-content: center" kullanılabilir.
    • Item'ın içindeki elemanlar arasında mesafe ayarlamak için "gap: 30 piksel" kullanılıyor.
    • H6 başlık etiketine "color: blue", "margin-bottom: 5 piksel" ve "font-weight: bold" özellikleri veriliyor.
    09:22Son Düzenlemeler
    • Son child'ın içindeki paragraf etiketine "display: block", "line-height: 150%" ve "font-size: 14 piksel" özellikleri veriliyor.
    • Body'ye "background-color: light blue" rengi veriliyor.
    • Çizgi oluşturmak için "border: dashed" veya "linear-gradient" kullanılabilir.
    12:02Flexbox Özellikleri
    • Flexbox'in güzelliği, iki div'i yan yana getirdiğinizde hangisi uzunsa öbüründe streç etmesi (uzatması) özelliğidir.
    • Flexbox'ta "items-self-start" özelliği ile elemanlar başlangıçta kalır, "items-self-end" ile ise alta iner.
    • Flexbox'ta "display: flex" özelliği ile elemanlar yan yana veya alt alta getirilebilir.
    13:43Flexbox Kullanımı
    • Flexbox'ta "flex" özelliği ile boşluk doldurulabilir, "justify-content" veya "align-items" ile elemanlar merkeze hizalanabilir.
    • "gap" özelliği ile elemanlar arasında boşluk oluşturulabilir.
    • "repeating-linear-gradient" özelliği ile tekrarlanan gradyan efektleri oluşturulabilir.
    15:18CSS Seçiciler ve Öneriler
    • "item-not-last-child" seçici, son eleman değilse belirtilen elemana etki eder.
    • "not-last-of-type" seçici, en son tip elemanı seçer.
    • Sonuncu veya ilk elemanı seçmek için her zaman bir kapsayıcı içerisine almak daha faydalıdır.
    17:41Front-end Geliştirme Tavsiyeleri
    • Front-end'de öncelikle gördüğün şeyi pixel perfect şekilde dökebiliyor olmanız gerekir.
    • CSS bilgisinin geniş olmasıyla birlikte JavaScript tarafında yapabileceğin şeyleri hayal et ve bunun için çabala.
    • Yeni başlayanlar için kendini zorlayacak örnekler yaparak hayata devam etmek önemlidir.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor