CSS техники, знания которых не хватает новичкам


Содержание

Обучение программированию с нуля: с чего начать изучение в домашних условиях

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

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

Что нужно знать «чайнику»

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

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

Многие начинающие обучение считают написание кода чуть ли не самой романтической профессией. Особенно увеличилось количество желающих познать программирование после просмотра фильма « Матрица ». Именно главный герой этой картины Нео подтолкнул многих к становлению на путь постижения программных наук:

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

Особенности обучения программированию на постсоветском пространстве

После развала СССР все отечественные ВУЗы долгое время даже и не пытались перекроить свою систему обучения под потребности современного рынка. Не являлись исключением из этого правила и технические ВУЗы.

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

Ситуация кардинально не изменилась и через 10 лет. Лишь некоторые учебные заведения, учуяв веяния нового времени, в начале двухтысячных года начали перекраивать свое обучение под мировые стандарты. И только с этого момента программирование стало восприниматься как отдельная профессия и специализация обучения:

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

А это в профессии программиста является наиболее важным аспектом. Поэтому большинство из сегодняшних гуру российской IT-индустрии начинали свое обучение программированию с нуля самостоятельно.

В некоторой мере такая тенденция сохраняется и по сей день. Хотя в наше время количество профессионалов, занимающихся преподаванием, заметно возросло.

С какого языка начать изучать программирование

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

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

Чаще всего выбор падает на язык программирования C ( си) . Именно с него большинство новичков во всем мире начинают свое обучение. На основе C было создана основная часть программных языков, и во многом они наследуют его структуру и синтаксис.

Рассмотрим особенности этого языка, делающего его оптимальным для изучения:

  • Простая для понимания основа – часть встроенных возможностей языка для простоты вынесена в отдельно подключаемые библиотеки. К таким элементам относится большая часть математических функций и методов для работы с файловой системой;
  • Оптимально подогнанная система типов – благодаря простому набору типов данных и строгой типизации уменьшается риск допущения ошибок в процессе написания программного кода;
  • Направленность C на процедурный тип программирования, при котором соблюдается четкая иерархия всех элементов кода;
  • Доступ к памяти машины с помощью указателей;
  • Минимальное количество поддерживаемых ключевых слов;
  • Поддержка области действия имен;
  • Поддержка пользовательских типов данных ( объединения и структуры ).

Проще говоря, C – это то, с чего следует начинать новичку перед тем, как научиться программированию на других языках.

Программы (компиляторы) для программирования

Для обучения программированию недостаточно одного лишь желания и наличия компьютера с выходом в интернет. Для написания программ на C вам потребуется специализированное программное обеспечение – компилятор.

Вот несколько специализированных компиляторов с поддержкой языка C:

  • Microsoft Visual Studio – профессиональный инструмент, поддерживающий множество языков, в том числе и несколько серверных. Подойдет для новичков, если брать его «на вырост»:
  • Borland C++ — бесплатный компилятор, идеально подходящий для начинающего обучение. В отличие от предыдущего инструмента, отличается ясным и понятным интерфейсом. Поэтому его освоение не вызовет особых трудностей даже при самостоятельном освоении азов программирования:
  • Code::Blocks – бесплатная среда разработки, поддерживающая написание кода на нескольких языках. Средний по сложности освоения вариант:

Что касается специализированной литературы, то советовать книги определенных авторов мы не будем. Тут, как говорится, выбирайте, что душе угодно. Потому что в большинстве случаев подбор самоучителя по программированию – это индивидуальный процесс. Используйте тот источник, который больше подходит именно для вас.

Да и в интернете можно найти очень много информации. Например, на нашем сайте специализированной литературе по IT тематике посвящен целый раздел.

Тенденции на рынке программирования

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

  • Веб-программирование – здесь понадобятся знания PHP , CSS и HTML ;
  • Разработка приложений под мобильную операционную систему Andro >Java . Поэтому потребуется знание основ этого языка;
  • C# (си sharp) – дальний потомок C . На основе C# построена веб-технология ASP.net от Microsoft .

И последний совет всем начинающим. Перед тем, как приступить к обучению программированию с нуля, следует запастить терпением. А также: таблетками от головной боли, кофе, чаем и побрить череп наголо. Потому что во время постижения программных наук, обучающиеся часто вырывают волосы со своей головы вместе с корнем. Удачного старта!

Сервис Interneting is Hard — обучение верстке сайтов с нуля (бесплатный курс)

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

Как и в любой другой профессии, начинается обучение верстке сайтов с нуля — с базовых понятий и теории. Об них сегодня и поговорим. В частности рассмотрю супер полезный сервис Interneting is Hard, который на 100% советую всем новичками.

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

Лично я начинал свой путь вебмастера с простеньких (и еще бумажных) книг по HTML/CSS, потом были годы тренировок и со временем решил закрепить / систематизировать знания с помощью каких-то курсов. Выбирать на самом деле есть из чего, хотя не все варианты в итоге оказываются стоящими. Я проходил онлайн обучение верстке в компании Нетология. Там как раз сейчас идет набор в следующую группу.

Преимущество курсов в том, что они могут обеспечить поэтапное и эффективное усвоение знаний посредством:

  • информативных лекций, составленных ведущими специалистами и практикующими верстальщиками;
  • понятных и хорошо иллюстрированных примеров;
  • практических заданий для закрепления материала.

В частности в Нетологии все проходит в формате вебинаров с возможностью задавать вопросы. Есть домашние работы, дипломная и сертификат про завершение обучения. Короче, все серьезно. Подобные дополнительные фишки делают онлайн курсы более «выгодными», а затраты при этом — просто инвестиция в себя.

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

Interneting is Hard — сервис изучения верстки

Наконец то перейдем к проекту Interneting is Hard — штука на самом деле очень крутая! Это полноценный комплексный курс для освоения HTML и CSS новичками, которые ни разу не пытались детально разбираться с устройством веб-страниц и их разработкой. Если вы не знаете с чего начать изучение верстки — 100% заходите сюда.

Все, что нужно для старта — мотивация и знание английского языка. С организационными вопросами не будет никаких проблем – разработчики составили что-то вроде «учебного плана», который включает:

  • 14 глав с постепенным углублением материала;
  • 284 понятных примеров кода;
  • диаграммы и графики;
  • почти 43 тысячи слов;
  • современные техники (да-да Flexbox тоже есть).

Особенности и фишки сервиса

Процесс обучения HTML верстке в Interneting is Hard обладает несколькими преимуществами по сравнению с другими похожими проектами:

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

