Web site kodlanırken düşünülen gibi olmaması

Ben olsam ya kalemin güzelse kağıda, yoksa Canva ile sayfaların Storyboard denen taslaklarını çizerim. Nasıl görüneceği oradan belli olur.

Sonra gidip Section’lara ayırırsın. Bölersin yani ki bu projeni aşamalara ayırman için de sana yardımcı olur.

Sonra bu böldüğün işleri sanki farkı şeylermiş gibi hayal ederek yapmaya çalış. Parçalayarak total iş yükün gözüne az gibi görüneceğinden üzerine daha iyi titreyerek Section’ları yapar sonra da birleştirirsin.

Bu planlama kısmı sadece görsel değil, hangi CSS’leri kullanacağını önceden belirle ve tepeye hazır stiller oluştur. Yeni bir Section açman gerektiğinde direkt Class olarak tanımla geç, her div açmana bir de ona ayrı stil yazıyorsan o da amatör iş yaptırır adama.

Ben Apple’ın Web sayfalarını yaparak güzel pratik yapıyorum. Ana Sayfa, MacBook sayfası, iPhone sayfası vb. Fotoğrafları bulunuyor zaten.

Renkler için de Renk Paleti siteleri var. Doğru ton kullanmamak da çirkin gösterir onu da oradan çözersin.



Bak 4-5 sene önce şöyle bir şey yapmışım ben mesela.
 
Mesela bir ajansta çalışsanız size tasarım gelir ve siz onu koda dökersiniz. Şu an önünüze hazır bir tasarım gelmediği için yapmanız gereken en iyi şey, her türlü senaryoya hazır olmak. Bunun için de farklı farklı site tiplerini sıfırdan kodlayabilirsiniz. Bu size hem her senaryoyaya karşı alışkanlık hem de belli alanlar için tasarım altyapısı kazandırır. Mesela colorlib sitesine girip orada sunulan demoları tasarlamaya çalışabilirsiniz
 
Tasarım konusunda sıkıntınız varsa zaten bir projede çalışırken tasarım veriliyor diye biliyorum. Ama tasarımı istediğiniz gibi yapamıyorsanız o zaman HTML, CSS ve JavaScript bilginizi gözden geçirin.
 

Katılıyorum. Sectionlara ayır onları kodla parça parça ilerle diyecektim. Fakat asıl yapman gereken behance dribbble gibi sitelerde vakit geçirip Case story okuman. Mesela hangi tasarımlar popüler neler çıkmış şeklinde ilerlemen lazım. UI/UX içinde çok fazla ders var yabancı kaynakların başına oturup 1 ayını versen bu dediklerimi yapsan neyi nasıl yapmalısın işte nasıl bir tasarım kullanılabilir onu anlayabilirsin.

Tasarımını kod dökme kısmı ise tamamen pratik zamanla olacak bir şey ama sen şimdi tam anlamıyla Flex konusunu bilmiyorsan. Div yerleştiremiyorsan gidip onu tam anlamıyla öğreneceksin. Özellikle tasarımı koda dökemeyenlerin büyük kısmının sorunu Flex konusunu anlamamaları oluyor. Bunun için Flexbox Froggy sitesine bakabilirsin. Ama ben buradan verim alamadım proje yaparak kendim geliştim.

CSS aslında bayağı basit bir dil sadece pratik yapıp sırayla ilerlemeniz lazım. Şuna bakın buna bakın diyecektim ama önce bir Flex konusuna bakın.
 
Front-end geliştirici genellikle tasarımı yapmaz. Front-end geliştirici gelen tasarımı koda döker ve farklı ekranlar için optimizasyonunu sağlar.

Kendinize önce yapması basitten zora doğru siteler seçip replikasını yapmaya çalışın.

Örnek: Apple/Samsung sitesi basit kategoride sitelerdir.
Blog siteleri biraz daha karışık sayılabilecek sitelerdir.
Forumlar, E-Ticaret siteleri çok daha karışık sayılabilecek sitelerdir.

Bence bu sırayla tek tek sitelerin replikasını yapmaya başla. Orijinal site ile arasında animasyon, akıcılık ve performans karşılaştırması yap derim.
 
Html için yazılım denemez. Senin sorunun ise bir seyleri öğrendiğini sanman olabilir. Baska siteleri inceleyerek benzerlerini yapmaya çalışabilirsin. Pratik yaptıkça geliseceksin ve işe baslamadan neyi nasil yapabileceğin aklinda canlanacaktir. Ayrica html + css ogrendikten sonra JS üzerinden giderek React öğrenebilirsin.

 

Görsel komikmiş katılıyorum. HTML bir dil evet ama o kadar az şey var ki öğrenmeniz gereken pek kabul görmüyor dil olarak.
 

Evet onu zaten biliyorum hocam oradan öğrenmiştim Flex konusunu
 
Hepinize sonsuz teşekkür ederim. Bugün proje yapmaya başladım. Peki bu yaptığım projeler kötü bile olsa GitHub hesabıma yüklemeli miyim? Bana bir avantajı olur mu? Bir işe gireceğim zaman GitHub hesabıma bakıyorlar mı?

Hocam bir arkadaşım her zaman tasarım verilmez demişti.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…