30 bezpłatnych samouczków wideo do nauki projektowania stron internetowych
Rozpoczęcie projektowania stron internetowych może być dość trudne. Dla czytelników jest mnóstwo świetnych bezpłatnych samouczków online. Jednak niektórzy uważają, że instrukcje wizualne są bardziej skuteczne w ich stylu uczenia się.
Filmy instruktażowe są niezwykle bogatym narzędziem do nauki i mogą być właśnie tym, czego potrzebujesz, aby w końcu prawidłowo nauczyć się tworzenia stron internetowych. Zebraliśmy listę ponad 30 doskonałych screencastów dla początkujących w różnych technologiach i dyscyplinach internetowych.
Przeglądaj zasoby projektowe
NetTuts
NetTuts jest jednym z najlepszych dostawców darmowych treści związanych z nauką projektowania stron internetowych. Mają wiele artykułów i samouczków wideo dla uczniów na wszystkich poziomach. Oto kilka dla początkujących w HTML5, CSS3 i JavaScript.
Ostateczny przewodnik po tworzeniu projektu i konwertowaniu go na HTML i CSS
„Ten screencast posłuży jako ostatni wpis w wieloczęściowej serii na stronach TUTS, która pokazuje, jak zbudować piękną stronę główną dla fikcyjnego biznesu. Nauczyliśmy się tworzyć szkielet w Vectortuts +; dodaliśmy kolor, tekstury i efekty do Psdtuts +; teraz weźmiemy nasz ukończony PSD i przekonwertujemy go na ładnie zakodowaną stronę HTML i CSS. ”
Jak sprawić, by wszystkie przeglądarki poprawnie renderowały znaczniki HTML5: Screencast
„HTML 5 zapewnia kilka świetnych nowych funkcji dla projektantów stron internetowych, którzy chcą kodować czytelne, semantycznie znaczące układy. Jednak obsługa HTML 5 wciąż ewoluuje, a Internet Explorer jako ostatni dodaje obsługę. W tym samouczku utworzymy wspólny układ z wykorzystaniem niektórych nowych elementów semantycznych HTML 5, a następnie wykorzystamy JavaScript i CSS, aby uczynić nasz projekt wstecznie kompatybilnym z Internet Explorerem. Tak, nawet IE 6. ”
Jak zbudować menu nawigacyjne w stylu lampy lawowej
„Jeden z naszych czytelników poprosił o samouczek na temat tworzenia menu w stylu lampy lawowej. Na szczęście jest to dość proste zadanie, szczególnie w przypadku korzystania z biblioteki JavaScript. Dzisiaj zbudujemy jeden od podstaw. ”
JavaScript z Null: seria wideo
„Ta seria screencastów skupia się wyłącznie na JavaScript i zabierze Cię od pierwszego powiadomienia„ Witaj, świecie ”do bardziej zaawansowanych tematów.”
Jak przekonwertować PSD na XHTML
„Nadal jestem zdumiony tym, jak dobrze radzi sobie samouczek Collisa„ Zbuduj elegancki portfel od podstaw ”. Minęły miesiące, ale wciąż co tydzień publikuje duże liczby. Biorąc to pod uwagę, postanowiłem stworzyć screencast, który dokładnie pokazuje, jak przekonwertować PSD na idealny XHTML / CSS. ”
Pokroić w kostkę i PSD
„W dzisiejszym samouczku wideo pokroimy PSD, pokroimy w kostkę dla Internetu i podamy na ciepłej płycie grzejnej. Nasz projekt ma elegancki wygląd „Web 2.0” i jest dostępny dzięki uprzejmości Joefrey z ThemeForest.net. Jeśli masz szansę, odwiedź jego profil. ”
Doctype TV
Faceci z Doctype często publikują screencasty na tematy z całego spektrum projektowania stron internetowych. Poniżej znajdziesz filmy wideo na temat Ajax, projektowania opartego na siatce, kolumn CSS3 i tworzenia pierwszej wtyczki jQuery.
Projektowanie oparte na sieci i AJAX 101
„Nick przedstawia przegląd projektu opartego na siatce, a Jim przedstawia podstawy AJAX.”
Kolumny CSS3 i wtyczki jQuery
„Nick dekonstruuje układy wielokolumnowe CSS, a Jim pokazuje krok po kroku, jak stworzyć własną wtyczkę jQuery”.
TutVid
TutVid to witryna z samouczkami dotyczącymi projektowania stron internetowych, która oferuje bezpłatne filmy instruktażowe. Możesz również kupić dany film, aby otrzymać wersję do pobrania w wyższej rozdzielczości wraz z powiązanymi plikami projektu. Poniżej przyjrzymy się kilku dostępnym samouczkom Dreamweaver.
Dreamweaver CS4: Tagi stylów za pomocą CSS
„Dowiedz się wszystkiego o znacznikach stylów i pisaniu kodu CSS w Dreamweaver. Pod koniec tego samouczka zrozumiesz, jak pisać CSS, jak działa CSS i jak pisać kod CSS w Dreamweaver. ”
14 kroków: jak korzystać z Div
„Przyjrzymy się całej masie rzeczy, o których chcesz wiedzieć, kiedy zaczniesz używać Div. Dowiedz się wszystkiego o rozmieszczaniu i używaniu Div, a także o ich stylowaniu za pomocą CSS w Dreamweaver! ”
Utwórz podstawowy dokument XML
„W tym filmie szybko omówimy XML, czym on jest i do czego służy. Następnie usiądziemy i wypiszemy nasz pierwszy dokument XML, po prostu prostą listę sześciu osób. Użyjemy programu Dreamweaver, ale tak naprawdę każdy edytor tekstu jest w porządku. Omówimy tworzenie pisania w prawdziwym języku, dodawanie atrybutów, a także sposób tworzenia własnych tagów i kilka podstawowych informacji, które pomogą Ci pisać własny dokument XML. ”
Utwórz pełną witrynę CSS
„W tym filmie zaczniemy od folderu obrazów i za około 30 minut zbudujemy bardzo prosty układ 2 kolumn za pomocą CSS do stylizacji naszej strony! Dowiemy się wszystkiego o korzystaniu z div, tworzeniu reguł CSS, kierowaniu do div, tworzeniu tła i wielu innych! Naucz się wykorzystywać surową moc Kaskadowych Arkuszy Stylów do tworzenia, układania i stylizowania swoich stron już dziś! ”
Najpierw
Themeforest to rynek Envato, który sprzedaje szablony stron różnego typu (HTML, WordPress, Joomla itp.). Na stronie znajduje się również blog, który od czasu do czasu publikuje naprawdę przydatne treści. Sprawdź screencasty na PHP i jQuery poniżej.
Nurkowanie w PHP Video Series (11 części)
„Dzisiaj rozpoczyna się nowa seria, która pokaże DOKŁADNIE, jak zacząć korzystać z PHP. Podobnie jak w przypadku serii „jQuery for Absolute Beginners”, zaczniemy od zera i powoli będziemy pracować nad bardziej zaawansowanymi tematami. ”
jQuery dla absolutnie początkujących
„Od dzisiaj uruchamiam codzienną serię wideo, która nauczy Cię PRECYZYJNIE, jak korzystać z biblioteki jQuery we własnych projektach. Zaczniemy od pobrania frameworka, stworzenia naszej pierwszej funkcji, zbadania składni i innych. Każdego dnia będę publikować pięciominutowy „schemat treningowy”, który rozwija to, czego już się nauczyłeś. Więc nie ma już powodu, aby z tym walczyć! Naucz się tego, do diabła, i zacznij zarabiać więcej na ThemeForest.net dzięki nowo odkrytym umiejętnościom. ”
Sztuczki CSS
Chris Coyier z CSS Tricks wypuszcza stały strumień niesamowicie edukacyjnych samouczków wideo. Jego strona ma obecnie 84 bezpłatne zrzuty ekranu, które obejmują różne techniki i wskazówki HTML, CSS i JavaScript. Poniżej przyjrzymy się sześciu, które powinny być pomocne dla początkujących.
Konwertowanie makiety programu Photoshop (część 1 z 3)
„W tym pierwszym podcastie wideo rozpoczynam proces konwersji makiety strony internetowej Adobe Photoshop na prawdziwą stronę internetową opartą na CSS. To jest dość szorstkie, ludzie, jestem pewien, że z czasem będą bardziej skupieni. ”
Formatowanie CSS
„Uporządkowanie i prawidłowe formatowanie plików CSS pozwala zaoszczędzić dużo czasu i frustracji podczas procesu programowania, a zwłaszcza podczas rozwiązywania problemów. Wielowierszowy format ułatwia przeglądanie atrybutów, ale sprawia, że plik jest bardzo długi w pionie. Format jednowierszowy sprawia, że plik jest pionowo krótki, co jest miłe przy przeglądaniu selektorów, ale trudniej jest przeglądać atrybuty. Możesz także wybrać sposób grupowania wyciągów CSS. ”
Konwertowanie makiety programu Photoshop: część druga, odcinek pierwszy
„Mnóstwo wspaniałych opinii na temat pierwszej serii Konwersja makiety Photoshopa na HTML / CSS. Zróbmy to jeszcze raz! Każda strona internetowa jest inna będzie wymagała różnych technologii konwersji, więc będzie wiele czasu na naukę, które będą inne niż ostatnio ”.
Projektowanie dla WordPress: część pierwsza
„W części pierwszej będziemy pobierać i instalować WordPress. Następnie zainstalujemy motyw „Starkers” autorstwa Elliota Jaya Stocksa, aby zacząć od zupełnie nowego projektu dla naszego nowego projektu. Nie ma sensu, zaczynając od domyślnego motywu, to więcej kłopotów niż jest warte! W drugiej części omówimy teorię projektowania WordPressa i tego, jak to jest „pracować modułowo” i zacząć projektować. W części trzeciej zakończymy projektowanie i zaczniemy od bardziej zaawansowanych funkcji. ”
HTML i CSS - BARDZO podstawy
„Ten film to BARDZO podstawy tego, czym jest HTML i CSS, dla absolutnie początkującego. Pliki HTML i CSS są dosłownie tylko plikami tekstowymi. Do ich tworzenia nie potrzebujesz specjalnego oprogramowania, chociaż pomocny jest przyjemny edytor kodu. Możesz utworzyć te pliki na dowolnym komputerze i użyć przeglądarki internetowej, aby wyświetlić ich podgląd podczas programowania. Możesz myśleć o HTML jako o treści twojej witryny: wiązce tekstu i odniesieniach do obrazów owiniętych w tagi. CSS to projekt Twojej witryny. Kieruje na tagi napisane w kodzie HTML i stosuje styl. Oddzielenie tych dwóch rzeczy jest kluczem do jakości projektowania stron internetowych. ”
Budowa strony internetowej: konwersja HTML / CSS
„W części 2 tej serii rozpoczynamy konwersję HTML / CSS makiety Photoshop, którą utworzyliśmy w części pierwszej. Zaczynamy od bardzo szkieletowego projektu. Następnie przyjrzymy się organizacji warstwy plików programu Photoshop. Następnie zaczynamy od podstaw, tworząc potrzebne fragmenty z pliku Photoshop i pisząc HTML i CSS, których potrzebujemy, aby wykonać zadanie. Większość pracy nie polega na „wycinaniu” pliku Photoshopa, ale na dokładnym przyjrzeniu się temu i próbowaniu naśladowania tego, co się tam dzieje przy użyciu odpowiednich technik znaczników i CSS. ”
Victoria Web
Victoria web to rodzaj internetowej szkoły w wersji beta. Mają niewielką garść bezpłatnych samouczków wideo dla twórców stron internetowych.
Rozpoczęcie pracy z PHP
„Chcesz zacząć uczyć się i tworzyć aplikacje PHP? Ten film pokazuje narzędzia używane przez profesjonalistów z branży w celu szybkiego i skutecznego uruchomienia ich aplikacji. ”
Wprowadzenie do jQuery
„Wprowadzenie do środowiska JavaScript jQuery. Dowiesz się, jak korzystać z selektorów CSS w celu modyfikowania obiektów DOM, przesuwania ich do widoku i z widoku, wygaszania i tworzenia niestandardowych animacji. ”
Cały projekt strony internetowej
„Naucz się tworzyć całą witrynę dealerską od początku do końca. Obejmuje różne techniki, takie jak maski warstw, maski przycinające, odbicia, cienie i wiele innych. ”
ShowMeDo
ShowMeDo jest źródłem filmów instruktażowych na temat pracy z technologią i oprogramowaniem open source.
Podstawy Javascript
„W tym filmie pokazuję podstawy Javascript. Tag zaczyna się pomiędzy tagiem. Może również znajdować się pomiędzy tagiem. Dlatego wywołujemy funkcję message () z atrybutu onload w tagu (to znaczy, gdy strona się ładuje). Wyprowadzenie prostego tekstu na stronie html i polach alertów, zdefiniowanie funkcji i klauzuli if / else daje nam natychmiastowy i ogólny obraz tego, czym jest Javascript. ”
Python od zera
„Ta seria filmów jest bardzo podstawowym podejściem do programowania w języku Python dla początkujących. W nadziei, że publiczność pozostanie zestrojona do samouczków z pygame, które pokażą, jak tworzyć proste gry 2D bez wcześniejszej wiedzy o grafice komputerowej. ”
Innych źródeł
Poniższe filmy pochodzą z rozproszonych źródeł w Internecie. Zawsze dobrze jest uczyć się z jak największej liczby osobnych źródeł, aby mieć pewność, że otrzymujesz gruntowne wykształcenie.
Tworzenie szablonu WordPress - część 1 z 3
„Szczegółowy, trzyczęściowy przegląd tworzenia pierwszego motywu WordPress”.
Zmodyfikuj motyw WordPress - samouczek wideo
„To trzeci film z zaawansowanych samouczków wideo WordPress. Ten samouczek wideo pokazuje, jak pracować z niektórymi kodami motywów WordPress, czyli jak dodać kod autorespondera do paska bocznego blogu, jak umieścić baner w jednym poście i podobne rzeczy. ”
Jak zrobić wtyczkę Wordpress
„Krótki samouczek wideo na temat tworzenia wtyczki wordpress”.
Tworzenie strony internetowej: od początku do końca
Trzyczęściowa seria, która zabierze Cię od zaprojektowania strony internetowej w Photoshopie przez kodowanie w HTML i CSS.
jQuery Online Movie Tutorial autorstwa Johna Resiga
„John Resig, twórca biblioteki javascript jQuery, opublikował wideo online na temat tworzenia menu w stylu akordeonu za pomocą jQuery. Całkiem proste rzeczy… ale dobre wprowadzenie do jQuery, jeśli dopiero zaczynasz. ”
Wniosek
Biorąc pod uwagę wszystkie powyższe bezpłatne zasoby, mam nadzieję, że zabrakło Ci wymówek, że nie możesz ręcznie kodować stron. Czas wskoczyć i zmoczyć stopy. Samo śledzenie powyższych filmów nauczy Cię ładunków i pomoże ci zostać pełnoprawnym twórcą stron internetowych.
Znasz jakieś darmowe samouczki wideo? Pozostaw link w komentarzach poniżej.
