Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja

Warsztat z certyfikatem Akademii IT Media

Stacjonarnie Warszawa lub online | na żywo

Jako jedyny w Polsce Elitarny Edukacyjny Partner Adobe mamy zaszczyt zaprosić Cię na Szkolenie HTML i CSS – moduł II z certyfikatem! Szkolenie prowadzone jest w formie zajęć stacjonarnych w Warszawie lub zdalnej pracy z domu w dowolnej lokalizacji. Ma charakter praktycznych ćwiczeń warsztatowych z trenerem.

Szkolenie HTML i CSS w praktyce – moduł II – responsywne strony i ich optymalizacja obejmuje swym zakresem niezbędne umiejętności dla każdego web developera.

Jak wygląda szkolenie?

Program szczegółowy

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja

I dzień – Rozpoczęcie szkolenia – 8:30

HTML / CSS – przypomnienie najważniejszych zagadnień

• Techniki resetowania CSS: normalize vs reset
• Model pudełkowy
• Metody wyświetlania elementów na stronie www
• Pozycjonowanie elementów,
• Obsługa właściwości background
• Zarządzanie wielkością tekstu
• Struktura strony
• Tworzenie układów menu

Planowanie struktury strony www pod Responsive Web Design

• Prezentacja treści
• Menu
• Listy uporządkowane i nieuporządkowane
• Grafiki – optymalizacja grafik – wykorzystanie srcset

Przerwa obiadowa – 13:30 – 14.00

Google fonts / webfonts

• Plusy i minusy wykorzystania dodatkowych fontów na stronie www
• Sposoby podłączania zewnętrznych fontów
• Techniki optymalizacyjne

Elastyczne strony www

• Popularne breakpoints w RWD
• Viewport
• Wprowadzenie do Media Queries / Breakpoints
• Orientation: portrait oraz landscape

Zakończenie szkolenia – 16:30

II dzień – Rozpoczęcie szkolenia – 8:30

Pozycjonowanie elementów

• Position: absolute, relative, fixed, sticky
• Przykłady wykorzystania na stronie

Wprowadzenie do metodologii BEM CSS

• Nazewnictwo elementów
• Praktyczne przykłady

Przerwa obiadowa – 13:30 – 14.00

Zastosowanie Flexbox CSS

• Definiowanie kontenera
• Flex-direction i ustawianie elementów w kolumnie
• Właściwość:
  • flex-wrap,
  • justify-content
  • align-items
  • order
• Praktyczne wykorzystanie Flexbox CSS

Wykorzystanie Flex Grid

• Wady i zalety
• Grid Container
• Grid Item
• Grid Line
• Grid Cell
• Grid template columns
• Grid template rows
• Grid template areas

Tworzenie animacji na bazie stylów CSS

• Animacje na stronie www za pomocą stylów CSS
• Wykorzystanie popularnych bibliotek wspierających animacje elementów

CSS – spójrzmy głębiej

• Właściwości: min-max width/height
• Jednostki rem, em, vw, vh

Zakończenie szkolenia – 16:30

III dzień – Rozpoczęcie szkolenia – 8:30

Frameworki frontendowe wykorzystywane przy tworzeniu stron www

• Co to jest?
• Kiedy warto korzystać z frameworków
• Bootstrap – wprowadzenie
• Foundation – wprowadzenie

Przerwa obiadowa – 13:30 – 14.00

Bootstrap

• Rozpoczęcie pracy z frameworkiem – techniki podłączania plików
• Klasy, typografia, formatowanie list i itp.
• Dodawanie elementów interfejsu

Zakończenie szkolenia – 16:30

IV dzień – Rozpoczęcie szkolenia – 8:30

Projekt strony RWD

• Zaplanowanie działań
• Wdrożenie struktury projektu
• Tworzenie responsywnej strony www HTML / CSS – praktyczne ćwiczenia

Przerwa obiadowa – 13:30 – 14.00

• Wprowadzenie technik responsywnych
• Wykorzystanie Bootstrap – ćwiczenia praktyczne
• Testowanie projektu

Zakończenie szkolenia – 16:30

V dzień – Rozpoczęcie szkolenia – 8:30

Dodatkowe narzędzia deweloperskie

• Konsola DevTools w przeglądarce – źródło wiedzy o stronach www
• Testowanie responsywności serwisu
• Sizzy

PageSpeed Insights

• Dlaczego jest to takie ważne?
• Elementy wpływające na szybkość serwisu
• Optymalizacja techniczna
• Wdrożenie rozwiązań przyspieszających działanie wersji mobilnej

Przerwa obiadowa – 13:30 – 14.00

• Lazy loading
• Dostępne rozwiązania serwerowe jakie warto wdrożyć w celu optymalizacji serwisu
• CDN – jak działa i dlaczego warto?
• Inne narzędzia wykorzystywane w ocenie szybkości działania serwisu www

Google Search Console