2. В процессе обучения задействованы все современные техники верстки: веб-типографика, семантический HTML, создание отзывчивого дизайна и иллюстраций, а также Flexbox. Они помогут новичку стать востребованным специалистом, а профессионалу освежить свои знания;

3. Наглядные примеры демонстрируют основные концепции подаваемого материала с помощью конкретных сценариев. Это означает, что пользователю не придется читать бесконечные «полотна» текста. Такой подход неизменно приводит к скуке, которая в конечном итоге побуждает оставить изучение.

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

4. Данный вариант обучения верстке сайтов полностью бесплатный. Начиная освоение HTML, многие еще колеблются, действительно ли это то, чем они хотят заниматься. И если платные курсы, возможно, заставят жалеть о потерянных деньгах, то Interneting is Hard даст максимум знаний, не запросив взамен ни доллара.

Разделы для поэтапного изучения верстки

Как я уже сказал выше, «учебный план» состоит из 14 тематических блоков. Давайте вкратце рассмотрим их:

  1. Introduction. Ознакомительная часть, в которой рассказывается, для чего нужны HTML, CSS и JavaScript. Там же объясняются различия между фрэймворками и языками, а также показывается принцип работы с текстовым редактором АТОМ.
  2. Basic Web Pages. Вторая глава иллюстрирует строение элементарной веб-страницы. Здесь демонстрируется HTML-структура – «скелет» сайта. Посетитель узнает, зачем нужны теги, какие они бывают и для чего предназначен каждый из них.
  3. Links and Images. Зная основы проектирования, в третьем разделе пользователь ознакомится с размещением изображений и соединением веб-страниц друг с другом.
  4. Hello, CSS. Далее начинается изучение CSS – так называемых таблиц стилей. В данное понятие входит все, что касается оформления: шрифт, цвет, расположение, форма и размер текста.
  5. The Box Model. Продолжает тему дизайна пятая глава учебного плана, рассказывая о «блочной» модели содержимого. Будущие верстальщики знакомятся с такими вещами, как внешние отступы, рамки, внутренние поля и контентное наполнение.
  6. CSS Selectors. За боксами следуют селекторы – основа CSS. С помощью примеров кода в редакторе создатели курса обучают правильному использованию стилей.
  7. Floats. Седьмая часть расширяет полученные знания об управлении размерами блоков и областями вокруг них. Она посвящена понятию потока на веб-странице (Float) и описывает нюансы работы с сеткой сайта.
  8. Flexbox. По достижении экватора учебного плана, вам предлагается ознакомиться с Flexbox-ом. Это современный инструмент верстки, который дает полный контроль над выравниванием, направлением, порядком и размером блоков. Недавно, кстати, рассказывал про CSS Gr >Чтобы по достоинству оценить функционал и удобство сервиса Interneting is Hard предлагаю рассмотреть реализацию одного из его подразделов. Возьмем второй урок по созданию элементарных веб-страниц.

Что мне лично нравится:

  • Весь материал упорядочен подзаголовками. Текст при этом изложен доступным языком и не требует глубоких познаний сложной терминологии. Все кратко и по существу — в лучших традициях написания статей для сайтов / блогов.
  • Важные и сложные моменты прекрасно иллюстрируются диаграммами.
  • Для простоты понимания и практических навыков даются примеры написания кода.
  • Все максимально удобно: в правом верхнем углу есть кнопка возвращения в меню, возможен мгновенный переход к желаемому подзаголовку урока (навигация справа) и после лекции доступно открытие следующей главы. Отличное юзабилити.

Как мо мне Interneting is Hard — на данный момент один из лучших сайтов по обучению верстке с нуля. Авторы курса позаботились о том, чтобы новички, которые никогда не имели дело с HTML и CSS, могли в простой и доступной форме понять азы создания веб-страниц. Информация очень хорошо структурирована — постепенно за 14 разделов вы преодолеете путь от начинающего пользователя до опытного верстальщика. Конечно, без практики и применения знаний никак нельзя, но что касается теоретической базы — это самое полное собрание инфы, что я встречал. Если хотите заниматься с преподавателями — посмотрите вариант от Нетологии тоже весьма неплохой, хотя и платный.

Если знаете еще какие-то интересные сервисы по изучению верстки сайтов, присылайте линки в комментариях.

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег
в теге . Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Совет: c чего начать изучение вёрстки

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom. Попробуй:

  • Сверстать домашнюю страницу своего сайта
    В заметке про процесс обновления своей главной указал ссылки на интересные домашние страницы, посмотри их
  • Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
    Посмотри примеры: помидорковый таймер, тяжеловато. Мой первый проект был XSLT редактор, он упрощал работу по созданию новых XSLT-файлов

Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.

Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать — посмотри эти видео:

Когда начнешь уверенно чувствовать себя в вёрстке — переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.

Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.

Достаточно прочитать с первой по восьмую главы — это основы JavaScript, без них никуда.

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.

Прочитай книгу про системы контроля версий: Pro Git.

Заведи аккаут на GitHub и установи их приложение на компьютер. Научись работать с репозиториями и ветками. Этот навык будет полезен в командной разработке.

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

Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.

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

  1. Придумать проект для вёрстки
  2. Начать верстать
  3. В процессе вёрстки читать книги, статьи и смотреть видео уроки
  4. Повторять до уровня, который тебя начнет устраивать

Видеокурс «HTML5 и CSS3 с Нуля до Профи»

Презентация видеокурса Андрея Бернацкого 12 мин. 11 сек.

  • О видеокурсе
  • Темы уроков курса
  • Особенности

До сегодняшнего дня в Рунете Вы бы не нашли ни одного полноценного пошагового руководства на тему обучения HTML5 и CSS3, охватывающего все тонкости и раскрывающего основные возможности этих языков таблиц стилей и гипертекстовой разметки.

Последние полгода издательство «WebForMyself» сосредоточило все усилия и тяжело работало над труднейшей задачей. Андрей Бернацкий с радостью готов представить Вам новый видеокурс, аналогов которому нет ни в одном из существующих форматов обучения в Рунете.

«HTML5 и CSS3 с Нуля до Профи» — это самый актуальный и полный видеокурс в Рунете. Только лишь основной раздел курса состоит из 47 подробных видеоуроков, которые образуют пошаговую практическую систему. После изучения данной системы Вы сможете освоить адаптивную верстку, используя последние новшества двух языков гипертекстовой разметки и каскадных таблиц стилей.

В курсе все макеты верстаются сразу кроссбраузерными и адаптивными. Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Что Вы найдете внутри курса?

  1. Часть: Верстка макета сайта-визитки;
  2. Часть: Верстка макета блога;
  3. Часть: Верстка макета интернет-магазина.

Какие результаты Вы получите, изучив видеокурс:

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

