Мега руководство для изучения CSS

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

Что такое CSS? Это формальный язык описания внешнего вида документа, написанного с использованием языка разметки (HTML).

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

И здесь начинается самое главное — больше половины владельцев сайта на WordPress не знают, где найти эти таинственные строки кода CSS, в которых нужно всего лишь изменить значение свойства селектора.

Последние три слова в предыдущем абзаце многих сейчас поставило в тупик — о чем это он пишет? Я пишу о Правилах объявления свойств CSS.

Хотите стать настоящим докой знаний CSS?

Тогда внимательно читайте собранное мной Мега-Руководство для изучения CSS.

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

Важно! Я не рекомендую ерунду. Все ссылки ниже — это действительно очень авторитетно.

CSS, SASS, LESS, Bootstrap

Все ресурсы сгруппированы в 7 разделов:

  • CSS — язык описания внешнего вида документа HTML (XHTML)
  • SASS — язык стилей, расширение CSS
  • LESS — немного другой язык разметки и препроцессора, предназначенный для расширения функциональности CSS путем добавления новых функций
  • Bootstrap — набор документов CSS+HTML+JS с открытым кодом, предназначен для создания веб-сайтов
  • Личные сайты — великие гуру и знатоки CSS, к чьим советам стоит прислушиваться
  • Must-Have ресурсы — сайты, на которых есть учебники, курсы, видео-курсы, которые не дадут вам загрустить))

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

Лично я осваиваю CSS постоянно, начинал с самых простых свойств, на основе которых формируется каркас любого документа HTML.

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

Но уверен, что мой список ссылок будет одним из самых больших и качественных в Рунете. Итак, начнем.

CSS Ресурсы

Если вы — абсолютный новичок и хотите изучить CSS начиная с основы ...

Если вы хотите иметь под рукой полный справочник всех селекторов и свойств CSS ...

Если вы — опытный профессионал и хотите освежить в памяти свои знания ...

Вот вам некоторые полезные ресурсы:

Для тех, кто является поклонником обучения с практическими занятиями, это для вас:

Если вам интересней изучать в структурированной среде, вот несколько ссылок:

Есть много отличных книг, и если вы любите именно такое чтение — вот вам ссылки на самое лучшее:

Могут быть также полезны видео-уроки, когда вы под руководством опытного специалиста постигаете шаг за шагом все премудрости. Иногда это просто легче воспринимать, когда все видно визуально. Вот некоторые из них, которые доступны на Youtube.

Если вы ищите сайты как справочники, вот вам несколько отличных ссылок:

Ресурсы SASS

Преобразование вашего CSS в SASS означает, что вы можете загрузить стили вашего сайта быстрее. Вот несколько качественных ресурсов по освоению SASS

Вот еще несколько учебников, чтобы попрактиковаться в том, что вы узнали о SASS

Лучшие видео-уроки и курсы на Youtube

LESS Ресурсы

SASS как правило, более популярен, но есть много поклонников и у LESS. LESS – это динамический язык стилей, созданный под влиянием языка стилей SASS.

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

Bootstrap ресурсы

Я уверен, в моем списке не все ресурсы, которые раскрывают суть фреймворка Bootstrap и вы, наверняка, знаете еще как минимум десяток. Bootstrap очень популярен как простой и легко настраиваемый фреймворк (рабочая среда разработки) HTML+CSS+JS для разработки веб-сайтов (в том числе на WordPress) с поддержкой адаптивного дизайна.

Вот мой список ресурсов.

Если вам нужно подробное руководство, которое всегда у вас под рукой – тогда вот еще ресурсы.

Если вы считаете, что чтение книг и статей не так полезно, как изучение с помощью персонального учителя – тогда вот вам еще пару ссылок

Вот некоторые большие видео-курсы и курсы о Bootstrap, созданные талантливыми людьми на Youtube

Народ, обратите внимание

Есть так много замечательных веб-разработчиков, что всех знать – нереально. А выбрать из них небольшой список – сплошная мУка. Я попытался и даю вам небольшой список ссылок на аккаунты разработчиков в Twitter. Следите, френдитесь.

  • Сара Свидан – фронт-энд разработчик, писатель, кодер и спикер. Автор Codrops.
  • Анна Тудор – разработчик и дизайнер, которая много пишет о CSS
  • Снук – дизайнер, разработчик, писатель и спикер. Написал SMACSS.
  • Codrops – посвящен тому, чтобы предоставить полезные учебники, глубокие статьи, бесплатные ресурсы для веб-дизайнеров и разработчиков.
  • Темы и плагины WordPress – куратор сообщества разработчиков CSS
  • Леа Веру – автор секретов CSS, один из команды W3C.
  • Гарри Робертс – спикер, автор и консультант фронт-энд для Google, Kickstarter, Etsy, BBC и многое другое.
  • Николь Салливан – веб-разработчик, инженер
  • Хаким Эль Хаттаб – кодер на Javascript и CSS
  • Матиас Бинс – фанатик веб-стандартов
  • Питер Поль Кох – консультант, писатель, спикер, блоггер, тренер, обозреватель стратегий мобильных платформ

Нужна помощь?

Иногда так случается, что код, который должен работать – не работает 🙁

К счастью, есть несколько сайтов, где помогут, и можно получить экспертную консультацию и помощь бесплатно.

  • http://wordpress.stackexchange.com
  • Форум поддержки WordPress.org (есть русская ветка, но лучше воспользоваться англоязычной, там больше специалистов высокого уровня, включая самих разработчиков системы, которые найдут время ответить на ваш вопрос)

Заключение

  1. Если у вас есть любимые ссылки, которых вы не нашли в моем списке – оставляйте их в комментариях ниже.
  2. Если вы освоите CSS+SASS+LESS+Bootstrap на отлично — можете искать себе работу не ниже $2000, лучше как фрилансер.
  3. Потом скажите мне «спасибо» за то, что дал направление жить по-новому ))

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *