girls.js – darmowe warsztaty z JavaScript dla kobiet

Warsztaty girls.js

Warsztaty girls.js

Girls.js – darmowe warsztaty z JavaScript dla kobiet

Jak już pisałam w poprzednim poście jestem główną koordynatorką darmowych warsztatów z JavaScript w Krakowie. Inicjatywa nosi nazwę girls.js i została zapoczątkowana w Warszawie.

Podczas pierwszej krakowskiej edycji zapewniamy miejsca dla 9 uczestniczek. Rekrutacja dobiegła już końca, ogłosiliśmy już listę szczęśliwych warsztatowiczek. Warto nadmienić, że został pobity w liczbie osób na jedno miejsce na warsztatach – aż 15,44 kandydatek! Pokazuje to jak bardzo potrzebne są takie eventy i jak dużo kobiet jest zainteresowanych wzięciem udziału w warsztatach. Mają one mnóstwo energii i chęci do nauki, co widać po przesłanych do nas wioskach. Wiem, bo wszystkie je czytałam, a było ich sporo bo aż 139, z czego większość pytań była opisowa.

Materiały szkoleniowe

Podczas jednodniowych warsztatów mentorzy pomajagą stowrzyć dziewczynom interaktywną galerię – materiały są ogólno dostępne i każdy może się z nich uczyć. Na każdego mentora przypadają 3 dziewczyny, a warsztaty trwają 8h. Wspólnie będziemy poznawać podstawy JavaScriptu i mamy zamiar się bardzo dobrze przy tym bawić!

Dlaczego nie zdecydowałam się być mentorką?

Na codzień pracuję jako Junior Frontend Developer, jednak nie zdecydowałam się na bycie mentorką podczas pierwszej edycji girls.js. Może odzywa się trochę syndrom oszusta, który mówi mi, że wciąż za mało umiem. Uznałam, że podczas tej edycji zajmę się głównie koordynacją (rekrutacja, szukanie sponsorów, organizacja sali, mentorów, kateringu itd.). Sprawia mi ogromną radość. Czasami warto wytknąć nos poza edytor kodu ;). Myślę, że podczas tej edycji nasza krakowsta ekipa nabierze doświadczenia i podczas kolejnej edycji będziemy mogli przygotować się na większą ilość uczestniczek. Wówczas i ja odważę się zostać mentorką. 🙂

Kilka cytatów z wniosków <3

Programowanie jest dla mnie bardzo satysfakcjonujące. Próbuję się uczyć go samodzielnie, ale nie jestem pewna czy idę w dobra stronę tzn. czy uczę się na pewno tego co mi się przyda. Niezmiernie podoba mi się również inicjatywa zachęcania kobiet do rozpoczęcia programowania. Uważam że mają one wielki potencjał! Chciałabym poznać inne kobiety, które pasjonuje programowanie i może nawet nawiązać nowe przyjaźnie

Zdaję sobie sprawę, że będąc w moim wieku(37 lat) może być mi trudno zacząć pracę od nowa w branży, gdzie dominują młodzi ludzie i na dodatek jest mało kobiet. Ale właściwie dlaczego nie spróbować?  Mam nadzieję, że ten kurs będzie dużym krokiem w stronę realizacji tego marzenia, planu.

Od jakiegoś czasu chodziła mi po głowie myśl o przebranżowieniu. Myślałam, że to pod wpływem mody, ale raz po raz powracała coraz silniejsza. W końcu postanowiłam zrobić kilka kursów na udemy i codecademy… i się zachwyciłam! Wtedy postanowiłam zmienić branżę. Tak na dobrą sprawę jestem na samym początku drogi, a przede mną lata nauki… Ale hej, dla mnie to jest fantastyczna wiadomość! Warsztaty to dla mnie kopniak i niesamowita bomba motywacyjna, żeby ruszyć mocno do przodu i się nie poddawać. I poznać fajnych ludzi.

Fajnie, że w końcu będziecie działać w Krakowie, czekałam na Was!

girls.js Łódź

Z rekrutacją ruszamy 7 maja (o północy w nocy z niedzieli na poniedziałek). Potrwa ona do 20 maja. Same warsztaty odbędą się w sobotę, 16 czerwca i mamy na nich minimum 9 miejsc.

girls.js w Twoim mieście?

Co ciekawe zgłaszały się do nas dziewczyny, nie tylko z Krakowa, ale i z innych miast. I ciągle dostajemy pytania: kiedy warsztaty we Wrocławiu, Białymstoku i innych miastach. Jako koordynatorka serdecznie zachęcam do zgłaszania się do naszej organizacji, chętnie wesprzemy inicjatywę w kolejnych miejscach.

Co dajemy na start? Materiały szkoleniowe, które stworzyliśmy. Pełne know-how, wsparcie naszych trenerów i trenerek, nasze kontakty i doświadczenie, informacje i promocję na naszej stronie i Facebooku. Kolejne miasta stają się częścią kaczuszkowej rodziny. Nie mając jednak dobrej znajomości specyfiki danego miasta, nie skoordynujemy logistyki i organizacji całego wydarzenia – to należy do inicjatorek lub inicjatorów tamtejszej edycji. Nie kontrolujemy, staramy się jak najmniej narzucać, wszystkie wątpliwości omawiamy w atmosferze zaufania. Serdecznie was zachęcamy do działania. Na początku może się to wydawać trudne, ale…

…z własnego doświadczenia mogę powiedzieć, że uznaję maksymę „better done, than perfect”. Chodzi głównie o dobrą zabawę, poznawanie nowych osób i dzielenie się swoją pasją.

girls.js Kraków odbędzie się 11 – 12maja. 11 maja czeka nas wieczór integracyjny, a 12 maja odbędzie się oficjalna część warsztatów. Jedna z organizatorek jest fotografem, więc możecie liczyć na relację z wydarzenia.

girls.js Kraków

Warsztaty girls.js

 

Warsztaty girls.js

Mogę oficjalnie ogłosić, że już niebawem w odbędą się warsztaty girls.js! Warsztaty były już organizowane w Warszawie, Łodzi, Poznaniu, ale jeszcze nie było ich w Krakowie, stąd zdecydowałam się wesprzeć tą inicjatywę i zająć się jej organizacją.

Czego można się spodziewać?

  • 9 uczestniczek
  • 3 mentorów i mentorek
  • 1 dzień pełny energii, wiedzy i praktyki

Darmowe warsztaty z JavaScriptu odbędą się w siedzibie firmy creativestyle na krakowskim Zabłociu, dnia 12 maja 2018. Dzień wcześniej, 11 maja, spotkamy się na wieczorze integracyjnym 😉

