Ten artykuł jest częścią serii Kierunek: Web Developer ([part not set] / 2)

Wyobraź sobie, że jesteś na początku swojej programistycznej ścieżki. Chcesz tworzyć strony internetowe, aplikacje webowe, ale kompletnie nie wiesz od czego zacząć.

Na grupie wsparcia, którą założyłam pare miesięcy temu (a która liczy już prawie 3000 osób!) często pada pytanie: „od czego zacząć?” Pomimo tego, że poświęciłam odpowiedzi cały wątek w FAQ (Najczęściej zadawane pytania) to i tak raz na tydzień ktoś zada takie pytanie. Jak widać nie jest to oczywiste na starcie.

Owszem, jeśli ktoś programuje już w innym języku jest mu łatwiej. Choć prywatnie, gdy przechodziłam od zajmowania się C++ do Web Development’u też miałam wsparcie (o czym już wspominałam). Na dodatek miałam już podstawy (HTML, CSS, JS, jQuery, itd.).

Mam nadzieję, że ten artykuł będzie jakąś podpowiedzią dla Ciebie.

Prywatnie bardzo podobają mi się dwa diagramy w temacie (które polecam!):

Pierwszy diagram jest omawiany nawet w ramach filmiku na Youtube – 2016/2017 MUST-KNOW WEB DEVELOPMENT TECH (polecam!).  Tak naprawdę sporo je łączy choć jak dla mnie drugi jest bardziej przystępny 😉

Uważam, że takie diagramy to świetna wskazówka na start. Mimo to bez opisu może być ciężko się w nich połapać. Widzimy jakieś dziwne nazwy (TypeScript, ES6, gulp) – co to niby oznacza? Podpowiedź znajdziecie w tej serii.

Pisząc ten artykuł postaram się nawiązać do ścieżki przedstawionej na drugim z diagramów.

Ale najpierw…

Czego będzie dotyczyć ta seria artykułów?

Celem tej serii artykułów będzie właśnie wyjaśnienie: co, jak, jak długo, kiedy i dlaczego 😀

Nie podpowiem Wam całej ścieżki. Nie da się. Sami ją obierzecie. Ale podpowiem na co zwrócić uwagę, jakie macie alternatywy, gdzie szukać informacji, materiałów, pomocy. Sama postaram się dostarczyć pewne materiały do nauki w obszarach, w których mam doświadczenie.

Specjalnie rozbijam tą serię na kilka artykułów. Samemu Frontend’owi poświęcę dwa. Wierzcie mi, że to i tak mało. Ale poszczególne wątki będą jeszcze rozwijane na blogu.

W dzisiejszym artykule skupię się właśnie na Frontendzie. Od zera, poprzez podstawy HTML5, CSS, JS do … no właśnie nie do końca. Przerwiemy po zgłębieniu tematu CSS. A kolejna część będzie poświęcona JavaScript’owi oraz temu, co warto ogarnąć w jego zakresie.

Tak naprawdę każdy fragment tego artykułu można by rozwinąć w kolejną serię. To początek góry lodowej. Mam nadzieję, że jednak dostarczy Ci pewnych informacji co i jak. Część wątków rozwijałam, a kolejne będę jeszcze rozwijać na blogu.

W dalszej przyszłości przedstawię Backend. Potem poruszę lekko temat DevOps. Docelowo prześwietlimy cały Full Stack. Dość pobieżnie, ale mam nadzieję, że okaże się to pomocne. Przedstawię również co przydaje się ogólnie w pracy programistów (oraz pojawia w wymaganiach ofert o pracę), jak choćby Git.

Update 11.2020: Jeśli interesuje Cię kierunek Front-end, polecam się ze świeżo wydanym ebookiem w tym temacie! Więcej informacji znajdziesz klikając w poniższy obrazek 🙂 

Ebook kierunek frontend

No to zaczynamy..

 

Kierunek: Web Developer – czas start

Podstawa to oczywiście:

HTML, CSS, JavaScript

Do czego służą? W dużym skrócie:

HTML odpowiada za strukturę strony.

CSS za jej wygląd.

JavaScript nadaje jej działanie.

To są podstawy podstaw. To jak nauka dodawania w matematyce. Od tego zaczynasz i tu warto zostać dłużej. Zwłaszcza jeśli chodzi o CSS oraz JavaScript. Oszczędzi Ci to później czasu oraz nerwów.

