Masz już konto? Zaloguj się

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

W dzisiejszych czasach, gdy aplikacje internetowe stają się coraz bardziej rozbudowane, znajomość nowoczesnych narzędzi do pracy z nimi to konieczność. Jednym z takich narzędzi jest Chrome DevTools, wbudowane w każdą instalację przeglądarki Chrome na świecie. I choć miliony użytkowników nie wiedzą nawet o jego istnieniu, pozostaje ono zaledwie dwa kliknięcia od nich. Przekonaj się jak to narzędzie uzupełni proces Twojej pracy nad stronami internetowymi!

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

    Wstęp

    Podgląd lekcji

    1min

    Jak korzystać z plików źródłowych

    2min

    Przegląd narzędzi deweloperskich

    6min

  • Praca z HTML i CSS

    30min

    Drzewo DOM

    5min

    Praca z drzewem DOM

    10min

    Praca z CSS

    11min

    Praca z kolorami

    Podgląd lekcji

    4min

  • Praca z mobilnymi stronami

    7min

    Panel Responsive

    5min

    Debugowanie na iOS

    3min

  • Konsola i debugowanie

    28min

    Praca z konsolą

    Podgląd lekcji

    12min

    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

    Audyt strony

    Podgląd lekcji

    4min

  • 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

Bio
Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.
Inne kursy tego autora
JavaScript Narzędzia Deweloperskie w Przeglądarce Visual Studio Code Laravel Vue.js

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

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

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