Bir HTML elemanının genişlik (width) değerini tanımlayabileceğimiz pek çok yol vardır. Örneğin: Width değeri auto olan bir elemanı sayfada kullandığımızda, eleman yatay konumda uygun olan tüm genişlik kadar uzar. (Örnekleri JSFiddle üzerinden paylaşıyor olacağım. Results kısmından çıktılarına bakabilirsiniz) Burada width değerini 2 farklı şekilde belirleyebiliriz: Measurements değerler (100%,200px, 5rem…

Her HTML elemanının bir layout’u bulunmaktadır. Bu layout, bir layout algoritması tarafından hesaplanır. Bunlar layout modları olarak adlandırılır ve 7 farklı layout modu bulunmaktadır: Normal Flow Table layout Float layout Positioned layout Multi-column layout Flexible box layout Grid layout Bir yazı içerisinde tüm bu layout modlarını ele almak zor olacağı…

Alright Safa, can you explain what is the box model in CSS? Birçok CSS özelliğine aşina olmama rağmen girdiğim bir Frontend mülakatında bu soru ile karşılaştığımda açıkçası bir cevap veremedim. Bana sordukları soruyu aynı şekilde onlara sormuştum: Hmm… Box model?? 🙄 🤔 Birkaç ipucu aldıktan sonra içimden “Aaa… Demek buna…

Bu yazının demo projesi GitHub’da bulunmaktadır — Demo projesinin bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. Bugün sizlere React Portal nedir kullanım alanları nelerdir bunlardan bahsetmek istiyorum. Hadi başlayalım! React Portal Nedir? React Portal, bir parent component’e ait bir child componentini, bulunduğu DOM hiyerarşisinin dışında render etmenizi sağlar. Peki bu ne demek? …

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin beşinci yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in beşinci challenge’ına bakıyor olacağız. Hadi başlayalım! Target #5 — Acid Rain Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin dördüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in dördüncü challenge’ına bakıyor olacağız. Hadi başlayalım! Target #4 — Ups n Downs Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin üçüncü yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in üçüncü challenge’ına bakıyor olacağız. Hadi başlayalım! Target #3 — Push Button Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. CSS Battle serisinin ikinci yazısıyla tekrar karşınızdayım. Bu yazımızda cssbattle.dev’in ikinci challenge’ına bakıyor olacağız. Hadi başlayalım! Target #2 — Carrom Challenge’ın linki: CSSBattle CSS Code Golfing Game is here!cssbattle.dev Hedeflenen Tasarım:

Bu yazı serisinin kodları GitHub’da bulunmaktadır — Demo kodların bulunduğu GitHub Reposu → Repo Merhaba arkadaşlar. Yeni bir seri ile karşınızdayım. Bu serimizde cssbattle.dev sitesindeki challenge’ları nasıl çözdüğümü, detayları ile beraber göstermek istiyorum. Bu çözümlerimin kesinlikle en ideal çözüm olduğunu iddia etmiyorum :) Sadece kendi çözümlerimi, sizlere detayları ile beraber…