Kurs HTML i CSS

Wprowadzenie

Lekcje
  • Opis
  • Recenzje
  • Autor
  • Transkrypt

35 ocen

Lubię to! 336

Wprowadzenie

Chcesz stworzyć swoją pierwszą stronę WWW i poznać podstawy Web Designu? Nie mogłeś lepiej trafić. Projektowanie stron Internetowych zaczyna się właśnie tutaj - od nauki HTML i CSS, które leżą u podstaw każdej witryny. Opanowanie tych zagadnień z Kursu pozwoli Ci od początku nauczyć się poprawnych praktyk, stosowanych przez profesjonalistów, oraz tworzyć nowoczesne strony zgodne ze standardami HTML5 i CSS3!

  1. Skladnia i podstawy HTML5 i CSS3
  2. Praktyczny projekt strony WWW
  3. Zgodnosc z najnowszymi standardami
  4. Pozycjonowanie i model pudelkowy
  5. Najciekawsze wlasciwosci CSS
  6. Poprawna semantyka dokumentów
  7. Wskazówki od eksperta - praktyka
  8. Kompletne pliki zródlowe i wiele wiecej!

Co znajdziesz w Kursie?

Kurs składa się z części teoretycznej, dzięki której opanujesz kluczowe zagadnienia z zakresu tworzenia stron internetowych z pomocą HTML i CSS. Pierwsza część to konkretna esencja wiedzy z najważniejszych aspektów tworzenia markupu, składni, znaczników oraz nowej semantyki w HTML5. Mając tą wiedzę, dowiesz się czym jest CSS, poznasz jego najważniejsze koncepcje oraz nauczysz się stylować swoje strony WWW. Druga część kursu to praktyczne wykorzystanie omówionych wcześniej pojęć oraz tworzenie od podstaw Twojej pierwszej strony Internetowej.

Ewolucja HTML i CSS

Specyfikacje HTML i CSS sącały czas rozwijane i dynamicznie się zmieniają. Zmienia się także wsparcie dla różnych standardów w przeglądarkach. Kurs został przygotowany w ten sposób, abyś potrafił nadążać za zmianami oraz tworzyć strony, które dobrze działają we wszystkich współczesnych przeglądarkach. Zamiast tworzyć rozległe omówienie specyfikacji koncentrujemy się raczej na praktycznych przykładach oraz rozwiązaniach, które wykorzystywane są najczęściej na stronach WWW. Przy okazji, staramy się przekazać jak najwięcej praktycznych wskazówek, które płyną z wieloletniego doświadczenia w tworzeniu stron WWW.

Semantyka i znaczniki HTML

Pierwsza część kursu pozwoli Ci poznać najważniejsze zasady dotyczące tworzenia poprawnych semantycznie dokumentów HTML. Poznasz znaczniki, których warto używać a także dowiesz się jakie są podstawowe typy treści na stronie WWW i jak semantyka może pomóc w późniejszym stylowaniu strony. Ułatwisz interpretację odpowiednich elementów przez przeglądarkę i roboty indeksujące wyszukiwarek tym samym poprawiając SEO. Dowiesz się jak konstruować poprawne hiperłącza, ścieżki i jak pracować z obrazkami w HTML.

Składnia i właściwości CSS

Kolejna część to seria przykładów, które odkryją przed Tobą potencjał CSS. Poznasz większość właściwości CSS które regularnie wykorzystywane są przy projektowaniu i stylowaniu stron WWW. Nauczysz się podkładać grafiki, pracować ze stylami tekstu, tworzyć układ strony w modelu pudełkowym oraz pozycjonować elementy layoutu.

Media Queries i Narzędzia

W kursie znajdziesz także wskazówki dotyczące dostosowania Twojej witryny do różnych rozdzielczości i urządzeń z pomocą najbardziej efektywnej metody, jaką jest CSS3 Media Queries. Pokażę Ci także jak testować strony w przeglądarce tak aby podejrzeć je na różnych rozdzielczościach. Poznasz także szereg różnych narzędzi jak edytory, generatory oraz narzędzia developerskie w przeglądarce, które znacznie ułatwią i przyspieszą pisanie kodu.

Praktyczny projekt Strony WWW

W kolejnej części Kursu wykorzystamy zdobytą wcześniej wiedzę w praktyce, tworząc pierwszy, prosty projekt strony WWW. Został on przygotowany tak, aby zawierał jak najwięcej elementów z którymi spotkasz się w kolejnych projektach. Dowiesz się jak przygotować i wyeksportować grafikę na potrzeby strony, będziemy pracować z kolorami, typografią i web fontami, dodamy treści oraz zadbamy o to aby wszystkie elementy layoutu poprawnie wyświetlały się na stronie. Na koniec powiem Ci o tym, jakich technik użyć aby dostosować stronę do różnych rozdzielczości.

Dla kogo jest ten kurs?

Kurs został przygotowany z myślą o wszystkich osobach, które chcą zacząć tworzyć swoje pierwsze strony WWW, kładąc nacisk na praktyczne zastosowania języka HTML i CSS. Możesz mi wierzyć, że nawet jeśli wcześniej nie miałeś do czynienia z web designem, po przerobieniu tego kursu będziesz potrafił tworzyć zgodne z nowymi standardami, statyczne strony WWW. To także materiał dla tych z Was, którzy już wiedzą co nieco o projektowaniu stron, ale chcą uporządkować swoją wiedzę, zaktualizować ją o nowe standardy i aktualne praktyki.