Приобретая данный видеокурс, Вы получите пожизненную поддержку и консультации автора Андрея Бернацкого в неограниченном размере по всем вопросам видеокурса, и при этом платите как за обычный курс.

Верстка для самых маленьких или что дизайнер должен знать об HTML и CSS и где это найти

Привет! Мы с Вами уже разобрались почему дизайнеру полезно иметь базовые навыки вёрстки ( внимание, прикрываю попу: я имею ввиду именно базовые навыки, а не заменять верстальщика ). Если вкратце, то для того, чтоб упростить взаимодействие с разработчиками и создавать более качественный дизайн благодаря пониманию того, как он будет реализован.

Итак, что же дизайнеру нужно знать об HTML и CSS

1. Не HTML/CSS, а HTML + CSS

Итак, давайте разберёмся с тем, что происходит после того, как вы закончили свой дизайн, сложили все ваши слои в аккуратные папочки и отправили исходники верстальщику. Первым делом верстальщик посмотрит все существующие на сайте страницы и выделит у себя в голове общую структуру: ага, вот тут меню, вот тут футер, вот тут контент и так далее. На основе этой логической структуры, верстальщик создаст разметку страницы с помощью HTML. Это значит, что используя определенные обозначения он объеденит вместе блоки, логически связанные между собой.

Например, HTML разметка вот такого блока:

может выглядеть следующим образом:

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

HTML разметка практически никаким образом не влияет на то, как выглядит сайт. Этим занимается СSS — каскадные таблицы стилей. Почему? Всё просто: мясо отдельно, мухи отдельно. В HTML мы занимается содержанием и семантикой, в CSS — внешним видом.

Для того, чтоб блок на прошлой картинки стал выглядеть так, как мы его надизайнили, мы напишем к нему стили и скажем нашему HTML использовать созданный нами CSS файл. Выглядит CSS где-то так:

Это конечно же очень базовое понимание того, как происходит процесс вёрстки.

Тем, кто хочет сразу в бой — советую вот этот курс, во время которого вы сможете понять базовые принципы HTML CSS на создании мини-сайтов. Курс бесплатный, на английском, займёт примерно часа 2 : https://dash.generalassemb.ly/

2. Вы все ещё Pixel Perfect? Тогда мы идем к вам!

Сколько раз вам приходилось кривить лицо, когда на макетах, сверстанных по вашему дизайну, вы замечали, что тщательно высчитанные пиксели не были так же тщательно перенесены на свёрстанный сайт? Много? Вот-вот….

Давайте разберемся почему так бывает

  1. Во-первых, на самом деле, ваш дизайн прекрасен! Наверняка он создан по всем законам композиции и каждый элемент на странице визуально связан с другим. В Sketch или Photoshop, где размер экрана всегда 1280px для дексктопа и 320px для мобилки всё замечательно! Но что происходит, когда человек смотрит Ваш сайт на экранах других размеров? Для того, что сайт выглядел удобно и прилично на других размерах экранов, верстальщики используют условные единицы измерения для размеров блоков, шрифтов, иконок и так далее. Соответственно, иногда размер шрифта вашего сайта будет на 16px ровно, как вы задумали, а например 16,25874px. Важно ли это для общего опыта пользователя? Скорее всего не особо, правда?
  2. Во-вторых, дело не в Вас, а в инструментах, которые Вы используете. Инструменты дизайнера статичны, инструменты разработчика — динамичны. Мы привыкли работать со страницами или артбордами, а верстальщики —с окнами браузеров, постоянно меняющими ширину. Часто мы не понимаем, насколько трудно управлять изменением сайта от десктопной версии к мобильной.

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

На написание этого параграфа меня вдохновила статья Dear Designer, I’m sorry! Love, your dev .

3. В Вашем макете должен быть порядок, в частности в цветах и шрифтах.

Сейчас я забегаю немного вперед, но то, о чем я буду говорить важно понимать для успешного сотрудничества. Для того, чтоб упростить разработку продуктов, сейчас часто говорят о так называемых дизайн системах. Что это значит? Это значит, что у вас есть определенный набор компонентов, которые нужно и можно использовать в своём дизайне ( нет, это не значит, что нельзя создавать новые; можно, когда это необходимо ). Обычно в дизайне это проявляется наличием качественного тулкита и гидлайнов по использованию элементов интерфейса. Разработчики же обычно используют библиотеки типа ReactJS, Angular 2 и языки типа SASS для того, чтоб сделать эти компоненты независимыми и упростить повторное использование кода в будущем. Мы поговорим немного о SASS.

Плохая новость в том, что в СSS ( то, благодаря чему мы стилизируем страницы ), нельзя использовать переменные. Это значит, что каждый раз, когда вы используете где-то какой-то цвет — верстальщик должен прописывать его вручную. И если вы меняете цвет в ходе разработки дизайна — исправлять каждую строчку тоже вручную. Та же ситуация со шрифтами, их размерами да и вообще всем, что должно оставаться « стабильным » на макете. Поэтому придумали SASS — это язык, который позволяет использовать переменные (ну и много других плюшек, но мы же о базовых знаниях сейчас говорим :D ) для того, чтоб упростить верстальщикам работу с CSS.

Представим ситуацию. Вы надизайнили сайт на основе фирменного стиля компании, в котором есть 5ть брендовых цветов. Что сделает верстальщик? Правильно, посмотрит на ваш макет, увидит, что Вы — молодец, использовали фирменные цвета компании и создаст переменные для этих цветов. Дальше начинается веселуха. Верстальщик верстает сайт и гордый собой скидывает его на валидацию дизайнеру. И понеслась: оооооой, а вот тут цвет на два оттенка отличается, потому что если использовать обычный цвет компании, то он слишком яркий, так как рядом я использовал другой цвет, и поэтому надо на два оттенка другой. АААААААА!

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

Совет дизайнерам: подумайте, важно ли тут менять цвет? Да? Отлично! Предупредите об этом верстальщика! А может быть всё-таки не настолько уж важно?

Написанное касается всех элементов, которые есть на сайте: цвета, шрифты, кнопки, ссылки, поля ввода, меню и так далее. Будьте аккуратны во время создания ваших макетов. А если есть какие-то важные изменения(особенно малозаметные) — указывайте их в описании к макету и ваш верстальщик будет счастлив!

Список курсов, статей и книг

Лучше один раз сделать, чем 10 раз прочитать статью. Поэтому вот два курса, которые я советую для знакомства с HTML и CSS:

Урок 39 Основа языка CSS: это должен знать каждый блоггер

