ВасьОК — Блог

Сколько времени мне понадобилось для изучения CSS

Чтобы понять как работает CSS и самостоятельно научиться верстать страницы у меня ушло всего две недели занятий в отпуске. Хотите узнать подробности и получить пару советов о том, как научится верстать сайты самостоятельно, читайте данную статью.

html-css1

Cascading Style Sheets (каскадные таблицы стилей) он же CSS – это язык разметки документа в котором вы можете описать визуальные свойства, а также расположение в браузере любого элемента в файле HTML, шрифты, свойства изображений, фон, а также слои.

Существование CSS оправдывается тем фактом, что в HTML присутствует слишком малое количество возможностей для придания документу достойного эстетического вида. Также CSS позволяет добиться одинакового или почти одинакового вида страниц в интернет браузерах разных производителей. Связка HTML + CSS – это уже полноценная профессия в народе именуемая «верстальщик сайтов». Для специалиста по продвижению знание CSS в принципе не обязательно, но в то же время вы сможете решать собственные проблемы на своих или клиентских сайтах не привлекая сторонних специалистов.

Откуда брать информацию для изучения CSS и HTML

html-i-css

На всех форумах и сообществах разработчиков чуть ли не каждую неделю появляются ветки с вопросами типа «как научиться верстать» или «посоветуйте книгу по CSS». На мой взгляд, в первую очередь вы должны определить какой тип обучения воспринимается вами лучше всего. Лично я очень люблю книги (хотя, скорее всего, в них меня привлекает не содержание, а запах), но в плане обучения лучше всего воспринимаю видео уроки. Далее приведу список наиболее популярных способов изучения HTML + CSS:

  • Офлайн курсы верстки. Практически в каждом крупном городе существуют центры подготовки Веб-специалистов, на которых за пару месяцев вы сможете пройти все необходимые основы и даже попрактиковаться.
  • Онлайн курсы CSS. Занятие на курсах с преподавателем через скайп, будет также очень результативным, так как хороший учитель сможет быстро направить процесс в нужное русло, а также всегда подскажет сложные для понимания моменты.
  • Видео-уроки по CSS. Это мой вариант обучения, здесь я могу быстро промотать то, что уже знаю, а при необходимости прослушать непонятные мне моменты несколько раз. Также большой плюс – это индивидуальная интенсивность занятий, я могу учиться целый день, и «Ютуб» не попросит перерыв на кофе или покурить.
  • Книги и самоучители. На мой взгляд – это один из самых мало результативных способов, часто книги по верстке написаны очень скучно, а в примерах можно заметить ошибки – это очень тормозит ученика и напрочь убивает все желание учиться.

В процессе обучения можно и нужно использовать сеть Интернет для получения информации, а также спецификации интересующих вас атрибутов и свойств CSS.

Софт для изучения и работы с CSS + HTML

При выборе редакторов, особенно для новичков, я бы посоветовал те, у которых есть встроенная поддержка синтаксиса, подсказки и подсветка ошибок. Конечно, в сети часто можно встретить советы по типу берем блокнот, пишем в него код HTML, сохраняем с аналогичным расширением и все готово. Как по мне с таким успехом можно до сих пор отправлять SMS голубями или освещать улицы керосиновыми лампами.

jho5v1tw5zndcfh

Далее я представлю свой личный ТОП лучших редакторов кода:

  1. Место: Adobe Dreamweaver CS6. Очень удобный, имеет просто огромное количество функций, половину из которых я еще даже и не освоил. Подсказки тегов, проверка на ошибки, быстрые кнопки и многое другое. Практически всегда использую данный редактор.
  2. Место: Notepad++. Легкий и также очень удобный редактор с кучей возможностей. Способен редактировать ваши документы прямо на сервере через FTP, а также занимает очень мало места на рабочем компьютере.
  3. Место: Sublime Text 3. Стильный и легкий редактор кода выполнен в ночном стиле, для «ох ты ж мамин хаккер». Здесь код вы будете писать на темном фоне, если вы работаете по ночам, он станет просто не заменимым. Как и предыдущие редакторы Sublime Text 3 также имеет большой набор функций и возможностей.
  4. Место: Atom. Как и предыдущий редактор, Atom выполнен в ночном стиле. Имеет большое количество функций и является кровным потомком Git. Но сегодня я об этом писать не собирался.
  5. Место: Блокнот. Отличный редактор для тех, кто призирает и большие корпорации, которые берут за свои продукты деньги, так и компании, предоставляющие бесплатные редакторы кода. С помощью блокнота вы сможете создавать документы, сохранять их в нужном расширении и … все.

Уверен, что можно найти еще десяток других инструментов, но в момент написания данной статьи именно эта пятерка установлена на моем рабочем компьютере. Стоит отметить, что в верстке вы часто будете сталкиваться с графикой, поэтому лучше всего сразу установить Adobe Photoshop любой доступной вам версии.

Дополнения в браузер, полезные для изучения и работы с CSS

Одно из самых важных на мой взгляд дополнений для верстальщика – это Firebug от Моззила, найдите в магазине, установите в браузер, включите и сразу же все поймете. С помощью Firebug вы сможете просматривать код страницы на которой находитесь в браузере, а также на лету изменять параметры CSS для проведения экспериментов, что значительно ускорит работу или обучение.

firebug

Верстка сопряжена с постоянными измерениями и просчетами расстояниями между объектами. Это значит, что вам понадобиться линейка. Я использую дополнение MeasureIt. Все очень просто: включил, померял, выключил.

Третье приложение, которое вам может понадобиться, – это цветовая пипетка. У меня установлена Collor Zilla, она не только указывает номер цвета на который вы навели курсор, но и добавляет его в буфер обмена при клике мышкой. Очень удобно и быстро.

Все инструменты легко встраиваются в браузер Моззила, и не влияют на его быстродействие в режиме серфинга.

Проверка ошибок в работе с HTML и CSS

Для проверки кода следует использовать сервис W3C validator, здесь вы сможете проверить написанный код на ошибки и предупреждения. Основная ошибка начинающих – это не соблюдение одного канона версии HTML.

figure10

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

Общий вывод к статье

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

Чтобы быстро научиться работать с CSS и HTML я советую использовать видео-уроки с ютуба а также сайт htmlbook.ru. Поскольку CSS и HTML не требуют никакой среды разработки вам не нужно будет устанавливать виртуальный сервер или регистрировать сайт в интернете. Все можно делать в отдельной папке на «мамином ноутбуке».

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

  • https://alicoup.ru/ Купоны Алиэкспресс

    Тоже пытался разобраться во всём великолепии ксс, но в итоге перешёл на фреймворки

    • http://vas-ok.com/ Василий Петечук

      Фреймворки это как конструктор из готового кода. В принципе тоже нужно уметь пользоваться и этим делом.