Plan nauki Frontend Developera

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!