Dlaczego wybrać właśnie ten kurs?

  1. 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!
  2. 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 tworzyć lub projektować swoje pierwsze strony internetowe!
  3. 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ń.
4 godzin 7 minut

Kurs Flexbox
od Podstaw

Ten kurs to omówienie najpopularniejszej i najlepiej wspieranej metody pozycjonowania elementów ostatnich lat - Flexboxa. Zrozumiesz w pełni jak działa Flexbox, dlaczego elementy układają się w określony sposób przy danych właściwościach, a także jakie problemy rozwiązuje i jakie niesie za sobą ryzyko. Realizacja materiału będzie dla Ciebie solidną dawką wiedzy, dzięki której żaden layout na flexboxie już Cię nie zaskoczy. Został on skompresowany do granic możliwości, znajdziesz tu same konkrety.

Wojciech Połowniak

13 godzin

Kurs Nowoczesny Webdesign
Projektowanie stron i UI/UX

Zajmujesz się, lub zamierzasz się zająć Tworzeniem Stron WWW? Jesteś programistą, grafikiem, chcesz stworzyć stronę firmy lub kierujesz zespołem? Ten kurs jest wszystkim, czego potrzebujesz aby projektować nowoczesne, skuteczne i funkcjonalne serwisy. Poznasz i zoptymalizujesz proces koncepcyjny, dowiesz się jak pracować wydajnie w zespole, optymalizować grafikę, wykorzystać RWD i podejście Mobile First. Powiem Ci jak skutecznie optymalizować i promować strony WWW. Poznasz też dziesiątki narzędzi oraz linków, które pomogą Ci usprawnić pracę i zebrać potrzebne zasoby. Pokażę Ci na setkach przykładów jak działają nowoczesne strony WWW oraz jakie są trendy w projektowaniu. Gwarantuję, że inwestycja w kurs zwróci się wielokrotnie w Twojej pracy!

Grzegorz Róg

6 godzin

Kurs Projektowania Stron WWW
UI/UX w Praktyce

Kurs, który masz przed soba jest uzupelnieniem i praktycznym rozwinieciem kursu <a href="http://eduweb.pl/kursy/uzytecznosc/projektowanie-stron-ui-ux.html">Nowoczesny Webdesign</a>. Zdecydowanie zalecamy obejrzenie kursu Nowoczesny Webdesign w pierwszej kolejnosci. Witaj w praktycznym kursie Projektowania Stron WWW, gdzie na przestrzeni 6 godzin materialów wideo dowiesz sie, jak przygotowac, krok po kroku, funkcjonalny layout serwisu WWW. W kursie omówimy zagadnienia zwiazane z uzytecznoscia oraz praca koncepcyjna a takze z pomoca narzedzi takich jak Photoshop, Illustrator, UX Pin czy Invision stworzymy funkcjonalny prototyp i layout strony WWW. Jesli zajmujesz sie projektowaniem stron i chcesz poznac nowoczesne techniki tworzenia layoutów - nie mogles lepiej trafic

Grzegorz Róg

60 minut

Najciekawsze Wtyczki i Narzędzia dla Deweloperów

Tworzenie stron i aplikacji internetowych staje się coraz bardziej skomplikowane. Można jednak znacznie ułatwić sobie pracę, wykorzystując odpowiednie narzędzia. <br><br> W tym warsztacie przyjrzymy się najciekawszym wtyczkom dostępnym dla przeglądarek internetowych, które sprawdzą się w pracy każdego Web Developera. Zobaczysz jak lepiej debugować i testować tworzone przez siebie projekty, jak wydajniej pracować z techniką Responsive Web Design, podglądać rozwiązania stworzone przez innych czy tworzyć zrzuty ekranu całych stron internetowych. Nie zabraknie też kilku sztuczek z wbudowanych narzędzi deweloperskich przeglądarek. <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

60 minut

Poznaj CSS Flexbox

Dowiedz się czym jest CSS Flexbox oraz jak stosować nowoczesne metody CSS do pozycjonowania elementów layoutu strony WWW. Flexbox to jeden z najlepszych sposobów na rozłożenie kontenerów na Twojej stronie, wspierany przez wszystkie nowoczesne przeglądarki. Mnóstwo właściwości, oraz poziom skomplikowania Flexbox'a sprawia, że pierwsze spotkanie z tą technologią często zniechęca, zwłaszcza początkujących web designerów i developerów, natomiast okazuje się że opanowanie podstaw Flexboxa nie jest wcale trudne a jego bardziej złożone właściwości stają się niezwykle intuicyjne. W Warsztacie poznasz wszystkie najważniejsze właściwości pracy z Flexbox na małych, praktycznych przykładach. Jeśli jeszcze nie pracowałeś z Flexbox'em, zapewne stanie się on jednym z podstawowych metod pozycjonowania elementów layoutu w Twoich kolejnych pracach, jeśli już go znasz - uporządkujesz wiedzę i być może poznasz nowe właściwości. <br><br> Na Warsztat zaprasza Grzegorz Róg

Grzegorz Róg

80 minut

Strony WWW z Jekyll i GitHub Pages

