Nauka programowania przez wyzwania czyli wzięłam się i pokazałam moją mizerną stronę

Dzisiaj, czyli w lutym 2018, prawda wygląda tak.  Dłubię, dłubię w plikach o rozszerzeniu .html i .css. Trochę przy blogu porobię, czyli pomiziam, co tam jest w functions.php. Od czas do czasu trafi się jakiś darmowy warsztat z podstaw programowania. (jak ten o webowych kartkach walentynkowych).

Mam tych projektów, projekcików, folderów, folderków na komputerze dużo, bardzo dużo, wszystkie zaczęte, a żaden nie skończony.

Nic kompletnego. I nawet nie chodzi o to, że done is better than perfect. Ja po prostu nie mam, co pokazać.

Chyba, że liczymy frustrację, że siedzę, dłubię, a efektu nie widać pokazuję.

Przypadkiem chyba, dwie dziewczyny na Facebooku zorganizowały ostatnio wyzwanie dla takich świeżynek, jak ja.

Wyzwanie #mojapierwszastrona czyli podstawy HTML i CSS.

Takie wyzwania to rodzaj wspólnej pracy nad swoim projektem, tzn. każdy nad swoim. Drobne projekty, fragmenty kodu, zupełny początek.
Pomyślałam, że jak teraz nie zacznę, to już nie wiem, kiedy. Jak się nie zepnę i nie dokończę chociaż jednego projektu strony internetowej, tak, żeby była kompletna semantycznie, to d…pa blada!

Jak wziąć udział w takich wzywaniach?

Dostałam o nich informację, bo śledzę fanpage dziewczyn i ich newslettery. Jeśli chcesz wiedzieć o następnych, to voila:

– Natalia i Będę Programistką
– Joanna i Wake up and Code

Od Natalii przez trzy dni przychodziły emaile z linkami do pobrania materiałów pdf. Ostatniego dnia dostaliśmy dostęp do nagrania video, jak Natalia na żywo pisze kod swojej strony (mam nadzieję, że nos już jej nie swędzie ;))

Joanna sprawdzała nam kod na bieżąco, codzienne zadania dziewczyny wklepywały w codepeny (poniżej piszę, co to takiego). Na pytania z wyzwania odpowiadała w formie transmisji na żywo w internecie.

Jednym słowem – dziewczyny się zaanagażowały i przygotowały sporo materiałów, poświęciły swój czas i za to dzięki wielkie! Co z tym zrobisz, jak uczestnik wyzwania, to już druga sprawa.

Zagrożenia i obawy jakie niesie nauka programowania przez wyzwania?

Są, a jakże:

  • że więcej czas poświęcisz na czytanie o tym, jak idzie innym, a sama nie będziesz szukać rozwiązań dla siebie. Nawet napisanie tego posta, w trakcie trwania wyzwania, nie jest najlepszym pomysłem, bo mogłabym teraz testować rozwiązania gridowe na stronie. Ale chcę na bieżąco zapisywać swoje wrażenia (taki był zamysł bloga), więc 15 minut na ten tekst zarezerwowałam.
  • frustracja: że innych strony są już takie ładne, a moja brzydka. Albo że inni rozmawiają i rzucają terminami z języka IT, a ty nic nie rozumiesz. A to miały być podstawy przecież, zupełnie dla świeżynek. No to skoro inni są takimi zaawansowanymi świeżynkami, to ty pewnie prezentujesz taki poziom wiedzy, że już weź lepiej nie kończ tego projektu.
  • wstyd: Jak tylko dowiedziałam się wyzwaniu, zaraz sobie pomyślałam, że się będę wstydziła zapytać, wyjść na nienaumianą, zwłaszcza tak publicznie, na fejsiku. Bo wyzwania trwają w grupach, gdzie jest po kilka tysięcy osób, a każda pewnie mądrzejsza ode mnie (wiadoma sprawa, dziewczyny w większości o sobie myślą gorzej, a ja nie jestem wyjątkiem).

Ok, ale jak prosząc o pomoc w kodzie, pokazać innym, nad czym pracuję?

O wstydzie już było, że  trzeba go przemóc przed publicznym pytaniem.

