Frontend developer. Kurs video. HTML i CSS. Poziom podstawowy

Radosław Madecki

Obierz kurs na... frontend development Właściwie: obierz kurs na frontend development i - szerzej - na aktywne działania w internecie, oznaczające coś więcej niż pisanie komentarzy pod postami. Cokolwiek bowiem zamierza się w sieci wykreować - stworzyć reklamę graficzną, przygotować i wysłać mailing do klienta, o tworzeniu i modyfikacji stron WWW, aplikacji desktopowych oraz mobilnych nie wspominając - znajomość zasad posługiwania się językiem HTML jest kluczowa. Dla frontend developera HTML to język „pierwszego kontaktu”, bez którego nie może ruszyć dalej, ku JavaScriptowi i jego frameworkom. Akronim HTML z angielskiego oznacza: hipertekstowy język znaczników (HyperText Markup Language). Co w tłumaczeniu z programistycznego na ludzki brzmi: język oparty na hiperłączach (inaczej: odnośnikach), zbudowany ze znaczników, czyli słów kluczowych otoczonych nawiasami ostrymi. Dla kogoś, kto nigdy nie miał do czynienia z HTML-em, nie widział na przykład, jak wygląda w nim zapis kodu strony internetowej, powyższe definicje mogą brzmieć skomplikowanie. Ale zaręczamy - tak jest tylko do pierwszego kontaktu. Osoba, która kiedykolwiek stworzyła choćby prosty wpis na blogu i próbowała ustawić odpowiednią hierarchię nagłówków, dodać zdjęcie czy link do strony zewnętrznej, już pracowała z HTML-em. Teraz czas na to, by zapoznać się z nim bliżej. Co Cię czeka podczas naszego profesjonalnego szkolenia? Podczas tego kursu video: Poznasz podstawy składni HTML-a. Nauczysz się dobrych praktyk przygotowywania plików HTML. Zapoznasz się z nowymi tagami HTML5. Opanujesz zasady „semantycznego” wykorzystywania HTML-a, co wpływa między innymi na pozycjonowanie strony. Zaznajomisz się z CSS-em w najnowszej wersji. Zaczniesz tworzyć podstawowe animacje CSS. Co więcej... Opanujesz najważniejsze zasady dobrego web designu. Po ukończeniu szkolenia Frontend developer. Kurs video. HTML i CSS. Poziom podstawowy Twoją znajomość zagadnienia będzie można określić jako podstawową, co oznacza, że będziesz w pełni przygotowany do stworzenia pierwszej strony internetowej. Po co komu HTML? Zakres możliwości, jakie otwierają się przed osobą znającą HTML, jest ogromny. Dobrze znać ten język powinien oczywiście każdy programista. Frontend developer - to jasne, ponieważ bez opanowania i zrozumienia HTML-a oraz JavaScriptu nie sposób w pełni pojąć zasad funkcjonowania najważniejszych technologii frontendowych. Jednak opanowanie HTML-a przyda się także backendowcowi. Pozwoli mu wyjść poza własne poletko i lepiej zrozumieć drugą stronę programistycznej barykady, a w przyszłości - kto wie... może wręcz zmienić stronę albo odrzucić ten trochę sztuczny podział i obok backendu zająć się również frontendem? Dalej mamy twórców aplikacji mobilnych i webowych. Oni też na co dzień posługują się HTML-em. Podobnie, choć może w mniejszym zakresie, jest on potrzebny osobom zajmującym się marketingiem online. Opanowanie hipertekstowego języka znaczników ma głęboki sens również dla właścicieli niewielkich firm, którzy chcą samodzielnie wprowadzać drobne zmiany na stronach internetowych swoich przedsiębiorstw (na przykład tworzyć treści na firmowego bloga). Gdyby szef jednoosobowej firmy miał każdorazowo prosić zaprzyjaźnionego programistę o interwencję, chyba by zbankrutował... A tak, dzięki znajomości podstaw języka HTML, drobne zmiany i usprawnienia wprowadzi sam. Bezkosztowo. Lifehacki w JavaScript! Instrukcje warunkowe

Frontend developer. Kurs video. HTML i CSS. Poziom średnio zaawansowany

Radosław Madecki

