Я очень заинтересован в изучении веб-разработки и узнал некоторые основы, касающиеся HTML и CSS, несколько лет назад в W3Schools, но я так и не научился разрабатывать веб-сайты, соответствующие современным стандартам, то есть бесплатные сайты без использования таблиц. управлять дизайном сайта.

С каких хороших ресурсов я могу начать?

CSS Zen Garden

Проверьте CSS Zen Garden и пролистайте различные результаты. Они очень универсальны и предоставляют много различий по сравнению с одним и тем же исходным кодом. Вы узнаете много нового о современных методах CSS. Даже если вы не разберетесь с ними полностью, вы по крайней мере найдете много вдохновения и возможностей CSS для нормального доступного HTML. Самое замечательное в CSS Zen Garden - это семантика против стиля. Контент - это не стили вообще. Все, что вы видите, стили делают исключительно с помощью CSS, что является правильным способом сделать это, потому что данные могут потребляться многими различными клиентами, а стиль - только теми, кто их визуализирует.

книги

Когда дело доходит до изучения книг, это выглядит как хорошее начало CSS: The Missing Manual .

интернет

Я читаю Smashing Magazine в интернете, который предоставляет множество примеров и подходов. Он охватывает статьи от дизайнерского бизнеса до отличных подходов в веб-дизайне и тому подобное.

Лучший способ научиться создавать веб-сайты и приложения - это на самом деле делать это , то есть вы должны создавать проекты и делать это постоянно. Это короткое видео передает эмоции новичка и дает несколько полезных советов по этому вопросу.

Я также написал несколько других рекомендаций для людей, заинтересованных в изучении веб-разработки, которые вы должны прочитать перед началом работы.

Однако, так как вы не можете говорить на языках, на которых вы не знаете слов, вам нужно хорошо понять основы, прежде чем вы сможете создать полезный проект. Вот некоторые ресурсы, чтобы выбрать некоторые основы и сайты, которые позволят вам изучить сами.

Есть отличные места, где можно бесплатно изучить основы веб-разработки. Начните здесь, но ответьте на них, чтобы поиграть с вещами, которым они непосредственно не учат. Пройдя через несколько, попробуйте сделать другие сайты / проекты самостоятельно с нуля. Это укрепит концепции, научит вас деталям реализации и, вероятно, научит вас и другим вещам. Вы просто не можете стать хорошим разработчиком или дизайнером, только читая, вы должны творить !

Я сделал ускоренный курс для дизайнеров, изучающих веб-разработку

Проверьте это! Они предназначены для аудитории, основанной на дизайне, но применимы к любому, кто учится. Они преподают основы в слайдах / постах / видео, а затем назначают небольшой проект в конце каждого из них, чтобы научить реальное развитие интерфейса.

• Урок 1. Почему и что стоит за веб-разработкой
• Урок 2. Начало HTML и CSS
• Урок 3 - Запуск JavaScript (JS)

Другие хорошие учебные сайты

• CodeAcademy - общие знания нескольких языков.
• Серия Mozilla "Learning the Web" - начинается с начального уровня и может помочь вам разобраться в некоторых более сложных темах. Отличный ресурс, я очень рекомендую его.
• Udacity - Общий класс веб-разработки.
• Tuts + - учебники на более конкретные темы.
• KhanAcademy - я не использовал это лично, но, кажется, с каждым днем ​​становится все лучше.

Не пользуйтесь W3Schools , он устарел и очень подвержен ошибкам. Вместо этого используйте учебный веб-сайт, подобный приведенному выше, для изучения и используйте один из сайтов документации ниже, когда вы ищете что-то конкретное.

Документация

Глядя на документацию по свойствам, библиотекам и тому подобному, жизненно важно стать хорошим веб-разработчиком. Ниже приведены лучшие документы, которые вы можете использовать:

