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ąć?

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.

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.

• Lekcja 1 - Dlaczego i co kryje się za tworzeniem stron internetowych
• Lekcja 2 - Uruchamianie HTML i CSS
• Lekcja 3 - Uruchamianie JavaScript (JS)

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

• SublimeText
• Atom

Inne przydatne strony internetowe

• Strona Moje zasoby - lista zasobów, które kompilowałem, od wstępu do responsywnego projektu do analizy różnych sposobów animacji w przeglądarce internetowej.
• Podręcznik programisty front-end - Bardziej zróżnicowany, ale pomocny zbiór postów obejmujących szeroki zakres tematów front-end.
• WebFieldManual - Duży zbiór pomocnych zasobów.
• StackOverflow - Jeśli masz konkretne pytanie związane z programowaniem, StackOverflow nie ma sobie równych, aby uzyskać pomoc.
• LearnLayout - zapoznaj się z podstawami tworzenia układów w CSS.
• Pozycjonowanie w projektowaniu stron internetowych - Być może najbardziej przydatny element mojego kursu awaryjnego.
• 30 selektorów CSS, które powinieneś znać - Poznaj je i zaoszczędź czas później. Jest też fajna mała gra, aby sprawdzić swoją wiedzę selektora CSS.
• Codrops CSS Reference - zwięzła i pomocna strona referencyjna.
• CodeMentor i Thinkful - Miejsca, w których można płacić zostać mentorem 1 na 1.

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 !

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

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.

Najlepszym sposobem uczenia się jest tworzenie rzeczy, więc stwórz stronę internetową.

Czytaj standardy , alistapart , tutsplus .

Jeśli potrzebujesz książki, zajrzyj na stronę SitePoint - HTML Utopia: Projektowanie bez tabel za pomocą CSS .

Kilka przemyśleń na temat csszengarden i W3Schools .

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.

Dla początkujących w Photoshopie w zakresie projektowania stron internetowych polecam tę stronę http://psdvibe.com/

Istnieje wiele stron internetowych z mnóstwem samouczków. Jednak najlepszą platformą do nauki projektowania stron internetowych jest http://teamtreehouse.com/ . Mam nadzieję, że to pomoże! Nik