W dzisiejszych czasach do serwowania stron internetowych wykorzystujemy głównie systemy zarządzania treścią (CMS). Często jednak nasza strona lub blog jest na tyle prosta, że uruchamianie całego systemu CMS za każdym razem, gdy ktoś ją odwiedzi, nie jest najwydajniejszą drogą do przedstawienia naszych treści.<br><br> I tutaj z pomocą przychodzą nam tzw. generatory statycznych stron. Najpopularniejszym z nich jest Jekyll. Podobnie jak w przypadku systemów CMS stworzyć możemy własny szablon strony czy bloga lecz to czego brakuje, to baza danych i zaplecze administracyjne. I w większości przypadków są to rzeczy, bez których możemy się obejść. Wpisy na bloga pisać można bezpośrednio w kodzie HTML lub, co dużo wygodniejsze, w Markdownie. A kiedy nowa podstrona lub wpis są gotowe, Jekyll zbuduje całą stronę od nowa, dzieląc ją na poszczególne pliki i podkatalogi. W ten sposób cała nasza strona jest serwowana jako statyczne pliki HTML, co w znacznym stopniu przyspiesza jej działanie.<br><br> W warsztacie tym dowiesz się jak zainstalować Jekyll, jak stworzyć własny szablon, a także jak wydajnie tworzyć treści na własną stronę lub bloga. Na koniec zobaczysz również w jaki sposób za darmo hostować stronę za pomocą Github Pages.<br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

60 minut

Dobre wzorce Responsive Web Design oraz UX

W tym Warsztacie skoncentrujemy się na najważniejszych koncepcjach związanych z zastosowaniem Responsive Web Design. Kluczowe dla osób początkujących w RWD jest zrozumienie pewnych typowych schematów tego, jak zachowują się elementy na stronach WWW w momencie, gdy zmienia się rozdzielczość. W Warsztacie przypomnimy najważniejsze techniki RWD a także przywołamy układy, które pojawiają się w responsywnych schematach stron WWW. Omówimy też kilka przydatnych snippetów - fragmentów kodu, które przydadzą się przy tworzeniu serwisów RWD. Przy okazji przyjrzymy się także ich zastosowaniom w praktyce na przywołanych stronach WWW, które dodatkowo przeanalizujemy pod kątem najlepszych praktyk UX. <br><br> Na Warsztat zaprasza Grzegorz Róg

Grzegorz Róg

60 minut

BEM CSS

CSS to potężny język, dzięki któremu opisujemy wygląd tworzonych stron internetowych. Język ten jednak został stworzony dawno temu, by oddzielić warstwę prezentacyjną od struktury witryny internetowej i na tamte czasy był absolutną rewolucją. Dzisiaj, wraz z rozwojem technologii i aplikacji webowych, zaczynamy dostrzegać braki w specyfikacji CSS, które utrudniają łatwe tworzenie i utrzymywanie kodu CSS dla dużych projektów.<br><br> Z tego powodu powstaje wiele technik wykorzystania istniejących możliwości CSS w sprytny sposób. Jedną z nich jest BEM CSS, którą poruszymy w tym warsztacie. Dowiesz się co leży u podstaw tej techniki, jak ją skutecznie wykorzystywać, a także jak połączyć jej użycie z preprocesorem kodu SASS. Dzięki zdobytej wiedzy będziesz tworzył prostszy w utrzymaniu i ponownym wykorzystaniu kod HTML i CSS. <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

85 minut

Techniki tworzenia nawigacji z HTML i CSS

W warsztacie tym poznasz kilka ciekawych technik tworzenia nawigacji na potrzeby stron internetowych. Zaczniemy od najprostszych i najczęściej wykorzystywanych schematów, przechodząc kolejno do bardziej zaawansowanych menu. <br><br> Zobaczysz m. in. jak stworzyć rozwijane menu za pomocą wyłącznie HTML i CSS, jak sprawić, by było ono w ciekawy sposób animowane, a także jak dostosować różnego rodzaju nawigacje dla niewielkich ekranów urządzeń mobilnych.<br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

60 minut

Techniki Kodowania Newsletterów

Techniki tworzenia stron internetowych i wspierane technologie idą do przodu w zaskakującym tempie. Z miesiąca na miesiąc korzystać możemy z nowych rozwiązań, które implementowane są w nowoczesnych przeglądarkach internetowych i coraz mniej czasu poświęcać musimy na zacieranie różnic w działaniu czy wyświetlaniu się naszej strony www. <br><br> Co jednak, gdy stajemy przed wyzwaniem zakodowania mailingu na potrzeby newslettera? Wydawać by się mogło, że to podobne, lecz nieco prostsze zadanie niż stworzenie witryny internetowej. Okazuje się jednak, że tak wcale nie jest. Duża ilość klientów i serwisów pocztowych sprawia, że mailingi wciąż tworzyć musimy za pomocą przestarzałych metod, które królowały wśród twórców witryn kilkanaście lat temu. Jak sobie z tym poradzić, by newsletter był poprawnie wyświetlany zarówno w Gmailu jak i programie Outlook? Odpowiedzi na te oraz inne pytania znajdziesz w tym warsztacie. <br><br> Na początku omówimy kluczowe zasady kodowania mailingów z pomocą HTML i CSS. Następnie na konkretnym przykładzie zobaczysz, jak sobie z tym poradzić. Skorzystamy również z nowoczesnych rozwiązań i z pomocą <a href="http://eduweb.pl/live/wprowadzenie-do-grunt-js" style="color: #1696c5;">automatora zadań Grunt.js</a> przyspieszymy i ułatwimy tworzenie kodu newslettera. Na koniec zobaczysz, w jaki sposób przetestować poprawność wyświetlania się newslettera w popularnych klientach i serwisach. <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

60 minut

Firefox Developer Edition

