Html5 Web Tutorial with Folder Structure
Burada gördüğünüz klasör yapısı standart bir Html5 web projesinin ilk halidir. Bazı farklılıklar olabilir. Örneğin css, js klasörleri dist veya assist gibi bir klasör içinde yer alabilir. Fakat temel olan ve benim de tavsiye ettiğim yapı budur. Gelelim bu yapıyı güncel haliyle nasıl kuracağımıza;
Not: Burada bir backhand developer olarak bir proje yaptığınızı varsayıyorum. Yani tamamen işiniz kodlar ile. Bu işi bir program (Adobe XD, Figma vs) yapıyor iseniz zaten bu tarz frontend yazılımlar size kodları hazır halde verecektir.
1. Bir web projesi için kolları sıvadığınızda ilk iş olarak temel yapıyı oluşturmak istersiniz ve bunu güncel araçlarla kurmayı dilersiniz. Ben burada microsoft, nike gibi firmalar tarafından da kullanılan HTML5 Boilerplate'i seçtim. Bu araç size standart yapıyı verecektir.
3. Bu yapıda hazırda yerleşik olmayan ama işimizi kolaylaştıracak Bootstrap framework'ü kendimiz entegre edicez. Böylece son versiyonu kullanmış oluruz.
https://getbootstrap.com/ adresinden indirip upload ediniz. Zaten css ve js olarak iki klasörden oluşmakta. Bunları mevcut olanların içine eklemiş olacaksınız.
4. index.html sayfanızın head bölümünde tüm css'lerin en üstüne bunu ekleyin:
<link rel="stylesheet" href="css/bootstrap.min.css">
5. Bu iki js dosyasını (yok ise popper.min.js indirip upload edin) jquery dosyasının çağırıldığı koddan sonraya ekleyin:
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
6. Şablonunuz hazır. Artık header, content ve footer bölümlemelerinizi yaparak sayfanızı tasarlayabilirsiniz.
Bu yazıda sizlere temel ve güncel bir HTML5 şablonunun nasıl oluşturulacağını anlatmaya çalıştım.
