├── .gitignore ├── CONTRIBUTORS.md ├── README.md ├── databases.md ├── general.md ├── how-to-start.md ├── html-css.md ├── inspirations.md ├── js.md ├── roadmap.md ├── security.md ├── tools.md ├── version-control.md └── web-structure.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Example user template template 3 | ### Example user template 4 | 5 | .idea 6 | *.iml 7 | out 8 | gen 9 | -------------------------------------------------------------------------------- /CONTRIBUTORS.md: -------------------------------------------------------------------------------- 1 | # Twórcy 2 | 3 | * [Grzegorz Dyl](https://github.com/Rekseto) 4 | * [Wojciech Wilkowski](https://github.com/wwilkowski) 5 | * [Piotr Aueternum](https://github.com/Piotr-Aueternum) 6 | * [Michał Miszczyszyn](https://github.com/mmiszy) 7 | * [Tomasz Durda](https://github.com/Dzordzu) 8 | * [Tomasz Jakut](https://github.com/Comandeer) 9 | * [Kacper Duras](https://github.com/kacperduras) 10 | * [Antoni Kępiński](https://github.com/xxczaki) 11 | * [Kasper Seweryn](https://github.com/wvffle) 12 | * [Jakub Biesiada](https://github.com/JB1905) 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Polscy Web Developerzy dla początkujących. 2 | 3 | Polskie środowisko web developerskie jest zaniepokojone problemem, z którym spotykają się początkujący w tej dziedzinie. 4 | Chętni do rozpoczęcia nauki często sięgają po nie w pełni poprawne źródła, co rodzi licznie powtarzające się błędy w przyszłości, w efekcie wpływające na poziom web devu w Polsce. Repozytorium wychodzi na przeciw tym, którzy od początku swojej "kariery" chcą kroczyć poprawną ścieżką i na starcie rozwijać w sobie dobre nawyki. 5 | 6 | ## Jak zacząć? 7 | Dla osób zupełnie nowych w tematach webdeveloperki utworzyliśmy [krótki artykuł](./how-to-start.md) wprowadzający podstawowe terminy i systematyzujący bazowe informacje związane z tym zagadnieniem. 8 | 9 | ## Zródła, których z przedstawionych wyżej powodów należy unikać lub zwyczajnie brać na nie poprawkę: 10 | 11 | * [W3Schools](https://www.w3schools.com/) 12 | * (https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy) 13 | * (http://gal.steinitz.com/blog/2013/07/21/why-w3schools-is-bad-for-the-internet/) 14 | * (https://www.webkrytyk.pl/2017/10/29/w3schools-com/) 15 | * [Kursy programowania z kanału Pasja Informatyki](https://www.youtube.com/user/MiroslawZelent) 16 | * (https://forum.pasja-informatyki.pl/122259/co-jest-nie-tak-z-najnowszym-odcinkiem-kursu-miroslawa-zelenta) 17 | * (https://www.webkrytyk.pl/2015/02/28/wideokursy-1-kurs-js-i-css-miroslawa-zelenta/) 18 | * (https://www.webkrytyk.pl/2015/12/31/wideokursy-2-kurs-php-miroslawa-zelenta/) 19 | 20 | ## Zródła w pełni godne polecenia: 21 | * [Systemy kontroli wersji](./version-control.md) 22 | * [HTML i CSS](./html-css.md) 23 | * [JavaScript](./js.md) 24 | * [Generalnie](./general.md) 25 | * [Bazy danych](./databases.md) 26 | * [Inspiracje](./inspirations.md) 27 | * [Bezpieczeństwo](./security.md) 28 | * [Narzędzia](./tools.md) 29 | * [Sieci](./web-structure.md) 30 | * [Roadmap](./roadmap.md) 31 | 32 | ## Twórcy 33 | Projekt jest tworzony wolontaryjnie i nieodpłatnie przez [genialnych web developerów](./CONTRIBUTORS.md). 34 | -------------------------------------------------------------------------------- /databases.md: -------------------------------------------------------------------------------- 1 | # Bazy danych 2 | 3 | ## SQL 4 | 5 | * [Microsoft](https://docs.microsoft.com/en-us/sql/) 6 | * [Dokumentacja Typeorm](https://typeorm.io) 7 | 8 | ## NoSQL (Not Only SQL) 9 | 10 | * [Dokumentacja MongoDB](https://docs.mongodb.com/) 11 | * [Dokumentacja Mongoose](https://mongoosejs.com/docs/guide.html) 12 | * [Dokumentacja Neo4j](https://neo4j.com/sandbox-v2/?ref=product) - może być dostępny jedynie po zalogowaniu 13 | -------------------------------------------------------------------------------- /general.md: -------------------------------------------------------------------------------- 1 | # Generalne 2 | 3 | * [blog Comandeera](https://blog.comandeer.pl) 4 | * [Smashing Magazine](https://www.smashingmagazine.com/) 5 | * [Internet bez barier](http://internet-bez-barier.com/) 6 | * [WebKrytyk](https://www.webkrytyk.pl/) 7 | * [Caniuse (Spis wsparcia dla poszczególnych przeglądarek)](https://caniuse.com/) 8 | * [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg) 9 | * [WCAG 2.0 - zasady dostępności w sieci od W3C](https://www.w3.org/TR/WCAG20/) 10 | * [WCAG 2.1 - rozwinięcie WCAG 2.0](https://www.w3.org/TR/WCAG21/) 11 | -------------------------------------------------------------------------------- /how-to-start.md: -------------------------------------------------------------------------------- 1 | # Jak zacząć 2 | 3 | ## Spis streści 4 | TODO: Wstawić spis 5 | 6 | ## Wstęp 7 | Początek przygody z programowaniem może być całkiem trudnym wyzwaniem. Przede wszystkim mamy przed sobą mnóstwo, nie zawsze wartościowych, informacji. Potem pojawiają się problemy związane z ich segregacją, a następnie prawidłową kategoryzacją.
8 | Z tego powodu postanowiliśmy udostępnić Wam - przyszłym programistom - zbiór materiałów porządkujący 9 | najważniejsze informacje o nowoczesnym webdevie. Mamy nadzieję, że prezentowane i udostępniane tutaj treści ułatwią Wam zdobywanie i poszerzanie wiedzy o obecnej 'webówce'. 10 | 11 | ## Od tekstu do strony 12 | Pewnie każdy słyszał o HTMLu. Ten legendarny język znaczników (nie programowania) już od 25 lat umożliwia nam, zwykłym zjadaczom chleba, na wyświetlanie tekstu na ekranach naszych urządzeń. Jednak jak to się dzieje, że wpisując www.github.com/Rekseto/PolishWebDevForBeginners otrzymujemy jeden z najbardziej przydatnych spisów treści dla początkujących webdevelperów? 13 | 14 | Najpierw coś oczywistego - część widoczna od strony użytkownika: 15 | 1. Wpisujemy adres strony do przeglądarki 16 | 2. Czekamy od mniej niż sekundy do kilkunastu sekund na załadowanie się strony 17 | 3. Zamykamy 10 okienek inforumująch o newsletterach, RODO (GIODO), ciasteczkach itp. 18 | 4. Cieszymy się stroną 19 | 20 | Teraz zobaczmy jak to wygląda w uproszczeniu od strony maszyny: 21 | 1. Bierzemy daną *domenę* i wysyłamy odpowiednie *zapytanie* do **serwera DNS**. Orzymujemy adres zgodny z *IPv4* lub *IPv6*, wskazujący na inny serwer. Tłumacząc na język "człowieków": Wpisany adres (albo jego część) wysyłamy do innego komputera trzymającego listę wszystkich adresów w internecie (zapisanych w postaci tekstu). Ten komputer szuka naszego adresu i jeśli on istnieje to wysyła do nas informacje zwrotną w której umieszczony jest adres prowadzący do innego komputera (zapisany w postaci cyferek i kropek). Czyli np. dla wpisanego www.facebook.com/jakis-smieszny-link do **serwera DNS** wysyłany jest adres www.facebook.com. W odpowiedzi powinniśmy uzyskać np. 69.63.184.142 22 | 2. Orzymujemy odpowiedź od serwera, jeśli strona istnieje idziemy dalej 23 | 3. Kierujemy się pod uzyskany adres. Tam ponownie wysyłamy nasze *zapytanie*. Dodatkowo (poza pełnym adresem strony) w *zapytaniu* mogą być inne informacje np. dotyczące imienia użytkownika. 24 | 4. Serwer, który jest najczęściej *hostowany*, przetwarza nasze zapytanie i zwraca *klientowi*, czyli naszemu komputerowi (ale nie nam bezpośrednio), odpowiedź w postaci pliku tekstowego. Tłumacząc: 25 | Inny komputer (ten na który wskazuje "numerkowy adres"), który jest najczęściej wynajmowany przez osobę posiadjącą stronę, analizuje to co mu wysłaliśmy i tworzy plik tekstowy (zazwyczaj w postaci pliku HTML, ale nie zawsze!), a następnie nam go wysyła 26 | 5. Nasza przeglądarka wykorzystuje swoją maszynę do renderingu (dla Firefoxa będzie to Gecko, a dla Google Chrome będzie to Chromium), a następnie, jeśli to konieczne, wysyła kolejne zapytania (HTML może zawierać informacje na temat dodatkowych plików potrzebnych do załadowania strony) 27 | 6. Wyświetlamy odpowiednią treść użytkownikowi 28 | 29 | Tak w skrócie to wygląda 30 | 31 | ## Popularne języki 32 | W dobie dzisiejszego internetu możemy wyróżnić kilka kluczowych technologii umożliwiających bezproblemowe kreowanie i modyfikowanie treści. Są nimi: 33 | * **HTML (HyperText Markup Language)** - język znaczników (a nie programowania!) pozwalający na określenie celu w jakim został stworzony każdy element strony. Dla przykładu, pozwala on na 'powiedzenie' przeglądarce, że dany tekst jest artykułem, a tekst poniżej jest np. nóżką strony. 34 | 35 | * **CSS (Cascading Style Sheets)** - jest to zbiór reguł, wedle których przeglądarka interpretuje, a następnie wyświetla wszelkie treści wizualne jak np. kolory, marginesy, czy pogrubienie tekstu. 36 | 37 | * **JS (Javascript)** - język programowania mający ogomną ilość zastosowań. Wykorzystuje się go między innymi do frontendu, czyli dziedziny w której programista skupia się na wyglądzie aplikacji i prezentacji danych. Dodatkowo JS jest stosunkowo prostym i potężnym narzędziem w pracy przy backendzie, będącym niejako odwrotnością frontendu. Programowanie backendowe polega głównie na kontrolowaniu wszystkiego co dzieje się w 'bebechach' strony - połączenia z bazą danych, zwracania odpowiedniej strony po wpisaniu adresu 'google.com' itp. 38 | 39 | * **PHP (Personal Home Page, PHP Hypertext Preprocessor)** - język programowania mający zastosowanie w backendzie. Możemy nazywać go nieśmiertelnym dinozaurem, gdyż 'umiera' (wychodzi z użytku) już od ponad dekady. Co jest interesujące, jego nowe wersje są bardzo szybkie, wydajne i bezpieczne, zaś sam język jest fundamentem dla ponad 60% stron internetowych. 40 | 41 | * **SQL (Structured Query Language)** - język służący do operacji na bazach danych (opartych głównie na relacjach, cokolwiek to słowo dla Was teraz znaczy) 42 | 43 | * **NoSQL (Not Only SQL)** 44 | 45 | * **GIT** - system kontroli wersji. Służy do kontrolowania zmian w projekcie, ułatwia pracę zepołową i umożliwia szybki wgląd i edycję historii projektu. 46 | 47 | 48 | -------------------------------------------------------------------------------- /html-css.md: -------------------------------------------------------------------------------- 1 | # HTML i CSS 2 | 3 | ## HTML 4 | 5 | * [MDN sekcja HTML](https://developer.mozilla.org/pl/docs/Learn/HTML) 6 | * [Specyfikacja W3C](https://w3c.github.io/html/introduction.html#introduction) 7 | * [Specyfikacja Living Standard od WHATWG](https://html.spec.whatwg.org/multipage/) 8 | * [Semantyczny HTML](http://tutorials.comandeer.pl/html5-blog.html) 9 | * [Polski kanał kodu.je](https://www.youtube.com/playlist?list=PL5nf3UIj1JtUwEgjEPo9LurVKKX5bH1IP) 10 | 11 | ## CSS 12 | 13 | * [MDN sekcja CSS](https://developer.mozilla.org/pl/docs/Web/CSS) 14 | * [CSS-Tricks](https://css-tricks.com/) 15 | * [BEM](http://getbem.com/) 16 | * [BEM](https://en.bem.info/) - bardziej szczegółowe podejście do tematu 17 | * [Stylus](http://stylus-lang.com/) 18 | * [SASS](http://sass-lang.com/) LUB [LESS](http://lesscss.org/) - oraz ich [porównanie](https://css-tricks.com/sass-vs-less/) 19 | * [Darmowy kurs CSS Grid](https://cssgrid.io/) 20 | -------------------------------------------------------------------------------- /inspirations.md: -------------------------------------------------------------------------------- 1 | # Inspiracje 2 | 3 | * [Awwwards](https://www.awwwards.com/) 4 | * [CollectUI](http://collectui.com/) 5 | * [One Page Love](https://onepagelove.com/) 6 | * [Creative Portfolios](http://www.creative-portfolios.com/) 7 | -------------------------------------------------------------------------------- /js.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | 3 | ## ES vs JS 4 | 5 | Czym się różnią te dwa skróty? ES jest standardem, zaś JS jest jego implementacją (czyli wykonaniem).
6 | Do tej pory największym przełomem był ES6 powstały w 2015 roku. Tę wersję powinien znać każdy web developer. Dla ciekawych [strona po angielsku opisująca szerzej ten temat](https://flaviocopes.com/ecmascript/) 7 | 8 | ## TypeScript 9 | 10 | Jest to coraz bardziej popularny język, a właściwie superset JavaScript, czyli rozszerzenia dodające m. in. typowanie statyczne. Rozwiązanie posiada zestaw narzędzi w tym kompilator (transpiler) i dedykowane wtyczki do edytorów kodu. Projekt rozwjany jest przez Microsoft, a kod źródłowy dostępny jest w publicznym repozytorium. 11 | [Dokumentacja](https://www.typescriptlang.org/) 12 | 13 | ## Nieskategoryzowane 14 | 15 | * [Najważniejsza biblioteka JS - VanillaJS](http://vanilla-js.com/) 16 | * [MDN sekcja JS](https://developer.mozilla.org/pl/docs/Web/JavaScript) 17 | * [Exploringjs](http://exploringjs.com/) 18 | * [JavaScript.Info](https://javascript.info/) 19 | * [YouDontKnowJS](https://github.com/getify/You-Dont-Know-JS/blob/master/README.md) 20 | * [Mythbusters JS](https://mythbusters.js.org/) 21 | * [Wzorce projektowe](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) 22 | * [Fun Fun Function](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q) 23 | * [overment](https://www.youtube.com/channel/UC_MIaHmSkt9JHNZfQ_gUmrg/featured) 24 | * [JavaScript 30](https://javascript30.com/) 25 | * [ES6 for Everyone](https://es6.io/) 26 | * [Lista przydatnych snippetów na różne okazje](https://codetogo.io/) 27 | * [Czym jest Event loop?](https://youtu.be/8aGhZQkoFbQ) 28 | 29 | ## React 30 | 31 | React to jedna z najpopularniejszych bibliotek do tworzenia aplikacji webowych. Stworzona została przez Facebooka w 2013 roku i obecnie jest używana przez firmy takie jak Twitter, Reddit, Uber, Netflix i Airbnb. 32 | 33 | * [Dokumentacja](https://reactjs.org/docs/getting-started.html) 34 | * [Darmowy Kurs React po Polsku w postaci wpisów na blogu](https://typeofweb.com/kurs/react-js/) 35 | * [Inny Kurs React, również darmowy i po Polsku](http://szczecinski.eu) 36 | * [React for Beginners](https://reactforbeginners.com/) - Płatny kurs po angielsku, stworzony przez cenionego developera, Wesa Bosa. 37 | * [Overreacted](https://overreacted.io/) - Blog Dana Abramova, pracownika Facebooka i współtwórcy Reduxa. Niektóre posty zostały przetłumaczone na Język polski. 38 | * [React Router](https://reacttraining.com/react-router/) - Jeden z najpopularniejszych routerów do Reacta. 39 | * [Reach Router](https://reach.tech/router) - Alternatywa dla React Router, stworzona przez Ryana Florence'a. 40 | * [Redux](https://redux.js.org/) - Najpopularniejsza biblioteka do zarządzania lokalnym stanem aplikacji. 41 | * [MobX](https://mobx.js.org/) - Alternatywa dla Reduxa. 42 | * [Next.js](https://nextjs.org/) - Framework do Reacta, ułatwiający tworzenia aplikacji i dodający wiele funkcjonalności, min. renderowanie po stronie serwera (SSR). 43 | * [Gatsby](https://www.gatsbyjs.org/) - Framework do Reacta, którego celem jest ułatwienie tworzenia szybkich aplikacji. Częściowo alternatywa dla Next.js. 44 | 45 | ## Vue 46 | 47 | Vue, podobnie jak React jest biblioteką do tworzenia interfejsów użytkownika. Projekt został stworzony w 2014 roku przez Evana You, byłego pracownika Google. Obecnie ma prawie 150 tysięcy gwiazdek w serwisie Github. 48 | 49 | * [Dokumentacja](https://vuejs.org/v2/guide/) 50 | * [vue-router](https://router.vuejs.org/) - Oficjalny router do Vue. 51 | * [Vuex](https://vuex.vuejs.org/) - Biblioteka do zarządzania stanem aplikacji, odpowiednik Reduxa. 52 | * [Nuxt.js](https://nuxtjs.org/) - Framework do Vue, wzorowany na Next.js 53 | 54 | ## Angular 55 | 56 | * [Dokumentacja](https://angular.io/docs) 57 | * [RxJS](https://rxjs.dev/) - Biblioteka do tworzenia aplikacji w oparciu asynchroniczność i programowanie reaktywne. 58 | * [NgRx](https://ngrx.io/) - Biblioteka do zarządzania stanem aplikacji, oparta na RxJS. 59 | 60 | ## Inne 61 | 62 | * [Event loop](https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be&fbclid=IwAR3-lP97INfmRzM9xLJWwwFIFw0QBszBhB0AtWaUtOvcK5O5e5YHgEbgbnI) 63 | 64 | ## Budowanie Projektu (module bundlers) 65 | 66 | Gdy w naszym projekcie korzystamy z wielu rodzajów plików, bundler przekształca je, minifikuje i (w zależności od konfiguracji) rozdziela na mniejsze kawałki (chunki). Bundlery są często wykorzystywane np. przy tworzeniu aplikacji z użyciem Reacta i Vue. 67 | 68 | * [Webpack](https://webpack.js.org/) - Najpopularniejszy module bundler, wykorzystywany przez korporacje takie jak Trivago, Adobe, czy Shopify. 69 | * [Parcel](https://parceljs.org/) - Alternatywa dla Webpacka, niewymagająca konfiguracji. 70 | * [Rollup](https://rollupjs.org/guide/en) - Inna alternatywa dla Webpacka. 71 | -------------------------------------------------------------------------------- /roadmap.md: -------------------------------------------------------------------------------- 1 | # Roadmap 2 | W internecie znajduje sie ogromna ilość tzw. roadmaps do zostania web developerem. Poniżej, możecie znaleźć przykłady kilku: 3 | 4 | * [Developer Roadmap (kamranahmedse)](https://github.com/kamranahmedse/developer-roadmap) 5 | -------------------------------------------------------------------------------- /security.md: -------------------------------------------------------------------------------- 1 | # Bezpieczeństwo 2 | * [PDO (PHP)](https://phpdelusions.net/pdo) 3 | * [OWASP](https://www.owasp.org/index.php/Main_Page) 4 | * [NodeJS (film Codetech)](https://www.youtube.com/watch?v=0dgmeTy7X3I) 5 | * [CVE details](https://www.cvedetails.com/) 6 | * [OAuth 2.0 - wprowadzenie](https://sekurak.pl/oauth-2-0-jak-dziala-jak-testowac-problemy-bezpieczenstwa/) 7 | 8 | ## Dla średiozaawansowanych 9 | * [JOSE (Javascript Object Signing and Encryption) - kiedy NIE używać](https://paragonie.com/blog/2017/03/jwt-json-web-tokens-is-bad-standard-that-everyone-should-avoid) 10 | -------------------------------------------------------------------------------- /tools.md: -------------------------------------------------------------------------------- 1 | # Narzędzia 2 | * [PageSpeed Insight - narzędzie od Google do optymalizowania działania stron](https://developers.google.com/speed/pagespeed/insights/?hl=pl) 3 | * [GTmetrix - PageSpeed z dodatkowymi narzędziami](https://gtmetrix.com/) 4 | * [Test my site with Google - narzędzie od Google testujące szybkość strony na telefonach](https://testmysite.withgoogle.com/intl/pl-pl) 5 | * [Pingdom Tools - narzędzie pozwalające na test szybkości strony z różnych lokalizacji](https://tools.pingdom.com/) 6 | * [HTML Validator - walidator HTML'a](https://validator.w3.org/) 7 | * [CSS Validator - walidator CSS'a](https://jigsaw.w3.org/css-validator/) 8 | * [WAVE - szuka błędów dostępności na stronie](https://wave.webaim.org/) 9 | * [IDI Web Accesibility Checker - podobnie jak wyżej, ale może sprawdzać również lokalne pliki](https://achecker.ca/checker/index.php) 10 | * [Color Contrast Checker - sprawdza czy kolor tekstu i tła zachowują odpowiednio wysoki kontrast](https://webaim.org/resources/contrastchecker/) 11 | * [Check My Colours - sprawdza kontrast na całej stronie](http://www.checkmycolours.com/) 12 | * [Rgba to hex - konwerter rgba do hex](https://tdekoning.github.io/rgba-converter/) 13 | -------------------------------------------------------------------------------- /version-control.md: -------------------------------------------------------------------------------- 1 | # GIT 2 | 3 | **Git jest narzędziem do kontroli wersji. Dzięki niemu można łatwo cofnąć, dodać, czy edytować wprowadzone w kodzie zmiany** 4 | 5 | * [Oficjalna strona i dokumentacja](https://git-scm.com/) 6 | -------------------------------------------------------------------------------- /web-structure.md: -------------------------------------------------------------------------------- 1 | # Sieci 2 | 3 | 4 | 5 | ## Dla średniozaawansowanych 6 | * [Bezpieczeństwo sieci](https://www.youtube.com/watch?v=BZTWXl9QNK8) 7 | * [Mit (sieci komputerowe)](https://www.youtube.com/watch?v=QOtA76ga_fY) 8 | * [Bsides Warsaw](https://www.youtube.com/channel/UCexBIw_UJOz-H1PD9I9zkGw/videos) 9 | --------------------------------------------------------------------------------