Poznaj Firefox Developer Edition. To przeglądarka, która została stworzona specjalnie dla Web Developerów, aby maksymalnie wspomóc proces tworzenia stron i aplikacji internetowych. <br><br> Oprócz świetnych narzędzi developerskich, które od dawna rozwijane były w podstawowej wersji Firefoxa, w FDE znajdziesz również kilka przełomowych nowości, takich jak np. Valence. Dzięki temu bez trudu zdebugujesz strony wyświetlone na urządzeniach z systemem iOS czy Android. <br><br> W warsztacie tym poznasz najważniejsze narzędzia Firefox Developer Edition, dzięki którym Twoja praca będzie przyjemniejsza i szybsza. <br><br> Do usłyszenia, Piotr Palarz

Piotr Palarz

60 minut

Wprowadzenie do Git

Git to jeden z najbardziej popularnych i zdaniem wielu najlepszy system VCS, czyli kontroli wersji. Oferuje on ciekawe podejście do wersjonowania projektów oraz liczne zalety jak podejście do przechowywania plików, lokalne operacje czy mechanizmy spójności danych. Jeśli korzystasz z innych popularnych aplikacji jak SVN, możesz także połączyć go z Gitem, lub sprawdzić dlaczego warto zainteresować się tym darmowym systemem opartym o Open Source. <br><br> Warsztat stanowi wprowadzenie do Git'a oraz wyjaśnienie podstaw tego systemu, między innymi: <ul class="livelist"> <li>Czym jest Git i dlaczego warto z niego korzystać</li> <li>Różnice w stosunku do innych systemów VCS</li> <li>Instalacja i konfiguracja Git</li> <li>Podstawowe polecenia w Terminalu</li> </ul> <br>Na godzinny Warsztat przeznaczony dla osób, które chcą zacząć swoją przygodę z Git zaprasza Piotr Palarz

Piotr Palarz

44 minut

Document Editing API w HTML5

Warsztat ten jest obiecaną kontynuacją ścieżki tworzenia witryn i aplikacji z użyciem HTML5, którą rozpoczęliśmy w kursie <a href="http://eduweb.pl/kursy/html/html-javascript-zaawansowane.html" class="blue">HTML5 i JavaScript - Techniki Zaawansowane</a>. <br><br> W lekcji tej poznasz niewielką, acz ciekawą specyfikację - <strong>Document Editing API</strong>. Stworzymy oczywiście praktyczną aplikację, a będzie to edytor tekstowy typu <strong>WYSIWYG</strong>, a więc uproszczona alternatywa dla TinyMCE czy innych znanych edytorów. Wprost w przeglądarce będziesz mógł pogrubiać, pochylać, przekreślać tekst, dodawać listy nieuporządkowane, zmieniać kolory i wiele, wiele więcej. <br><br> W warsztacie nie zabraknie również kilku ciekawych sztuczek w <strong>Chrome Developer Tools</strong>, których być może jeszcze nie znasz. <br><br> Zapraszam i do usłyszenia! <br><br> Piotr Palarz

Piotr Palarz

95 minut

Wprowadzenie do Web Components

Web Components to zbiór kilku świetnych specyfikacji, które w odpowiedni sposób połączone całkowicie zmieniają reguły gry, jeśli chodzi o tworzenie nowoczesnych i skalowalnych witryn oraz aplikacji internetowych. Wiele wskazuje na to, że za jakiś czas, tworzenie wyżej wymienionych będzie jeszcze prostsze, a wszystko to dzięki stworzonym przez społeczność komponentom, które łatwo się ze sobą łączą i nie przyprawiają o ból głowy nawet osoby początkujące. <br><br> Warto już teraz zainteresować się tematem i być świadkiem rewolucyjnych zmian w branży, które właśnie powoli odbywają się na naszych oczach. W warsztacie tym dowiesz się wszystkiego co jest niezbędne by zrozumieć istotę Web Components, a także zacząć tworzyć własne komponenty! <br><br> Zapraszam i do usłyszenia! <br> Piotr Palarz  

Piotr Palarz

75 minut

Kodowanie w Sublime Text 3

Produktywność w pracy każdego z nas to rzecz niezwykle ważna. Jeśli tworzysz strony internetowe lub pracujesz pisząc kod to ten warsztat jest zdecydowanie dla Ciebie. <br><br> Poruszymy w nim bowiem temat świetnego edytora tekstu jakim jest <strong>Sublime Text</strong>. Znając ogromne możliwości i tricki w nim dostępne, wejdziesz na wyższy poziom pisania kodu w sposób bardzo szybki, a do tego przyjemny. <br><br> Omówimy wiele wbudowanych w edytor funkcji, takich jak szybkie przeskakiwanie między plikami projektu, przeskakiwanie do konkretnej linii lub np. definicji CSS w kodzie, zarządzanie projektami, tworzenie własnych snippetów i konfiguracja ustawień użytkownika. <br><br> Następnie zainstalujemy Package Control Managera, czyli plugin, dzięki któremu w łatwy sposób rozszerzać będziemy mogli edytor Sublime Text o nowe funkcjonalności. Omówimy również kilka świetnych dodatków, które na pewno przyspieszą i umilą Twoją pracę. Dowiesz się między innymi, jak pobierać z serwera zawsze aktualną wersję biblioteki jQuery lub jak wystartować z kolejnym projektem jeszcze szybciej, jak przechowywać w chmurze swoje ustawienia, a także jak dostosować wygląd Twojego edytora tak, aby nigdy Ci się nie znudził. <br><br> Jeśli chcesz pracować z kodem jak prawdziwy ninja, nie możesz przejść obojętnie obok tego edytora. <br><br> Na warsztat zaprasza Piotr Palarz.

Piotr Palarz

60 minut

Responsive Design i optymalizacja stron na tablet