Obierz kurs na... wyższy stopień wtajemniczenia frontend developmentu Początkujący programisto, stażysto lub praktykancie w agencji reklamowej, człowieku, który właśnie zmieniasz swoje zawodowe życie, przekwalifikowując się na projektanta stron internetowych - w Twoim przypadku, podobnie jak każdego innego frontend developera w kraju i na świecie, dogłębna znajomość HTML-a i CSS-a jest obowiązkowa. Nie wystarczy Ci jednak ogólna wiedza o tych dwóch językach programowania. Musisz dobrze je poznać i nauczyć się nimi swobodnie posługiwać. Oczywiście o ile zależy Ci na zdobyciu dobrze płatnej pracy w zawodzie albo rozpoczęciu pełnej sukcesów kariery programisty frontendu. Proponowane przez nas szkolenie wprowadzi Cię w tajniki posługiwania się językami HTML oraz CSS na poziomie średnio zaawansowanym. Dzięki kursowi poznasz wiele zagadnień często pomijanych podczas nauki tych technologii. Pozwoli Ci to zdobyć przewagę w walce o stanowisko, na które będziesz aplikować. Znajomość zagadnień związanych z dostępnością czy animacją CSS - na których temat trudno znaleźć w sieci materiały szkoleniowe - zmieni Cię z amatora w prawdziwego web developera. Wiedza dotycząca technik RWD, najlepszych praktyk pracy z HTML i nowoczesnych metod stylowania przyda Ci się zarówno w czasie poszukiwania ciekawej pracy, jak i później - podczas jej wykonywania. Co Cię czeka w trakcie naszego profesjonalnego szkolenia? Podczas pracy z tym kursem video: Nauczysz się pisać wysokiej jakości kod HTML oraz CSS. Poznasz zasady WCAG, automatycznej analizy i refaktorowania kodu. Dowiesz się, czym są ARIA, Flexbox i Grid. Opanujesz techniki RWD oraz przestawisz się na wykorzystywanie @media i myślenie mobile-first. Będziesz korzystać ze zmiennych w CSS oraz z funkcji CSS. Popracujesz z narzędziami graficznymi UI (Figma). Skorzystasz z techniki prototypowania rozwiązań. Co więcej... Poćwiczysz kreatywne myślenie, tworząc różnego rodzaju zoptymalizowane, nowoczesne animacje CSS. Frontend Developer. Kurs video. HTML i CSS. Poziom średnio zaawansowany pozwoli Ci opanować taki zakres wiedzy i osiągnąć taką biegłość w posługiwaniu się HTML i CSS, że będziesz mógł bez problemu zdobyć i utrzymać swoją pierwszą pracę jako programista frontendu. Informacje zawarte w szkoleniu przydadzą Ci się także do tego, by zabłysnąć przed przełożonymi, ponieważ obok zagadnień na poziomie podstawowym i średnio zaawansowanym porusza ono tematy, które zwykle wprowadza się dopiero na kursach zaawansowanych. Znając HTML i CSS... ...otworzysz przed sobą wiele zawodowych dróg. Przede wszystkim, jako developer ze znajomością HTML-a i CSS-a, będziesz w stanie sprawnie budować strony responsywne, czyli takie, które poprawnie uruchomią się na większości urządzeń. Znajomość zasad WCAG 2.1 oraz ARIA, które opanujesz w trakcie kursu, pozwolą Ci tworzyć strony dla urzędów i innych instytucji państwowych. Będziesz w stanie oceniać kod, dokonywać jego walidacji i refaktoryzacji projektów - co jest przydatne w pracy konsultanta freelancera, na stanowisku w software house czy w agencji reklamowej. Dobre opanowanie HTML-a oraz CSS-a jest niezbędne także do tego, by przygotowywać strony zgodne z najlepszymi praktykami SEO, to jest takie, które będą pojawiać się wysoko w wynikach wyszukiwania. Połączywszy znajomość HTML-a i CSS-a ze znajomością JS, będziesz gotów do tego, by kreować nowoczesne, profesjonalne aplikacje webowe oraz mobilne. Jak widzisz, bliższa znajomość z tymi dwoma bazowymi we frontend developmencie językami programowania da Ci wiele możliwości wyboru - od pracy w software house przy pisaniu rozmaitych aplikacji, przez stanowisko w agencji reklamowej z implementacją ciekawych, kreatywnych layoutów, aż po działanie freelancerskie, w ramach którego będziesz realizować projekty samodzielnie od A do Z. Lifehacki w JavaScript! Instrukcje warunkowe

HTML5 Canvas. Kurs video. Tworzenie elementów graficznych na stronach internetowych

Bartosz Szmit