Jeśli chcesz dowiedzieć się więcej o girls.js i zobaczyć jak wyglądały poprzednie edycje zapraszam na naszą stronę.

Zgłoszenia na warsztaty można przysyłać będzie można od 13 kwietnia.

Jako główna koordynatorka krakowskiej edycji serdecznie zapraszam! W razie pytań pozostaje do Waszej dyspozycji 😉

 

 

Nieudane rozmowy kwalifikacyjne – co można z nich wynieść?

nieudane rozmowy kwalifikacyjne

nieudane rozmowy kwalifikacyjne

Od jakiegoś czasu starasz się o swoją pierwszą pracę jako programista / programistka, ale jeszcze nie udało Ci się jej dostać?

Ten artykuł jest dla Ciebie! 🙂

Na rynek pracy wkracza coraz więcej osób, które chcą pracować jako programiści. W internecie jest wiele darmowych i ciekawych materiałów do nauki różnych języków programowania. Pojawia się mnóstwo intensywnych kursów stacjonarnych, weekendowych warsztatów oraz jednodniowych szkoleń.

Rynek pracy jest obecnie dość mocno konkurencyjny jeśli chodzi o stanowiska juniorskie. Ale nie ma rzeczy niemożliwych! Sama przeszłam taką ścieżkę: zupełnie od zera do Junior Frontend Developera (moją historię przeczytasz w tym artykule). Przez kilka miesięcy próbowałam dostać pracę, miałam wstępne telefoniczne rozmowy kwalifikacyjne, a także chodziłam na rozmowy do różnych krakowskich firm. Kilka rozmów poszło mi słabo, stąd zaczęłam się zastanawiać co mogę wynieś pozytywnego z takich sytuacji. Oto kilka moich wskazówek.

Co można wynieść z nieudanej rozmowy kwalifikacyjnej?

1. Nowe umiejętności twarde

Na rozmowach kwalifikacyjnych pojawiają się pytania prostsze i trudniejsze. Jest bardzo prawdopodobne, że nie będziesz znać odpowiedzi na wszystkie pytania i nie ma w tym nic złego. Po rozmowie zapisz rzeczy, o których nie słyszałeś(aś), albo nie wiesz dokładnie jak z nich korzystać. Koniecznie poczytaj na ten temat. Następnym razem zabłyśniesz nowo zdobytą wiedzą! To samo możesz zrobić w przypadku pytań, na które twoja odpowiedź nie była do końca satysfakcjonująca. Postaraj się zgłębić dane zagadnienie i przygotować bardziej wyczerpujące wypowiedzi.

2. Poproś o feedback

Zapytaj osoby, która przeprowadzała z tobą rozmowę kwalifikacyjną dlaczego nie zostałeś(aś) przyjęty(a) na to stanowisko. Poproś o code review zadania rekrutacyjnego. Dowiedz się gdzie masz braki i co według osoby rekrutującej musisz się jeszcze douczyć, żeby spełnić wymagania.  To pomoże ci w podjęciu kolejnych kroków i zwiększy twoje szanse na kolejnej rozmowie.

3. Poproś o ciekawe materiały do nauki

Ludzie, którzy są bardziej doświadczeni często mogą podzielić się ciekawymi materiałami. Osoba, która przeprowadzała z tobą techniczną rozmowę kwalifikacyjną ma pojęcie o twoim poziomie wiedzy i może dać ci spersonalizowane porady oraz wartościowe materiały (polecić dobrą książkę, adekwatny kurs).  W ten sposób oszczędzisz czas na szukanie wartościowych treści. Nie zapomnij podziękować za feedback i poświęcony ci czas. 😉

4. Uodpornij się na odmowę

Niedawno obejrzałam inspirującego TEDtalk-a na temat doświadczania odmowy ze strony innych ludzi. Jia Jiang opowiada jak pokonał swój strach przed byciem odrzucony. Przez 100 dni szukał okazji by ktoś mu czegoś odmówił (często prosił o absurdalne rzeczy). W ten sposób zaczął przełamywać swój strach i bariery.

Zobacz koniecznie to wystąpienie:

5. Nikt cię nie przekreśla na zawsze

Dostałeś już jedną negatywną odpowiedź? Co ty na to żeby za jakiś czas znowu odezwać się do tej firmy. Pokazać, że dalej ci zależy, że przez ten czas zdobyłeś(aś) nowe umiejętności, stworzyłeś(aś) ciekawy projekt, wzbogaciłeś(aś) swoje portfolio. Nikt nie przekreśla cię na zawsze.

6. Spróbuj przejąć kontrolę nad kolejną rozmową

W tym artykule piszę jak jako osoba starająca się o pracę możesz poprowadzić rozmowę tak, aby wypaść jak najlepiej.  Wymaga to praktyki oraz eksperymentowania, ale myślę, że warto spróbować. Sama kiedyś zajmowałam się rekrutacją programistów, stąd dzielę się moimi ciekawymi spostrzeżeniami.

Na koniec

Pamiętaj jak duże postępy już poczyniłeś(aś). Nawet jeśli dostaniesz negatywną odpowiedź w sprawie pracy to nie jest koniec świata. Próbuj dalej. Nie traktuj odmowy jako porażki, traktuj to jako eksperyment, ucz się i dąż do swojego celu. Kiedyś ktoś mi powiedział, że jeśli będziesz pragnąć czegoś bardzo mocno i dążyć do tego ze wszystkich sił, to osiągniesz to.

Powodzenia na kolejnej rozmowie! 😉

4Developers Łódź – relacja z konferencji

4Developers identyfikator

4Developers identyfikator

Po raz pierwszy blog SowaProgramuje został patronem medialnym konferencji! Chciałam się podzielić moim wrażeniami z regionalnej edycji Festiwalu Technologicznego 4Developers Łódź.

Podczas konferencji wyróżnione były 4 ścieżki tematyczne związane ze światem IT: JVM (Java Virtual Machine), JavaScript, Databases oraz Agile. Nie było obowiązku ani zapisów na konkretną ścieżkę. Można było uczestniczyć w dowolnych prelekcjach, dlatego myślę, że każdy znalazł coś dla siebie. Dodatkowo była możliwość udziału w warsztatach, jeden blok był z podstaw React.js. Bardzo żałuję, że nie mogłam zostać na tych warsztatach. Kończyły się one dość późno, a ja musiałam już wracać do Krakowa.

Ścieżka JavaScript