Ten Warsztat kierujemy do front-end developerów oraz innych osób, które zajmują się tworzeniem stron WWW. Pokażemy w nim ciekawe techniki związane z kodowaniem witryn uwzględniając wiele ekranów i rozdzielczości. W szczególności dowiesz się jak Responsive Web Design można wspomóc gotowymi wtyczkami i skryptami, które ułatwią obsługę na urządzeniach dotykowych. W Warsztacie poruszymy między innymi zagadnienia obsługi Touch Events na przykładzie slidera oraz nawigacji. <br><br> Na Warsztat zaprasza Maciej Żukiewicz

Grzegorz Róg

60 minut

CSS Layout - Przyszłość Projektowania Stron WWW

Pod koniec roku oprócz podsumowań, warto zajrzeć w przyszłość i zastanowić się, co czeka nas, webdesignerów w nadchodzącym czasie. Przez lata nauczyliśmy się do osadzania layoutów naszych stron WWW i pozycjonowania treści wykorzystywać rozmaite sztuczki i techniki, które zupełnie odbiegały od standardowego zastosowania standardów. Najpierw tworzyliśmy layouty w oparciu o tabelki, które przecież służą do prezentacji danych tabelarycznych, kolejno używaliśmy opływania do celów, które odbiegały od pierwotnego zamysłu twórców specyfikacji HTML. I tak, przez lata wyrobiliśmy setki złych nawyków, obejść, haków, nie zastanawiając się nawet nad tym, jak powinno w idealnym świecie wyglądać projektowanie struktury witryny. Nowa specyfikacja i standardy CSS3 na szczęście zmieniają ten stan rzeczy. Przynajmniej częściowo. <br><br> Zastanów się na chwilę, co by było, gdyby projektowanie układu strony było tak proste jak składanie magazynu w InDesign, czy projektowanie wyglądu w Photoshop. To przyszłość, ale nie tak odległa! Zapomnij o float! Zajrzyj do szklanej kuli layoutu CSS i dowiedz się, jak będziemy wygodnie tworzyć w przyszłości z pomocą ciekawych, istniejących już technik. <br><br> Na inspirujący, wizjonerski Warsztat zaprasza Grzegorz Róg

Grzegorz Róg

60 minut

Skuteczne Techniki Responsive Web Design

Zapraszamy na kolejny Warsztat w którym zajmiemy się najbardziej praktycznymi zagadnieniami związanymi z projektowaniem elastycznych stron, które dobrze prezentują się na wielu rozdzielczościach. Technikę Responsive Web Design omawialiśmy szczegółowo w kursie Elastyczne Strony WWW i wielu Warsztatach, tym razem do tego zbioru dodamy szereg nowoczesnych, ciekawych technik, między innymi: <ul class="livelist"> <li>Responsywne slidery w CSS3 i jQuery wykorzystujące touch events</li> <li>Responsywne menu, dostosowujące się do ilości elementów</li> <li>Fluid Layout oraz ciekawe techniki</li> <li>Prosty Grid Layout</li> <li>Techniki do umieszczania responsywnych playerów video np. Youtube, Vimeo</li> <li>Techniki pozwalające na umieszczenie Widgetów Facebook na stronach responsywnych</li> <li>Inne ciekawe techniki w RWD</li> </ul> <p>Na Warsztat zaprasza Maciej Żukiewicz</p>

Grzegorz Róg

42 minut

Emmet - Pisz Kod HTML i CSS z Prędkością Światła

Produktywność w pracy każdego z nas to rzecz niezwykle ważna. Po co bowiem marnować czas na rzeczy, które musimy po prostu wykonać niczym rzemieślniczą pracę? A więc skoro od początku wiesz co masz zrobić i wiesz jak to zrobić, a do tego do pojawia się okazja by zrobić to kilkakrotnie szybciej niż dotychczas, warto tę okazję wykorzystać. <br><br> A o czym dokładnie mowa? O Emmecie. Nie, to nie żadne zwierzątko - to narzędzie, które pozwala pisać kod HTML oraz CSS z prędkością światła, a do tego w bardzo intuicyjny sposób. Emmet jest udostępniany za darmo, jako dodatek do wielu popularnych edytorów kodu i jest bezapelacyjnie narzędziem typu "must have" dla każdej osoby, która choć przez kilka chwil dziennie pisze kod HTML lub CSS. <br><br> W warsztacie, który masz przed sobą, przerobimy praktycznie wszystko co Emmet ma nam do zaoferowania, a dodatkowo dowiesz się, jak można dostosować jego działanie do własnych potrzeb na przykładzie edytora Sublime Text. A więc jeśli tylko Twój edytor widnieje na <a href="http://emmet.io/download/" target="_blank" rel="nofollow">tej liście</a>, to nic nie powinno Cię już zatrzymywać przed polubieniem go! <br><br> Zapraszam i do usłyszenia! <br> Piotr Palarz

Piotr Palarz

60 minut

Tworzenie Stron WWW - Przydatne Pluginy

W trakcie tego warsztatu omówimy szereg pluginów, przydatnych dla każdego front-end developera. Będą to pluginy pozwalające na dodawanie bardzo ciekawych efektów dla obrazków na stronach WWW bez konieczności tworzenia różnych wersji grafiki w Photoshop. Następnie zajmiemy się bibliotekami, które pozwalają na tworzenie rozbudowanych animacji, bez konieczności używania całej biblioteki jQuery. Kolejną kategorią będą pluginy, dzięki którym możemy umieszczać ciekawe czcionki na stronie bez użycia Font-Face. Omówimy wtyczki jquery pomocne w tworzeniu rozbudowanych formularzy. Na samym końcu przyjżymy się, jak napisać stoper używając tylko i wyłącznie HTML5 i CSS3! <br/><br/> Serdecznie zapraszam, Maciej Żukiewicz

