Jak mogę rozpocząć naukę tworzenia stron internetowych?


22

Jestem bardzo zainteresowany nauką tworzenia stron internetowych i kilka lat temu nauczyłem się podstaw HTML i CSS od W3Schools, ale nigdy nie nauczyłem się, jak tworzyć strony internetowe zgodne z dzisiejszymi standardami, tj. Swobodnie działające strony bez użycia tabel zarządzać projektem strony.

Z jakich dobrych zasobów mogę zacząć?


4
Sugeruję unikanie W3Schools jako narzędzia do nauki. Możesz przeczytać dlaczego tutaj: meta.stackexchange.com/questions/87678/...
aslum

1
Sugerowałbym, że jeśli w3schools działa dla ciebie, użyj go. Tak, istnieje szansa, że ​​coś nie jest dokładne, nikt nie jest doskonały. Zgłosiłem im pewne problemy na niektórych stronach, na których wykryłem błąd. Wiele osób poprawiło moją prymitywną znajomość angielskiego na tej samej stronie. Brałem nawet trochę uwagi kilka lat temu w samym W3C, kiedy pojawił się nowy projekt. Nie ma sensu próbować „banować” witryny, ale ją ulepszać.
Rafael

Odpowiedzi:


12

CSS Zen Garden

Sprawdź CSS Zen Garden i przeglądaj różne wyniki. Są bardzo wszechstronne i zapewniają wiele różnic w porównaniu z tym samym kodem źródłowym. Dowiesz się wiele o nowoczesnych technikach CSS. Nawet jeśli nie rozdzielisz ich całkowicie, znajdziesz przynajmniej wiele inspiracji i umiejętności CSS w porównaniu z normalnie dostępnym HTML. Wspaniałą rzeczą w CSS Zen Garden jest semantyka przeciwko stylowi. Treść nie jest wcale stylem. Wszystko, co widzisz, stylów jest wykonywane wyłącznie przez CSS, co jest prawidłowym sposobem, ponieważ dane mogą być konsumowane przez wielu różnych klientów, a styl tylko przez tych, którzy je wizualizują.

Książki

Jeśli chodzi o naukę z książek, wygląda to na dobry początek CSS: The Missing Manual .

Internet

Czytam Smashing Magazine w Internecie, który zawiera wiele przykładów i podejść. Obejmuje artykuły od branży projektowej do świetnych podejść do projektowania stron internetowych i podobnych.


25

Najlepszym sposobem, aby dowiedzieć się, jak tworzyć witryny i aplikacje, jest robienie tego , co oznacza, że ​​powinieneś tworzyć projekty i robić to cały czas. Ten krótki film przekazuje emocje nowicjusza i podaje dobre porady na ten temat.

Napisałem też kilka innych rekomendacji dla osób zainteresowanych nauką tworzenia stron internetowych, które powinieneś przeczytać przed rozpoczęciem.

Ponieważ jednak nie umiesz mówić w językach, w których nie znasz żadnych słów, musisz dobrze zrozumieć podstawy, zanim zbudujesz użyteczny projekt. Oto niektóre zasoby, które pozwolą Ci zapoznać się z podstawami i witrynami, które pozwolą Ci odkryć dla siebie.


Są świetne miejsca do nauki podstaw tworzenia stron internetowych za darmo. Zacznij tutaj, ale odejdź od nich, aby bawić się rzeczami, których nie uczą bezpośrednio. Po przejrzeniu kilku, spróbuj samodzielnie stworzyć nowe strony / projekty. W ten sposób wzmocnisz koncepcje, nauczysz szczegółów implementacji i prawdopodobnie nauczysz także dodatkowych rzeczy. Po prostu nie możesz zostać dobrym programistą lub projektantem, tylko czytając, musisz stworzyć !

Przygotowałem kurs awaryjny dla projektantów uczących się tworzenia stron internetowych

Sprawdź to! Są one dostosowane do odbiorców projektu, ale dotyczą każdego, kto się uczy. Uczą podstaw w slajdach / postach / filmach, a następnie przypisują mały projekt na końcu każdego z nich, aby uczyć programowania w świecie rzeczywistym.


Inne dobre strony z samouczkami

  • CodeAcademy - Ogólne wiadomości z kilku języków.
  • Seria „Uczenie się w Internecie” Mozilli - rozpoczyna się na poziomie początkowym i może prowadzić do bardziej złożonych tematów. Świetny zasób, bardzo go polecam.
  • Udacity - Ogólna klasa tworzenia stron internetowych.
  • Tuts + - samouczki na bardziej szczegółowe tematy.
  • KhanAcademy - nie korzystałem z niej osobiście, ale wydaje się, że z każdym dniem jest coraz lepiej.

Nie używaj W3Schools , jest to na ogół przestarzałe i bardzo podatne na błędy. Zamiast tego skorzystaj z witryny z samouczkami, takiej jak te powyżej, aby dowiedzieć się i skorzystać z jednej z poniższych stron z dokumentacją, gdy szukasz czegoś konkretnego.