Osobiście jestem nieco zawiedziona tą ścieżką. Prelekcję o Blockchain-ie słyszałam już na innej konferencji, stąd byłam zmuszona do wybrania czegoś innego. Kolejna prezentacja na temat WebAssembly była dla mnie potencjalnie interesująca. Niestety odniosłam wrażenie, że prelegent siedząc przed swoim laptopem, jedynie czytał treść prezentacji. Wychodząc z wykładu nadal nie mam pojęcia czym jest to narzędzie i jak mogę z niego skorzystać. Ku mojemu rozczarowaniu następna prezentacja z tej ścieżki została odwołana.

Prezentacja pt. „TDD AngularJS Application” była interesująca dla mnie ze względu na to, że osobiście nie miałam jeszcze okazji pracować z takim podejściem. Wojciech Przechodzień z pasją opowiadał o bibliotece „angular-test-runner„, którą współtworzy wraz z kolegami w firmie, w której pracuje. Sesja live coding była dla mnie bardzo interesująca. Narzędzie to wydaje się dość ciekawe i mam nadzieję, że uda im się stworzyć wersję, która będzie kompatybilna z nowszą wersją Angulara.

Nie mogę się wypowiedzieć na temat pozostałych prezentacji, ponieważ w nich nie uczestniczyłam.

Ścieżka Agile na ratunek

Ratunkiem dla mnie okazała się ścieżka Agile. Uczestniczyłam w dwóch wykładach z tej ścieżki. Oba wykłady były ciekawe i dość uniwersalne. Nie trzeba było mieć specjalistycznej wiedzy, żeby zrozumieć przekaz. 

Podobała mi się prezentacja „Getting Things Programed”. Michał Bartyzel opowiadał o rzeczach, o których warto pamiętać podczas programowania i które pomagają w pisaniu dobrego kodu i realizowaniu zadań.

Główne myśli prezentacji:
  • Jeśli chcesz wykonać jakieś zadanie koniecznie ustal deadline. Rzeczy które nie mają ograniczonego czasu realizacji są odkładane i nigdy nie realizowane
  • Żeby zwiększyć szansę na wykonanie jakiegoś zadania zapisz je, a poniżej tego zadania zapisz pierwszą małą czynność którą musisz wykonać aby rozpocząć to zadanie. W ten sposób obniżysz próg wejścia i będzie łatwiej Ci zrealizować plany.
  • Podczas programowania korzystaj z pseudokodu. Zanim zaczniesz programować zapisz pełnymi zdaniami co dokładnie będzie robić np. Twoja funkcja. Dzięki temu Twój kod będzie przemyślany i bardziej czytelny. W ten sposób można zapobiegać zbyt skomplikowanego i zagmatwanego kodu.
  • „Pisz elegancko”. Dbaj o dobrą jakość kodu i rób refactoring zanim jest już za późno. Dbaj oto by code review było robione regularnie.

Kobiety na 4Developers

Muszę zauważyć, że podczas konferencji było bardzo mało kobiet. Oszacowałam ich ilość na około 10% wszystkich uczestników, co wydaje mi się dość mało. Dodatkowo po konferencji raz jeszcze całościowo spojrzałam na agendę i  okazało się, że nie było żadnej prelegentki, tylko sami prelegenci. Nie jest to dla mnie jakimś ogromnym problemem i w żaden sposób nie czuję się urażona z tego powodu. Nie zamierzam apelować o specjalne przywileje bądź zniżki dla kobiet. Po prostu chciałabym widzieć na konferencjach z branży IT więcej inspirujących prelegentek, które są specjalistkami i mogą podzielić się wartościowymi treściami.

Miejsce i organizacja

Konferencja odbyła się w łódzkim Bionanoparku. Podczas rejestracji otrzymałam identyfikator, na którym mogłam znaleźć plan budynku oraz agendę. Sale były bardzo blisko siebie, stąd bardzo szybko można było przemieścić się z jednej do drugiej. Wszystkie wykłady ze ścieżek tematycznych odbywały się w jednej sali.

Miłym aspektem konferencji był obiad. O dziwo nie była to pizza, co było całkiem miłą odmianą. Każdy uczestnik mógł spokojnie zjeść posiłek i usiąść razem z innymi przy stole. Oprócz tego, podczas trwania tego wydarzenia były dostępne ciepłe napoje i małe przekąski.

Podsumowanie

Moje wrażenia co do konferencji są mieszane. Jestem zawiedziona wykładami ze ścieżki JavaScript. Jednak wykłady ze ścieżki Agile zrekompensowany mój niedosyt. Cieszę się również, że mogłam poznać ciekawych ludzi! Tutaj szczególne pozdrowienia do twórców bloga DevEnv! 🙂

Wciąż uważam, że warto chodzić na takie wydarzenia. 4Developers jest konferencją, której jednym z celów jest „integracja interdyscyplinarnych społeczności IT”. Myślę, że jest to bardzo potrzebne i warto, aby ludzie w obrębie IT rozumieli siebie nawzajem. W końcu w pracy programisty nie chodzi jedynie o bycie „wymiataczem”. Istotna jest też komunikacja pomiędzy ludźmi z różnymi specjalizacjami oraz efektywność realizowania wspólnych zadań.

 

 

Junior Frotnend Developer – pierwszy dzień i pierwszy miesiąc w pracy

pierwszy dzien i miesiac w pracy

pierwszy dzien i miesiac w pracy

Moja droga do zostania Frontend Developerem była dość kręta. Swoją historię opisuję w tym poście. Minął już ponad rok od odkąd zaczęłam się uczyć od podstaw HTML-a, CSS-a i JS-a. Przed podjęciem tej stacjonarnej pracy miałam okazję pracować zdalnie nad dwoma zleceniami. A jak wyglądał mój pierwszy dzień i pierwszy miesiąc pracy w agencji tworzącej sklepy i aplikacje internetowe?

Pierwszy dzień

Pierwszy dzień pracy jako Junior Frontend Developer był głównie przeznaczony na kwestie organizacyjne: firmowy mail, system do monitorowania nieobecności i czasu pracy, kilka kanałów na Slacku. Największą trudnością było dla mnie korzystanie z MacBook-a. Wcześniej pracowałam na Windowsie i Ubuntu, dlatego musiałam się zmierzyć z nieco odmiennym systemem operacyjnym. Było to utrudnienie, ale z perspektywy czasu muszę powiedzieć, że dobrze mi się pracuje na tym sprzęcie.