Obierz kurs na... wzbogacenie strony internetowej o nowe elementy HTML5 Canvas jest elementem języka HTML, wprowadzonym do niego w wersji 5. Pozwala na dynamiczne, skryptowe renderowanie kształtów, a także obrazów bitmapowych. Inaczej: umożliwia kodowanie grafik. Programista, który „włada” tą technologią, jest w stanie tworzyć strony internetowe bogate w grafiki - od prostych rysunków po ciekawe, skomplikowane animacje. Jednak Canvas to nie tylko grafiki i animacje, ale także efektowne filmy 3D, które równie świetnie sprawdzą się jako uatrakcyjnienie serwisu internetowego (a czasem, na przykład w przypadku stron służących prezentacji obiektów, jako jego integralna, ważna część). Jeśli jesteś programistą i czujesz, że warto poszerzyć swoje kwalifikacje o umiejętności graficzne, nie porywaj się od razu na skomplikowane programy do rysowania i projektowania warstwy graficznej serwisów - zacznij od opanowania elementu Canvas HTML5, a będzie Ci łatwiej. Łatwiej pisać efektowne strony WWW i pracować z grafikami. W ramach tego kursu niejako przy okazji opanujesz darmowy edytor kodu źródłowego Visual Studio Code, z którego z pewnością także będziesz korzystać w przyszłości - to najpopularniejsze tego typu środowisko na świecie. Umiejętności posługiwania się nim mogą od Ciebie wymagać Twoi zleceniodawcy i szefowie projektów. Co Cię czeka podczas naszego profesjonalnego szkolenia? W trakcie tego kursu video opanujesz wiedzę, dzięki której: Nauczysz się rysować płaskie figury geometryczne. Będziesz je rysować z wykorzystaniem opcji otwierania i zamykania ścieżki. Opanujesz metodę wypełniania figur i tekstów gradientami. Zobaczysz, jak animuje się teksty i obrazki. Dowiesz się, na czym polega pikselowe przetwarzanie obrazów. Sprawdzisz, jak wykrywa się kolizje. Zaanimujesz figury między punktami, a także wektorowo. Co więcej... Nauczysz się kodować kontrolki typu play/pause na bazie odtwarzacza audio/video. Canvas. Kurs video. Tworzenie elementów graficznych na stronach internetowych jest przeznaczony dla osób, które posiadają już pewne umiejętności pracy z JavaScriptem i HTML5. A zatem, jeśli zdarzyło Ci się pracować z tymi językami, to szkolenie jest właśnie dla Ciebie. To bardzo intensywny kurs, w jego trakcie przyswoisz znaczną „dawkę” kodowania, więc ukończywszy go, będziesz o sobie mówić, że znasz Canvas HTML5 na poziomie co najmniej średnio zaawansowanym. Dlaczego Canvas? Odpowiedź numer jeden jest prosta: by się wreszcie porozumieć. Chodzi oczywiście o komunikację z działem graficznym, gdzie powstają layouty stron i serwisów WWW. Tak się bowiem składa, że dość często przepisanie elementów graficznych na elementy funkcjonującej strony idzie opornie. I wtedy wkracza specjalista od Canvas - i robi porządek, przez co staje się niezbędnym ogniwem komunikacji między grafikami i programistami. Czyli wkraczasz Ty! Odpowiedź numer dwa właściwie też jest prosta i ma formę pytania: dlaczego by się nie nauczyć posługiwania się technologią Canvas, skoro można w niej tworzyć świetne, efektowne animacje, i to nie tylko w 2D, ale nawet w trójwymiarze? Możesz w niej kodować całe filmy, do wykorzystania później na przykład w celach reklamowych - ruchoma prezentacja dowolnego produktu online, od spożywczego po elektroniczny, jest dużo lepsza i skuteczniejsza niż statyczne zdjęcie.

HTML5 i CSS3. Kurs video. Fundamenty frontendu

Marcin Pałka

