Narzędzia Deweloperskie w Przeglądarce: Jak korzystać z plików źródłowych

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.