Szef był bardzo sympatyczny, usiadł ze mną i pomógł skonfigurować środowisko pracy. Zaciągnęłam z firmowego repozytorium boilerplate na podstawie którego miałam budować stronę internetową. Boilerplate okazał się nieocenioną pomocą, ponieważ struktura plików była już uporządkowana, a Webpack skonfigurowany. Sama utworzyłam nowe repozytorium mojego projektu i dzień uwieńczyłam pierwszym commitem. Hura! 🙂

Pierwszy miesiąc

Pierwszy miesiąc w pracy był bardzo intensywny. Pracowałam na wysokich obrotach, uczyłam się mnóstwa nowych rzeczy i wracałam do domu wyczerpana. Nie miałam siły odpalić swojego komputera w domu. W zasadzie to na nic nie miałam siły. Potrzebowałam dużo snu. Dopiero po miesiącu odzyskałam energię i mogłam sobie pozwolić na wyjście na rozpoczęcie treningów oraz innych aktywności.

Co ciekawe zawsze budziłam się jakieś 5 – 10 minut przed budzikiem. Nigdy wcześniej mi się to nie zdarzało. Każdy dzień niósł ze sobą coś nowego i ekscytującego. Projekt nad którym pracowałam bardzo mi się podobał. W razie wątpliwości i pytań mogłam zwracać się z pytaniem do bardziej doświadczonych developerów.

Podsumowując, przez ten miesiąc zmierzyłam się z wieloma problemami i bardzo dużo się nauczyłam. W moim projekcie korzystałam z czystego JS-a, z czego ogromnie się cieszę, ponieważ miałam okazję szlifować swoje umiejętności. Bardzo się cieszę, że udało mi się znaleźć pracę, w której mogę się rozwijać. Jest to najfajniejsza praca jaką dotąd miałam. 🙂

Przydatne rzeczy

GIT – istotne narzędzie w pracy, które ułatwia współpracę z innymi developerami. Warto znać podstawowe komendy. Dla osób, które chcą się nauczyć korzystać z GIT-a polecam ten krótki i darmowy kurs.

ES6 – w pracy usłyszałam: „teraz to już standard” i bez gadania musiałam zacząć korzystać z ES6. Jeśli starasz się o pierwszą pracę / praktyki zapoznaj się z ES6, zdecydowanie ułatwi Ci to pracę.

Flexbox – daje duże możliwości i na prawdę warto go poznać. W pierwszej pracy zdecydowanie się przydaje. W pracy miałam również okazję korzystać z CSS Grid, więc to również rzecz, o której warto wiedzieć co nie co. Tutaj znajdziesz mój artykuł na temat Flexboxa oraz CSS Grid.

Masz pytania? Daj znać w komentarzu!

Menu nie musi być nudne – 10 inspirujących efektów

10 pomysłów na ciekawe menu

10 pomysłów na ciekawe menu

Zaskocz użytkownika ciekawą animacją menu na Twojej stronie lub aplikacji!

Nawigacja jest bardzo ważnym elementem każdej strony internetowej. Poniżej znajdziesz 10 inspiracji – zarówno na wersję desktop-ową jak i na urządzenia mobilne.

1. Toggle Burger Menu Animation

Autor:  Marian Breitmeyer

See the Pen Toggle Burger Menu Animation by Marian Breitmeyer (@marianbreitmeyer) on CodePen.

2. Page Tilt Effect

Autor: Marco Fugaro

See the Pen Page Tilt Effect by Marco Fugaro (@marco_fugaro) on CodePen.

3. CSS-only menu hover effects

Autor: sathish

See the Pen xdmgA by sathish (@sathish) on CodePen.

4. CSS3 Responsive menu effect

Autor: Bogdan Blinnikov

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.

5. Gooey hamburger menu

Autor: huyle

See the Pen Gooey hamburger menu by huyle (@huyle2607) on CodePen.

6. Vertical Layout with Navigation

Autor: Ettrics

See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.

7. Fullscreen flexbox overlay navigation

Autor: Mirko Zorić

See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

A tutaj kilka przykładów nawigacji na urządzeniach mobilnych! Bardzo pomysłowe! Który efekt wykorzystasz w swoim kolejnym projekcie?

8. Responsive Navigation Ideas

Autor: Andrzej Dubiel

Aż osiem przykładów! Koniecznie zobacz wszystkie!

See the Pen Responsive Navigation Ideas by Andrzej Dubiel (@itsfame) on CodePen.

9. Triangular Mobile Menu

Autor:  Jo Dahl

See the Pen Triangular Mobile Menu by Jo Dahl (@ehrenglaube) on CodePen.

10. Mobile Menu Style

Autor: Raiden Kaneda

See the Pen Mobile Menu Style by Raiden Kaneda (@Kaneda9) on CodePen.

Jak zostać dobrym mentorem programowania?

Jak zostać dobrym mentorem programowania? Wskazówki od Junior Developera

Co jakiś czas przychodzi moment kiedy do firmy/zespołu trafia Junior Developer. Jak postępować z taką osobą aby nie była ciężarem, za to szybko wdrożyła się do projektu i zaczęła wnosić wartość? Jak stać się mentorem z prawdziwego zdarzenia? Na te pytania postaram się odpowiedzieć w tym poście.

Osobiście programowania uczyłam się od mojego mentora, a także z kursów internetowych przez niego poleconych (tutaj możesz przeczytać jaką drogę przeszłam zanim zostałam programistką). To z moim mentorem programowania przeszłam ścieżkę od napisania pierwszej linii JavaScript-u, przez pierwsze zlecenie, po rozpoczęcie pracy jako Junior Developer, za co jestem ogromnie mu wdzięczna.

Moja definicja mentora:

Mentor to osoba, która przekazuje wiedzę, pokazuje ścieżki i wspiera swojego ucznia w kolejnych krokach. Jest to również ktoś, komu bez obawy i wstydu możemy zadać pytanie dotyczące dziedziny w której się specjalizuje oraz podyskutować na dany temat. Jest to osoba, która bardzo dobrze umie słuchać oraz tłumaczyć. Im bardziej rozwijamy swoje umiejętności, tym rzadziej potrzebujemy korzystać z pomocy mentora, ale jest on dla nas dalej osiągalny i w razie potrzeby przekazuje najlepsze praktyki. Mentor wie na jakim jesteśmy poziomie zaawansowania, śledzi nasze postępy i stąd może nam dać mocno spersonalizowaną radę.

Na początek – dobre nastawienie