Поставьте оценку

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык, позволяющий управлять внешним видом блога. Язык не так сложен для изучения, но мне хватает мизерных знаний по CSS. Изучение основы CSS позволит Вам вполне уверенно “владеть” дизайном Вашего блога.

За внешний вид блога на WordPress отвечает файл style.css, находящийся в папке темы. И, как Вы, наверное, поняли, если захотите поменять шрифт или, к примеру, цвет фона нужно открыть style.css текстовым редактором Notepad++, найти нужную строку, изменить данные и сохранить. Результатом будет изменение внешнего вида блога.

Данный урок по CSS разделен на 2 части: на теорию и на практику (она находится после теории). Так как по языку CSS интернете немало информации, я решил сделать этот урок более подробным и не останавливаться на этом языке, а в следующих уроках продолжать дорабатывать блог, начинать его раскручивать и наконец-то попробовать заработать на нем.

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

Теория по CSS

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

Шрифт

font-size — размер шрифта (font-size: размер шрифта в пикселях (px), в процентах (%) и т. д.)

font-family – шрифт для элемента (font-family: имя_шрифта)

font-weight – толщина шрифта (font-weight: bold или normal и т. п.)

font-style – стиль шрифта (font-style: normal (нормальный) или italic (курсив) и т. п.)

font – объединение всех свойств для шрифта (font: стиль_шрифта (необязательно) размер семейство)

Размер

width – ширина элемента (width: значение в пикселях, процентах и т.п.)

height – высота элемента (аналогично width)

max-width – максимальная ширина элемента (по аналогии)

min-width – минимальная ширина элемента (так же как и width)

max-height – максимальная высота элемента;

min-height – минимальная высота;

Свойства текста

text-align – горизонтальное выравнивание (text-align: по центру (center) или по ширине (justify) или по левому краю (left) и т. д.)

vertical-align – вертикальное выравнивание;

line-height – высота строки (line-height: в пикселях (px), в процентах (%) и т.д.) Также можете использовать множитель: например, значение 1.5 означает полуторный интервал между строками:

color – цвет текста (color: цвет). Цвета могут задавать по-разному:

  1. используя название (red, green, white и т.д.);
  2. по шестнадцатеричному значению, перед кодом не забудьте ставить символ решетки – #

Тут я задал цвет черного цвета. Узнать какой код соответствует цвету, Вы можете скачав программу HTMLCol. Она очень удобна, я давно ею пользуюсь и Вам советую ее скачать, так как в будущем она нам еще пригодится.

letter-spacing – увеличение / уменьшение расстояния между буквами (letter-spacing: значение (в пикселях и т.п.) | normal – нормальный интервал):

text-transform – выбор написания слова заглавными/строчными буквами (text-transform: lowercase (все буквы будут строчными) | uppercase (все символы будут заглавными)

background – фон страницы (background: [background-attachment || background-color || background-image || background-position || background-repeat], ни одно свойство не обязательное, поэтому можно использовать лишь то, что необходимо):

Выше приведен пример, где задан цвет фона, затем идет путь к фоновому изображению и по вертикали.

background-position – стартовая позиция фона страницы (background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение]):

background-color – цвет фона (background-color: цвет);

background-attachment – фон страницы фиксированное или прокручивается вместе с “ползунком” (background-attachment: fixed | scroll)

background-image – изображение фона (background-image: url(путь к файлу)):

background-repeat – повторение фонового изображения (background-repeat: no-repeat | repeat | repeat-x | repeat-y )

Позиции

float — определение выравнивания объекта (float: left | right)

Выше приведен пример обтекания по правому краю.

visibility – возможность сделать любой объект видимым или невидимым (visibility: visible | hidden):

Границы

border – рамка (граница) элемента (толщина стиль цвет_рамки):

  • solid – сплошная рамка
  • dotted – точечная
  • dashed – пунктирная

Остальные виды рамок, которые перечислены ниже, работают аналогичным способом.

border-top – верхняя рамка

border-right – правая рамка

border-bottom – нижняя рамка

border-left – левая рамка

Отступы

margin – величина отступа (сверху, справа, снизу и слева соответственно);

margin-top – верхний отступ;

margin-right – правый отступ;

margin-bottom – нижний отступ;

margin-left – левый отступ;

padding – свойства поля (сверху, справа, снизу и слева соответственно);

padding-top – верхнее поле

padding-right – правое поле

padding-bottom – нижнее поле

padding-left – левое поле

Псевдоклассы

:hover – стиль объекта при наведении мышкой (элемент:hover < . >)

:visited – стиль посещенной ссылки (A:visited < . >)

Более подробно изучить язык CSS Вы можете на htmlbook.ru

Практика по CSS

Итак, что же делать, если Вы вдруг решили поработать со шрифтом блога? Я предпочитаю делать следующее:

  1. Открываю блог, используя Mozilla Firefox и внутри нее подгружаю FireBug
  2. Нажимаю на стрелочку и выбираю объект на блоге (подробнее как это делать я рассказывал в предыдущем уроке)
  3. В правой части FireBug ищу код, который отвечает за шрифт (напомню это font-family):
  4. Как видите, в моем случае по умолчанию стоит шрифт Georgia. Честно, мне он не нравится. Пожалуй, я поставлю Tahoma. Для этого я просто дописываю слово Tahoma как первое слово после font-family:
  5. Размера шрифта я оставил 12px. Изменения в Firefox видны сразу, если меня все это устраивает, я просто открываю файл style.css нахожу там 14ую строку (в каком файле искать ее и в какой строке я указал стрелкой на рисунке выше). И в этой 14ой строке (вернее до куда она протягивается) дописал шрифт, который мне нужен (т. е. Tahoma):
  6. Сохранил файл и обновил на сервере. В результате теперь в статьях у меня стоит шрифт Tahoma.

Аналогичным образом Вы можете изменить, что угодно на блоге. Использование дополнения FireBug для Firefox делает редактирование CSS очень удобной. Не нужно 50 раз редактировать style.css, обновлять на сервере и смотреть нравится ли так.

Поэтому для редактирования CSS, сначала смотрите изменения в Firebug, только потом изменяете в style.css и обновляете на сервере. Таким образом, Вы сэкономите кучу времени.

Мелкие изменения, которые я совершил на демонстрируемом блоге (если Вы активный читатель уроков WordPress, Вы знаете адрес того блога):

  1. Поменял шрифт в статьях с Georgia на Tahoma (как это сделать показал выше);
  2. Изменил цвет наведения на ссылки:
    1 прямоугольник был, и отвечает за цвет ссылки h1..
    2 прямоугольник я добавил: просто скопировал с первого и изменил следующее:
    3 – добавил двоеточие и слово hover, т.е. означает, что поменял стиль ссылки при наведении на него;
    4 – изменил цвет ссылки.

