Bootstrap Nasıl Öğrenilir?
13.09.2024
Bootstrap öğrenme yolculuğunda sen de bize katıl! Derin bir deniz olan Bootstrap’i öğrenmek için yapman gereken her şey bu yazıda.
Bootstrap Nedir?
Bootstrap kullanımı incelenmeden önce Bootstrap’in ne olduğunu anlamak önemlidir. Bootstrap web siteleri ve web uygulamaları geliştirmek üzere tasarlanmış olan açık kaynaklı bir önyüz geliştirme çerçevesidir(framework). İlk Bootstrap örnekleri Mark Otto ve Jacon Thornton tarafından Twitter’da çalıştıkları dönemde tutarlılığı arttırıp bakımı azaltmak için yazılmıştır. En popüler çerçevelerden biri olup duyarlı(responsive), mobil öncelikli web geliştirmeler yapmayı kolaylaştırmak amacıyla oluşturulmuştur. Duyarlı web geliştirme, bir internet sitesinin masaüstü bilgisayar ya da mobil cihaz fark etmeksizin bütün cihazlar üzerinde aynı deneyimi yansıtmasına verilen isimdir.
Bootstrap Nasıl Öğrenilir?
Diğer teknolojilerde de olduğu gibi Bootstrap öğrenirken de tek ve kesin bir yoldan söz etmek mümkün değildir. Herkesin öğrenme alışkanlıkları farklılık gösterebilmektedir. Bazı kişiler dokümantasyon okuyarak daha iyi anlayabildiklerini düşünürken bazıları farklı platformlardan videolar izleyerek daha etkili öğrenme sağlayabilmektedir. Çeşitli eğitim kurumlarından Bootstrap dersleri almak da çok kullanılan bir yöntemdir. Ayrı ayrı olduğunda da bu yöntemlerden verim alınmaktadır lakin daha iyi bir öğrenme sağlayabilmek adına bütün yöntemleri birlikte kullanmak seni en iyi sonuca götürecektir. Bootstrap öğrenirken kullanılan adımlardan bazıları şu şekildedir:
- Bootstrap Öğrenme Nedenini Belirle: Neden Bootstrap öğrenmek istiyorsun, ana motivasyonun ne? Ön yüz geliştiricisi mi olmak istiyorsun? Yoksa hem ön yüz hem arka yüz yazdığın için ön yüz kısmını senin için kolaylaştırması adına mı seçiyorsun?
- Bootstrap’i İndirin: Bootstrap’e erişmek için Bootstrap’in kendi internet sitesine giriş yapıp indirme işlemini gerçekleştirebilirsin.
- Başlamak için Küçük Bir Proje Seçin: O an düşünüp bir fikir geliştirdikten sonra o fikri uygulamaya dökmeye çalışabilirsin. Eğer aklına bir fikir gelmiyorsa endişelenme internetteki proje fikirlerini araştırıp binlerce örnek arasından bir seçim yapman mümkün.
- Öğrenmeye Devam Edin: Teknoloji sürekli gelişen bir ekosistem olduğu için Bootstrap’de de yenilikleri kaçırmamak için makale okumak, videolar izlemek, projeler geliştirmeye devam etmek gerekmekte.
- İnsanlarla İletişim İçinde Olun: Öğrendiklerini başka insanlarla paylaş. Diğer geliştiricilerle Bootstrap kullanımı hakkında fikir alışverişi yapabilirsin. Bir YouTube kanalı açarak daha geniş kitlelerle bir komünite kurmak da her zaman bir seçenektir.
Bootstrap Nasıl Kullanılır?
Bootstrap’i kullanabilmek için onu geliştirme ortamına entegre etmen gerekir. Bunun için bilgisayarında bir klasör oluşturman yeterli olacaktır. Bu klasörün içine derlenmiş CSS ve JavaScript dosyalarını ve Bootstrap’i yükleyeceğin bir HTML dosyayı yüklemen gerekiyor. Ardından Bootstrap’i kullanmak mümkün. Sen de aşağıdaki örneği adım adım takip ederek Bootstrap nasıl kullanılır anlayabilirsin.
İlk olarak bilgisayarda”bootstrap” adında bir klasör oluştur. Bootstrap dosyasındaki derlenmiş CSS ve JavaScript dosyalarını bu klasöre taşı. Aynı klasör içinde başka bir dosya oluşturup bu dosyayı index.html olarak isimlendir. Bu dosyayı bir metin düzenleyicide aç.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Öğrenmek İçin Örnek Uygulama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>
index.html dosyasının içindeki kodlar yukarıdaki örnekteki gibi olmalı. Bu şekilde ilk Bootstrap kodunu oluşturmuş oldun! İstersen bu kodu anasayfa olarak tutup üstüne istediğin eklemeleri yapabilirsin. Bu sayfaya eklemeler yapmak için bir gezinme çubuğu, altbilgi, üstbilgi gibi bileşenleri kullanabilirsin. Projeye bir de gezinme çubuğu eklemesinde bulunmak istersen bu kodu kullanabilirsin:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria
controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Anasayfa <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Özellikler</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fiyatlandırma</a>
</li> <li class="nav-item">
<a class="nav-link" href="#">Hakkında</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Bootstrap Dersler için Hangi Kaynaklar İncelenebilir?
Bootstrap en yaygın olan çerçevelerden biri olduğu için hakkında incelenebilecek içerik, eğitim, kitap sayısı da oldukça fazla. En iyi seçeneklerden bazıları şu şekilde:
- Bootstrap’in kendi sitesi: Bootstrap’in nasıl kullanıldığını anlamanın en iyi yollarından birisi Bootstrap’in kendi internet sitesi. Dokümantasyon kısmına tıklayarak başlangıçtan ileri seviyeye bir çok bilgi edinmek mümkün. Ayrıca sayfadaki örnekler kısmını inceleyerek kullanım alanlarına dair daha geniş bir bakış açısı yakalanabilir.
- Bootstrap: Duyarlı ve Geliştirme Kitabı: Jake Spurlock tarafından kaleme alınmış olan bu kitap yeni başlayanlar için Bootstrap öğrenme yolunda kullanılabilecek iyi bir kaynak. Tipografi, tablolar, butonlar, formlar gibi HTML elementlerini öğrenmeniz mümkün. Bu kitap aynı zamanda web sitelerinde yönlendirme, ekmek kırıntıları(breadcrumbs) gibi ögeleri de incelemekte. Duyarlı web geliştirme konusunda her şey dahil bir kitap arıyorsan doğru kitabın bu olma olasılığı çok yüksek. Eğer sen de kitap kullanarak öğrenmeyi hala sevenlerdensen geliştirme yolculuğunda yanına bir yardımcı buldun demektir.
- Pratik Bootstrap: En Popüler Çerçevelerden Biriyle Duyarlı Bir Şekilde Geliştirmeyi Öğrenin: Panos Matsinopoulos tarafından yazılmış olan bu kitap duyarlı bir yönetici panosu oluşturulan pratik bir proje üstünden öğrenme yolculuğunuza katkı sağlar. Bootstrap’in ızgara sistemini inceleyecek, HTML sayfalarına JavaScript kütüphaneleri entegre edecek, açılır pencereler kullanmayı ve araç ipuçlarını öğreneceksiniz. Yeni başlayanlar bu kitabı anlamakta zorluk çekebilirler. Temel bilgileri başka bir kaynaktan edindikten sonra bu kitabı kullanmak daha doğru bir yol olacaktır.
Bootstrap hızlı ve kolay öğrenilebilir yapısıyla ön yüz geliştiricilerin sıklıkla tercihi olan bir çerçeve. Bu yazıda Bootstrap’e daha yakından baktık ve nasıl öğrenilebileceği, öğrenilirken nelere dikkat edilmesi gerektiği ve hangi kaynaklar üzerinden öğrenilebileceği üstünde durduk. Sen de bir an önce öğrenme yolculuğuna çıkarak Bootstrap komünitesinin bir üyesi olabilirsin. Ön yüz alanında kendini geliştirmeye devam etmek istersen Bootcamp kısmından ön yüz geliştirmeyle ilgili olan bootcampleri inceleyebilirsin. Eğer bilgilerini yeterli buluyorsan ve iş arayışın mevcutsa İş İlanları kısmına göz atabilirsin. Yeni içeriklerden haberdar olmak ve güncel kalmak için Techcareer Discord sunucusuna katılabilirsin.
Sıkça Sorulan Sorular
Junior aday olarak iş ilanlarına başvurabilir miyim?
Evet junior aday olarak da işlere başvuru yapman mümkün. Sitedeki ilanların deneyim şartlarını inceleyerek junior pozisyonuna uygun olanlara başvuru yapabilirsin.
Bootcamp katılım şartları nelerdir?
Sitede temel seviyeden ileriye seviyeye kadar birçok “Bootcamp” içeriği mevcuttur. Bu sebeple bootcamplere başvuru kriterleri farklılık göstermektedir. Sana uygun olan teknolojiyi seçtikten sonra mevcut olan bootcamp kriterlerini inceleyip sana en uygun olanı seçebilirsin.
Bootcamp eğitimleri ücretli midir?
Hayır bootcamp etkinlikleri tamamen ücretsiz bir şekilde sunulmaktadır. Yaklaşık 6-8 hafta arasında süren bu etkinliklerde kendi projelerini yapabilir ve bitirme projesini teslim ettiğin takdirde sertifikanı alabilirsin.
Hiring challenge süresi ne kadardır?
Bu süre görevin niteliğine, yarışmanın zorluk seviyesine ve organizasyonu gerçekleştiren kuruluşun talepleri doğrultusunda değişiklik gösterebilmektedir. Bazı etkinlikler birkaç saat sürerken bazılarının birkaç gün sürmesi mümkündür. Detaylı bilgi almak için mevcut Hiring Challange içeriklerine göz atabilirsin.