Ale po pierwsze pierwsze, to zanim by jeszcze doszło do zapytania na grupie, to najpierw musiałabym wiedzieć, gdzie te pliki z HTMLem i CSSem umieścić, żeby inne osoby mogły mój kod podejrzeć i pomóc.

Copy-paste kodu z edytora robić i wklejać do komentarzy na FB? Może i tak, widziałam takie rozwiązania.

Na innej grupie facebookowej widziałam też, że się ludzie dzielili linkami do Githuba, pokazywali swoje projekty tam.

Dziewczyny proponowały podczas wyzwania, żeby swoje strony umieszczać na profilu na codepen.io.

Fajny ten portal, mam tam konto, podglądam osoby, które magię robią za pomocą cssa. Mam tam nawet kilka penów, czyli niewielkich fragmentów kodu.

Codepen.io taki jak mój, czyli darmowy, nie pozwala jednak na trzymanie tam swoich zasobów (assetów), czyli zdjęć, ikon, textur, które chciałabym wykorzystać w projekcie.

Github lepszy, imho. I dzięki temu wyzwaniu umieściłam już trzy repozytoria zdalne na Githubie. Ale jeszcze ciągle naklejki oktokota sobie nie naklejam 😉

Zalety brania udziału w wyzwaniu?

  • Na bieżąco podglądasz praktyki innych i ich kod.
  • Jest dopingująca atmosfera, a jak sama pozbędziesz się porównywania z innymi, to działania pójdą szybciej.
  • No musisz coś pokazać, poprosić o pomoc, zaprezentować jakiś kawałek swojego dziecka, tj. kodu.

No to siup. Pierwsza strona się buduje.

Kod możesz podejrzeć na Github:

Moje konto | Ten projekt

To jest pierwsza wersja strony, zakodowana 17.02.2018
[uwaga, będzie skrolowanie i to dużo!]

Pierwsza wersja wyglądała tak:

Tak ta strona wyglądała, zanim przysiadłam i więcej poczytałam o budowaniu stron internetowych za pomocą właściwości CSS: float.

Druga wersja strony wygląda już nieco lepiej.

To jest zapis drugiej wersji strony, 27.02.2018

Jeszcze będę na niej ćwiczyć, czego się uczę z tematu HTMLa i CSSa.

Przede mną css grid i bootstrap, który kiedyś zaczęłam, ale nie skończyłam. Teraz wiem, że lepiej powoli, ale dokładnie, poznać podstawy, zrozumieć je, a potem przechodzić do rozwiązań ułatwiających życie.

W marcu pewnie będzie więcej takich stron, zakodowanych przy użyciu bootstrapa.

Polecam, gdzie mogę, te layouty, przygotowane przez dziewczyny z The Awwwesomes. Bo o ileż lepiej się pracuje, jak projekt przyjemny dla oka.

A wszystkie propozycje The Awwwesomes właśnie takie są. Będę na nich działać i się uczyć.

EDIT z lipca 2018 – podczas intensywnej nauki na bootcampie postanowiłam refaktorować kod i użyć css grida oraz flexboxa, żeby nadać stronie responsywności. Uważam projekt za skończony pod względem wyglądu. Może kiedyś podłączę plugin do formularza, ale jeszcze nie wiem, jak.

Wyzwania były pomocne, dały kopniaka i zachęciły do ruszenia z miejsca. No jak tu nie skorzystać!

Ps. jak fajnie, że dziewczyny-programistki tak pomagają dziewczynom-soon-to-be-hopefully-programistkom. #womenpower. To pisałam ja, mama dwóch chłopaków 😉


Dziękuję za przeczytanie tekstu i serdeczności!