Пожалуй, все. Будет еще пару уроков по изменению дизайна, по доработке, потом пойдут очень интересные уроки по дальнейшей жизни блога. Извиняюсь за то, что долго не писал, просто, являясь студентом, не находил времени на блог (сами понимаете – запара �� ).

Планирую с 1 июня улучшить качество уроков, да и всего блога в целом. Будут интересные конкурсы, также хочу попробовать записать видеоуроки. Еще в планах разработать собственный уникальный шаблон для WPnew.ru, чтобы он был более быстрым и по дизайну характеризовал меня.

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

Как стать верстальщиком, или Почему азы верстки должны знать все

Время чтения: 19 минут Нет времени читать? Нет времени?

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

  • Владельцам сайтов и маркетологам. Вы узнаете, что такое HTML-верстка и какие задачи она решает.
  • Начинающим вебмастерам. Вы поймете, в каких случаях можно обойтись без верстальщика, а в каких можно сделать его работу самостоятельно.
  • Всем сторонникам принципа «если хочешь сделать хорошо, сделай сам». Вы узнаете, какие минимальные знания в области верстки веб-страниц нужны каждому блогеру, копирайтеру, маркетологу, владельцу сайта.
  • Будущим профессионалам. Вы узнаете, как стать верстальщиком.

Что такое HTML-верстка и зачем она нужна

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

Сверстанный макет страницы попадает от верстальщика к программисту, который интегрирует его в систему управления контентом. После этого вебмастер может наполнить и опубликовать страницу, а посетители сайта смогут ее просматривать.

Нужны ли услуги верстальщика владельцам существующих сайтов? Ответ на вопрос зависит от потребностей вебмастера.

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

В популярных CMS есть визуальные редакторы, с помощью которых можно отформатировать контент и сделать его читабельным. Обратите внимание на возможности штатного WYSIWIG-редактора WordPress.

Вы можете набирать текст непосредственно в редакторе CMS, форматировать его, добавлять фотографии. Функциональность CMS обеспечивает корректное отображение контента с небольшими оговорками.

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

В теории решить проблему можно без знаний HTML. Достаточно правильно отформатировать контент в текстовом процессоре и перенести его в визуальный редактор CMS.

Редактор CMS автоматически преобразовал визуальный формат контента в HTML-код. То есть администратору сайта для публикации контента достаточно уметь работать с текстовым процессором и WYSIWYG-редактором CMS.

Но иногда копирование содержимого из Word в CMS приводит к ошибкам. Обратите внимание на код страницы.

На практике хотя бы минимальные знания HTML контент-менеджеру нужны. Это подтверждает иллюстрация выше: в код страницы попали лишние теги подзаголовка. Такой мусор — частый побочный эффект при копировании контента из текстовых процессоров, например, Word. Подробности дальше.

«Верстальщиком можешь ты не быть, но HTML знать обязан»

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

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

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

Простой пример: подзаголовки помогают поисковикам структурировать текст на смысловые блоки. Если в подзаголовке написано «Как составить файл robots.txt», поисковая система понимает, что в соответствующем разделе страницы речь пойдет о файле robots.txt.

Что случится, если подзаголовок не будет обозначен верными html-тегами? «Яндексу» и Google будет сложнее определить, о чем идет речь в соответствующем разделе страницы. Роботы могут посчитать страницу нерелевантной запросам о файле robots.txt. В результате сайт получит меньше посетителей.

Теперь понятно, почему блогеру, журналисту или сапожнику и по совместительству администратору сайта сапожной мастерской не помешает знать хотя бы основные HTML-теги? Например, эти знания могут помочь удалить «мусор» со страницы.

Большинство WYSIWIG-редакторов в CMS имеют два режима: визуальный и HTML. Чтобы найти и удалить лишние теги из кода страницы, достаточно переключить штатный редактор WordPress в режим «Текст».

Знание HTML на базовом уровне предупреждает появление на странице лишнего кода на этапе переноса контента из текстового процессора в редактор движка. Чтобы решить эту задачу, очистите созданный в Word контент от форматирования. Для этого воспользуйтесь функцией «Удалить форматирование» в текстовом редакторе или скопируйте контент и вставьте его в «Блокнот». Потом вставьте очищенный от форматирования контент в редактор CMS в формате HTML.

Разметьте контент с помощью тегов HTML и опубликуйте.

Очистка контента от форматирования и добавление тегов HTML вручную предупредила появление на странице мусорного кода и обеспечила корректное отображение публикации для пользователей.

Что нужно знать администратору сайта, чтобы обойтись без верстальщика

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

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

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

  • Общее представление о веб-страницах и браузерах. Как интернет-обозреватели отображают страницы сайта для пользователей. Что такое структура HTML-документа, какие задачи решают гиперссылки.
  • Общее представление об HTML. Зачем нужен язык гипертекстовой разметки, где и как он используются.
  • Что такое HTML-теги. Как обозначаются теги.
  • Основные теги. Чтобы корректно разметить простую страницу на сайте или в блоге, в большинстве случаев достаточно знать теги заголовков, абзацев, изображений, ссылок. Чтобы корректно использовать теги изображений и ссылок, придется запомнить их основные атрибуты.
  • Чуть более продвинутые знания помогут с помощью тегов обозначить важные смысловые блоки или визуально отделить произвольные фразы от окружающего текста, оформить маркированный или нумерованный список, цитату.

Чтобы корректно использовать теги, вебмастер должен понимать их значение. Например, специалист должен знать разницу между заголовками второго и третьего порядка или визуально одинаковыми тегами i и em.

Изучение базовой информации поможет самостоятельно размечать и публиковать контент. Если основы HTML дадутся легко, а интерес к веб-верстке не исчезнет, вы сможете взяться за обучение по-настоящему и стать профессиональным верстальщиком.

Тяжело ли научиться верстке? Где учат на верстальщика? Чем занимается данный специалист на практике? Об этом и не только читателям рассказал руководитель отдела верстки компании TexTerra Алексей Печенкин.

«Верстальщик реализует идеи дизайнера»

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

Дмитрий Дементий: Расскажите в двух словах о профессии верстальщика: чем занимаетесь вы и сотрудники вашего отдела, как организован рабочий процесс? Верстальщик — это кто: программист, технический специалист, дизайнер? Англичане и американцы называют типографских верстальщиков layout artist. Можно ли назвать HTML-верстальщика художником?