Ważne jest to, żeby pomaganie i nadzorowanie Junior Developera nie było dla Ciebie przykrym obowiązkiem. Jeśli uważasz, że nie będziesz się w tej roli spełniać, wręcz przeciwnie będzie Cię to tylko denerwować i odrywać od Twojego ulubionego zajęcia koniecznie to zakomunikuj swojemu przełożonemu.

Dowiedz się na jakim poziomie jest junior

Nie zawsze jest tak, że Junior trafia do zespołu w którym jest osoba, która zadawała pytania techniczne na rozmowie kwalifikacyjnej. Jeśli do Twojego team-u dołączy Junior Developer koniecznie dowiedz się na jakim poziomie jest ta osoba. Szybko to zweryfikujesz to zadając pytania:

  • Jakie projekty wcześniej realizowałeś/łaś?
  • Z jakich narzędzi korzystałeś/łaś?
  • Co Cię najbardziej fascynuje w programowaniu, w jakim kierunku chciałbyś/chciałabyś się rozwijać?
  • Z czym ma największe trudności?

To pozwoli na większe zrozumienie oraz pomoże uniknąć niepotrzebnych problemów i nieporozumień.

Pamiętaj, że niekoniecznie najlepszy senior będzie najlepszym mentorem

To co ceniłam w swoim mentorze najbardziej to jego umiejętność postawienia się w sytuacji osoby, która czegoś nie wie. Często osoby, które są na zaawansowanym poziomie uważają pewne rzeczy za oczywiste i bardzo się dziwią, że ktoś inny tego nie rozumie. Staraj się tłumaczyć na prostych przykładach, a potem na tych podstawach buduj trudniejsze.  Nie traktuj drugiej osoby jak kogoś głupiego, Ty też kiedyś byłeś/byłaś na tym etapie. Stwórz bezpieczną przestrzeń, gdzie będzie miejsce na pytania i czas na dyskusje. Wiadomo, że czas Seniorów i Middle Developerow jest cenny nie zawsze mają oni tyle czasu ile by chcieli dlatego…

Gromadź i dziel się ciekawymi materiałami.

Jeśli znajdziesz ciekawy i wartościowy artykuł, kurs, książkę, wtyczkę – koniecznie zapisz je. Gromadź przydatne materiały w notatniku / zakładkach. Zrób bazę wartościowych materiałów. Dziel się sprawdzonymi rozwiązaniami, dzięki temu umiejętności Juniora szybko poszybują w górę.

Nie uprzedzaj się do osób, które przekwalifikowały się z innej branży.

Obecnie istnieje zauważalny trend na uczenie się programowania. Pojawia się coraz więcej osób, które wcześniej wykonywały inny zawód i przekwalifikowały się na programistów. Moim zdaniem takie osoby często mają ciekawe spojrzenie na pewne kwestie. Ich punkt widzenia może się różnić od punktu widzenia osób które od początku interesowały się szeroko pojętą informatyką i ukończyły studia techniczne. Często cały zespół może zyskać na ich spostrzeżeniach i sugestiach. Jeśli taki Junior Developer naprawdę pasjonuje się programowaniem, bardzo często ma ogromny zapał i chłonie wiedzę jak gąbka.

Nie dawaj gotowych rozwiązań tylko dawaj wskazówki

Często wystarczy naprowadzić Juniora, zamiast podawać gotowe rozwiązanie. W końcu Junior powinien się usamodzielnić i nauczyć się rozwiązywać problemy. A szukanie rozwiązań w otchłaniach internetu jest sztuką i wymaga praktyki.

Jeśli Junior napotka na duży bloker i Ty przejmiesz stery, to koniecznie mów na głos jaki jest Twój tok rozumowania, jeśli od razu nie znasz rozwiązania to mów gdzie szukasz odpowiedzi na swoje pytania oraz w jaki sposób rozwiązałeś dany problem. Będzie to bardziej wartościowe niż podanie rozwiązania na talerzu. 

Code review jest ważną częścią nauki

Pamiętam swój pierwszy projekt, głównie zajmowałam się w nim kodowaniem, a nie samym programowanie. Mój mentor robił code review bardzo dokładnie. Pamiętam te setki poprawek, które musiałam nanosić, a największy problem miałam problem z nazewnictwem elementów. Było to bardzo wymagające i trochę zniechęcające. Ku mojemu zaskoczeniu podczas kolejnego projektu ilość poprawek drastycznie zmalała. Okazało się, że nie mam już tak dużych problemów i coraz lepiej sobie sama radzę. Bardzo się z tego cieszyłam. Pokazuje to, że lepiej na samym początku zainwestować więcej czasu na dokładny code review.

Na koniec

Jeśli zdecydujesz się zostać mentorem to mam nadzieję, że przyniesie Ci to wiele satysfakcji i nauczysz się wiele o innych ludziach, a także o sobie samym. Należy pamiętać, że w branżę IT tworzą przede wszystkim ludzie.  Dbajmy o to środowisko, pomagajmy sobie nawzajem i wspólnie twórzmy zgrane zespoły.

SowaProgramuje – pół roku blogowania

pol roku blogowania

pol roku blogowania

Blog SowaProgramuje został założony pół roku temu! Ogromnie się cieszę, że dotrwałam do tego momentu. Czas na małe podsumowanie tego okresu.

Pół roku blogowania – podsumowanie

  • Od połowy kwietnia (wtedy zaczęłam prowadzić statystyki) bloga odwiedziło ponad 12 tys. użytkowników! Niesamowite! Dziękuję wszystkim osobom, które czytają moje artykuły. Bardzo się cieszę, że mogę pomagać i motywować kolejne osoby do działania. Dziękuję wszystkim, którzy zgłaszają poprawki i pomagają mi udoskonalać treści, które publikuję.
  • Przez te pół roku dużo się nauczyłam. Mam tutaj na myśli umiejętności zarówno twarde jak i miękkie. Udało mi się wygłosić pierwsze krótkie przemówienie na temat związany z branżą IT (i to nie byle gdzie, bo w siedzibie Microsoft w Warszawie) oraz udzieliłam 2 wywiadów. Z każdym napisanym postem rosną moje umiejętności pisania artykułów.
  • Przełamałam bariery. Na początku wstydziłam się mówić o moim blogu. Okazało się jednak, że moi znajomi zaciekawieniem i pozytywnym nastawieniem pytają o bloga, a także, że jest to dodatkowy atut i temat na rozmowach kwalifikacyjnych.
  • Dzięki prowadzeniu bloga i udzielaniu się na różnych grupach poznałam wielu świetnych i pozytywnych ludzi! Bardzo się z tego powodu cieszę 🙂
  • Prowadzenie bloga wymaga systematyczności – moim celem było i jest publikowanie jednego posta tygodniowo. Nie jest to proste, szczególne jak się ma inne rzeczy na głowie. Nie udawało mi się publikować w ten sam dzień tygodnia, ale mam nadzieję, że uda mi się to osiągnąć.
  • Prowadzenie bloga daje mi satysfakcję. Zawsze staram się aby treści były wartościowe i poprawne.  Cieszę się, jak do mnie piszecie i w miarę swoich możliwości i umiejętności staram się pomóc, doradzić i zmotywować.

