Wprowadzenie
Zobacz kompletny kurs projektowania stron WWW od czystej kartki w Photoshopie, przez kodowanie w najnowszych standardach HTML5 oraz CSS3 aż do tworzenia animacji z pomocą jQuery! Zobacz, jak pracuje ekspert tak, jakbyś przyglądał mu się przez ramię słuchając precyzyjnych wskazówek. Kurs, który masz przed sobą to esencja praktycznej pracy!
- Proces projektowania layoutu w Adobe Photoshop
- Ciecie grafiki na potrzeby strony WWW
- Kodowanie do HTML5 oraz CSS3
- Prace z jQuery oraz dodatkowymi bibliotekami oraz Tworzenie animacji w jQuery i Edge Animate
- Wykorzystanie geolokalizacji i API Google Maps
- Ciekawe porady, tipsy i triki
Projektowanie od czystej kartki w Photoshop
Zaczniemy od podstaw konfiguracji środowiska pracy w Photoshop. Doinstalujemy potrzebne dodatki i zoptymalizujemy ustawienia Photoshopa pod kątem projektów na potrzeby sieci. Następnie skoncentrujemy się na zgromadzeniu zasobów, które posłużą do stworzenia naszej strony, takich jak fonty, zdjęcia oraz ikony tworząc z nich repozytorium dla naszej witryny. Następnie zajmiemy się praktyką projektowania i krok po kroku przeprowadzę Cię przez proces tworzenia strony głównej i podstrony dla naszego serwisu.
Dobre techniki projektowania
Na przestrzeni kursu starałem się przekazać Ci jak najwięcej wskazówek dotyczących projektowania na potrzeby sieci. Znajdziesz w nim informacje o tym, jak dopasować stronę do optymalnej rozdzielczości, jak pracować wygodnie z gridem, które elementy najlepiej zaimportować z Illustratora jako obiekty inteligentne.
Zobacz lekcję kursu - Skrót do artykułów promowanych >>
Przygotowanie layoutu i cięcie grafiki
Chociaż techniki, które zobaczysz w kursie są uniwersalne i mogą posłużyć do stworzenia zarówno statycznych jak i dynamicznych stron WWW, postaram się także udzielić Ci kilku wskazówek dotyczących tworzenia projektów na potrzeby WordPress, ponieważ w kolejnym kursie strona, którą zakodujemy, będzie wdrażana właśnie do tego CMSa. Po zaprojektowaniu gotowego layoutu potniemy stworzoną grafikę po to, abyśmy mogli zakodować ją do działającej strony WWW.
Zobacz lekcję kursu - Kodujemy karuzelę w jQuery >>
Kodowanie w HTML5 i CSS3
Mając już przygotowane i pocięte elementy graficzne, będziemy wdrażać je jako gotową stronę, do zaprojektowania której wykorzystamy najnowsze standardy HTML5 i CSS3. Nie będziemy jednak korzystać z eksperymentalnych technik, których działanie jest zależne od przeglądarek. Postaram się pokazać Ci pewne metody, które wykorzystuję w codziennej pracy po to, abyśmy nie musieli przejmować się mozolnym testowaniem strony pod różnymi przeglądarkami.
Animacja z jQuery w widoku Pojedynków
W kursie stworzymy także osobny widok, który będzie nawiązywał do aplikacji, którą moglibyśmy stworzyć na potrzeby urządzeń mobilnych. Będzie to odrębny layout, który zakodujemy w HTML i CSS a następnie dopiszemy do niego atrakcyjną animację z pomocą jQuery. W lekcji bonusowej do tego kursu pokażę Ci, jak można stworzyć podobną animację bez kodowania z pomocą programu Adobe Edge Animate.
Zobacz gotową animację >>
Najciekawsze elementy podstron
Omówimy również tworzenie ciekawych elementów podstron, pobierzemy i zainstalujemy na naszą stronę dodatki takie jak CarouFredSel, z pomocą którego zakodujemy działający slider do zdjęć oraz najnowszych artykułów. Zgodnie z etapami pracy, które wykonamy w kursie, będziesz mógł sam zakodować pozostałe podstrony naszej witryny, a gdybyś nie mógł sobie z czymś poradzić - dołączyliśmy kompletne pliki źródłowe działającej witryny, które okażą się pomocne.
Geolokalizacja w przeglądarce i Google Maps API
Jedną z ciekawych funkcjonalności, które zakodujemy na naszej stronie będzie wykorzystanie położenia użytkownika do tego, aby z pomocą Google Maps API dla JavaScript wyświetlić mapkę, na którą dynamicznie naniesiemy markery, które będą zmieniały swoją wielkość w zależności od ilości restauracji zrecenzowanych na naszej stronie.
Podsumowując, kurs zawiera między innymi:
- Proces projektowania layoutu w Adobe Photoshop
- Praktyczne wskazówki pracy z grafiką projektów webowych
- Wykorzystanie typografii na stronach
- Projektowanie na potrzeby WordPress
- Cięcie grafiki na potrzeby strony WWW
- Kodowanie do HTML5 oraz CSS3
- Pracę z jQuery oraz dodatkowymi bibliotekami
- Tworzenie animacji w jQuery i Edge Animate
- Wykorzystanie geolokalizacji i API Google Maps
- Ciekawe porady, tipsy i triki
- I wiele, wiele więcej!
Dlaczego wybrać właśnie ten kurs?
- 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, 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.
-
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ń.