12 myśli on “Nauka programowania przez wyzwania czyli wzięłam się i pokazałam moją mizerną stronę”

  1. Komentarz testowy, hihihi, i żeby pusto nie wyglądało. Chociaż jak jest tylko komentarz autora, to też nie wygląda za dobrze.

    1. Hej Kasiu, dorzucam się w takim razie z komentarzem. Na instagramie śledziłem regularnie Twoje poczynania i z niecierpliwością czekałem na pokazanie Twojego dzieła :). Szkoda, że jestem praktycznie zielony we “frontendzie” i nie jestem w stanie dobrze ocenić bloga. Ale na pewno doceniam to, że działa bardzo dobrze na moim telefonie.

      1. Cześć Michał, ale miło, że zajrzałeś i skomentowałeś 🙂 Co do oceny, to niestety wiele rzeczy jest jeszcze wysypanych – brakuje mi podstaw, żeby pisać funkcje, a to nie sztuka znaleźć dany fragment kodu i go wkleić, sztuka zrozumieć! (zresztą przecież wiem, że Ty wiesz ;)). Teraz najbliższe tygodnie to intensywnie JS i mały niekomrecyjny projekt, albe praktycznie bez ingerencji w kod. Do zobaczenia w Polsce! 🙂

  2. Hej! Mnie też się marzy dobrze programować i staram się uczyć codziennie, zaczęłam jakiś czas temu kodować layout The Awwwesomes, ale jest w powijakach, niektórych rzeczy nie rozumiem, nie wiem jeszcze, jak “czarować” CSSem (umiem tylko podstawy podstaw;-)), ale będę próbowała! Żałuję, że nie wzięłam udziału w wyzwaniu Joasi z Wake up and code. Pozdrawiam!

    1. Lidka, nie będę Ci ściemniać – ja wiem niewiele. Serio. Dużo trudniej jest mi pewnie rzeczy przyswoić, ogarnąć, ale jak sobie pomyślę, że jeszcze trzy miesiące temu nie umiałam napisać struktury strony HTML, a dziś już umiem , nie żeby jakoś piękne, ale w ogóle, to jakoś mi lepiej. Codziennie próbuję usiąść i coś pchnąć do przodu, albo chociaż powtórzyć, co było wcześniej. (no dobra, nie codziennie, bo bym chyba padała). Co do kodowania layoutów – już po zrobieniu tego, trafiłam na filmik na youtubie, gdzie Jakub Jurkin pokazuje otwieranie plików w Avocado. To pozwala na szybsze szczytanie wartości CSS. Strukturę HTML już musisz sama rozkminić, ale akurat ten pierwszy layout the Awwwesomes nie są jakoś bardzo skomplikowany – header / main area (u mnie sekcje) i footer. Cały kod możesz zobaczyć na moim repozytorium, skopiować i się pobawić u siebie w edytorz tekstu. Dzięki, że wpadłaś i serdeczności!

      1. Dzięki za podpowiedź! Pocę się nad tym layoutem i już zaczynam się martwić, czy ja to ogarnę kiedykolwiek. Do usłyszenia!:)

  3. Świetnie się coś takiego czyta. Słuchanie o dzieleniu się wiedzą, jak to wpływa na nas dookoła, nawet nie wiem jak to wysłowić. Z jednej strony #GirlsPower, z drugiej w ogóle tworzenie takiej społeczności otwartej na poszerzanie swojej wiedzy i wzajemne dzielenie się rozwiązaniami. Dla mnie to jest w ogóle coś pięknego, że w XXI edukacja nie tylko jest czymś normalnym, ale każdy może nauczyć się czego chce, bo wiedza jest dostępna za darmo w Internecie.
    Co do tytułu! Żadna mierna! Bardzo fajna i pomysłowa. Layout nr 2 wygląda świetnie i ma sporo elementów pokazujących, że lubisz sobie stawiać wyzwania.
    Kolejnym wyzwaniem na pewno będzie dopracowanie, by wyglądała pięknie na mobilce, bo jeszcze są niedociągnięcia. Ale tak wygląda nauka – piszesz kod, masz problem, rozwiązujesz problem. Na przyszłość już ten problem umiesz rozwiązać lub mu zapobiegasz!
    Powodzenia!

    1. Cześć Rita, o tak, co do responsywności, to jeszcze temat do opanowania. Dzięki za zatrzymanie sięu mnie i serdeczności!

  4. Kasiu, ja po tym poscie odwaze odezwac sie do Ciebie z pewnym pytaniem. Bardzo podoba mi sie Twoja praca, jest przyjemna dla oka i dziala, a to o to chodzi.

    1. Ha, bo to jest piękny layout przygotowany przez dziewczyny z The Awwwesomes. Jak jest ładniej, jest zawsze lepiej #takajestemmadra 😉

Leave a Reply

Your email address will not be published. Required fields are marked *