Wrz 18
Schemat strony

4-17.09.2017 – Tydzień 6-7 relacja

Się działo. Oj działo, działo. Był plan, żeby w tygodniu 6 zamknąć temat HTML i CSS. Zwieńczeniem miał być projekt strony zrobionej na wzór strony głównej bloga. Czytelnicy mojego Fanpage’a wiedzą, jak mi szło i z czym się borykałam. Dzisiaj, po 2 tygodniach pracy mogę powiedzieć – udało się. Skończyłam. Oczywiście jeszcze sporo rzeczy mogłabym pozmieniać, ale na tym etapie chcę to zakończyć.

 

Do trzech razy sztuka

Przez ostatnie 2 tygodnie każdą wolną chwilę poświęcałam na dopracowywanie strony, którą chciałam zrobić. Za pierwszym razem strona okazała się klapą. A dokładniej, zupełnie nie mogłam zrozumieć dlaczego w jednym divie nie chcą mi się zmieścić kolejne i dlaczego one ciągle nie są w tym miejscu, gdzie powinny być i w ogóle dlaczego coś! Było to lekko frustrujące.

Z pomocą przyszły filmy SamurajaProgramowania, który od postaw robił bardzo podstawową stronę. Właśnie w tym filmie zobaczyłam, że Samuraj najpierw zaplanował sobie ułożenie wszystkich elementów. I to był strzał w dziesiątkę. Zrobiłam to, co zawsze robię u siebie w pracy (a wielokrotnie zdarza się, że ludzie się dziwią po co?) – wzięłam długopis i kartkę papieru. I rozpisałam wszystko. W ten sposób powstał szkielet nr 2. I poszło.

Tutaj macie pierwszy z czterech filmów Samuraja, który zainspirował mnie do rozpisania całego szkieletu

Generalnie po próbie nr 2 strona mogła zostać zakończona. Ale coś mi nie pasowało. A dokładniej nie pasowało mi menu. To, że zrobiłam go wyłącznie na tagach <a>, więc zamieniłam menu na listę nienumerowaną. A jak już zrobiłam menu na liście, to stwierdziłam, że przecież fajnie byłoby zrobić menu hamburger dla wersji mobilnej 🙂 Trochę frustracji, trochę niepowodzenia i w końcu udało się. Okazało się, że nie taki diabeł straszny jak go malują.

Pyszne menu – hamburger 🙂

Polecam Wam bardzo tutorial umieszczony poniżej. Pokazuje krok po kroku jak zrobić menu hamburgerowe wyłącznie za pomocą HTML i CSS. Bez JS i jQuery. Oczywiście istnieje bardzo dużo rozwiązań, gdzie kopiuje się regułki JS i tada działa. Ale ja nie chciałam skorzystać z takiego rozwiązania. Póki nie rozumiem o co chodzi, nie chcę tak 🙂

I gdy już udało mi się zrobić hamburgerka, postanowiłam dostosować layout pod małą rozdzielczość. I skorzystałam z rozwiązania media queries. I tak powstał mój pierwszy projekt o niesamowicie oryginalnej nazwie – testowa strona! 🙂

Z jednej rzeczy jestem jeszcze niezadowolona – skorzystałam z validatora semantyki i jest klapa. Muszę jeszcze nad tym popracować.

Czego nauczyłam się przez te 2 tygodnie?

Generalnie jestem bardzo szczęśliwa, że dobrnęłam do końca. Praca praktyczna przyniosła mi ogromnie dużą dawkę wiedzy. Zaskoczyły mnie sytuacje, które przed zastosowaniem praktycznym wydawały mi się łatwe i dość oczywiste. Dzięki temu projektowi nauczyłam się wykorzystywać display’e, posiotion’y, float’y, input’y, boarder’y. Nauczyłam się robić menu hamburger, umieszczać divy w containerze, korzystać z box-sizing. Obejrzałam masę tutoriali i poradników. Przeczytałam kilkanaście rozwiązań różnych sytuacji na stackoverflow. I jestem naprawdę zadowolona i szczęśliwa! To były 2 tygodnie solidnej nauki i pracy. Wiem, że jeszcze sporo przede mną, ale czuję, że wiele rozwiązań, które zastosowałam w tym projekcie, będę mogła wykorzystywać w przyszłości.

JS czy… ?

Chciałabym spokojnie napisać, że etap podstaw HTMLa i CSSa zakończony i że mogę siadać do JS’a. Ale czuję, że otworzyłam puszkę pandory 🙂 Mimo założeń, że po skończonym projekcie zaczynam JavaScript to niestety albo i stety muszę Was i siebie zmartwić. Okazało się, że nie znam Gita. Hahahaha. Tej czarnej konsoli – póki co jest dla mnie jak czarna mamba 🙂

Ponieważ chcę umieścić kod mojego projektu na Gicie, żeby starsi fachem koledzy i koleżanki mogli go ocenić, nie ma innej opcji – muszę się nauczyć tego potwora 🙂 Także trzymajcie kciuki, żeby poszło w miarę sprawnie i żebym już nie miała wymówek i wreszcie przysiadła do JS.

Ciał! Natka.

2
Dodaj komentarz

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
NataliaAgata Jakuboska Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Agata Jakuboska
Gość
Agata Jakuboska

Natalia! Spadasz mi z nieba! Zaczęłam naukę 2 tygodnie po Tobie. Jesteś zatem moim przewodnikiem w nauce frontendu. Mogę śmiało zgapiać Twoją ścieżkę 🙂 Muszę przyznać, że idziesz jak burza! Skąd Ty wynajdujesz te wszystkie fajne materiały i tutoriale do nauki? Dzięki Tobie przerobiłam część filmików M. Zelenta o HTML i CSS. Bardzo mi to pomogło ułożyć sobie niektóre sprawy. Niestety dziewczyny na grupie Programuj dziewczyno ostrzegły mnie, że w tych filmikach jest sporo błędów. Ponieważ nie chcę się uczyć nieprawidłowych nawyków odstawiłam pana Mirosława i pokornie wróciłam na codecademy. Powiedz mi, czy masz jakieś długo-dystansowe plany? Czy wyznaczyłaś sobie… Czytaj więcej »

Natalia
Gość

Agata! Po pierwsze jest mi strasznie miło. Wysłałaś mi takiego kopniaka motywacyjnego, że Hej! Skąd biorę materiały? Po prostu same wpadają mi w ręce ? A jak mi wpadają to od razu dzielę się z Wami. Pana Mirosława też sobie odpuściłam, jednak mimo jego błędów, uważam że na sam początek był świetny. Jest po prostu dobrym nauczycielem, który nie zniechęca a raczej zachęca do dalszej nauki i drążenia tematu. Więc mimo wszystko go cenię. Plany długodystansowe mam, a i owszem 🙂 aczkolwiek nie zakładam, że za 6 miesięcy będę pracować jako junior front-end developer. Uważam, że lepsze są małe kroki.… Czytaj więcej »