Obierz kurs na... fundamenty frontendu W świecie frontendu mnogość nowoczesnych narzędzi, pluginów i frameworków niejednego przyprawi o zawrót głowy. Zmieniają się standardy języków programowania i można rzec – wszystko płynie. Jednak i w tym świecie bez zawahania da się wymienić dwóch największych graczy – są nimi HTML i CSS. Sięgnijmy do niezbędnej teorii i sprawdźmy, dlaczego. Język znaczników HTML odpowiada za strukturę strony internetowej i określa hierarchię znajdujących się w niej komponentów. Każdy element strony jest zdefiniowany przez kod źródłowy HTML, który następnie zostaje zinterpretowany przez przeglądarkę internetową. Bez właściwej struktury HTML przeglądarka nie odczyta i nie wyrenderuje oczekiwanej zawartości. Stąd wniosek: bez znaczników HTML nie da się stworzyć strony internetowej. No dobrze, a do czego potrzebny jest CSS? Kaskadowych arkuszy stylów CSS używa się do określenia wyglądu dokumentów HTML. Prócz nadawania stylu umożliwiają separację struktury HTML od jej wizualnej prezentacji, co zwiększa przejrzystość kodu. Dzięki znajomości CSS można dostosować rozmiar dokumentu do każdej szerokości ekranu i tworzyć w pełni responsywne, skalowalne projekty. HTML i CSS tworzą duet o ogromnym potencjale i stanowią fundamenty frontendu. W trakcie naszego profesjonalnego szkolenia: Poznasz możliwości narzędzi developerskich dostępnych w nowoczesnych przeglądarkach internetowych Nauczysz się składni HTML5 i CSS3 na przykładach Poznasz znaczniki HTML5 Nauczysz się pisać poprawny semantycznie i reużywalny kod Dowiesz się, jak stworzyć responsywną stronę internetową, zgodną z aktualnymi standardami Poznasz dobre praktyki pracy z kodem HTML i stylami CSS Zrozumiesz, jak działa kaskadowość, dziedziczenie i specyficzność w CSS Nauczysz się pracować z modelem flexbox Poznasz pseudoklasy i pseudoelementy CSS Dowiesz się, jak zastosować zdobytą wiedzę do tworzenia profesjonalnych stron internetowych Opanujesz zasady kompozycji stron WWW, używając CSS box model Nauczysz się budować komponenty i z nimi pracować Dowiesz się, czym jest podejście mobile first w projektowaniu i jak je zastosować Od podstaw stworzysz projekt strony social media HTML5 i CSS3. Kurs video. Fundamenty frontendu został stworzony z myślą o wszystkich chcących poznać technologie webowe od podstaw. Kurs jest podzielony tematycznie na trzy części: pierwsza obejmuje teorię i przykłady z HTML5, druga analogicznie dotyczy CSS3, a trzecia to projekt końcowy strony internetowej. Na początek zaznajomisz się z budową strony WWW i jej składowymi. Poznasz znaczniki HTML i nowe znaczniki HTML5 jak: <header>, <main>, <section>, <footer>. Nauczysz się tworzyć tabele i rozbudowane formularze. Gdy kod HTML5 nie będzie mieć już przed Tobą tajemnic, dowiesz się, jak dodać do niego trochę kolorytu. Nauczysz się umieszczać style CSS w dokumencie, a także je resetować i standaryzować dla wszystkich wersji przeglądarek. Poznasz selektory, jednostki, pseudoklasy i pseudoelementy. Dowiesz się, jak pracować z tekstem i jak używać fontów Google Fonts. Zrozumiesz zasadę działania modelu pudełkowego w CSS i poznasz jego najważniejsze elementy (padding, margin, border, container). Znajomość box-model umożliwi Ci pełną kontrolę nad położeniem elementów na stronie. Następnie przećwiczysz właściwości potrzebne do pozycjonowania i wyświetlania elementów (display, position, float, z-index). Aby jeszcze sprawniej tworzyć elastyczne i responsywne strony internetowe, poznasz model flexbox. Za jego pomocą precyzyjnie określisz rozmieszczenie komponentów w pionie i poziomie. W trakcie rozważań o responsywności dowiesz się także, jak projektować strony WWW w podejściu mobile-first, czyli z myślą o urządzeniach mobilnych. Na zakończenie wszystkie nabyte w trakcie kursu umiejętności wykorzystasz w praktyce, tworząc projekt strony zainspirowanej Instagramem. Poznasz podejście stosowane przy prawdziwych projektach informatycznych i nauczysz się budować strony komponent po komponencie. Nigdy nie mów nigdy – wszystko może się zdarzyć. Kończyłem studia informatyczne z przekonaniem, że zostanę grafikiem komputerowym, dziś jestem w 100% frontend developerem i czerpię z tego ogromną radość każdego dnia.

jQuery. Kurs video. Poziom pierwszy. Interaktywne interfejsy internetowe

Paweł Bensel