• W3.org - Официальная документация для большинства всего, что реализовано в веб-браузерах. Научиться читать эти документы очень важно! Это никак не связано с W3Schools.
• Mozilla Docs - очень надежный сторонний ресурс от создателей FireFox, который постоянно обновляется.
• WHATWG.org - своего рода конкурент с открытым исходным кодом для W3; некоторые браузеры время от времени реализуют определенные предложения по W3.
• DevDocs - не является официальным, но на одном сайте размещено множество документов на разных языках. Довольно удобно.

Полезные каналы

• WebPlatformDaily - список новостей, касающихся всего, что обновляется ежедневно (кроме выходных).
• SitePoint - действительно полезные статьи на разные вещи.
• WebDesignerDepot - Может быть на стороне спама, но большинство их фактических статей хороши.
• Smashing Magazine - более сложные темы, но в основном все хорошо читается.
• A List Apart - немного более продвинутые знания в форме блога.

редакторы

Небольшие проекты / игра с кодом

• JSFiddle - Делайте маленькие проекты и отслеживайте их.
• CodePen - Посмотрите на рисунки кода других людей и отправьте свои собственные для просмотра другими.

Полнотекстовые редакторы

• SublimeText
• Атом

Другие полезные сайты

• Страница "Мои ресурсы" - список ресурсов, которые я собирал, от начального до адаптивного дизайна до анализа различных способов анимации в веб-браузере.
• Руководство разработчика фронтэнда - более разнообразная, но полезная коллекция постов, охватывающих широкий спектр тем фронтэнда.
• WebFieldManual - большая коллекция полезных ресурсов.
• StackOverflow - если у вас есть конкретный вопрос, связанный с программированием, StackOverflow не имеет себе равных, чтобы получить вашу помощь.
• LearnLayout - Изучите некоторые основы создания макетов в CSS.
• Позиционирование в веб-дизайне - часть моего ускоренного курса, которая, пожалуй, самая полезная.
• 30 CSS-селекторов, которые вы должны знать - познакомьтесь с ними и сэкономьте свое время позже. Есть также крутая маленькая игра, чтобы проверить свои знания селектора CSS.
• Codrops CSS Reference - краткая и полезная справочная страница.
• CodeMentor и Thinkful - сайты, где вы можете заплатить за наставничество 1 на 1.

Ищите личные блоги веб-разработчиков и дизайнеров, которые вам нравятся. Они часто имеют отличный контент.

Я также написал введение в дизайн пользовательского интерфейса, который может быть очень полезным. Я связал некоторые дополнительные большие ресурсы в этом.

Я не могу не подчеркнуть, что лучший способ научиться - это создавать вещи, которые выходят за пределы ваших возможностей, и делать это постоянно .

Для еще большего (и, возможно, подавляющего) списка полезных веб-сайтов, связанных с веб-сайтом, посетите WebDesignRepo !

Лучшие места для изучения веб-дизайна (решения для макетов, удобство использования, графика и технические решения):

Посмотрите на все сайты людей, которые написали статьи на этих сайтах:

Список кроме
24ways.org

Или что-то более техническое в дизайне списков и плавающем http://css.maxdesign.com.au/index.htm

Вы должны знать, что такое веб-стандарты. Официальный источник таков : Консорциум World Wide Web (w3c). Изучить его немного сложно, потому что он очень технический, но это полезно проверить, когда вы хотите узнать, как все работает в Интернете и почему о стандартах. самая полезная вещь - это валидатор вашего HTML-кода.

Одним из лучших способов является хороший взгляд на исходный код хороших веб-сайтов и, естественно, пропорцию вещей, подобную тем, что нужно для изучения трюков: http://www.cssbeauty.com/

И посмотрите на сайт хороших веб-дизайнеров и что они делают:

Джейсон Санта Мария
Дастин Кертис
Джошуа Дэвис
Дэвид ДеСандро
http://www.thinkingforaliving.org/ и
т.д ...

и мои закладки Delicious (есть множество вещей, вы должны копаться в них и просматривать то, что вам не нужно) http://www.delicious.com/Littlemad/webdesign

Прежде чем начать изучать все эти рамки ...

