“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!

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!
#9. Stylujemy nasz tekst
Bawimy się tekstem zmieniając jej czcionkę, kolor, dekorację, wielkość oraz pogrubienie Przejdź do pota!
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

#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. Paginacja
Chcesz zarządzać numerowaniem stron na swoim blogu? Zobacz wpis i zrozum paginację Przejdź do posta!
#46. Listy
Chcesz stworzyć przejrzystą listę w Bootstrapie? Zapraszam do materiału! Przejdź do posta!
#47. Panele
Chciałbyś zamieścić kontent w estetycznym “pudełku”? Właśnie od tego są panele. Przejdź do posta!
#48. Obrazki i etykiety
Chciałbyś zamieścić obrazki i etykiety na swojej stronie Bootstrap? Sprawdź jak się do tego zabrać Przejdź do posta!
#49. Responsywność strony
Responsywność na tle Bootsrapa? Sprawdź jak łatwo zastosować w swoich projektach Przejdź do posta!
#50. Zastosowanie elementów CSS
Stworzysz od zera swój pierwszy układ kolumnowy za pomocą Bootstrapa. Część 1 Część 2 Część 3 Część 4

Bootstrap + JavaScript

#51. Bootstrap + JavaScript – wprowadzenie
Zobaczysz podstawy korzystania z frameworków wykorzystujących JavaScript Przejdź do posta!

#52. Komponent – Karuzela
Wraz z wejściem frameworku Bootstrapa, karuzela stała się nieodłącznym elementem każdej strony. Przejdź do posta!

#53. Komponent – menu
Podstawy masz już za sobą. Czas na rozszerzenie tematu! Przejdź do posta!

#54. Komponent – button
Zaawansowane tworzenie przycisków – sprawdź Przejdź do posta!

#55. Komponent – media object
Sprawdź jak tworzyć system komentarzy, tweetów, itp… Przejdź do posta!

#56. JavaScript – Modal
Wyświetlanie wiadomości której użytkownik nie przegapi. Zapraszam do materiału! Przejdź do posta!

#57. JavaScript – Taby
Dynamiczne zawartości zakładek. Sprawdź jak się do tego zabrać. Przejdź do posta!

#58. JavaScript – Tooltip
Pomocniczy tekst na stronie? Sprawdź jak łatwo zastosować w swoich projektach. Przejdź do posta!

#59. JavaScript – Popover
Jak dodać okienku przy przycisku lub linku? Sprawdź! Przejdź do posta!

#60. Elementy JavaScript – ćwiczenie
Sprawdź zdobytą przez siebie wiedzę! Rozwiąż ćwiczenie przygotowane przeze mnie. Przejdź do posta!

Formularze

#61. Input – tag oraz jego typy
Podstawowy element formularzy a zarazem najbardziej wszechstronny Przejdź do posta!
#62. Najważniejsze tagi formularzy
W tym materiale poznasz najważniejsze tagi HTML, na których zbudowane są formularze. Przejdź do posta!
#63. Atrybuty i akcje formularzy HTML
Zobacz jak wykorzystywać akcje oraz atrybuty. Przejdź do posta!
#64. Stylowanie formularzy
Jak ostylować formularz – zobacz! Przejdź do posta!
#65. Stylowanie inputów
Istnieją wyjątki w kwestii stylowania inputów – sprawdź! Przejdź do posta!
#66. Nietypowe wykorzystanie inputów
Sprawdź jak inaczej można wykorzystać inputy. Przejdź do posta!
#67. Formularz internetowy – ćwiczenie
Ćwiczenie do wykonania – formularz w sprawie wynajęcia przedmiotu. Przejdź do posta!

Animacje i grafika w CSS

#68. Animacje CSS – wprowadzenie
Nauczymy się stylować grafiki i animacje poprzez CSS. Przejdź do posta!

#69. CSS – przejścia
Zobaczysz jak łatwo tworzyć przejścia CSS. Przejdź do posta!

#70. 2D – tworzymy transformacje
Edycja obrazka i tekstu już nie będzie dla Ciebie tajemnicą. Przejdź do posta!

#71. 3D – tworzymy transformacje
Zobacz jak tworzyć bardziej skomplikowane transformacje. Przejdź do posta!

#72. Animacje CSS – ciąg dalszy.
Kontynuacja tematu animacji CSS – zobacz! Przejdź do posta!

#73. CSS – filtry
Zobacz jak korzystać z filtrów CSS. Przejdź do posta!

#74. CSS – gradienty
Gradienty za pomocą CSS. Sprawdź materiał! Przejdź do posta!

#75. Pierścienie – animowane ćwiczenie
Zbuduj od podstaw animowany element! Przejdź do posta!