Potrzebujesz materiałów na start? Zajrzyj do tych dwóch wpisów: HTML5 & CSS, JavaScript.

jQuery

Kiedy już opanujesz JavaScript warto zwrócić uwagę na jQuery. Ale w tej kolejności 🙂 Spotkałam się z podejściem przeskoczenia od razu do jQuery. Wierz mi, nie zawsze będziesz go używać. Czasem musisz pracować w czystym JavaScript. A ZAWSZE warto wiedzieć co siedzi pod spodem. jQuery jest dodatkiem do JavaScriptu, przyśpiesza development, co nie znaczy, że obędziesz się bez znajomości samego JavaScript’u.

 

Mam już podstawy, co dalej?

Tu zaczynają się schody 🙂 Tu zaczyna się wybór. I to nie jest tak, że jest jedna słuszna ścieżka. Jest wiele dostępnych opcji, które pociągają za sobą konieczność nauczenia się innych technologii. A tak naprawdę warto dotknąć różnych technologii, przynajmniej podstaw.

Przykład?

Jeśli myślisz o nauce React’a zapewne pociągnie to za sobą konieczność zapoznania się z webpack’iem, Fluxem, Redux’em (ew. MobX).

Istnieje jednak pewna część wspólna, którą warto znać niezależnie od kierunku, którym dalej podążysz.

Zacznijmy od zgłębiania…

CSS

Responsive Web Design (RWD)

Tak, to pojęcie związane z CSS’em. Pojęcie, którego nie możesz pominąć. To konieczność nie alternatywa. Nie ma (a raczej nie powinno) być w dzisiejszych czasach stron oraz aplikacji, które nie są responsywne.

Mam nadzieję, że znasz to pojęcie? Jeśli jednak nie dość przystępnie jest ono wytłumaczone na Wikipedii:

„Responsive Web Design (RWD) – technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na dużych ekranach, jak i na smartfonach czy tabletach.”

W temacie RWD ciekawie prezentuje się darmowy kurs „Responsive Web Design Fundamentals by Google” na Udacity.

Nie obędziesz się bez znajomości takich technologii jak media queries czy Flexbox. W tym temacie polecam:

Pamiętaj, że najpierw musisz opanować podstawy – CSS.

Preprocesory (Sass, Less, Stylus, itd.)

Znając CSS możesz pisać bezpośrednio w nim lub wykorzystywać możliwości oferowane przez preprocesory. Czym są? To narzędzia, które „ułatwiają” Ci życie, oferując pewne dodatkowe możliwości.

Warto zapoznać się przynajmniej z jednym spośród preprocesorów. Może okazać się, że w pracy przyda Ci się inny. Jednak rozumiejąc zasady działania, szybko opanujesz kolejny.

Frameworki

Pojęcie, z którym będziesz często się spotykać.

Framework to pewien szkielet do budowy aplikacji. Z jednej strony przyśpiesza i ułatwia tworzenie aplikacji, ale czasem może zablokować.

W mniejszych aplikacjach wbrew pozorom nie używa się wielu frameworków. W większych systemach są raczej koniecznością.

Frameworki CSS

Warto znać podstawy przynajmniej jednego. Przykłady takich frameworków:

Niekoniecznie trzeba z nich korzystać. Każdy z nich powoduje jakiś narzut na aplikację, zmniejsza szybkość jej działania. Często krytykowanym podejściem jest korzystanie z Bootstrapa, jeśli jedyną przyczyną jest zapewnienie wyłącznie grid’a dla aplikacji (pewien układ i responsywność).

W temacie CSS warto również zgłębić…

Metodologie CSS

Definiują pewne zasady utrzymywania kodu CSS. Przy małych projektach może to nie być problem, ale przy dużych zaczynają się schody. Wtedy warto trzymać się pewnych zasad.

Wśród najpopularniejszych znajdziesz:

  • OOCSS
  • BEM
  • SMACSS

Wiem, że temat ostatnio rozwija Bartek z bloga NaFrontendzie. Także odsyłam Cię do pierwszego artykułu z tej serii na Jego blogu.

To tyle, jeśli chodzi o dzisiejszy artykuł. W następnej części zajmiemy się zgłębianiem JavaScript. Jest o czym pisać 😉

Jeśli masz jakieś pytania – śmiało zadawaj je w komentarzu.

Series Navigation

POWIĄZANE ARTYKUŁYWIĘCEJ OD AUTORA