Ten artykuł jest częścią serii Tworzenie aplikacji webowej: Krok po kroku ([part not set] / 19)

Jak wspominałam, w aplikacji tutorialowej skorzystamy z Bootstrapa. A jak wiesz, wszystko z czego korzystamy ma swoje wprowadzenie w ramach serii. Przyszedł czas na naukę Bootstrapa.

Co znajdziesz w artykule?

  • Bootstrap czyli co?
  • Wersja 3.x czy 4.x?
  • Wymagania wstępne (przed nauką Bootstrapa)
  • Materiały do nauki Bootstrapa
  • Proponowana ścieżka nauki
  • Gdzie i jak ćwiczyć?
  • Jak otworzyć plik PSD, jeśli nie dysponujesz Photoshop’em?
  • Materiały & Inspiracje

Poziom: podstawowy/średniozaawansowany

Wymagania wstępne:

Opisane dalej.

Praca domowa:

Wykorzystaj wiedzę przedstawioną w artykule. Stwórz swoją pierwszą stronę z wykorzystaniem Bootstrapa. Powtórz. Powtórz. Powtórz 😉

W razie problemów -śmiało dawaj znać na naszej Tutorialowej Grupie Wsparcia.

 

Czym jest Bootstrap?

Jeden z najbardziej znanych frameworków CSS. Odpowiada za wygląd aplikacji.

Wersja aktualnie stabilna i często używana w projektach to Bootstrap 3.x. Wersja 4.x nadal jest w fazie niestabilnej.

Od czego zacząć naukę? Wersja 3.x czy 4.x?

Tutaj jest o tyle dobrze, że nie różnią się aż tak diametralnie. Do 3.x znajdziesz dużo więcej materiałów, nawet Ci je zapoponuje.

Czego używać w komercyjnych projektach?

Nadal 3.x. W komercyjnych projektach ZAWSZE korzystamy z wersji stabilnych. Wersje alpha, beta, z dnia na dzień mogą się tak zmienić… zaboli. Alpha, beta, itp. to wersje, z których możemy korzystać w swoich prywatnych projektach.

 

Wiem, że nasza aplikacja miała korzystać z Bootstrapa v4. Postanowiłam jednak tym razem cofnąć wersję. Skorzystamy z Bootstrapa w wersji 3.3.7, aktualnej, stabilnej.

Jak wiecie tutorial rozciąga się w czasie i potrwa jeszcze długo. Nie chciałabym co chwilę walczyć z wyglądem aplikacji przykładowej, bo zmieni się wersja. Albo za rok przepisywać tutorial na nowo ze względu na zmiany wprowadzone przez kolejną wersję Bootstrapa. Znając Bootstrapa 3.x bez problemu poradzisz sobie z przejściem na Bootstrapa 4.

 

Tym razem wpis w trochę innej formie niż zazwyczaj. Owszem, zaproponuję Ci miejsca, w których możesz szukać materiałów do nauki Bootstrapa (darmowe kursy, itp.). Ale chciałabym Ci również zaproponować pewną konkretną ścieżkę nauki. Oczywiście darmową 🙂

 

Wymagania wstępne:

  • HTML5 & CSS – bez tego ani rusz.
  • JavaScript, jQuery – przynajmniej podstawy.
  • Masz już na swoim koncie co najmniej jedną stronę napisaną w oparciu o HTML5 i CSS. Jeśli nie – nadrób to! Zawsze powinno się zaczynać od czystego CSS czy JS, nie frameworków!

 

Ok. Spełniasz powyższe wymagania. Co dalej?

Sięgnęłabym po jeden kurs w zakresie tego, jak działać z Bootstrapem. Po to by załapać ogólną ideę. A potem dość szybko przeszła do praktyki.

 

Jaki kurs?

Tu już muszę przyznać, że mam problem. Sama na początku sięgnęłam do Introduction to Bootstrap – A Tutorial na EDX. Byłam bardzo zadowolona. Tyle, że to było dobre 3 lata (?) temu. Kurs opiera się na starszej wersji Bootstrapa, ale zaryzykuję stwierdzenie, że nadal polecałabym go na start, dla zrozumienia podstaw.

Alternatywą jest FreeCodeCamp i Responsive Design with Bootstrap. Również bazuje na wersji 3.x.

Dość ciekawie wygląda również strona KursBootstrap.pl z tutorialem Bootstrapa v4 [PL]. Jest też tutorial dla Bootstrapa 3.x [PL].

Na pewno też mogę polecić darmowy kurs Brad’a Hussey’a – Getting Started with Bootstrap 4 na Udemy (nie dlatego, że go kończyłam, ale kończyłam kurs autora i uważam go za dobre źródło wiedzy). Dostępny również na Youtube.

 