• Podłączania strony www
• Metody alternatywne zgłaszania serwisu www do GSC
• Konfiguracja i generowanie mapy serwisu
• Analizowanie potencjalnych błędów

Strona w Google

• Co wpływa na proces indeksowania stron www
• Elementy serwisu ważne dla SEO
• Wykonywanie przekierowań adresów URL – eliminacja błędów 404
• Metadane
• Dane strukturalne

Podsumowanie

Zakończenie szkolenia – 16:30

Każdego dnia oprócz przerwy obiadowej, przewidziane są dwie przerwy kawowe po 15 minut.

Jak zdobyć dofinansowanie na Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja?

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja - opinie na temat szkolenia

Zarówno oferowane Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i ich optymalizacja, jak i pozostałe szkolenia organizowane przez IT Media cieszą się dużym uznaniem wśród uczestników, którzy najwyższej oceniają naszych wykładowców. Goście zajęć doceniają ich przygotowanie, zaangażowanie i podejście. Przychodząc na nie, przekonasz się, że stawiamy na wykwalifikowaną kadrę, która z pasją podchodzi do prowadzenia wykładów. Nasze kursy i usługi mają średnią ocen 4,9 w Google oraz 5,0 na Facebooku.

Sprawdź nasze opinie na Google >

Dowiedz się więcej o szkoleniu

Korzystanie ze stron internetowych wyłącznie na ekranie komputera to już przeszłość. W dzisiejszych czasach, smartfony są preferowanym wyborem na świecie, jeśli chodzi o korzystanie z Internetu. Dotyczy to ponad 52 % użytkowników. Responsywne strony internetowe projektowane w technologii Responsive Web Design dopasowują się do rozdzielczości ekranu tak, by użytkownik mógł korzystać z jej pełnej funkcjonalności.

Kluczem do sukcesu Twojej strony www będzie między innymi takie zaprojektowanie serwisu, które uwzględni wszystkie niezbędne funkcjonalności oraz pozwoli na optymalne zaprezentowanie treści i wszelkich materiałów znajdujących się na niej na ekranach o różnych rozdzielczościach.

Responsywny design (responsive web design) to takie zaprojektowanie serwisu www, które umożliwi poprawne wyświetlenie strony internetowej w zależności od rozdzielczości urządzenia. Projektując responsywny układ strony www możemy określić wiele czynników, pod wpływem których układ elementów HTML będzie otrzymywał nowe właściwości CSS.

HTML5

HTML5 jest najnowszym standardem z zakresu kodowania. Podobnie jak każda aktualizacja, miał na celu usprawnienie pracy web developerów i poprawy doświadczeń użytkowników. Bez względu na to czy jesteś początkującym czy doświadczonym już web developerem powinieneś mieć świadomość zmian, jakie pojawiły się w architekturze HTML wraz z jego wprowadzeniem. Nowe tagi, w tym tagi, które kładą nacisk i zwiększają możliwości mediów i animacji, zastosowanie tagów wideo i audio, to tylko kilka przykładów z tych, które zostaną omówione podczas szkolenia przez naszego trenera.

Projektowanie i tworzenie responsywnych stron WWW – praca z CSS

Uczestnicy szkolenia przyjrzą się strukturze typowej strony pod kątem dostępności i optymalizacji pod wyszukiwarki. Wielu dotychczasowych uczestników szkolenia odnotowało znaczną poprawę pozycji ich stron w rankingu Google po wdrożeniu zmian zaproponowanych w tej części kursu.

Znaczna część szkolenia poświęcona jest na poszerzenie wiedzy z zakresu CSS. Omówimy liczne selektory oraz właściwości dostępne w CSS. Dodatkowo uczestnicy poznają zalety i wady używania wartości względnych (piksele, punkty etc.) oraz wartości absolutnych (procent, emów itd.).

Model pudełkowy jest punktem wyjściowym do ciekawej dyskusji na temat implementacji standardów w różnych popularnych wyszukiwarkach. Poznasz różnice między elementami liniowymi i blokowymi. Co więcej, dowiesz się jak marginesy, paddingi i właściwości obramowania mogą wpłynąć na układ strony. Model pudełkowy daje Ci również możliwość dodawania obrazków tła do elementów. To może dać świetne efekty, zwłaszcza z zastosowaniem przezroczystości przy użyciu PNG lub właściwości CSS3.

Większość projektów może być wykonana przy zastosowaniu właściwości float. Jednak bywa też, że lepszym rozwiązaniem okaże się pozycjonowanie absolutne i relatywne. Nasz wykładowca upewni się, że poznasz te sposoby rozmieszczania elementów na stronie. I co więcej będziesz potrafił stworzyć dokładnie taki układ strony, jaki jest w projekcie.

Media Queries – Zapytania o media

