x
 
Евгений Мельчин
27 июня 2013

Здравствуйте, Артём. Подскажите, с чего начать изучение ЦСС? С чего начинали вы?



Евгений!

Я боюсь обобщать, расскажу как было у меня.

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

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

.intro {
  horizontal-align: center;
  font-size: very-big;
}

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

Я не читал книг «ЦСС для чайников». Всегда шёл от задач, которые казались не по зубам, гуглил, брал нахрапом. После двух лет маринования в собственном соку я попробовал устроиться в бюро. На собеседовании не смог ответить, какой селектор — #id или .class — специфичнее. Но меня взяли. Без зарплаты.

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

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

Мне кажется, для начала достаточно создать файл some.html, открыть его сразу в текстовом редакторе и в браузере, отредактировать файл:

<style>
  .angry {
    color: red;
  }
</style>

<p class="angry">Красный текст.</p>

Обновить браузер. Вернуться в редактор, red заменить на blue, после точки с запятой добавить font-size: 100px. Обновить браузер.

И дальше завертится. Или нет.

Это был мой последний совет. Удачи вам!


P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Станислав Биченко
27 июня 2013

Артем, спасибо большое за ваши советы!

Несколько полезных ссылок тем, кто начинает изучать ЦСС:

1. http://stackoverflow.com — когда ищете в Гугле решение конкретной проблемы, всегда обращайте внимание на ответы со Стэк Оверфлоу. Уровень ответов там на порядок выше, чем на большинстве других сайтов (тем более — чем на русскоязычных форумах). Всегда читайте два-три верхних ответа, обращая внимание на рейтинг.

2. https://developer.mozilla.org/en-US/docs/Web/CSS/ — документация по ЦСС от Мозиллы.

3. http://caniuse.com/ — проверка ЦСС-х штук на кроссбраузерность.

4. http://jsfiddle.net/ — онлайновый редактор с ХТМЛ, ЦСС и Яваскриптом. Полезно, чтобы показывать другим возникшие проблемы или быстро попробовать какое-то решение.

5. http://css-tricks.com/ — просто много хорошего контента по ЦСС. Главред там довольно фанатичный человек в плане чистоты разметки и стилей, так что уровень решений обычно высокий.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 3




Недавно всплыло

2 3 4 Почему вы используете jQuery для хождения по дереву и управления событиями? 2