Chodzi o załapanie ogólnej idei działania Bootstrapa. Poszczególne wersje nie różnią się od siebie aż tak bardzo.

Nie utknij zbyt długo w kursach. Nie ma lepszego sposobu na naukę niż praktyka, własny projekt.

 

Praktyka

Zajrzyj do przykładów. Ściągnij Bootstrap w wersji 3.3.7 (tutaj). Przeanalizuj kod przykładów (docs/examples). Pobaw się nimi. Zrozum.

Ściągnij aktualny Starter Template i zacznij prace. Spróbuj samodzielnie zakodować jakiś projekt.

Może jeden z przykładów? (sklonowane repo, docs/examples) Na przykład Dashboard:

bootstrap dashboard

Spróbuj go zakodować samodzielnie.

Rozwiń go.

Pobaw się.

 

A może skorzystaj z bazy PSD (np. psdrepo) i spróbuj zakodować jakąś stronę? Niektóre są nawet oznaczone tagiem bootstrap. Spróbuj zakodować jakiś landing page. Mogą być łatwiejszą opcją na start.

Jest również facebookowa grupa Weekly WebDev Challenge, skupiająca ludzi, którzy realizują opublikowane zadania w zakresie kodowania stron, rozmawiają o rozwiązaniach, itd. I to zarówno strony oparte o Bootstrap jak i bez wykorzystania żadnych frameworków. Świetne miejsce do rozwijania umiejętności w tym zakresie.

 

Jak otworzyć plik PSD skoro nie masz Photoshopa?

Po pierwsze nie musisz go otwierać. Możesz zakodować stronę podobną do docelowej, wrzucić grafiki pozyskane z darmowych źródeł, jak np. Pixabay. Darmowe = licencja CC0.

Możesz skorzystać z Gimp’a – choć nie radzi sobie ze wszystkim.

Możesz też skorzystać z darmowego Adobe Assets.  Musisz tylko założyć wcześniej konto na Adobe (darmowe). Tą ścieżkę polecam chyba najbardziej 🙂

Jak działa Adobe Assets?

Pare innych przydatnych narzędzi znajdziesz również w pliku „Narzędzia pomocne w tworzeniu stron/aplikacji internetowych”  na grupie Programowanie – wsparcie na starcie. Dzisiejszy wpis nie jest poświęcony temu tematowi. W zasadzie wychodzę z założenia, że masz już na swoim koncie jakieś strony, pisane w czystym HTML5 i CSS. A skoro tak – masz już jakiś pakiet narzędzi.

 

Materiały

Większość rzeczy, które potrzebujesz znajdziesz w oficjalnej dokumentacji Bootstrapa.

  • Zapoznaj się z sekcją Getting Started.
  • Dużo czasu spędzisz na pewno w sekcji Components – w zasadzie możesz ją potraktować jako takie „menu”, z którego wybierasz potrzebne elementy i umieszczasz na swojej stronie. Staraj się jednak nie kopiować bezmyślnie fragmentów kodu.

Gdzie szukać przykładów gotowych elementów, przykłady do analizy?

  • Strona Bootsnipp – zawierająca właśnie takie code snippety, nie tylko dla Bootstrapa
  • Oczywiście Codepen

A inspiracji?

Jeśli nie jesteś pewien co w Twoim kodzie nie działa – polecam Bootlint Online – linter dla projektów Bootstrapowych.

 

Gdzie możesz ćwiczyć?

Skoro znasz już HTML5, CSS i JavaScript, zapewne masz już pewne środowisko pracy? Jeśli jednak tak nie jest – zajrzyj do wpisu dotyczącego różnic pomiędzy edytorem tekstowym a IDE, w którym polecałam pare edytorów tesktowych na start. Nie pojawiła się tam opcja Visual Studio Code, który odkryłam całkiem niedawno, a może i Ciebie zainteresować. Na blogu popełniłam już wpis o tym jak zacząć z nim pracować.

 

Podsumowując:

  1. Przerób dowolny kurs Bootstrapa, by zrozumieć „z czym to się je”, o co chodzi.
  2. Ćwicz!
    1. Przejrzyj przykłady na stronie Bootstrapa, przeanalizuj je, zrozum.
    2. Zacznij pracę nad swoją pierwszą stroną opartą o Bootstrapa.
    3. Powtórz
    4. Powrórz
    5. Powtórz
    6. …

Good luck!

 

To jak? Bierzesz się za naukę Bootstrapa?

Series Navigation

POWIĄZANE ARTYKUŁYWIĘCEJ OD AUTORA