Daha işin başındasınız.
Behance.net gibi sitelerde dolaşarak hayal gücüzünü genişletebilirsiniz. Her gün belli aralıklarla kontrol edin. Orada yapılan çizimleri aynısını tekrar edin.
Şuan yaptığınız döküm daha çok kodlama alanında gelişmenizi sağlıyor.
Tasarım haricinde size bazı tavsiyeler vermek istiyorum. Böylelikle kodlama alanında kendinizi daha hızlı geliştirebilirsiniz.
1-
float:left kullanıyorsunuz. Böyle yaparak zaman kaybediyorsunuz.
Flexbox kullanarak istediğiniz şeyleri daha kolayca yapabilirsiniz.
Bkz: Flexbox kullanımı Bkz: Örnek kodlanmış site Kaynak kodlarını inceleyerek nesneleri nasıl konumlandırıldığını görebilirsiniz.
2- Türkçe
classlar tanımlıyorsunuz. İngilizceye de geçebilirsiniz. Türkçe de bazen tıkanma noktasına ulaşabilirsiniz. Tamamen ingilizce yaptığınızda görünüm açısından daha profosyonel seviyeye ulaşabilirsiniz (bunu es geçebilirsiniz o kadar önemli değil).
3-
classları belirlerken
yazibolumu değilde
yaziBolumu veyahutta
textArea şeklinde belirlerseniz daha düzenli olur.
Hocama ek olarak benim tavsiyelerim de bunlar
Dribble, behance gibi siteleri takip edip beğendiğiniz tasarımları sıfırdan webe dökmeye çalışın.
::nth-child() ve flex-box üzerine çalışmalar yapın. CSS Pseudo elementleri kullanın ::before ::after ::first-letter :not() bunlar hakkında ilham almak için
codepen.io aramasına bakabilirsiniz
İç ve dış boşluklar, yazı tipleri, gölgelendirme, renk uyumlulukları vs ui üzerine yazıları takip edin kendinizi rahatlıkla geliştirebilirsiniz.
Tavsiye ettiğim siteler:
UI / UX türkçe kaynak :
https://sherpa.blog/
Tasarım ilhamları :
https://dribbble.com/,
https://www.behance.net/,
https://www.uplabs.com/web ,
https://medium.muz.li/, ThemeForest
Modern yazı tipleri ve kullanılan tasarım örnekleri:
https://typ.io/ ,
https://www.typewolf.com/