Media Queries są to zapytania umożliwiające przypisywanie elementom różnych stylów; reguły, które możemy zastosować pod pewnymi warunkami. Można to ująć w ten sposób: „Jeśli strona użytkownika ma rozdzielczość mniejszą niż określona wartość, wtedy zastosuj dane właściwości CSS”. Zyskujemy możliwość zmieniania wyglądu strony, zwiększenia rozmiaru tekstu, zmiany koloru tła, ustawienia menu w innym miejscu w zależności od rozdzielczości itd. Ale zapytania o media to nie tylko kwestia rozdzielczości. Możesz zmienić wygląd strony w oparciu o takie kryteria jak rodzaj ekranu, ilości kolorów czy orientacja.

Podczas szkolenia nauczysz się jak korzystać z rozszerzonych możliwości Media Queries. Zapoznasz się z formami zapisu reguł odpowiedzialnych za określanie minimalnych i maksymalnych wielkości w zależności od rozdzielczości ekranu użytkownika. Dowiesz się jakie reguły zastosować, aby poznać faktyczną szerokość i wysokość strony, uwzględniającą już obecność różnych elementów takich jak toolbar, które w rzeczywistości ograniczają obszar widoczności. Nasz wykładowca pokaże Ci w oparciu o jakie elementy należy zbudować witrynę, tak aby wyświetlała się ona właściwie na urządzeniu bez względu na jego rozdzielczość.

Biblioteki JavaScript

JavaScript wprowadza interaktywność na stronę WWW. Biblioteki JavaScript zawierają wiele przydatnych funkcji, które wykonują ważne zadania, takie jak np. tworzenie pokazu slajdów. Szkolenie HTML i CSS w praktyce – moduł II – responsywne strony i ich optymalizacja przybliży Ci świat bibliotek JS. Nauczysz się je instalować i korzystać z możliwości jakie one oferują. Będziesz pracować ze skryptem Lightbox wykorzystującym bibliotekę jQuery, aby stworzyć własną galerię zdjęć. JQuery Cycle pozwoli Ci zrobić pokaz slajdów, który niewątpliwie okaże się przydatny w niejednym projekcie, jaki będziesz realizować w przyszłości.

Framework Bootstrap

Podczas szkolenia nauczysz się tworzenia responsywnych stron internetowych przy użyciu jednego z najbardziej popularnych frameworków jakim jest Bootstrap. Poznasz grid system i dowiesz się jak tworzyć funkcjonalne layouty. Będziesz pracował ze stylami w celu stworzenia czytelnej nawigacji, tabelek, typografii, przycisków i formularzy. Ponadto, nasz trener przedstawi Ci zestaw wtyczek JQuery do tworzenia rozwijanego menu, tabs, modal boxes, tooltips i innych.

Znajomość tych funkcji pozwoli Ci tworzyć projekty wyświetlające się prawidłowo na smartfonach, tabletach, laptopach czy komputerach stacjonarnych, rozwiązując wiele z częstych wyzwań przed jakimi staje współczesny web developer.

JQuery Mobile

Podczas szkolenia przyjrzymy się bliżej JQuery Mobile. Jest to framework, biblioteka Java Script, która została zaprojektowana, aby uprościć proces pisania kodu. Biblioteka ta pozwala na stosowanie skróconego kodu, który jest równie efektywny jak oryginalny, rozbudowany kod JavaScript. Strony są wyświetlane prawidłowo na smartfonach czy tabletach, czyli urządzeniach o różnych rozdzielczościach ekranu. Nie ma nawet konieczności nauki innego języka programowania. Macie możliwość napisania kompletnych aplikacji na iOS i Androida od zera używając jedynie języka JavaScript. Brzmi jak świetne rozwiązanie i faktycznie tak jest.

Szkolenie HTML i CSS w praktyce – moduł II zapozna Cię z podstawami tworzenia aplikacji mobilnych przy użyciu frameworka jQuery Mobile. Nauczysz się podstawowej struktury strony, wstawiania typowych komponentów takich jak nagłówki, stopki, paski narzędzi, przyciski, listy czy układy wielokolumnowe.

Google Analytics oraz Google Search Console

Jako uczestnik szkolenia HTML i CSS w praktyce – moduł II – responsywne strony i ich optymalizacja zapoznasz się z narzędziami Google Analytics oraz Google Search Console, które są źródłem cennych informacji. Będziesz miał możliwość m.in. identyfikacji stron, które słabo radzą sobie w wyszukiwarkach, określenia jak na Twoją stronę trafili użytkownicy, skąd pochodzą czy też jak długo pozostają na stronie. Raporty ecommerce pozwalają na analizę dokonywanych transakcji, przychodów i wielu innych danych. Google Search Console jest narzędziem, które pozwala na sprawdzenie statusu indeksowania strony i zoptymalizowanie widoczności strony dla wyszukiwarek.

Ilość informacji dostarczana przez oba te narzędzia może wydawać się przytłaczająca. Podczas szkolenia dowiesz się jak wykorzystywać informacje gromadzone w statystykach strony WWW tak, aby Twoi klienci mogli odnieść wymierne korzyści i uzyskać przewagę nad konkurencją.

Niech przemówią za nas liczby