Dokumentacja

Przeglądanie dokumentacji właściwości, bibliotek itp. Jest niezbędne, aby stać się dobrym programistą. Oto najlepsze dokumenty, których możesz użyć:

  • W3.org - Oficjalna dokumentacja większości wszystkiego realizowana przez przeglądarki internetowe. Nauka czytania tych dokumentów jest bardzo ważna! Nie jest to w żaden sposób powiązane z W3Schools.
  • Mozilla Docs - Bardzo niezawodny zasób strony trzeciej od twórców FireFox, który jest aktualny.
  • WHATWG.org - swego rodzaju konkurent open source do W3; niektóre przeglądarki czasami implementują pewne sugestie z poziomu W3.
  • DevDocs - nieoficjalne, ale ma wiele dokumentów w jednym języku. Całkiem wygodne.

Przydatne kanały

  • WebPlatformDaily - Lista aktualności dotyczących wszystkiego aktualizowana codziennie w Internecie (oprócz weekendów).
  • SitePoint - Naprawdę przydatne artykuły na różne tematy.
  • WebDesignerDepot - może być po stronie spamerskiej, ale większość ich rzeczywistych artykułów jest dobra.
  • Smashing Magazine - bardziej zaawansowane tematy, ale przede wszystkim dobre lektury.
  • A List Apart - Trochę bardziej zaawansowana wiedza w formie bloga.

Redakcja

Małe projekty / zabawa z kodem

  • JSFiddle - Twórz małe projekty i śledź je.
  • CodePen - spójrz na bazgroły innych ludzi i prześlij własne, aby inni mogli je zobaczyć.

Edytory pełnotekstowe


Inne przydatne strony internetowe

Poszukaj osobistych blogów dla programistów i projektantów. Często mają świetne, świetne treści.

Napisałem również wprowadzenie do projektu interfejsu użytkownika, które może być bardzo przydatne. Połączyłem w nim kilka dodatkowych świetnych zasobów.


Nie mogę się wystarczająco stresować, najlepszym sposobem na naukę jest budowanie rzeczy, które przekraczają twoje granice i ciągłe .

Aby uzyskać jeszcze większą (i być może przytłaczającą) listę przydatnych stron związanych z siecią, sprawdź WebDesignRepo !


1
Dodałbym Lynda.com. Jeśli chodzi o redaktorów, jeśli korzystasz z komputera Mac, powinieneś uzyskać BBEdit lub skorzystać z bezpłatnej wersji textmate.
DᴀʀᴛʜVᴀᴅᴇʀ

1
Całkowicie się zgadzam, ale chciałbym dodać, że od samego początku radziłbym unikać ram. Naucz się czołgać, zanim nauczysz się chodzić. To da ci znacznie lepszą, solidną bazę do dalszego uczenia się formy w przyszłości i pomoże ci tworzyć piękne, uporządkowane i semantyczne strony internetowe.
Lato

@ JaneDoe1337 zależy od tego, kogo zapytasz. Czasami ramy są łatwiejsze do nauczenia się i pomagają w szybszym wdrażaniu. Ponadto, po zapoznaniu się z podstawami frameworka, możesz zawsze wracać i poprawiać nadgodziny, tak jak powinieneś, jeśli framework jest dobrze przyjęty i istnieją lepsze opcje.
DᴀʀᴛʜVᴀᴅᴇʀ

@Darth_Vader dlatego powiedziałem, że to moja rada;) Moje osobiste doświadczenie jest takie, że ludzie na ogół nie wracają i nie uczą się podstaw, pozostawiając im brak wiedzy w niektórych częściach.
Lato

4

Najlepsze miejsca do nauki projektowania stron internetowych (rozwiązania dotyczące układu, użyteczności, grafiki i rozwiązania techniczne) to:

spójrz na wszystkie strony osób, które napisały artykuły na tych stronach:

Lista oprócz
24ways.org

Lub coś bardziej technicznego w zakresie projektowania list i swobodnego http://css.maxdesign.com.au/index.htm

Musisz wiedzieć, jakie są standardy sieciowe. Oficjalne źródło jest następujące: Konsorcjum World Wide Web (w3c) Uczenie się stamtąd jest nieco trudne, ponieważ jest wysoce techniczne, ale dobrze jest sprawdzić, kiedy chcesz wiedzieć, jak działają rzeczy w Internecie i dlaczego o standardach. najbardziej użyteczną rzeczą jest Walidator twojego kodu HTML.

Jednym z najlepszych sposobów jest rzetelne zapoznanie się z kodem źródłowym dobrych stron internetowych i naturalnie proporcja rzeczy dopasowanych do tych, aby nauczyć się sztuczek: http://www.cssbeauty.com/

Zobacz stronę dobrych projektantów stron internetowych i ich działania:

Jason Santa Maria
Dustin Curtis
Joshua Davis
David DeSandro
http://www.thinkingforaliving.org/
etc ...

i moje pyszne zakładki (istnieje wiele rzeczy, musisz je przeglądać i przeglądać to, czego nie potrzebujesz) http://www.delicious.com/Littlemad/webdesign