Я хочу перенаправить ваше внимание на дизайн- часть веб-дизайна.

Конечно, вы можете легко создать сайт с помощью Bootstrap или какого-либо другого фреймворка. Но это не дизайн. Фреймворк может быть основой, но если вы не сделаете свое собственное вращение, вы в основном получите веб-сайт, который будет таким же, как и все другие веб-сайты .

Вот почему я бы посоветовал вам изучить основы дизайна и попробовать применить их самостоятельно.

Как вы делаете (красивые) сайты самостоятельно?

Теперь этот вопрос стоит книги, но вот несколько советов:

1. Читайте об основных принципах дизайна . Этот 7-шаговый учебник по веб-дизайну должен помочь вам начать работу. Также эта серия статей о Smashing Magazine .
2. Соблюдайте чужие замыслы. Какие из основных принципов они использовали и как? Но не просто наблюдать, а записывать свои наблюдения .
3. Дизайн с целью бизнеса . Веб-дизайн существует, чтобы помочь бизнесу реализовать свою цель и помочь пользователю достичь своей цели. Когда две цели сходятся, все счастливы. Таким образом, эта цель должна быть вашей отправной точкой, всегда. Вы должны основывать каждое дизайнерское решение, которое вы принимаете на этой цели - выбор шрифта, выбор цвета, макет и т. Д.
4. Убедитесь, что в вашем дизайне есть гармония . В общем, это означает гармонию между сообщением, которое вы хотите отправить, цветами, шрифтами, настроением сайта и бренда. Начните встраивать гармонию в свои проекты, используя модульную шкалу для определения размера. Этот мини-сериал объясняет больше о гармонии и использовании модульной шкалы.
5. Прочитайте это удивительное введение в типографику : Практическая типография Баттерика или, по крайней мере, это краткое изложение

Попробуй дизайн с нуля

Теперь, когда вы закончите читать обо всех этих вещах и знаете HTML и CSS, вы сможете сделать свой собственный очень простой дизайн.

Попробуйте оформить одну страницу только с текстом, черно-белым .

Почему просто текст? Потому что текст, безусловно, является наиболее используемым средством для передачи сообщения в Интернете. Поэтому для вас, веб-дизайнера, крайне важно, чтобы текст выглядел хорошо и было приятно читать.

Почему черно-белое? Потому что выбор цвета - это еще один зверь. Делая небольшие шаги, вы почувствуете радость от достигнутого вами прогресса и сможете быстрее учиться.

Применяйте базовые принципы дизайна, которые вы изучили + используйте наблюдения чужих проектов + подумайте о цели этой страницы + измените размер текста с помощью модульной шкалы.

Лучший способ научиться делать вещи, так что сделайте себе сайт.

Читайте стандарты , alistapart , tutsplus .

Если вам нужна книга, загляните в SitePoint - Утопия HTML: Проектирование без таблиц с использованием CSS .

Некоторые мысли о csszengarden и W3Schools .

Честно говоря, я бы начал с изучения, как разрабатывать сайты на WordPress. Да, я могу кодировать сайт, используя HTML, CSS, PHP, ... но я могу быстрее собрать сайт WordPress и затем настраивать его по мере необходимости.

Если вы хотите начать с изучения современных стандартов, я бы порекомендовал http://nettuts.com/ . Также было бы полезно получить премиум-членство и получить доступ к некоторым отличным учебникам. Если вы заинтересованы в переходе от PSD к HTML, они охватывают это.

Неттутс является частью Envato. В Envato есть несколько сайтов с учебными пособиями, которые охватывают веб-разработку, WordPress, векторы, редактирование фото и видео и многое другое. Это отличное место для начала.

Просто мои 2 цента.

Для начинающих Photoshop по веб-дизайну, я бы порекомендовал этот сайт http://psdvibe.com/

Есть много сайтов с тоннами учебников. Тем не менее, лучшая платформа для изучения веб-дизайна - http://teamtreehouse.com/ . Надеюсь, это поможет! Nik