Maciek Zukiewicz

70 minut

Powiadomienie o Ciasteczkach na Stronie

Warsztat w całości poświęcony zaprojektowaniu i wykonaniu w postaci wtyczki jQuery automatycznego panelu z informacją o ciasteczkach na danej stronie. List takich ciasteczek możemy zobaczyć lub też zaakceptować politykę zgadzając się jednocześnie na warunki regulaminu klikając w odpowiedni przycisk na panelu.<br><br> Jako Bonus prezentacja autorskiej aplikacji Expression Studio, jej możliwości zastosowania w codziennym dniu pracy oraz 10 sposobów na ułatwienie sobie życia dzięki niej. <br><br> Serdecznie zapraszam, Mateusz Manaj

Grzegorz Róg

60 minut

Fonty na stronach WWW

W tym Warsztacie poznasz mechanizm działania fontów na stronach oraz podstawowe narzędzia wspomagające osadzenie na stronie własnych krojów pisma takie jak Google Web Fonts czy reguła @font-face. Dowiesz się także jak pracować z typografią w narzędziach takich jak Adobe Dreamweaver, Edge Animate czy Adobe Muse przy wykorzystaniu bibliotek Typekit oraz narzędzi Edge Web Fonts. Dzięki temu będziesz mógł zastosować na swojej stronie dowolny krój pisma a jej zawartość będzie skalowalna oraz indeksowana przez popularne wyszukiwarki. <br><br> Na Warsztat zaprasza Grzegorz Róg

Grzegorz Róg

60 minut

htaccess w Praktyce

W tym warsztacie pokażę Ci w jaki sposób wykonać piękne linki w Twoim serwisie internetowym, jak zabezpieczyć się przed niechcianym użytkownikiem, wykonać autoryzację oknem systemowym czy też odpalić exe'ka w Twojej przeglądarce. Ale to nie wszystko, na 10 przykładach pokażę Ci jak to wszystko wygląda w praktyce oraz sprytne trick'i do wykorzystania wprost na Twojej stronie opartej o serwer Apache. <br><br> Serdecznie zapraszam, Mateusz Manaj

Grzegorz Róg

60 minut

Narzędzia Developerskie w Przeglądarce cz. II

W tym Warsztacie, którego pierwszą część znajdziesz <a href="http://eduweb.pl/live/strony-www-w-przegladarce---narzedzia-developerskie">tutaj</a>, przejdziemy do pokazania narzędzia dostępnego jako zewnętrzny dodatek do przeglądarki Firefox, a będzie nim popularny Firebug. <br><br> Oprócz tego przyjrzymy się również wbudowanemu narzędziu przeglądarki od Mozilli, dzięki któremu podejrzymy strukturę naszej strony w 3D! Następnie sprawdzimy, co drzemie pod skrótem F12 w przeglądarce Internet Explorer i jak można to wykorzystać przy tworzeniu witryn. <br><br> Jako bonus, dowiesz się, w jaki sposób logować informacje, ostrzeżenia czy błędy do naszej konsoli prosto ze skryptów PHP, dzięki dodatkom ChromePHP oraz FirePHP. Mamy wiele do omówienia, zatem zapraszam!<br> Piotr Palarz

Grzegorz Róg

60 minut

Strony WWW w Przeglądarce - Narzędzia Developerskie

Podczas tego warsztatu dowiesz się czym jest narzędzie Chrome Developer Tools wbudowane w przeglądarkę Google Chrome, poznasz metody inspekcji kodu HTML i CSS, a także debugowania kodu JavaScript.<br><br> Nie zabraknie również kilku słów o sposobach mierzenia wydajności stron i aplikacji internetowych za pomocą tego narzędzia. Kiedy już poznasz moc zawartą w Chrome Developer Tools, przejdziemy do pokazania bardzo podobnego narzędzia dostępnego jako zewnętrzny dodatek do przeglądarki Firefox, a będzie nim popularny Firebug. <br><br> Przygotowaliśmy także drugą część tego Warsztatu, do której obejrzenia zapraszamy na <a href="http://bit.ly/YnOnyV">tej stronie</a> <br><br> Mamy wiele do omówienia, zatem zapraszam!<br> Piotr Palarz

Grzegorz Róg

Autor: Grzegorz Róg

**Idea Architect**

Od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobywa projektując grafikę oraz strony www dla wiodących polskich i zagranicznych agencji reklamowych. Współpracuje między innymi z Adobe, Microsoft, Wacom. Jako trener i spiker prowadzi szkolenia oraz eventy i warsztaty. Posiada szereg uprawnień i certyfikatów eksperckich. <br><br> W wolnych chwilach stara się przekazać Ci całą praktyczną wiedzę, pasję i doświadczenie. Zapraszamy do kursu - gwarantujemy, że ta świetna zabawa przyniesie Ci mnóstwo satysfakcji!

eduweb.pl
@greg_rog

Recenzje Kurs HTML i CSS

5

35 dodanych ocen

2016-10-15

Świetny kurs. Dodatkowym atutem jest idealny lektor :)

Kamil Maliszewski

2016-10-16

Bardzo dobry kurs. Wyjątkowa jest część warsztatowa, która przedstawia dobre praktyki.

Grzegorz Szymkowiak

2016-10-26

