Ta strona wykorzystuje pliki cookie w celu prezentacji dopasowanych dla Ciebie treści. Możesz włączyć/wyłączyć obsługę plików cookies w swojej przeglądarce.

Dowiedz się więcej
Mój pierwszy bootcamp z Kodillą [cz. II]

Mój pierwszy bootcamp z Kodillą [cz. II]

Opublikowano  przez Marek Zoellner

Pierwsze spotkanie z bootcampem Kodilli sprawiło mi dużą frajdę, ale pokazało też, że tak naprawdę niewiele umiem i przede mną jeszcze sporo pracy. W kolejnej części mojej relacji opowiem, jak nadrabiając braki, stworzyłem prostą stronę internetową.

Bootcampy z zasady opierają się na praktycznej nauce programowania. Od teorii nie da się jednak uciec, zwłaszcza, jeśli ktoś jest zielony. Moje pierwsze zadanie polegało na zbudowaniu struktury prostej strony internetowej. Nie chodziło o żaden spektakularny efekt wizualny, tylko o poprawne kodowanie.

Mój własny kod

Zanim przeszedłem do kodowania, zacząłem od podstawowej wiedzy w pigułce do przeczytania. Później zapoznałem się z krótką instrukcją, jak wykonać zadanie i wreszcie mogłem przystąpić do pracy w edytorze nad własnym projektem. Tu bootcamp pokazał swoją siłę. Gdybym jedynie czytał podręcznik, pewnie połowy bym w ogóle nie zrozumiał i szybko się znudził. Tymczasem miałem do dyspozycji edytor, w którym od razu mogłem zamieniać słowa w czyny.

“Wstaw do index.html strukturę HTML. Dodaj tytuł strony <title>. Stwórz 3 paragrafy tekstu i nad każdym z nich nagłówek niższego poziomu niż H1. Wypełnij nagłówki i paragrafy treścią”.

Dodawałem, tworzyłem, wypełniałem i w tym samym momencie obok edytora pojawiały się efekty. Toporne to było i niezbyt ładne, i pewnie niejeden darmowy szablon z internetu zapewniłby lepsze wrażenie, ale przecież nie o to chodziło. Miałem przede wszystkim nauczyć się reguł i zrozumieć ich działanie. I rozumiałem je, ale...

Formatowanie, wcięcia, paragrafy

“Wcięcia wyglądają super, ale w 10. linii nie otwierasz paragrafu, podobnie jak w linii 11.” - ocenił Mentor. Wcięcia? Żadnych wcięć nie robiłem. Same się zrobiły. “A czytałeś wprowadzenie do modułu? Co to jest zagnieżdżenie tagów? Przeczytaj wszystko jeszcze raz dokładnie i wtedy wróć do zadania” - pouczył mnie znów Mentor.

Rzeczywiście, przejrzałem tylko szybko tekst z wprowadzeniem i od razu rzuciłem się do kodowania. A przecież formatowanie kodu to jak nauka kaligrafii. Powinniśmy go pisać w taki sposób, żeby każdy inny programista mógł go tak samo przeczytać i zrozumieć. Od razu przypomniał mi się mój kolega, który kiedyś przez dwa tygodnie szukał błędu w swoim kodzie, składającym się z jakichś 3000 linii. Znalazł. Brakowało jednego przecinka. Mój kod miał 34 linie i 12 błędów.

Rozmowy z kaczką

Drugie zadanie polegało na zrobieniu liftingu tej topornej strony, a żeby tego dokonać, musiałem najpierw dowiedzieć się, czym w ogóle jest CSS. To właśnie dzięki niemu można ustawić rozmiar i kolor czcionki, wstawić grafikę w tle i rozmieścić poszczególne elementy, np. ustalając marginesy. To tak, jakby HTML porównać z budowaniem domu do stanu surowego, a CSS do wykończeniówki, czyli malowania ścian i układania paneli podłogowych.

W tej części modułu pojawiło się znacznie więcej nowej wiedzy. I dużo więcej irytacji. Na samego siebie. - Powiedz mi, skoro już wiem, że średnik "zamyka" wartość właściwości CSS, to dlaczego go tam nie postawiłem? - mówiłem do żółtej gumowej kaczuszki, którą pożyczyłem od córki (o mocy kaczki piszę w poprzedniej części relacji.) Żółty ptak jak zwykle milczał, ale ja dzięki tej połowicznej wymianie zdań znalazłem miejsce na dodanie średnika.

semicolon

Dobre praktyki

Uczyłem się reguł, poznawałem klasy i selektory. Mój metaforyczny dom w stanie surowym zaczął nabierać charakteru. Poza szerokością czy wysokością poszczególnych elementów nauczyłem się też ustawiać padding, czyli przestrzeń między zawartością elementu a jego ramką.

Nauczyłem się również korzystać z walidatora kodu, narzędzia, które samo wskazuje błędy. Dzięki niemu nie musiałem już co chwilę pytać Mentora, dlaczego coś nie działa. Chciałem mu się pochwalić w pełni działającym, bezbłędnym kodem, co nadal nie do końca się udawało.

“15 linijka jest pusta, po co?
17, 18 złe wcięcie
21 - 30 złe wcięcie
nie ma zamknięcia <main>”

I tak upłynął tydzień. Przyznaję, starałem się i siedziałem wieczorami czasami nawet do północy. Chciałem się wyróżnić, dlatego oprócz poleceń z zadania kombinowałem na własną rękę. Dodałem swoje tło, wstawiłem nie tylko zdjęcia, ale także i film. W końcu nadeszła wyczekiwana wiadomość od Mentora:

“O to chodziło! Braaaaawo :)”

Wyłączyłem komputer i poszedłem pobiegać. Reset był niezbędny, bo to dopiero początek drogi. Wiedziałem, że z każdym kolejnym tygodniem będzie coraz bardziej pod górkę. Dobra kondycja i czysta głowa na pewno się przydadzą.

A jeśli i Ty chcesz "pobawić się" kodem i zobaczyć jak to wszystko działa, zapraszam do darmowych kursów wprowadzających. Gwarantuję dobrą zabawę :)

Przeczytajcie również:

Umów się na rozmowę z doradcą Kodilli