Kurs CSS dla backendowca

Kurs CSS dla backendowca
HA
  • Rejestracja:około 6 lat
  • Ostatnio:około 2 godziny
  • Postów:1006
1

Hej czy poleciłby ktoś jakiś fajny kurs CSS dla backendowca, który "trochę się orientuje". Chciałbym ogarnąć trochę front. CSS jako tako znam bo często coś tam w pracy poprawiam na froncie, korzystam z Bootstrapa itp, ale często przy tym korzystam z Google. Chciałbym robić to bardziej świadomie i z zachowaniem współczesnych metod, ogarnąć sassy, gulpy i inne webpacki.

Ogólnie szukam kursu, który jest w miarę na czasie i jest przeznaczony dla osób z ogólnym pojęciem. Myślę o tym kursie:
https://www.udemy.com/course/git-a-web-developer-job-mastering-the-modern-workflow/
Ale może znacie coś lepszego?

//edit zapomniałem dodać, że w miarę możliwości preferuję kursy po angielsku - nie wiem czemu, ale kursy po polsku mnie nużą - chyba kwestia intonacji w naszym języku.

edytowany 1x, ostatnio: hadwao
AK
Wydane przez Helion książki Erica Meyera nt CSS, dzięki nim kumam CSS jak mnie przyciśnie coś sformatować, a frontowcem nigdy nie będę.
HA
Hmm ale to są pozycję sprzed +10 lat - teraz już jest flex, grid, scss, narzędzia JS do automatyzacji itp. Pamiętam, że swego czasu te książki to był kanon, ale dzisiaj już chyba trochę zdezaktualizowane?
SE
  • Rejestracja:ponad 5 lat
  • Ostatnio:ponad 4 lata
  • Postów:55
1

Jeżeli preferujesz kursy po angielsku to jest masa świetnych materiałów na YouTube za free:

Po prostu wpisujesz: Webpack, SCSS, Flexbox.. + Crash Course albo Tutorial. Tak na dobrą sprawę wszystkiego można się w ten sposób nauczyć.
Jeżeli chodzi o UDEMY to patrz na oceny użytkowników i datę ostatniej aktualizacji.

Ten kurs dobrze wygląda (tylko nie płać czasem 200€ bo te kursy co chwilę kosztują 10€):
https://www.udemy.com/course/advanced-css-and-sass/

HA
Widzę, że mamy podobną metodę wyszukiwania kursów na Udemy - robię dokładnie jak opisałeś. Liczyłem, że ktoś poleci coś dla praktycznego dla takich "nie do końca zielonych" i co nie będzie trwał +20h, ale chyba faktycznie aby poważniej się wgryźć trzeba te ~20h odżałować. Co do YT to faktycznie jest sporo materiałów, ale jakoś z Udemy łatwiej mi się korzysta bo zazwyczaj lepsza jakość + kurs podzielony na krótki odcinki itp, a tak jak piszesz co chwila jest promocja za 10$ więc praktycznie jak za darmo. Dzięki
Prędki_Lopez
Hmm 20h to samego video, a nauuczenie się tego to hoho :P
Prędki_Lopez
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 4 lata
  • Postów:248
1

Jestem w podobnej sytuacji co Ty. Zobacz kurs CSS (ten z flexboxem o gridem) od Academind na Udemy. Bardzo polecam.

edytowany 1x, ostatnio: Prędki_Lopez
HA
Mówisz o tym https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/ ? Liczyłem na coś krótszego, ale przeglądając kursy z wyższymi ocenami faktycznie trudno znaleźć coś sub 10h więc chyba pójdę w tym kierunku. Coś juz u tego wykładowcy robiłem i pamiętam, że fajnie prowadził, wiec dodatkowy plus. Dzięki za polecenie.
Prędki_Lopez
@hadwao: Tak dokładnie ten. Niestety wychodzi na to, że css to kupa materiału. Ten kurs jak inne od gościa są bardzo szczegółowe, więc nie zawsze trzeba wszystko kropka w kropke. Z dugiej strony flexboxa się uczyłem nie z jego kursu bo akurat wcale tak obszernie nie ma opisane.
czysteskarpety
czysteskarpety
  • Rejestracja:prawie 10 lat
  • Ostatnio:ponad 4 lata
  • Lokalizacja:Piwnica
  • Postów:7697
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)