“Plan nauki Frontend Developera”💪📚

Witam ponownie. Tak jak zapowiedziałem – tak zrobiłem. Kolejny tydzień i wrzucam kolejny wpis – “Plan nauki Frontend Developera”

Chciałbym przygotować materiał dla każdego. Osoba, która pierwszy raz styka się z programowaniem, może śmiało ze mną kontynuować przygodę z programowaniem. Zaczynam od “0”.

Aktualny post który czytasz, zostanie wyodrębniony osobno w menu, więc zawsze łatwo do niego będzie można wrócić. Po każdym poście, w planie nauki, zostanie podlinkowana pod przyciskiem treść postu.

Rozumiem, że większość z was nie będzie znać wszystkich technologii zawartej w moim planie, ale na początku drogi jest to zrozumiałe. Na pierwszy ogień wrzucam “PODSTAWY”. Materiał, który można określić jako elementarz każdego programisty. Pod każdym tematem, podam krótkie wyjasnienie, aby po krótce zobrazować materiał.

Na bieżąco “Plan nauki Frontend Developera” będzie aktualizowany o nowe, kolejne pozycję (posty). Nie zamierzam od razu przygotowywać całego planu, ponieważ po pierwsze – za długo by to trwało, a po drugie – nie widzę w tym sensu, ponieważ zamierzam przygotowywać materiał najbardziej odpowiadającej aktualnej specyfikacji opisywanej technologii.

Dla niecierpliwych mogę zapewnić, że w “Planie nauki Frontend Developera” nie zabraknie technologii programowania, języków, bibliotek takich jak: HTML, CSS, JavaScript, Flexbox, Bootstrap, Sass, Git, Github, NPM, jQuery, Ajax, API, Node.js, ReactJS, Webpack, ExpressJS, Redux, MongoDB, Testy jednostkowe, …może coś jeszcze? Zobaczymy. 

Tak jak wcześniej napisałem – początkujące osoby, które nie miały styczności z powyższymi terminami nie muszą się martwić. Każdy na początku poznawania/uczenia się ich nie znał – po prostu

…Tak więc, do dzieła. 

“#1. Wstęp do HTML. Znaczniki, struktura oraz pierwsza strona” zostanie opublikowany jeszcze w tym tygodniu!

Podstawy HTML

#1. Wstęp do HTML. Znaczniki, struktura oraz pierwsza strona
Strona internetowa. Zarządzaniem wyglądem za pomocą HTML. Budowa szkieletu strony, zagnieżdzanie znaczników oraz budowa pierwszej strony  Przejdź do posta!
#2. Tworzymy listy, tabele, linki oraz dodajemy obrazki
Tworzymy listy uporządkowane i nieuporządkowane, dodajemy tabele, umieszczamy linki oraz obrazki Przejdź do posta!
#3. Tworzymy podstawowe style
Poznajemy podstawowe style CSS aby strona nabrała estetyki. Przejdź do posta!
#4. Poznajemy ważne znaczniki
Dowiadujemy się o znacznikach, które pozwolą nam zbudować układ strony Przejdź do posta!

Pierwsza strona

#5. Podsumujmy wiedzę oraz zbudujmy stronę o sobie
…tak jak w tytule  Przejdź do posta!


Poniżej dodaję kontynuację “Plan nauki Frontend Developera”. Poznamy szerzej składnie w CSS – będzie na pewno kolorowo. 

Podstawy CSS

#6. Poznajmy bliżej CSS
Rozpoczynamy pracę z regułami CSS, selektorami klas i tagów Przejdź do posta!
#7. Coś więcej na temat selektorów
Dowiemy się o selektorach, dziedziczeniu i pierwszeństwie stylów Przejdź do posta!
#8. Kolorowanie wybranych elementów HTML
W tym poście pokaże jak dodawać kolory na wybrane elementy HTML Przejdź do posta!
Tytuł spojlera
Bawimy się tekstem zmieniając jej czcionkę, kolor, dekorację, wielkość oraz pogrubienie Przejdź do posta!
Tytuł spojlera
Dodajemy ramki, marginesy, odstępy oraz zmieniamy wielkości elementów Przejdź do posta!
#11. Listy i tabele w CSS
Zmieniamy wygląd list i tabel Przejdź do posta!

Druga strona – ładniejsza

#12. Strona sklepu komputerowego
Zróbmy stronkę korzystając z wiedzy z poprzednich postów  Przejdź do posta!


Budowa layoutu jest bardzo istotną czynnością przy tworzeniu strony internetowej. Dzięki layoutowi mamy podział zawartości strony na kolumny, osobny nagłówek z nawigacją czy stopkę.

Budowa layoutu

#13. Pierwsze kroki z layoutem
Krótkie wytłumaczenie czym jest układ strony oraz dlaczego jest istotnym elementem każdej witryny internetowej Przejdź do posta!
#14. Podział elementów na blokowe i liniowe
Wyszukamy podstawowe różnice w sposobach wyświetlania różnych elementów strony www Przejdź do posta!
#15. Rozmieszczanie elementów w poziomie na stronie www
Popróbujemy użyć CSS do rozmieszczania elementów Przejdź do posta!
#16. Layout strony
Poznamy podstawowy układ jednokolumnowy oraz jego pozytywne cechy Przejdź do posta!
#17. Spróbujmy popracować z panelem
Stworzymy zaawansowany układ na stronie Przejdź do posta!
#18. Pierwsze pozycjonowanie elementów na stronie www
Omówimy nowe właściwości position Przejdź do posta!
#19. Grid i wszystko jasne?
Podstawowa budowa girdu oraz zastosowanie Przejdź do posta!