Najpopularniejsze wpisy

10 błędów początkujących Frontend Developerów część 1

Jak zostałam Junior Frontend Developerem?

Umiesz trochę JavaScript? Co dalej?

Specjalne podziękowania dla:

Maciej Aniserwoicz z bloga Devstyle, organizatora konkursu Daj się Poznać – podziękowania za tą świetną inicjatywę  i inspirowania ludzi do działania.

Weronika Tobor z bloga Programmer-Girl – która pomogła mi uwierzyć w to, że moje treści są przydatne dla innych i że warto dzielić się swoimi postami w social media.

Paweł – mój chłopak, który czyta moje posty przed publikacją, pomaga wychwytywać błędy, służy konstruktywną krytyką oraz wspiera moje działania.

Dziękuję Tobie – motywujesz mnie do tworzenia kolejnych postów oraz dzielenia się moimi spostrzeżeniami. Cieszę się, że tu jesteś 🙂

Umiesz trochę JavaScript? Co dalej?

Umiesz Java Script co dalej

Umiesz Java Script co dalej

Znasz już podstawy JavaScript tj. zmienne, funkcje, pętle, tablice, obiekty? Chcesz się dalej rozwijać w tym kierunku, ale nie wiesz czego się dalej uczyć? Chcesz dostać staż/pracę jako Junior Frontend Developer, ale na rozmowach kwalifikacyjnych mówią Ci, że jeszcze umiesz za mało z JSa? A może jesteś już Junior Frontend Developerem i chcesz podnieść swoje umiejętności?

Czas na materiały i porady, które pomogą Ci wskoczyć na wyższy poziom!

Kursy video

Podczas procesu przebranżawiania korzystałam z portalu Team Tree House, którego obecnie jestem partnerem. Rejestrując się przez kliknięcie na ten banner otrzymasz 4 miesiące zniżki na tej platformie. Znajdziesz tam sporo zaawansowanych kursów, nie tylko z Frontendu.

Jeśli umiesz już trochę JavaScript to  szczególności teraz polecam Ci kurs AJAXa:

https://teamtreehouse.com/library/ajax-basics

To kolejna rzecz, którą powinieneś / powinnaś znać i umieć korzystać. TeamTreeHouse też jest płatną platformą, ja z niej korzystałam przez kilka miesięcy i byłam zadowolona.

https://javascript30.com/ —> 30 dni, 30 zadań! Wszystko wytłumaczone krok po kroku. Podczas tego darmowego kursu poznasz elementy ES6 i wzbogacisz swoją wiedzę z JSa. 

https://www.codeschool.com/courses/javascript-best-practices —> kurs bardzo przyjemny, przydatne wskazówki oraz dobre praktyki. Platforma CodeSchool jest płatna, jest tam wiele innych kursów.

Jeśli rozważasz naukę Angulara koniecznie najpierw zapoznaj się z TypeScript. Będzie Ci dużo prościej wtedy ogarnąć ten framework. Inną popularną biblioteką jest React. Ja osobiście najbardziej lubię i na codzień w pracy piszę we frameworku, który nazywa się Vue.js.

Książki i artykuły

http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/ —> obiektowe programowanie (OOP) w JS, warto zapoznać się z tym tematem.

http://kursjs.pl/kurs/regular.php —> wyrażenia regularne też się przydają co jakiś czas w pracy, warto wiedzieć z czym to się je.

„You Don’t Know JS” —> klasyk, można za darmo przeczytać w wersji elektronicznej lub kupić wersje papierowe.

Własny projekt

Koniecznie zrób swój projekt, jeden duży albo kilka mniejszych. Tutaj spotkasz się z realnymi wyzwaniami. Ważne jest to abyś, nie chował/a projektów do szuflady. Koniecznie załóż konto na GitHub, umieść swój projekt w sieci, a linki do projektów obowiązkowo umieść w CV!

Co jest ważne podczas wyboru projektu?

Projekt powinien Cię ekscytować. Jeżeli nie ekscytuje Cię robienie kolejnego kalkulatora i kolejnej aplikacja TO DO, to jej nie rób. Zacznij projekt, który Cię wciągnie (wtedy więcej się nauczysz, będziesz szukał/a rozwiązań z zainteresowaniem). Zacznij od mniej skomplikowanych projektów, jak to mówią, nie od razu Kraków zbudowano. Stopniowo buduj swoje doświadczenie, zobaczysz, że zrobisz ogromny postęp. Ja stworzyłam dwa mini projekciki, gdzie znalazłam problem i bardzo chciałam go rozwiązać. To mnie bardzo motywowało.

Inspiracje i źródła

CodePen —> znajdziesz tu mnóstwo ciekawych projektów, poszukaj czegoś co Cię zainspiruje

https://googlecreativelab.github.io/coder-projects/ —> kilka ciekawych pomysłów na projekty, może akurat coś Cię zainspiruje.

http://www.w3resource.com/javascript-exercises/ —> tutaj znajdziesz multum zadań z JSa.

Rozwiązywanie problemów

Co jak nie będę wiedzieć jak zacząć taki projekt? Albo jak utkniesz nad jakimś problemem? Koniecznie zerknij na ten artykuł:

https://codeburst.io/10-steps-to-solving-a-programming-problem-8a32d1e96d74

Jak już zrobisz swój projekcik (albo jego część) poproś kogoś o code review. Traktuj błędy jako okazję do nauczenia się czegoś nowego.

Aplikowanie do pracy i rozmowa kwalifikacyjna

Przykładowe pytania które pojawiły się na moich rozmowach można znaleźć w moim artykule pod tym linkiem.

Bardziej zaawansowane pytania z samego JSa znajdziesz tutaj:

https://www.toptal.com/javascript/interview-questions

oraz tutaj:

https://nafrontendzie.pl/rozmowa-kwalifikacyjna-przygotowania/

Jak zapiszesz się na newsletter NaFrontendzie to otrzymasz darmowego ebooka z bardzo przydatnymi materiałami.