3

Zanim zaczniesz uczyć się wszystkich tych ram ...

Chcę przekierować swoją uwagę w kierunku projektowania strony WWW.

Oczywiście możesz łatwo zbudować stronę internetową za pomocą Bootstrap lub innego frameworka. Ale to nie jest projektowanie. Struktura może być podstawą, ale jeśli nie zrobisz tego, co robisz, po prostu otrzymasz stronę internetową, która jest taka sama jak wszystkie inne witryny .

Dlatego radzę ci nauczyć się podstaw projektowania i spróbować zastosować je samodzielnie.

Jak samodzielnie tworzysz (piękne) strony internetowe?

To pytanie jest warte książki, ale oto kilka wskazówek:

  1. Przeczytaj o podstawowych zasadach projektowania . Ten 7-etapowy elementarz do projektowania stron internetowych powinien pomóc Ci zacząć. Również ta seria artykułów na temat Smashing Magazine .
  2. Obserwuj projekty innych ludzi. Z jakich podstawowych zasad korzystali i jak? Ale nie tylko obserwuj, zwróć uwagę na swoje obserwacje .
  3. Projektuj z myślą o celu biznesowym . Istnieje projektowanie stron internetowych, aby pomóc firmie zrealizować swój cel i pomóc użytkownikowi osiągnąć własny cel. Kiedy dwa cele się zbiegają, wszyscy są szczęśliwi. Ten cel powinien być zawsze punktem wyjścia. Na tym celu powinieneś oprzeć każdą decyzję dotyczącą projektu - wybór czcionki, wybór koloru, układ itp.
  4. Upewnij się, że w całym projekcie panuje harmonia . Ogólnie oznacza to harmonię między wiadomością, którą chcesz wysłać, kolorami, czcionkami, nastrojem strony internetowej i marką. Rozpocznij osadzanie harmonii w swoich projektach za pomocą modułowej skali, która pomoże Ci w podejmowaniu decyzji dotyczących rozmiarów. Ta mini-seria wyjaśnia więcej na temat harmonii i korzystania ze skali modułowej.
  5. Przeczytaj niesamowite wprowadzenie do typografii : praktyczną typografię Buttericka lub przynajmniej jej streszczenie

Spróbuj zaprojektować od zera

Teraz, kiedy skończysz czytać o tych wszystkich rzeczach i znasz HTML i CSS, będziesz mógł stworzyć swój własny, bardzo prosty projekt.

Spróbuj zaprojektować pojedynczą stronę z samym tekstem, w czerni i bieli .

Dlaczego tylko sms? Ponieważ tekst jest zdecydowanie najczęściej używanym medium do przekazywania wiadomości w Internecie. Dlatego, jako projektant stron internetowych, fundamentalne znaczenie ma to, aby tekst wyglądał dobrze i był przyjemny do czytania.

Dlaczego czarno-biały? Ponieważ wybieranie kolorów to kolejna bestia. Podejmowanie drobnych kroków sprawi, że będziesz zadowolony z postępu, który robisz i pomoże ci szybciej się uczyć.

Zastosuj podstawowe zasady projektowania, których się nauczyłeś + wykorzystaj obserwacje projektów innych osób + pomyśl o celu tej strony + zmień rozmiar tekstu za pomocą skali modułowej.


„Chcę skierować twoją uwagę na część projektowania stron internetowych” O mój Boże, ile mądrości w tym sentece! Na tej stronie nie ma wystarczającej liczby szczęśliwych twarzy: o)
Rafael


0

Szczerze mówiąc, zacznę od nauki tworzenia stron WordPress. Tak, mogę kodować witrynę za pomocą HTML, CSS, PHP, ... ale mogę szybciej utworzyć witrynę WordPress, a następnie dostosować ją w razie potrzeby.

Jeśli chcesz rozpocząć naukę dzisiejszych standardów, polecam http://nettuts.com/ . Korzystne byłoby również uzyskanie członkostwa premium i dostęp do świetnych samouczków. Jeśli przejście z PSD na HTML jest czymś, co Cię interesuje, obejmują to.

Nettuts jest częścią Envato. Envato ma kilka stron z samouczkami, które obejmują tworzenie stron internetowych, wordpress, wektory, edycję zdjęć i wideo i wiele więcej. To świetne miejsce na początek.

Tylko moje 2 centy.


2
„Szczerze mówiąc, zacznę od nauki tworzenia stron WordPress. Tak, mogę kodować witrynę za pomocą HTML, CSS, PHP ...” Na pewno będziesz musiał pracować zarówno z CSS, jak i HTML, aby stworzyć witrynę WordPress, na pewno?
e100

Nie zgadzam się, OP będzie uczyć się zasad i podstaw skoncentrowanych na wordpress. Czysta, podstawowa znajomość języka zapewni Ci dalszą wiedzę na dłuższą metę, gdy będziesz próbował uczyć się innych języków lub rozwiązywać problemy.
Lato


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.