Trzecia strona – poukładana

#20. Strona ze zdjęciami
Stworzymy stronkę ze zdjęciami  Przejdź do posta!
 

Zabawa z CSS

#21. Czcionki ładne i inne
Dodajemy czcionki zewnętrzne do naszej strony Przejdź do posta!
#22. Edycja tekstu
Zawijanie oraz transformacje tekstu. Sztuczki i jeszcze raz sztuczki  Przejdź do posta!
#23. Tło z grafiką
Ustawiamy właściwości zarządzające tło graficzne. Przejdź do posta!
#24. Przezroczystość  i cieniowanie
Dodajemy estetyczne cieniowania i przezroczystości naszym elementom strony www Przejdź do posta!
#25. Stany elementów
Poznajemy pseudo elementy. Przejdź do posta!
#26. Właściwość overflow
Zmierzymy się z suwakami oraz wymykającym się tekstem Przejdź do posta!
#27. Jednostki miar
Poznajemy dostępne jednostki miar w CSS Przejdź do posta!
#28. Formatowanie deklaracji CSS
Poznajemy właświwości przyjmujące kilka parametrów. Przejdź do posta!
 

Czwarta strona – Przedstawienie

#29. Wizytówka www
Tworzymy stronę typu wizytówka Przejdź do posta!

Flexbox

#30. Elastyczne boksy
Tworzymy koncepcję modelu budowy layoutu za pomocą technologii Flexbox Przejdź do posta!
#31. Wybieramy kierunek wyświetlania
Określamy kierunek wyświetlania elementów w wierszu i kolumnie Przejdź do posta!
#32. Pozycjonowanie elementów
Rozmieszczamy elementy w pionie i poziomie Przejdź do posta!
#33. Dwukolumnowy szkielet
Budujemy layout za pomocą Flexboxa Przejdź do posta!
#34. Grid na flexie
Krok po kroku, budowa grida z użyciem flexboxa Przejdź do posta!

Projekt – Galeria

#35. Galeria z flexboxa
Projekt zostanie stworzony za pomocą metody wyświetlania elastycznego – flexboxa Przejdź do posta!

 

Selektory CSS

#36. Złożone kombinatory
Poznajemy kombinatory, które pomogą odwoływać się do elementów na stronie Przejdź do posta!
#37. Stany elementów
Tym razem poznamy pseudoklasy pomocne w odwoływaniu się do elementów HTML Przejdź do posta!
#38. Pseudoklasy
Dowiemy się z materiału co to są pseudoklasy Przejdź do posta!
#39. Pseudoelementy
Poznamy kilka przykładów wspomnianych pseudoelementów Przejdź do posta!
#40. Selektory atrybutu
Poznamy kilka pomocnych selektorów atrybutu Przejdź do posta!

Piąta strona – Budowa strony

#41. Budowa strony internetowej
W ramach ćwiczenia zbudujmy stronę internetową  Przejdź do posta!

Bootstrap

#42. Bootstrap – krótkie wyjaśnienie
Pierwsze kroki w Bootstrapie? Z moim materiałem będzie łatwiej Zapraszam  Przejdź do posta!
#43. Komponent – tabela
Najważniejsze informację które dotyczą tabeli w Bootstrapie znajdziesz tutaj! Przejdź do posta!
#44. Komponent – formularz
Najważniejsze informację które dotyczą formularza w Bootstrapie znajdziesz tutaj! Przejdź do posta!
#45. Komponent – formularz
Najważniejsze informację które dotyczą formularza w Bootstrapie znajdziesz tutaj! Przejdź do posta!
#46. Paginacja
Chcesz zarządzać numerowaniem stron na swoim blogu? Zobacz wpis i zrozum paginację Przejdź do posta!
#47. Listy
Chcesz stworzyć przejrzystą listę w Bootstrapie? Zapraszam do materiału! Przejdź do posta!
#48. Listy
Chcesz stworzyć przejrzystą listę w Bootstrapie? Zapraszam do materiału! Przejdź do posta!
#49. Panele
Chciałbyś zamieścić kontent w estetycznym “pudełku”? Właśnie od tego są panele. Przejdź do posta!
#50. Panele
Chciałbyś zamieścić kontent w estetycznym “pudełku”? Właśnie od tego są panele. Przejdź do posta!
#51. Obrazki i etykiety
Chciałbyś zamieścić obrazki i etykiety na swojej stronie Bootstrap? Sprawdź jak się do tego zabrać Przejdź do posta!
#52. Responsywność strony
Responsywność na tle Bootsrapa? Sprawdź jak łatwo zastosować w swoich projektach Przejdź do posta!
#53. Zastosowanie elementów CSS
Stworzysz od zera swój pierwszy układ kolumnowy za pomocą Bootstrapa. Przejdź do posta!