Pamiętaj, nie musisz tego wszystkiego umieć i wiedzieć, żeby dostać pracę, ale warto żebyś stopniowo rozwijał/a się i dowiadywał/a się nowych rzeczy i nabywał/a doświadczenia przez robienie własnych projektów.

Nie czekaj w nieskończoność z wysyłaniem CV. Każda rozmowa powinna Cię czegoś nauczyć. Jak nie uda Ci się dostać stażu / pracy nie traktuj tego jako porażki, poproś o feedback, to pomoże Ci szybciej osiągnąć wyższy poziom. Wiem, że może być czasami ciężko i może to być frustrujące, szczególnie jak ktoś już sporo czasu poświęcił na naukę.

Wysyłaj CV nawet jak firma nie ma otwartej rekrutacji! Znajdź firmy, które potencjalnie Cię interesują i zrób sobie listę z adresami email. No i wysyłaj CV! Nie czekaj na „odpowiedni moment”, bo on nigdy nie nadejdzie. Nie przejmuj się jak raz ta firma Ci już nie odpisała na maila. Wyślij po jakimś czasie ponownie. A jak Ci ktoś odmówi, to za jakiś czas zapytaj czy sytuacja w firmie się zmieniła i czy może teraz jest szansa na miejsce dla takiej osoby jak Ty.

Tutaj pisałam o tym jak poprowadzić rozmowę rekrutacyjną jako starający się o pracę programista, koniecznie przeczytaj ten artykuł.

Spotykaj się z ludźmi

Bierz udział w konferencjach, targach pracy, hackathonach, meetup-ach. Bądź ciekawy innych ludzi i nawiązuj kontakty. Na konferencjach i targach pracy często można w jednym miejscu poznać i porozmawiać z przedstawicielami kilku firm. Weź ze sobą swoje aktualne wydrukowane CV, a nóż uda Ci się w ten sposób znaleźć pracę.

Na koniec

Mam nadzieję, że te materiały będą dla Ciebie przydatne. Mocno trzymam za Ciebie kciuki! Wiem, że dasz radę!

Znasz jeszcze jakieś ciekawe źródła? Podziel się linkiem w komentarzu pod postem! 🙂

 

CSS Grid kontra Flexbox

css gird & flexbox

css gird & flexbox

Inspiracja

Po obejrzeniu poniższego wystąpienia Morten Rand-Hendriksen na temat CSS Grid postanowiłam przetestować ten sposób pozycjonowania elementów. Zdecydowanie polecam obejrzenie tej prelekcji.

W tym artykule chciałabym porównać na prostym przykładzie dwie metody: Flexbox oraz CSS Grid.

Wsparcie przeglądarek

Zanim przejdziemy do rzeczy, mała notka na temat wsparcia przeglądarek. Na ten moment (13.08.2017) wsparcie CSS Grid jest częściowe. Istnieją problemy z Internet Explorer, Edge, Opera Mini oraz na starszych wersjach iOS Safari. Z powyższego wideo wynika że już niebawem CSS Grid będzie w pełni wspierany przez Edge, stąd warto się zainteresować tematem CSS Grid.

Wsparcie Flexbox:

flexbox wsparcie przeglądarek
Źródło caniuse.com

Wsparcie CSS Grid:

grid wsparcie przeglądarek
Źródło caniuse.com

 

A jak to wygląda w praktyce i czym się różni CSS Grid od Flexboxa? Przekonajmy się na przykładzie.

Cel

Moim celem jest uzyskanie takiego samego efektu za pomocą dwóch różnych metod. Tutaj jest grafika prezentująca jaki efekt chcę osiągnąć.

css grid i flexbox

Wspólny HTML

Zacznijmy od kodu HTML, który jest wspólny dla obu przykładów. Mamy tutaj div o klasie „container”, który ma czwórkę dzieci, które na potrzeby tego przykładu mają klasy „red”, „blue”, „yellow”, „green”*. W środku każdego dziecka znajduje się paragraf.

*w rzeczywistości starajmy się nadawać nazwy klas opisujące czym dany element jest, a nie jak wygląda

 

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="blue">
        <p>blue</p>
    </div>
    <div class="yellow">
        <p>yellow</p>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Wspólny CSS

W tych przykładach będę używać SCSSa. Na początek dodajemy ogólne style, dla rozróżnienia nadajemy różne kolory poszczególnym dzieciom elementu „container”.

$red: #ed4040;
$yellow: #ffef68;
$blue: #4286f4;
$green: #99e265;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 300px;
    margin: 150px auto 0 auto;
    border: 2px solid black;

    .red, .blue, .yellow, .green {
        heigth: 100%;
        width: 100%;
        font-size: 25px;
        text-align: center;
    }
}

.red {
    background-color: $red;
}

.blue {
    background-color: $blue;
}

.yellow {
    background-color: $yellow;
}

.green {
    background-color: $green;
}

Po dodaniu tych stylów otrzymujemy bazę dla obu przykładów.

markup

Flexbox

Krok 1

Na sam początek w CSSie nadajemy elementowi o klasie „container” display: flex. W ten sposób cztery divy, które są bezpośrednimi dziećmi elementu „container” zostały uporządkowane jeden obok drugiego, a nie jak było wcześniej jeden pod drugim.

.container {
    display: flex;
    // tu są jeszcze pozostałe, wspólne style
}

display: flex

Jest to spowodowane zaaplikowanie domyślnej właściwości jaką jest „flex-direction: row”. Stąd elementu układają się jeden koło drugiego w jednym rzędzie (inne właściwości „flex-direction” to  row-reverse, column i column-reverse).

flex-direction: row

Krok 2

Aby uzyskać zamierzony efekt używając flexboxa musimy nieco zmienić strukturę HTML. Zmierzamy do stworzenia trzech divów, które będą w jednym rzędzie, jak na grafice powyżej. Dodajemy div o klasie „column-wrapper”, w którym znajdą się dwa elementy: „blue” i „yellow”. Teraz div o klasie „container” ma trójkę dzieci: „red”, „column-wrapper” oraz „green”.

<div class="container">
    <div class="red">
        <p>red</p>
    </div>
    <div class="column-wrapper">
        <div class="blue">
            <p>blue</p>
        </div>
        <div class="yellow">
            <p>yellow</p>
        </div>
    </div>
    <div class="green">
        <p>green</p>
    </div>
</div>

Po zmianie HTML-a otrzymujemy trzy kolumny.

flexbox

Krok 3

