Для начала хочу сказать - изучать HTML CSS стоит только потому, что это основа интернета. Это первая ступенька на пути будущего веб разработчика. Да и вообще желательно знать, хотя бы основы и элементарные вещи простым людям, проводящим в интернете более одного часа в день.

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

Подготовка к обучению занимает не более 15 минут. Для этого с самого начала вам понадобятся три базовых пункта:

1. Справочники

Необходимы справочники по HTML и CSS, либо шпаргалки. Перед началом желательно бы прочитать их хоть разок, чтоб иметь понятие в принципе, о чем идет речь и с чем это всё едят. Не поленитесь, прочитайте. В самом деле они очень лёгкие. Если вам кажется, что там море всего и никогда не запомнить – это ложное впечатление, не пугайтесь. Реально используется в основном с десяток HTML тэгов и с десяток CSS свойств, остальное достаточно редко.

Я держал под рукой справочник по HTML от Manual.ru и по CSS от Webber. За эти справочники авторам отдельный респект! Возможно именно благодаря им я не бросил эту затею и продолжил изучать направление.

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

Почему именно эти справочники? Сложно сказать, как-то так сложилось исторически. Возможно, они мне показались простыми, доступными и легкими для понимания.

Справочник по CSS сделан в формате .chm. Активно пользуйтесь поиском, очень полезно.

Справочники
Справочники

2. Текстовый редактор

Редактор вам нужен для написания кода. Никаких «дримвьюверов»! Новичкам, особенно новичкам(!), я сейчас рекомендую редактор – «Notepad++». Сам я начинал и работал года три исключительно в «FAR» с плагином подсветки кода «colorer».

Запомните - код должен писаться «ручками», никаких визуальных редакторов. Всегда всех, и меня в своё время, подмываело открыть крутой ХТМЛ редактор и по быстрому накидать мышкой кучу всяких приколов. Все это кажется забавно, легко и очень быстро до тех пор пока не сделаете где-то ошибку или что-то будет кривовато и надо будет подправить.

Как показывает практика, львиная доля времени уходит не на рутинное написание кода, а на поиск и отладку проблемы. Помучившись некоторое время человек бросает затею с мыслью – «всё фигня, это не моё». Именно по этому вы должны, особенно вначале, писать каждую букву своими руками и знать для чего вы её написали и где. Да, по началу вам может показаться писанина каким-то долгим и тугим процессом, но зато это будет осмысленно!

В процессе написания обращайтесь к справочнику. Смотрите какие свойства есть и за что они отвечают, не забывайте про синтаксис. В случае чего вы за секунды найдете нужное место в коде и внесёте необходимые правки т.к. вы знаете каждую строчку. Если будет ошибка набора или синтаксиса, место вам подскажет редактор подсветкой. Со временем скорость набора повысится, изучите клавиатуру, напишете макросы и производительность качественно вырастет. Лучше как говориться «день потерять, за то потом за пять минут долететь»! :)

Notepad++
Notepad++

3. Браузер

Он вам нужен для просмотра вашей писанины. Пользуйтесь Firefox с плагинами Firebug и Validator, для начала этого достаточно. Firefox самый предсказуемый и простой браузер с точки зрения написания HTML CSS кода. Плагин Firebug поможет вам визуально посмотреть на страницу, проверив нужный элемент и примененные к нему стили. Плагин Validator укажет на ошибку синтаксиса, подскажет как правильно. Плагины ставятся очень просто.

Firefox & Firebug
Firefox & Firebug

Прикрепленный файл: html.manual.ru.rar(456.0 Кб)

Прикрепленный файл: webber-css.rar(164.3 Кб)

Оценить: + | +1 Комментировать
Раздел: Обучение    
Теги: инструменты
Просмотров: 1349

Комментарии (6):

0
Андрей Данилов [Deff] [01 июля 0:17]
ну вот не согласен я с утверждением о редакторе. 6 лет юзаю восьмой дрим (естественно, в режиме кода) и прекрасно себя чувствую. и код могу руками набирать, и цсс.
какой смысл пальцем землю ковырять, если есть для этого лопата? чтобы лучше научиться копать?
0
Григорий Кочнев [Greg] [01 июля 10:06]
Для новичков лучше научиться сперва пальцем ковырять, а только потом уже по желанию брать любую лопату на выбор.
Лично я видал много "копателей лопатой", скорость выполнения проекта(не путать со скоростью навалить кода), которых в разы ниже. :)
А вообще это дело сугубо личное, я даю рекомендации на основе своего практического опыта.
0
Лев Дагнер [through-a-haze] [22 сентября 1:29]
Я вот тоже пользуюсь 5-м Дримвивером от Адобы, но не из-за того, что можно "по быстрому накидать мышкой кучу всяких приколов", а за разделение экрана код/дизайн (нет необходимости постоянно лезть в браузер проверять), подсказку и дописывание тегов =)
0
Юлия Климова [Fiesta] [21 декабря 22:51]
А я училась (ну в целом пока ещё и учусь дальше) на Notepad++ как раз. Очень быстро благодаря ему запомнила все теги, свойства и атрибуты.
Сложнее теперь другое - понять, что и куда применять, чтобы код был не перегруженным и простым... не усложненным. Пробовала дримвьювер от Макромедиа, но код все равно набирала вручную, лишь иногда пользуясь автоматическим дописываем тегов (не в режиме дизайна, а в режиме кода). Упрощает. Но согласна с Грегом, что начинать в Notepad++ - правильно. И полезно.

Грег, вы хорошо пишете... Спасибо. Жду продолжение для начинающих!)
0
Григорий Кочнев [Greg] [21 декабря 23:26]
Спасибо за комплиман :)
Приятно, что людям полезно и интересно.
Подкидывайте темы, может че-то нацарапаю на досуге ))
0
Юлия Климова [Fiesta] [22 декабря 6:43]
Темы? Сколько угодно) Из тех тем, что на мой взгляд плохо освещены в инете:

"Анализ предложенного макета и его разрезание"
Это тема НЕ технического плана. Как вырезать - есть куча уроков фотошоп. Скорее хотелось бы узнать о том, как опытный верстальщик оценивает макет и на что ориентируется при выборе методик верстки. Например: о градиенте (когда лучше картинкой на фон, а когда CSS), тени (используются ли CSS варианты или по старинке опять картинка)... потому что за свой недолгий опыт верстки я поняла, что каждый верстальщик это решает по-своему. Подозреваю, что в этом в первую очередь и проявляется его мастерство... Так же понимаю, что каждый макет уникален... но общие принципы-правила всё же есть, наверное?

"Фреймворки"
Материал в общем-то есть, если поискать, но вопрос в другом. Что выбрать новичку? Что стоит изучить, а на что не стоит тратить время? Или они не нужны и проще использовать свой код и свои наработки макетов?

HTML5
Вижу, что Вы верстаете с разными DOCTYPE и !DOCTYPE html там тоже присутствует. Все говорят, что будущее за HTML5... Так почему бы сразу на него не перейти? Чем он хорош и чем плох, что мешает верстать только по новым стандартам?

Простите, если темы сочтете слишком "новичковыми", но сколько не читаю - на эти вопросы у меня правда нет ответа.

Написать комментарий

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


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