Алексей Печенкин: По большей части наша работа заключается в добавлении материалов на сайт. Задачи, с которыми нам приходится работать, в большинстве случаев схожи. Это верстка статей, разделов и инфографики для публикации на сайтах. Нередко приходится решать и более сложные задачи. Например, верстка лендинга требует от специалиста больших усилий. Верстальщика нельзя назвать программистом или дизайнером. Это самостоятельная профессия.

Д.Д.: Какие задачи решает HTML-верстка с точки зрения владельца сайта? Чем может помочь верстальщик владельцу интернет-магазина?

А.П.: Попросту говоря, верстка — воплощение идей дизайнера. На этапе разработки дизайнер прорисовывает общую структуру, внешний вид сайта, а после верстальщик все это реализует. Делается это с помощью HTML и других языков разметки, которые способен «понять» и преобразовать в привычные нам веб-страницы браузер.

Верстка новых элементов страниц, разделов, блоков, — все это тоже делают верстальщики. С помощью веб-верстки специалист создает статичную страницу, на которую при необходимости фронтэнд-программист может добавить интерактивные элементы.

Д.Д.: В большинстве популярных CMS есть визуальные редакторы публикаций. Значит ли это, что владельцы сайтов на WordPress, Drupal или Битрикс не нуждаются в услугах верстальщика?

А.П.: Нет, это не так. Визуальный редактор упрощает жизнь обычному пользователю: редактору, блогеру. С помощью редактора человек без каких-либо знаний верстки может добавить материал на свой блог, сайт, страницу.

Эти редакторы действительно избавляют неспециалистов от необходимости делать лишнюю для них работу: размечать контент. Но функциональность редакторов сильно ограничена. Из-за этого редактор без знаний HTML не всегда может оформить страницу в соответствии с потребностями пользователей и стандартами W3C.

Простой пример: штатный редактор самого популярного движка WordPress позволяет выделить отрывок текста с помощью полужирного начертания или курсива. В коде страницы можно увидеть, что выделение выполняется с помощью тегов strong и em соответственно. В некоторых случаях данную разметку предпочтительно делать с помощью тегов b и i. В визуальном редакторе WP нет таких инструментов, поэтому придется добавлять теги вручную. А это требует соответствующих знаний.

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

Д.Д.: Нужны ли с вашей точки зрения минимальные знания в области HTML-верстки маркетологам, копирайтерам, блогерам? Может ли журналист или копирайтер самостоятельно сверстать свой материал и опубликовать на сайте? Или каждый специалист должен заниматься своим делом?

А.П.: Каждому могут пригодиться минимальные знания в этой области. Да, копирайтер с минимальными знаниями в верстке сможет без каких-либо проблем сверстать свой материал. Для этого необходимы лишь базовые знания тегов в html. Но чтобы как-то оформить материал нестандартно, нужны будут другие навыки, которыми обладают контент-менеджеры или верстальщики.

Д.Д.: Как владелец сайта, не имеющий соответствующих знаний, может проверить качество работы верстальщика? Что для этого нужно сделать: проверить отображение страниц в разных браузерах, проверить URL или код в W3C-валидаторе, посмотреть данные об ошибках в кабинетах для вебмастеров? Как далекому от HTML-верстки человеку понять, что все сделано профессионально?

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

Д.Д.: Читатели интересуются возможностью обучения HTML-верстке. Каждому ли дано стать хорошим специалистом в этой области? Какие качества необходимы хорошему верстальщику?

А.П.: Да, я думаю любой может этому научиться. Главное, чтобы было желание и терпение. Если что-то не получается сразу, то нужно просто больше практиковаться. Все зависит только от вас.

Д.Д.: Где учат верстке? Это очные учебные заведения, онлайн-курсы? Можно ли научиться самостоятельно с помощью учебников и пособий?

А.П.: Есть очень много онлайн-курсов, а также различных каналов на YouTube, где люди делятся опытом, публикуют уроки и много полезной информации на эту тему. Также есть много книг по верстке. Правда, с книгами сложнее: найти действительно хорошую будет трудно.

Получить знания и научиться верстать не составит труда. Главное, больше интересоваться тематикой и практиковаться с полученными знаниями.

Д.Д.: Какой набор знаний нужен хорошему верстальщику?

А.П.: Хорошему верстальщику в первую очередь нужно следить за новостями в мире IT, за всеми новинками и технологиями, которые время от времени появляются в этой сфере, так как веб не стоит на месте. Поэтому верстальшикам приходится постоянно учиться и повышать свою квалификацию. Если говорить про базовый набор знаний, то это HTML и CSS, а также хотя бы базовые знания Javascript (Jquery).

Д.Д.: Спасибо за информацию.

А.П.: Пожалуйста. Читателям успехов в обучении.

Где можно научиться верстке

Предложенная ниже подборка учебных ресурсов поможет вам получить общие представления об HTML-верстке или стать профессиональным верстальщиком. Для обучения вам понадобится только желание и ПК с выходом в интернет. Также вам пригодится знание английского языка, так как в подборке есть англоязычные ресурсы.

Обучиться веб-верстке помогут следующие ресурсы:

Онлайн-курсы для начинающих и продолжающих

  1. Бесплатный курс «Основы HTML и CSS» от «Нетологии». Пять часовых занятий познакомят вас с азами HTML и CSS. Курс будет полезен не только для будущих верстальщиков, но и для всех специалистов, работающих в сфере интернет-маркетинга.
  2. Бесплатный видеокурс по HTML и CSS от WebForMyself.com подойдет пользователям с любым уровнем подготовки. Его можно рассматривать в качестве первой ступени обучения для будущих верстальщиков или инструмента повышения квалификации для блогеров, журналистов или администраторов сайтов.
  3. Онлайн-курс «Базовый HTML и CSS» от Html-academy.
  4. Полугодовой курс «Профессиональная верстка сайтов по современным стандартам» от Geekbrains позволит вам удаленно обучиться профессии верстальщика.
  5. Если верстка вас заинтересует, продолжить образование можно на курсе «Нетологии» «HTML-верстка: с нуля до первого макета». После получения диплома можете смело называть себя начинающим верстальщиком.

Полезные тематические сайты

  1. Сайт htmlbook.ru. Этот информационный хаб будет полезен как для будущих и начинающих верстальщиков, так и для опытных специалистов. Данный ресурс для верстальщиков — то же самое, что «Серч» для сеошников и блог «Текстерры» для интернет-маркетологов. Обратите внимание на форум.
  2. В блоге верстальщика Юлии Паниной вы найдете универсальные премудрости о верстке, поиске, работе с популярными CMS. К сожалению, журнал обновляется не очень часто. Но здесь опубликовано такое количество материалов по теме, которого хватит на целую книгу.
  3. Освоили базовую информацию? Тогда развивайтесь и ищите полезную информацию на «Хабре». Куда же без этого ресурса, если вы решили стать технарем?
  4. Css-live.ru. Этот ресурс будет полезным для дизайнеров, верстальщиков и веб-программистов.
  5. Справочный хаб для верстальщиков от студии Артемия Лебедева.
  6. Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.