Teraz musimy jeszcze dodać style na elemencie „column-wrapper”. Skorzystamy z właściwości jaką jest „flex”. Dzięki temu będziemy mogli rozdysponować przestrzeń rodzica za pomocą procentowych wartości. Chcemy, żeby div o klasie „column-wrapper” zajmował połowę szerokości swojego rodzica, a pozostałe elementy zajmowały po 25% szerokości.

.column-wrapper {
    flex: 0 1 50%
}

.red {
    background-color: $red;
    flex: 0 1 25%;
}

.green {
    background-color: $green;
    flex: 0 1 25%;
}

Dostajemy następujący efekt:

Krok 4

Stylujemy dzieci elementu „column-wrapper”. Chemy żeby każde dziecko zajmowało połowę wysokości rodzica.

.blue, .yellow {
    height: 50%;
}

Końcowy efekt z użyciem Flexboxa

Tutaj na CodePen zaprezentowany jest ostateczny kod oraz efekt.

See the Pen Flexbox example by SowaProgramuje (@sowaProgramuje) on CodePen.

CSS Grid

Teraz zobaczmy jak uzyskać ten sam efekt, ale z użyciem CSS Grid. Wracamy do naszego podstawowego markupu. Mamy rodzica o klasie „container” oraz czwórkę dzieci: div-y o klasach „red”, „blue”, „yellow” i „green”. W przypadku CSS Grid nie będziemy towrzyć dodatkowych elementów w HTML, jak było w przypadku Flexboxa (div o klasie „column-wrapper”). CSS Grid pozwala na opisanie struktury dokumentu, bez potrzeby dodatkowych div-ów, które mają na celu jedynie wspomóc jego stylowanie.

Krok 1

Podstawowe style już mamy, czas przejść do definiowania CSS Grid. Nadajemy elementowi o klasie „container” display: grid. W efekcie elementy zostały ułożone jeden nad drugim oraz wypełniły całą wysokość rodzica.

.container {
    display: grid;
    // tu są jeszcze pozostałe, wspólne style
}

grid

Firefox udostępnia w swoim inspektorze możliwość podglądu linii CSS Grid-u. Po najechaniu kursorem na kratkę koło display:  # grid pojawiają się linie oddzielające poszczególne „komórki” tzw. „Grid highlighter”.

mozilla grid dev tools

I jeszcze zbliżenie:

Krok 2

CSS Grid można porównać do tabeli. Możemy definiować kolumny oraz wiersze. Tutaj na poniższej grafice demontuję jak musimy podzielić nasz „container”, żeby uzyskać zamierzony efekt. Należy zdefiniować trzy kolumny oraz dwa wiersze. Element „red” będzie zajmować dwie komórki (całą pierwszą kolumnę), element „green”  również będzie zajmować dwie komórki (całą ostatnią kolumnę). W CSS Grid mamy możliwość definiowania położenia elementów w dwóch osiach: pionowej i poziomej.  W przeciwieństwie do Flexboxa, gdzie definiujemy „flex-direction” i jest on tylko jednowymiarowy (row, row-reverse, column lub column-reverse).

css grid example

Trzy kolumny oraz dwa wiersze:

css grid example1

Skoro wiemy ile wierszy i kolumn jest potrzebne czas na zdefiniowanie ich wielkości. CSS Grid wprowadza nową jednostkę jaką jest fr czyli „fraction of available space”. Tutaj można przeczytać więcej na temat jednostek jakie możemy używać z CSS Grid.

css grid example2

Do diva „container” dodajemy następujące style:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; 
    // to będą trzy kolumny, ich szerokość będzie do siebie w stosunku 1:2:1
    grid-template-rows: 1fr 1fr; 
    // to będą dwa wiersze, ich wysokość będzie do siebie w stosunku 1:1
}

Po dodaniu tego kodu każdy element zajął tylko jedną komórkę w Grid. Zostały dwie puste komórki. Aby to zmienić musimy zdefiniować grid-areas oraz grid-template-area.

grid-template

Krok 3

Grid-area nadawany jest na dzieciach elementu, który ma display grid. Zdefiniowanie nazw konkretnych elementów w CSS Grid pozwoli na prostszą orientację.

.red {
    background-color: $red;
    grid-area: red;
}

.blue {
    background-color: $blue;
    grid-area: blue;
}

.yellow {
    background-color: $yellow;
    grid-area: yellow;
}

.green {
    background-color: $green;
    grid-area: green;
}

Po dodaniu tych stylów wizualnie wygląda to niezbyt dobrze, wręcz jakbyśmy się oddalili od naszego celu, ale jeszcze musimy zdefiniować grid-template-area.

grid area

Krok 4

Czas na zdefiniowanie grid-template-area. Musimy zdefiniować, które elementy będą zajmować które i ile komórek. Będziemy korzystać z grid-area, które zdefiniowaliśmy w poprzednim kroku.

Na elemencie „container” dodajemy

grid-template-areas:
"red blue green"
//w cudzysłowie definiujemy co będzie w poszczególnych komórkach w pierwszym wierszu
"red yellow green"; 
//w drugim cudzysłowie definiujemy kolejny wiersz w naszej "tabeli"

Ostatecznie do elementu „container” zostały dodane takie style:

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
    "red blue green"
    "red yellow green"; 
}

Na poniższej grafice zilustrowane jest definiowanie grid-template-areas.

css grid example

Komórki w których zdefiniowane są takie same grid-areas zostają scalone do jednego obszaru. Element „red” oraz element „green” zajmują po dwie komórki, natomiast element „blue” oraz „yellow” zajmują każdy po jednej komórce.

grid-template-area

Końcowy efekt z użyciem CSS Grid

Tutaj można zobaczyć i przeanalizować samodzielnie ostateczny kod.

See the Pen CSS Grid by SowaProgramuje (@sowaProgramuje) on CodePen.

Podsumowując

CSS Grid jest nowszym sposobem pozycjonowania elementów. Działa on trochę jak tabela, gdzie możemy definiować ilość kolumn, wierszy oraz „scalać” poszczególne komórki. Zarówno CSS Grid jak i Flexbox mają jeszcze wiele innych, bardziej zaawansowanych właściwości, których w tym artykule nie omówiłam, a które są bardzo pomocne w pozycjonowaniu elementów.

Ostatecznie używając CSS Grid kod HTML zajął 2 linie mniej, natomiast SCSS 1 linię mniej.

Dodatkowe materiały

Oto linki do stron, na których można dowiedzieć się więcej na temat CSS Grid:

oraz o Flexbox:

 

Masz jakieś pytania, uwagi do kodu? Daj znać w komentarzu!