Świetny kurs ,zakupiłem i już przerabiam. Panie Grzegorzu dobra robota tak dalej:) Jestem z Wami już parę lat i nigdy się nie zawiodłem:)

Igor Igiel

2016-11-02

Początkowo myślałem, że zbyt wiele się nie nauczę. Myliłem się. Grzegorz pokazał kilka przydatnych stron oraz haków i trików o których nie wiedziałem osobiście. Dziękuję!

Mikołaj Lewandowski

2016-11-21

Nawet taki laik jak ja, radzi sobie oglądając ten kurs - to wiele znaczy. Serdecznie polecam!

Mateusz Łangowski

2016-12-28

Bardzo długo zastanawiałem się nad tym kursem i w ogóle kursami video... Teraz już wiem że straciłem dużo czasu. Kurs jest bardzo dobrze zrobiony, masa wiedzy jest przekazana w bardzo przejrzysty sposób. Nie da się nie zrozumieć:) Do tego dołączone są przykłady do omawianych lekcji które pozwalają szybko przećwiczyć zdobytą wiedzę. Naprawdę bardzo polecam! Szkoda tracić czasu na półśrodki!

Rafal Adamkiewicz

2017-01-18

Pana Grzegorza słucha się bardzo przyjemnie a kurs jest szczegółowo i obszernie przygotowany. Jestem aktualnie w trakcie uczenia się, niestety w dużym stopniu zawiodłem się bo pliki źródłowe są finalną wersją tego, czego dana lekcja dotyczy. Utrudnia to pisanie kodu i uczenie się razem z tym co robi Pan Grzegorz.

Marek Iwanski

2017-01-19

Standardy i podstawy zminiają się wraz z rozwojem html. Jako średnio zaawansowany z przyjemnością odświeżam materiał i uzupełniam wiedzę nt. nowości w html i css. Pan Grzegorz jak zwykle bezkonkurencyjny, precyzyjny i bardzo szczegółowy. Polecam kurs!

Michal Czyż

2017-01-28

Bardzo dobry Kurs o HTML 5 i CSS 3 w odpowiedni sposób pokazuje jak zaprojektować i przygotować stronę od strony grafiki a następnie osadzić w kodzie HTML 5 oraz w CSS 3 pokazując ciekawe rozwiązania.

Marcin Szelongiewicz

2017-03-19

Super Kurs. Jedyne czego brakowało to zastosowania flexa i troszke szerzej o media query.

Marek Zientek

2017-05-14

Bardzo pożyteczny kurs, aktualizujący informację o HTML 5 i CSS3. Nowe techniki pracy i sposoby podejścia do zagadnień omówione na praktycznych przykładach. Okazja by usystematyzować wiedzę.

Gabriel Dobosz

2017-05-18

Profesjonalnie przygotowany materiał. Prowadzący przedstawia treść w sposób prosty i zrozumiały nawet dla osób całkowicie początkujących jak ja. Serdecznie polecam.

Przemyslaw Wójcik

2017-06-08

Kurs jak i większość tu prezentowanych za sprawą prowadzących nie są nużące. Z dużą przyjemnością je przerabiam. Ten niestety odbiega jakością od poprzednich. NIe mówię tu o sprawach merytorycznych ale mam wrażenie że był przygotowywany w dużym pośpiechu. Filmy są źle zmontowane i zdarzają się nakładki z dogrywek. Materiały bez pdf-a i jakby niekompletne. To są na szczęście drobiazgi a całość jak najbardziej na plus

Piotr Nadolski

2017-06-16

za drogo

Maciek Anonimus

2017-07-26

Nie jestem ekspertem w ocenie ale zauważyłem powtarzające się elementy filmu .Co bym oczekiwał jeszcze? jeden pakiet kursu filmu podzielony na grupy ciecie layoutu html css js wszystko od podstaw z praktyka przykładów do średnio zaawansowania całości z przykładami.Ocena kurs 7 w skali do 10.

Marcin Filip

2017-08-01

W Stanach nic nie jest za drogo :)

Lukasz S Pierwola

2017-09-21

Kurs przydatny. Polecam osobom które zaczynają przygodę z HTML i CSS.

Tomasz Jasionkowski

2017-10-07

Kurs godny polecenia dla osób mających pierwszą styczność z tworzeniem stron internetowych a następnie polecam kurs HTML5 i CSS3.

Marcin Wawrzyniak

2017-10-25

Taki kurs to podstawa ale i repetytorium wiedzy. Od czasu do czasu oglądam poszczególne filmy z dużą ciekawością i utrwalam wiedzę. Super kurs.

Michal Czyż

2017-11-03

Na razie przerobiłam 12 lekcji. Jestem absolutnie początkująca w HTML i bardzo się cieszę, ze wszystkie dotychczasowe materiały są zrobione w bardzo prosty i przystępny sposób. Jestem naprawdę zadowolona :)

Malgorzata Proc

2017-11-16

Jak dla mnie kurs najgorszy kurs jaki widziałem na eduweb. Cena jest za duża na ten kurs. Bardzo mało kodu. W zasadzie to bardziej opłacało się wykupić dostęp do warsztatów na miesiąc i obejrzeć pierwsze cztery warsztaty o HTML. Oszczędność pieniędzy i czasu. Na yt znajdziemy podobny materiał i opakowany w 1h. Jestem zawiedziony. A szkoda. ;/

Aleksander Jedynak

2017-11-23

Kilka małych błędów montażowych. Ogólnie fajnie przedstawione, choć koledzy uświadomili mnie, że w kilku przypadkach użycie flexa znacznie ułatwia sprawę w porównaniu do float. W kursie o tym nic nie ma, a wydaje mi się, że powinien być zaktualizowany.