jQuery jest lekką biblioteką programistyczną dla języka JavaScript. Dzięki niej można szybko i skutecznie uzyskać interesujące efekty animacji, dynamizować strony czy też wykonywać zapytania AJAX. Większość wtyczek i skryptów opartych na jQuery działa na stronach bez konieczności wprowadzania zmian w ich kodzie HTML. Skrypty pisane z zastosowaniem zasobów tej biblioteki mają dodatkową zaletę — wszystkie funkcje z założenia działają tak samo, niezależnie od tego, z jakiej przeglądarki internetowej korzysta użytkownik. Sięgnij po jQuery. Kurs video. Poziom pierwszy. Interaktywne interfejsy internetowe, a będziesz w stanie niewielkim kosztem osiągać efekty, o których marzą Twoi klienci. Na przykład szybko zamienisz nudną, złożoną z miniatur klasyczną galerię w jej podrasowaną, dynamiczną wersję! Czas najwyższy dołączyć do grona programistów, dla których biblioteka jQuery szeroko otwiera swoje podwoje! Co Cię czeka podczas szkolenia? Nauczysz się między innymi, jak wyszukiwać elementy stron internetowych poprzez wybrane selektory i manipulować elementami serwisu WWW. Poznasz zasady tworzenia animacji w ramach stron, będziesz też w stanie sprawnie pracować z formularzami, sliderami i galeriami. A jeśli solidnie przerobisz lekcje zawarte w kursie, opanujesz techniki biblioteki jQuery nawet na poziomie średnio zaawansowanym. Zatem do dzieła!  

Webpack 5. Kurs video. Kompletny przewodnik dla początkujących

Bartosz Szmit

Obierz kurs na... przyspieszenie w programowaniu Dziś słowem kluczem, gdy mowa o programowaniu, jest szybkość. Żaden praktyk kodowania, żaden informatyk zatrudniony w biznesie nie może sobie pozwolić na opóźnienia w dostarczaniu i modyfikacjach stron WWW lub aplikacji. Stąd wszystkie działania muszą przebiegać w tempie ekspresowym, co nie zmienia faktu, że kod nadal powinien być tworzony czy nadpisywany bezpiecznie. Dlatego tym cenniejsze stają się narzędzia zwiększające wydajność i ułatwiające pracę. Jednym z nich jest Webpack. Webpack to bundler, czyli inaczej transpilator JavaScriptu, który pozwala tworzyć pakiety uwzględniające zależności między modułami i klasami i poprawiające wydajność. Potrafi na przykład spakować wiele różnych formatów do jednego pliku JavaScript. Stworzony do pracy z językiem JS, dozbrojony w odpowiednie narzędzia Webpack może także przetwarzać HTML, CSS i obrazki. Warto go więc poznać i nauczyć się z niego korzystać, szczególnie jeśli jest się początkującym frontendowcem pracującym na co dzień ze stronami internetowymi lub z aplikacjami. Co Cię czeka podczas naszego profesjonalnego szkolenia W trakcie proponowanego przez nas kursu: Nauczysz się instalować Webpack lokalnie Poznasz zasady instalacji pluginów Opanujesz podstawy technologii Sass Skonfigurujesz serwer webpack-dev-server Będziesz pisać komponenty Co więcej... W programie kursu zawiera się nauka importowania komponentów i stylów Webpack 5. Kurs video. Kompletny przewodnik dla początkujących pozwoli Ci opanować podstawy pracy z tym bundlerem. Aby przystąpić do kursu, trzeba posiadać już pewne umiejętności w zakresie języka JavaScript, rozumieć takie pojęcia jak frontend czy serwer i mieć opanowane podstawy CSS. Komu potrzebny jest bundler Webpack Dzięki transpilatorowi Webpack można w łatwy i szybki sposób wdrażać aplikacje internetowe i rozwiązywać problemy, jakie pojawiają się w trakcie tego procesu. Szczególnie ułatwia on pracę nad projektami, których frontend jest bardzo rozbudowany, skomplikowany, z wieloma obrazami, fontami i elementami CSS. Pakując wiele różnych formatów do pliku JavaScriptu, Webpack nadaje mu rozszerzenie .js, co dzieje się dzięki przekształceniom i minifikacji zbędnego kodu. Jeśli zatem pracujesz i zamierzasz pracować na małych aplikacjach z pojedynczymi plikami JavaScriptu, Webpack może Ci się nie przydać. Jeżeli jednak zamierzasz wejść na wyższy poziom frontendu, koniecznie zapoznaj się z tym transpilatorem, a Twoja praca zdecydowanie przyspieszy!