Front-end ścieżka nauki

Front-end ścieżka nauki
LP
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:15
0

Jestem w trakcie nauki zagadnień typowo pod frond-end. Ułożyłem sobie taką ścieżkę edukacyjną:

  1. HTML
  2. CSS
  3. SASS/LESS
  4. Bootstrap
  5. Javascript
  6. jQuery
  7. frameworki - co i jak jeszcze nie zdecydowałem, mam jeszcze do tego etapu sporo czasu.

Jestem obecnie na punkcie 2. Pytanie brzmi czy ma to sens, czy coś dodać, pominąć lub zmienić kolejność?

edytowany 3x, ostatnio: LibertyPrime
Pyxis
  • Rejestracja:ponad 7 lat
  • Ostatnio:około 2 godziny
3

Hierarchia wydaje się sensowa, jeśli chodzi o ogarnięcie podstaw. Jeśli jednak chcesz być dobry, to trzeba stale śledzić zmiany i wracać do poprzednich punktów. Chodzi mi o to, że jak dotrzesz do 5. punktu, to nie myśl sobie, że 1. punkt znasz na wylot, bo już przerobiłeś HTML. To tak nie działa. A w ogóle właściwa nauka to się rozpocznie, jak zaczniesz wiązać ze sobą wszystkie technologie i obserwować zależności, czyli za jakieś 2 lata (żartuję, nie da się tego oszacować ;)).

S9
Akurat chyba HTML tak bardzo się nie zmienia?
Pyxis
Zmienia się dość szybko. Wejdź sobie na dokumentację MDN i sprawdź wyrywkowo znaczniki. Niektóre dostały status przestrzały w przeciągu ostatnich 2-3 miesięcy. Obecnie nie tylko należy ułożyć elementy na stronie za pomocą znaczników, ale zadbać również o semantykę i dostępność, co przekłada się na lepsze pozycjonowanie strony.
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
1

nie ma wordpressa :/


LP
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:15
1
czysteskarpety napisał(a):

nie ma wordpressa :/

Nie mam zamiaru tego ruszać za żadne skarby.

ZO
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 7 lat
0

A warto nawet dla samego siebie.

LP
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:15
0

Mogę się mylić ale czy czasem pójście w stronę WorldPressa to nie pójście w kierunku klepacza g**no-stronek?

ZO
ja mam dwa własne blogi na wordpressie, dzięki temu wiem że wp mnie ogranicza chodź przerobiłem go sporo. Temu podstawową budowę wp dobrze poznać nie koniecznie przy nim pracować ja np. bym nie mógł.
1

Mozesz byc gownokodziarzem ważne że hajs sie zgadza. Bo hajs sie musi zawsze zgadzać.

MA
  • Rejestracja:prawie 17 lat
  • Ostatnio:około 21 godzin
  • Postów:644
1
HA
  • Rejestracja:prawie 10 lat
  • Ostatnio:około 7 lat
  • Postów:335
1

Przypomina mi się w tym wątku taka sytuacja z uczelni: student Politechniki musi wiedzieć choć coś na temat danej technologii (metrologia, obwody elektryczne, 300 języków programowania, PhotoShop, 3DSmax etc.), bo w papierach z uczelni musi się zgadzać, że miał i że jest wszechstronny. Mimo iż to mu się przez całe życie nie przyda i nic z tego nie pamięta :)

@LibertyPrime: wydaje mi się, że jeszcze sam nie będziesz wiedział czego chcesz się docelowo uczyć. Czasy chyba mamy takie, że najważniejsza jest praktyka (doświadczenie) i samodzielność. Kiedyś bez odpowiedniego papieru nie mogłeś iść na rozmowę kwalifikacyjną - teraz jest inaczej. Może nie w każdym przypadku ale w dużej mierze tak. Ok - nie masz papieru, ale masz umiejętności - jest szansa na zatrudnienie. Bo chyba docelowo o zatrudnienie chodzi, a nie uczysz się tego for fun.

Ścieżka moim zdaniem ok - poznasz każdego elementu po trochu, jak będziesz praktycznie kodował jakieś proste rzeczy to i Twoje wymagania pójdą w górę, a jak wymagania - to potrzeba szukania nowych narzędzi i rozwiązań. I to powinno być Twoim motorem napędowym.

Wracając do kwestii WP - nie musisz się tego uczyć - pewnie. Ale jak będziesz chciał zrobić sobie prostą stronę z wykorzystaniem tego co umiesz, to po co klepać kod od zera, jak możesz sobie postawić taką stronkę w 5 min i tylko ją rozwijać za pomocą setek gotowych pluginów. Po co wyważać otwarte drzwi? A jak żaden plugin Ci nie przypasuje to napiszesz swój - przy okazji nauczysz się czytania dokumentacji i pisania kodu z wykorzystaniem gotowych narzędzi a to będzie świetna podstawa do frameworków.

Potrzeba matką wynalazku - tu będzie podobnie. Większe projekty, więcej problemów do rozwiązania => automatycznie szukanie nowych narzędzi. Naturalna droga rozwoju. W między czasie wyklaruje Ci się ścieżka kariery - czy typowo pisanie frontu (czyli będą frameworki i biblioteki CSS/JS) czy jednak backend (frameworki PHP), czy jedno i drugie.

A potem za parę lat będziesz miał już umiejętności aby przyłapać pracę. Reszty nauczysz się w życiu.. tzn w firmie ;)

LP
  • Rejestracja:ponad 8 lat
  • Ostatnio:ponad 3 lata
  • Postów:15
0

Powiedzmy, że już ogarniam podstawy HTML i CSS w związku z tym naszły mnie wątpliwości. Po pierwsze raczej Bootstrapa wywalę na koniec bo coś czuję że to źle wpłynie na mają naukę gdy będę miał wszystko podane na tacy. Po drugie mam wątpliwości czy dalej szlifować CSS czy póki co zostawić te podstawy i ruszyć od razu do javastript.

LukeJL
  • Rejestracja:około 11 lat
  • Ostatnio:minuta
  • Postów:8406
2

Lepiej nie szlifować za bardzo, a po prostu nauczyć się podstaw i zacząć robić coś konkretnego.

Chociaż jeśli chodzi o CSS a JS, to pamiętaj, że wiele rzeczy takich wizualnych (np. animacje, efekty graficzne, layout itp.) można zrobić na czystym CSS, bez użycia JSa - więc pierwszym instynktem jak chcesz zrobić coś wizualnego/związanego z efektami graficznymi/animacjami itp. powinno być "czy można to zrobić w CSS?", a dopiero potem łapanie się za JS.


T2
  • Rejestracja:ponad 7 lat
  • Ostatnio:ponad 7 lat
  • Postów:7
0
LibertyPrime napisał(a):

Mogę się mylić ale czy czasem pójście w stronę WorldPressa to nie pójście w kierunku klepacza g**no-stronek?

To czy wyklepiesz g**no-stronkę czy super-stronkę to już zależy wyłącznie od Twoich umiejętności, a nie od tego, na jakim cms-ie będziesz pracował.

Kliknij, aby dodać treść...

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)