Kurs Narzędzia Deweloperskie w Przeglądarce
Poznaj nowoczesne techniki pracy w Chrome DevTools które przyspieszą i uproszczą proces tworzenia i testowania stron WWW!
24 lekcji
2h 2min
5 (15 oceny)
Narzędzia Deweloperskie w Przeglądarce - Wydajne Tworzenie Stron WWW
Praca z HTML i CSS
Niezależnie od tego jak skomplikowana jest dana strona czy aplikacja internetowa, zawsze składa się ona z przynajmniej dwóch komponentów - struktury opisanej w HTML i wyglądu nadanego w CSS. Praca z tymi językami może czasami przyprawić o ból głowy, szczególnie wtedy, gdy tracimy czas na szukanie powodu "rozjeżdżającego się" layoutu lub złej wielkości fontu i miejsca, w którym został on nadpisany. W takich sytuacjach Chrome DevTools to nieoceniona pomoc. Dzięki temu narzędziu w mgnieniu oka znajdziesz zbyt szeroki element, zmienisz jego style "na żywo" i upewnisz się, że problem został rozwiązany. W kursie poznasz wszystkie techniki pracy z HTML i CSS, których wykorzystanie znacznie przyspieszy i uprości Twoją pracę.
Responsive Web Design
Przygotowywanie stron na urządzenia mobilne nie należy do najłatwiejszych zadań. Składa się na to przede wszystkim fakt, iż do czynienia mamy z bardzo wieloma rozdzielczościami telefonów czy tabletów. W kursie zobaczysz, w jaki sposób skalować swoją stronę odwzorowując różne urządzenia, wyświetlać Media Queries czy emulować sensory ruchu. Dowiesz się również jak symulować wolniejsze połączenie internetowe, z którym mamy często do czynienia w mobilnych sieciach, a także jak spowolnić procesor, aby odwzorować słabszy sprzęt, jakim bez wątpienia są urządzenia mobilne.
Konsola i debugowanie
Współczesne strony internetowe to nie tylko HTML i CSS. To także JavaScript - a nawet... sporo JavaScriptu. Z tego powodu narzędzia deweloperskie przeglądarek oferują i na tym polu wiele możliwości. Jedną z nich jest konsola, która pozwala wykonywać kod JavaScript w obrębie aktualnie otwartej strony. To właśnie tam możemy eksperymentować, podglądać logi czy błędy. Kiedy jednak stajemy przed rozwiązaniem trudniejszego problemu, często niezbędne jest skorzystanie z tzw. debuggera. Z kursu dowiesz się jak debugować swoje aplikacje, aby proces ich tworzenia był jak najprzyjemniejszy. Poznasz sposoby wykonywnania kodu linijka po linijce, gdzie na każdym etapie uzyskasz wgląd we wszystkie dane niezbędne do znalezienia problemu lub przetestowania tworzonego rozwiązania.
Sieć i lokalne dane
Nim dowolna strona internetowa zostanie wyświetlona, musi najpierw zostać do przeglądarki przesłana z serwera w formie kodu. Początkowo to tylko kod HTML, chwilę później CSS, JavaScript, fonty, obrazki, multimedia. Wszystkie te zasoby mają wpływ na szybkość ładowania się strony, a także jej renderowania. Tworząc serwis, bardzo łatwo "przesadzić" i stracić kontrolę nad wydajnością tego procesu.Tutaj z pomocą przychodzi panel Network, który omówimy w kursie. To tam znajdziemy wszystkie zapytania wysłane do serwera, dokładne dane na temat czasu pobierania każdego zasobu, statusy odpowiedzi ciasteczka i wiele więcej.
Wydajność aplikacji WWW
Choć zarówno komputery osobiste jak i urządzenia mobilne z roku na rok stają się coraz wydajniejsze, to i technologie tworzenia aplikacji internetowych idą do przodu. Oznacza to tylko tyle, że coraz bardziej zaawansowane aplikacje, wymagają do płynnego działania, coraz mocniejszych urządzeń. Trend ten można jednak w pewnym stopniu zatrzymać, skupiając się na tym, czy aby na pewno tworzone przez nas rozwiązania są dobrze przemyślane i wolne od błędów, które mogą powodować nadmierne zużycie pamięci czy czasu procesora. W kursie zobaczysz jak badać wydajność naszego kodu w kontekście CPU i pamięci RAM oraz na jakie pułapki zwracać szczególną uwagę.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób tworzących strony i aplikacje internetowe. Nieważne czy dopiero rozpoczynasz swoją przygodę z Web Developmentem czy jesteś już weteranem w tej branży. Materiał ten pokaże Ci nowoczesne techniki pracy, które przyspieszą i uproszczą proces tworzenia i testowania stron WWW. Kurs został podzielony w taki sposób, aby zarówno osoby znające wyłącznie HTML i CSS, jak i te korzystające już z języka JavaScript, znalazły porady odnośnie tych tematów.
Czego się nauczysz?
-
Praca z HTML i CSS
-
Narzędzia do pracy z RWD
-
Konsola JavaScript i debugowanie
-
Inspekcja ruchu sieciowego
-
Mierzenie wydajności aplikacji
-
Mnóstwo tricków i porad
Zawartość
Narzędzia Deweloperskie w Przeglądarce
8 rozdziały 24 lekcji 2h 2min
-
Wprowadzenie
9min
Jak korzystać z plików źródłowych
2min
Przegląd narzędzi deweloperskich
6min
-
Praca z HTML i CSS
30min
-
Praca z mobilnymi stronami
7min
Panel Responsive
5min
Debugowanie na iOS
3min
-
Konsola i debugowanie
28min
Synchronizacja zmian
4min
Debugowanie kodu
8min
DOM Breakpoints
5min
-
Sieć i lokalne pliki
19min
Przegląd panelu Network
7min
Przydatne funkcje panelu
8min
Ciasteczka i pliki lokalne
3min
-
Mierzenie wydajności
24min
Pomiary szybkości akcji
3min
Wydajność kodu
8min
Pomiary pamięci
9min
-
Inne
12min
Informacje o bezpieczeństwie
2min
Zapisywanie screenshotów
2min
Ustawienia eksperymentalne
8min
-
Zakończenie
1min
Podsumowanie
1min
Autor kursu
Piotr Palarz
Web Developer
Średnia ocen autora: 5
Dołącz do ponad 10 tys. zadowolonych z naszych kursów
Bardzo potrzebny kurs! Czekałem na niego! :)
Zbigniew Zalewski
24 kwietnia 2020
Bardzo ciekawy kurs. Informacje zawarte w nim zaoszczędzą dużo czasu podczas pracy, i poprawią jej jakość. Tak przy okazji, duże brawa dla Eduweb za dobór autorów, których się bardzo dobrze słucha. Dzięki temu, przejście kursu nie jest drogą przez mękę.
Piotr Nadolski
25 kwietnia 2020
Ciekawy kurs. Większość rzeczy wiedziałem, ale kilka było dla mnie nowych.
Marek Szymański
26 kwietnia 2020
Świetny kurs ze sporą dawką praktycznej wiedzy.
Róża Lew
30 kwietnia 2020
Bardzo przydatny materiał!
Artur
15 maja 2020
Kolejny świetny kurs poruszający wiele zagadnień od Pana Piotra.
Mateusz Gębala
21 maja 2020
Bardzo przydatny materiał. Polecam. 10/10
Robert Tomczuk
22 maja 2020
Bardzo fajny i przydatny kurs!
Dominik Matras
27 maja 2020
Pan Piotr jak zawsze w formie. Pracuję z dev-toolsami na codzień, ale i tak dowiedziałem się dużo nowych, ciekawych rzeczy. Polecam!
Łukasz Dmitruk
1 lipca 2020
Niezbędna wiedza dla każdego interesującego się webem.
Adam Kołtun
21 lipca 2020
Kurs - jak każdy Piotra - napakowany wiedzą. Dużo ciekawostek i mniej oczywistych funkcjonalności (pochowanych w różnych zakładkach Google Chrome). Polecam :)
Wojciech Połowniak
18 września 2020
Zwięźle i konkretnie na temat. Jako dobre wprowadzenie.
Paweł Wechmann
27 grudnia 2020
Bardzo dobry kurs, polecam serdecznie ;)
Łukasz Dragon
17 czerwca 2021
Fajny start, jak ktoś zaczyna. Paru ciekawych rzeczy się dowiedziałem, co kiedyś na pewno by mi się przydały, a nie wiedziałem, że są.
Adrian Kalinowski
29 grudnia 2021
Michał Kłoda
6 sierpnia 2022
Kurs Narzędzia Deweloperskie w Przeglądarce
-
24 lekcji wideo
-
2h 2min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Dlaczego wybrać właśnie ten kurs?
Efektywna nauka
Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
Wiedza ekspertów
Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
Praktyczne przykłady
Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
Pytania i odpowiedzi
Przeczytaj najczęściej zadawane pytania
Masz więcej pytań?
Porozmawiaj z nami na na czacie
Zadzwoń +48 880880606
Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.
Jak jest skonstruowany kurs?Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.
Jak najlepiej wykorzystać kurs?Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!
Jak mogę uzyskać dostęp do kursu?Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.
Czy kurs jest aktualny?Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.
Czym się różni kurs od warsztatu i ścieżki?Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.
We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.
Adam Romański
helloroman.com
Zacznij naukę w Narzędzia Deweloperskie w Przeglądarce
-
24 lekcji wideo
-
2h 2min materiału
-
Ostatnia rewizja 26.05.2020
-
Certyfikat w ramach ścieżek
-
Dostęp z urządzeń mobilnych
Kursy które mogą Cię również zainteresować
Nowoczesny React
Michał Jabłoński
Podstawy pracy z Cursor IDE
Adam Gospodarczyk
Nowości w NextJS13
Daniel Noworyta
Tailwind CSS
Daniel Noworyta
NestJS od Podstaw
Adam Gospodarczyk
Szeroka Perspektywa Full-Stack Web Developmentu
Adam Gospodarczyk
Narzędzia JavaScript Full-Stack Web Developera
Adam Gospodarczyk