Как я могу начать изучать веб-разработку?


22

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

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


4
Я бы посоветовал избегать W3Schools в качестве инструмента обучения. Вы можете прочитать , почему здесь: meta.stackexchange.com/questions/87678/...
aslum

1
Я хотел бы предложить, что если w3schools работает для вас, вы используете его. Да есть шанс что-то не острое, никто не идеален. Я сообщил им о некоторых проблемах на некоторых страницах, где я обнаружил ошибку. Многие люди исправили мои примитивные навыки английского на этом сайте. Я даже участвовал в нескольких выпусках несколько лет назад самого w3C, когда был запущен новый проект. Нет смысла пытаться «забанить» сайт, но улучшить его.
Рафаэль

Ответы:


12

CSS Zen Garden

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

книги

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

интернет

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


25

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

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

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


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

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

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


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

  • 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 - Посмотрите на рисунки кода других людей и отправьте свои собственные для просмотра другими.

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


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

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

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


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

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


1
Я бы добавил Lynda.com. Что касается редакторов, если вы работаете на Mac, вы должны получить BBEdit или использовать бесплатную версию textmate.
DᴀʀᴛʜVᴀᴅᴇʀ

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

@ JaneDoe1337, это зависит от того, кого ты спрашиваешь. Временами инфраструктуру легче освоить и она помогает быстрее развертывать. Кроме того, после изучения основ фреймворка вы всегда можете вернуться и настроить сверхурочные, как следует, если фреймворк хорошо принят и имеются лучшие варианты.
DᴀʀᴛʜVᴀᴅᴇʀ

@Darth_Vader, поэтому я сказал, что это был мой совет;) Мой личный опыт заключается в том, что люди обычно не возвращаются и не изучают основы, оставляя им недостаток знаний в определенных частях.
лето

4

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

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

Список кроме
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


3

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

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

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

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

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

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

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

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

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

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

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

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

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


«Я хочу перенаправить ваше внимание на дизайн-часть веб-дизайна». Боже мой, как много мудрости в этом предложении! На этом сайте недостаточно счастливых лиц: o)
Рафаэль

1

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

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

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

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


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

0

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

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

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

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


2
«Честно говоря, я бы начал с изучения того, как разрабатывать сайты на WordPress. Да, я могу кодировать сайт, используя HTML, CSS, PHP ...» Вам, конечно, нужно будет работать как с CSS, так и с HTML, чтобы разработать сайт WordPress?
e100

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.