Очные курсы по веб-верстке

  1. Если вы хотите обучаться очно, запишитесь на месячный курс «Верстка для начинающих» от CubeComp Development. Занятия проходят в Москве.
  2. Еще один очный бесплатный курс для начинающих верстальщиков предлагает учебный центр «Специалист» при МГТУ им. Н.Э. Баумана.

Найти очные курсы верстальщиков в своем городе вы сможете с помощью поисковых систем.

Книги по веб-верстке

  1. «Изучаем HTML 5», Б.Лоусон, Р.Шарп. Вы можете приобрести эту книгу в электронном или бумажном формате.
  2. «CSS. Каскадные таблицы стилей. Подробное руководство», Э.Мейер. Эта книга считается классикой, с которой должен ознакомиться каждый верстальщик.
  3. «HTML и CSS. Путь к совершенству», Б.Хеник. Еще один учебник, обязательный для начинающих специалистов.
  4. «Web-дизайн по стандартам», Д.Зельдман. Книга предназначена для специалистов, у которых есть базовые знания HTML и CSS. Она была издана более 10 лет назад, но остается актуальной.
  5. «HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера», Николай Прохоренок.

Англоязычные ресурсы

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

  1. W3School.com. Этот ресурс можно использовать в качестве справочника по верстке. Его можно назвать англоязычным аналогом htmlbook.ru. Зарубежные специалисты не рекомендуют использовать сайт для обучения верстке, хотя на нем есть уроки по HTML и CSS.
  2. Learn to code HTML and CSS. Это полноценный онлайн-учебник, который поможет овладеть азами верстки.
  3. Гайд по веб-верстке для начинающих. В этой огромной статье-руководстве от Айана Ллойда рассматриваются практически все вопросы, связанные с обучением профессии верстальщика. Вы узнаете, каким программным обеспечением лучше пользоваться, как размечать страницы, как работать с таблицами стилей и многое другое.
  4. Activejump — сайт-тренер по HTML и CSS. Это не просто онлайн-учебник, а интерактивный курс, в рамках которого вы можете самостоятельно получить знания и сформировать умения в области верстки.
  5. В видеоблоге Channel 9 вы найдете 21 видеоурок по HTML и CSS от разработчиков Microsoft. Курс предназначен для новичков, которые хотят стать профессионалами.
  6. HTML5 Tutorial. Еще один сайт-учебник по верстке для начинающих.
  7. Intro to HTML and CSS от Khan Academy. Еще один бесплатный интерактивный учебник для начинающих верстальщиков.

Вы можете выбрать один или несколько ресурсов, чтобы удаленно или очно обучиться верстке.

Стать верстальщиком может каждый

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

Завершающий подзаголовок статьи можно сформулировать и так: стать верстальщиком должен каждый. Базовые знания HTML и CSS пригодятся всем специалистам, работающим в интернет-маркетинге. Блогер, журналист, копирайтер, маркетолог, владелец сайта должен уметь самостоятельно разметить и опубликовать контент. Конечно, речь идет о стандартной разметке и стилях.

20 впечатляющих CSS3 примеров, техник и библиотек

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

CSS 3D облака

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

Логотипы на чистом CSS

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

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

3D навигация для сайта

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

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Размытие на CSS

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

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

CSS формы

Пост о CSS формах с многочисленными примерами

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Анимация — Animate.css

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

Индикаторы загрузки — Spinkit

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

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Генератор для создания переключателей

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

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

CSS техники, знания которых не хватает новичкам

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • 30 хороших практик в CSS для новичков

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

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

Верстайте на заказ и получайте деньги.

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

*Наведите курсор мыши для приостановки прокрутки.

30 хороших практик в CSS для новичков

CSS — язык, используемый в какой-то момент практически каждым разработчиком. Хотя мы порой воспринимаем его как должное, он, тем не менее, является мощным средством и имеет множество нюансов в применении, позволяющих помочь в разработке качественного дизайна (либо затруднить данный процесс). Ниже представлено 30 хороших рекомендаций, которые помогут вам писать правильный и грамотный код, избегая многих типичных ошибок.

1. Сделайте его легко читаемым

Легкая читаемость вашего CSS-файла очень важна, хотя многие недооценивают этот момент. Хорошая читаемость позволяет вам упростить работу с ним в будущем, при поддержке сайта, так как вы будете в разы быстрее находить нужные вам элементы. Также помните о том, что ваш файл может потребоваться изучить и поправить кому-то другому.

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

Группа 1: Все в одну линию

Группа 2: Каждому стилю — отдельная строка

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

2. Сделайте его целостным

Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой «суб-язык» CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.

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

3. Начните с фреймворка

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

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

Заметка
Не соглашусь. CSS-фреймворки — незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.

«Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает»

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

4. Используйте обнуление

Большинство CSS-фреймворков имеют встроенный «обнулятор» стилей, но если вы не собираетесь его использовать, вы можете прибегнуть к другим «обнуляторам». Сброс стилей позволяет избежать многих проблем с неодинаковым отображением в разных браузерах, задавая четкие параметры для размеров шрифтов, заголовков, величины внешних и внутренних отступов и т.д. Такое «обнуление» позволяет добиться одинакового отображения во всех браузерах.

Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb, Yahoo’s developer reset. Как вариант, вы можете придумать свой «обнулятор», взяв за основу следующий сброс CSS.

5. Структурируйте ваши файлы стилей по принципу «сверху вниз»

Всегда имеет смысл структурировать файл CSS так, чтобы вы могли быстро найти нужную вам часть кода. Я рекомендую использовать принцип «сверху вниз», суть которого в том, чтобы составлять файл стилей в том порядке, в котором данные стили применяются на странице. К примеру:

Не забудьте снабдить каждую секцию комментариями!

6. Группируйте элементы

Часто элементы могут иметь пересекающиеся, общие стили. Вместо того, чтобы переписывать уже имеющийся код, лучше просто сгруппируйте элементы. К примеру, ваши заголовки h1, h2 и h3 могут иметь одинаковый шрифт и цвет:

7. Создайте сперва HTML-разметку

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

8. Применяйте несколько классов к элементу, если нужно

Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div, которому вы хотите задать float:right, и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div:

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

Заметка
Будьте очень осторожны, используя имена вроде left и right. Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса — и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML — для разметки, CSS — для визуального представления.

Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!

9. Используйте правильный тэг Doctype