Artur Marciniak

2017-12-04

Bardzo dobry kurs porządkujący wiedzę. Wyjątkowa umiejętność przekazywania informacji przez Pana Grzegorza to druga połowa sukcesu.

Mateusz Wieczorek

2017-12-08

Fajnie poprowadzony kurs. Potwierdzam świetną umiejętność przekazywania wiedzy przesz Pana Grzegorza.

Michał Latański

2018-02-08

"W pigułce". Dobrze dobrana treść i równie dobrze przekazana.

Katarzyna Skotnicka

2018-02-17

To mój pierwszy kurs na temat HTML i CSS, natomiast nie pierwszy od eduweb (mam jeszcze jakieś stare, a może nawet baaardzo stare płyty ;)). Treść merytoryczna na wysokim poziomie, a sposób przekazu bardzo klarowny. Warto też dodać, że Pan Grzegorz ma głos i dykcję bardzo przyjemne dla ucha. Polecam i szkolę się dalej :)

Kaja Ciesliczka

2018-06-03

Świetny kurs dla każdego. Dla początkującego jak również, jako powtórka dla bardziej zaawansowanych. Jak Każdy kurs Prowadzony przez Pana Grzegorza temat przedstawiony w przystępny i bardzo zrozumiały sposób. Kurs godny polecenia.

Piotr Mieczkowski

2018-07-14

Bardzo dobry kurs, dzięki któremu można poznać podstawy html i css, a także uczestniczyć w tworzeniu w pełni profesjonalnie wyglądającej strony internetowej.

Piotr Wiktorowicz

2018-09-24

Fajna powtórka i aktualizacja o nowe technologie. Tempo zajęć jest bardzo przyjemny :)

Krzysztof Baraniecki

2018-12-17

Swietny kurs, doskonale wylozony. Po kilku latach przerwy bez problemu wrocilem do kodowanie stron. Dzieki!

Przemyslaw Wypych

2019-04-04

Fajny kurs traktujący o nowej technologi kodowania w HTML5 i CSS3

Artur Gręziak

2019-04-08

Bardzo dobry kurs dla osób początkujących . Warto dodatkowo nabyć książkę w tej tematyce by zgłębiać poznane zagadnienia . Dla mnie najważniejsze jest to że ćwiczenia praktyczne działają , trzeba ćwiczyć ... eksperymentować . Satysfakcja jest olbrzymia .

Marcin Skrzek

2019-11-11

Kursu słucha się przyjemnie, jest naładowany wartościową treścią i poszerzony przydatnymi linkami.

Aleksandra Głuch

2019-11-13

Jeden z najlepszych kursów na Eduweb. Myślałam, że raczej niczego nowego się nie nauczę, myliłam się. Ten kurs pokazał mi to, że tak naprawdę nic nie wiedziałam na temat HTML i CSS, ale teraz po obejrzeniu kursu to się zmieniło. Pan Grzegorz przedstawia przykłady i wyjaśnia wszystko w bardzo prosty do zrozumienia sposób. Polecam! PS. Ostatnia lekcja: Zakończenie, nie działa.

Justyna Jabłońska

2019-11-17

Świetny kurs. Polecam

Rafał Hes

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje
Wykup w abonamencie od 79zł
Przetestuj za darmo przez 7 dni!

Autor: Grzegorz Róg

Czas: 7 godzin 40 minut

Wersja:

  • Pliki źródłowe
  • Certyfikat Ukończenia
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół

Wstęp

  • Wprowadzenie

Wprowadzenie do HTML

  • Historia HTML

  • Hello HTML

Semantyka

  • Znaczniki

  • Edytor Kodu

  • Składnia HTML

  • Elementy Liniowe i Blokowe

Treść na stronie

  • Model Treści

  • Praca ze znacznikami

  • Znaczniki Liniowe

  • Ścieżki i obrazy

  • Atrybuty zdjęć

Obrazki i ścieżki

  • Hiperłącza

  • Popularne błędy

Praca ze stylami

  • Wprowadzenie do CSS

  • Osadzanie Stylów

Selektory i cechy

  • Typy Selektorów

  • Kaskadowość

  • Specyficzność cz.1

  • Specyficzność cz.2

  • Dobre praktyki CSS

Model Pudełkowy i Notacja

  • Model Pudełkowy

  • Box Model w Praktyce

  • Skrócona notacja

  • Jednostki

  • Jednostki w Praktyce

Kolory i tekst

  • Praca z kolorami

  • Formatowanie tekstu

  • Inne właściwości tekstu

  • Reguła font face

  • Fonty hostowane

Wypełnienie

  • Wypełnienie gradientem

  • Tło w CSS

Pozycjonowanie elementów

  • Układ dokumentu

  • Pozycjonowanie elementów

  • Praca z Float

  • Opływanie a układ

Dopasowanie do rozdzielczości i RWD

  • Media w CSS

  • Technika Fluid

  • Praca z Media Queries

  • Ukrywanie elementów

  • Pseudoklasy

Wstęp do Projektu

  • Grupowanie semantyczne i techniczne

  • Struktura HTML

  • Typografia na stronie

  • Kolory

Praca z praktyczną stroną

  • Właściwość display

  • Dekoracje tekstu

  • Formaty grafiki

  • Osadzanie tła

  • Obrazki SVG

  • Układ strony WWW

  • Poprawki layoutu

  • Tworzenie ramki

  • Praca z RWD

  • Stylowanie headera

  • Zakończenie