Объявление типа документа очень важно и влияет на то, пройдет ли валидацию ваш код CSS и HTML. По сути, весь облик вашего сайта может сильно измениться в зависимости от объявленного типа документа DOCTYPE.

10. Используйте сокращенную запись

При сооружении своего CSS-файла вы можете значительно его «ужать», используя сокращенную форму записи в подходящих ситуациях. Для свойств вроде padding, margin, font и некоторых других можно комбинировать стили в одну строку. К примеру, блоку div можно назначить следующие стили:

В одну строку это будет выглядеть так:

11. Комментируйте CSS

Точно так же, как и в любом другом языке, комментирование является отличной идеей. Чтобы добавить комментарий, просто добавьте /* перед комментарием и */ после него:

12. Понимайте разницу между блочными элементами и элементами типа «inline»

Блочные элементы — это такие элементы, которые естественным образом делают чистой каждую строку после их объявления, занимая как бы всю доступную в данной строке ширину. Элементы типа inline (условно можно назвать их «строчными») занимают ровно столько места, сколько им нужно и не вызывают появление после своего применения новой пустой строки.

К элементам, относящимся к обоим типам можно отнести:

К блочным элементам относятся:

13. Располагайте свойства в алфавитном порядке

Применение такой системы расположения свойств позволит вам сэкономить немало времени при поиске нужного свойства.

Заметка
Эх. принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
Заметка

14. Используйте CSS-компрессоры

Сжиматели CSS помогают значительно уменьшить размера файла стилей посредством удаления лишних переводов строк и комбинирования элементов. Все это позволяет вашему сайту загружаться быстрее. CSS Optimizer и CSS Compressor — два замечательных онлайн-сервиса для выполнения таких задач.

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

15. Используйте общие классы

Вы скоро заметите, что есть стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот стиль к каждому ID, вы можете создать общие классы и добавлять их к ID других классов CSS (смотрите рекомендацию №8 данной статьи).

К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.

Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.

16. Используйте «Margin: 0 auto» для центрирования дизайна

Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:

17. Не заключайте все подряд в DIV

Частенько возникает соблазн сделать что-то вроде:

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

И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.

18. Используйте Firebug

Если вы еще не загрузили Firebug, остановитесь, сделайте это и продолжайте. Серьезно. Этот плагин должен быть в арсенале любого веб-разработчика. Помимо того, что вы можете отлаживать с его помощью JavaScript, изучать html-структуру страницы, искать ошибки и т.д., вы можете также визуально изучать, модифицировать и редактировать CSS в режиме реального времени.

19. Меньше хаков

Старайтесь использовать настолько мало хаков, насколько это вообще возможно. Да, на разработчиков оказывается давление, мол «Сайт должен выглядеть одинаково во всех браузерах», но использование хаков сильно усложняет дальнейшую поддержку дизайна. К тому же, использование «обнулятора» (смотри рекомендацию №4) позволяет устранить почти все возможные ляпы в отображении страницы разными браузерами.

20. С умом используйте абсолютное позиционирование

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

21. Используйте свойство Text-transform

Text-transform — очень полезное свойство, позволяющее вам стандартизировать то, как будет выглядеть текст. Предположим, вы хотите создать заголовки, в которых должны использоваться только буквы в нижнем регистре. Просто примените данное свойство к стилю заголовка:

Теперь все буквы в заголовке будут в нижнем регистре. Данное свойство также позволяет капитализировать первую букву и все буквы текста.

22. Не используйте негативные отступы, чтобы спрятать тэг H1

Часто люди используют картинку для текста в хэдере, после чего используют или display:none, или отрицательные отступы, чтобы сместить h1 за видимую часть страницы. Matt Cutts, глава службы борьбы со спамом в Google, официально заявил, что это плохая идея, так как Google может решить, что это — спам-технология.

Как говорит мистер Cutts, «избегайте того, чтобы прятать текст логотипа средствами CSS. Используйте тэг alt».

23. Проводите валидацию CSS и HTML-кода

Валидация CSS и HTML дает вам нечто большее, чем чувство гордости в случае отсутствия ошибок: она помогает вам быстро найти ошибки в коде. Если по непонятным для вас причинам страница выглядит не так, как вы ожидали, попробуйте пройти валидацию разметки и валидацию стилей, чтобы увидеть допущенные ошибки. Как правило, все сводится к незакрытому блоку div, либо к отсутствующему двоеточию в каком-нибудь свойстве CSS.

24. Ems или Пиксели?

Давно уже идут разговоры о том, что же лучше использовать — пиксели (px) или ems (em) при задании размера шрифта. Пиксели — более статический метод задания размера, а ems — масштабируемый вариант, который более приспособлен к браузерам с самыми разными разрешениями экрана и к экранам маленьких мобильных устройств. Постепенно ems занимает все большую долю в этом поединке с пикселями, так как позволяет реализовать большую гибкость в отображении информации на мобильных устройствах и иных устройствах с малыми экранами.

25. Не недооценивайте значение списков

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

26. Избегайте избыточных селекторов

Легко по незнанию добавить лишний селектор в файл стилей. Как один из распространенных вариантов такой ошибки, можно привести такой пример:

В такой ситуации можно ничего не усложнять и сделать так:

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

27. Добавляйте ко всему внешние и внутренние отступы

Разные браузеры по-разному отрисовывают элементы. IE делает это не так, как Firefox. IE6 — не так, как IE7 и IE8 и т.д. Как раз-таки основными отличиями между браузерам часто является их «отношение» к обработке отступов. Если вы не используете «обнулятор», вы, вполне вероятно, захотите прописать свойства margin и padding для всех элементов на странице, чтобы наверняка себя обезопасить. Это можно сделать очень просто:

Теперь все элементы страницы будут иметь внешние и внутренние отступы 0px, если иное не задано в файле стилей.

28. Когда готово, попробуйте объектно-ориентированный CSS

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

Если вы новичок в вопросе, то OOCSS может показаться вам слишком сложным. Но понимание самих принципов — уже первый шаг к применению этого на практике.

29. Используйте несколько файлов стилей.

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

30. Сперва всегда проверяйте на «закрытость» элементы страницы

Если что-то выглядит не так, всегда начинайте с поисков чего-то вроде отсутствующего закрывающего тэга. Вы можете использовать для этого также XHTML Validator. Кроме того, это позволит вам выявить и другие возможные проблемы.

Glen Stansberry
net.tutsplus.com
Перевод — Дмитрий Науменко

P.S. Если вы изучаете CSS для того, чтобы освоить верстку сайтов, также рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Цукерберг рекомендует:  Ругаемся по-английски
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
25 мая 2010