Курсы HTML и CSS. Курсы HTML и CSS Interneting is Hard — сервис изучения верстки
- Стили - это набор параметров, определяющих положение, вид и функциональность элементов веб-страницы. Главное преимущество стилей - они предоставляют гораздо больше возможностей для форматирования, дизайна и верстки в сравнении с уже родным вам HTML. Эта мощнейшая система может быть собрана в отдельных документах, благодаря чему не перемешивается с HTML кодом. Это - основа; больше, проще и понятнее - здесь: http://htmlbook.ru. Ознакомление с разделом «CSS» начните из “Самоучителя”, а справочник значительно упростит понимание пока незнакомых терминов. В будущем вам также пригодится раздел «Блочная верстка».
- Для особо настойчивых и любопытных в вопросе программирования рекомендуем сайты http://www.xiper.net, http://css-live.ru. Тут предоставлены уроки, открывающие секреты применения «продвинутых» приемов HTML и CSS. Если вы владеете английским языком - обязательно посетите ресурсы http://css-tricks.com/ , http://net.tutsplus.com/ , на которых можно найти не только текстовые, но и видео-уроки.
Высший пилотаж- JavaScript!
Использование языка JavaScript придаст вашим веб-страницам интерактивности. Изучая эту, уже более серьезную верстку, постепенно включайте код JavaScript в HTML.
- Достаточной информационной базой для изучения этого языка владеет ресурс http://javascript.ru. Он включает много необходимых материалов, обсуждений и советов для качественного обучения.
- Первая часть книги Дэвида Флэнагана “JavaScript Подробное руководство” станет замечательным проводником в основы JavaScript. Вторая часть описывает среду разработки сценариев, предоставляемых браузерами. Третья часть - это обширный справочник по базовому JavaScript, четвертая - по клиентскому.
- С целью упрощения внедрения JavaScript в веб-страници применяется библиотека jQuery, также написана на JavaScript. Официальный сайт http://jquery.com и книга «jQuery Подробное руководство по продвинутому JavaScript» (Бер Бибо, Иегуда Кац) в доступной форме излагают все, что вам необходимо знать об этом языке.
- Значительную помощь в разработке JavaScript предоставляет свободный модульный фреймворк Mootools.
Малые хитрости от больших мастеров
Даже для опытных верстальщиков мы готовы предоставить информацию, способную значительно усовершенствовать работу. В вопросе создания оптимизированного кода верстки вам обязательно пригодится сайт hthttp://www.xiper.net. Руководитесь разделами «Учимся» и «Готовые приемы», в которых собраны передовые решения и технология применения скриптов.
Существует также множество сервисов для оптимизации верстки. Рекомендуем обратить внимание на ресурсы, посвященные этой теме:
- http://www.google.com/webfonts ; — предоставит коллекцию шрифтов, которые можно подключать на свои страницы.
- http://www.fontsquirrel.com/fontface/generator — конвертирует любой шрифт и создает CSS - код для вставки в таблицу стилей.
- http://stm.dp.ua/web-design/color-html.php — широкий выбор цветов и их кодов.
- Сервис CSS спрайтов сократит число HTTP запросов для загрузки графических ресурсов, посылаемых вашим сайтом. Статья http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html расскажет вам об этом более подробно.
- Раздел «Валидация документов» на сайте http://htmlbook.ru ознакомит вас с понятием валидаторов. Код каждой страницы должен отвечать спецификации, что разрабатывается W3 Консорциумом www.w3c.org. Несколько примеров валидаторов (проверка html - кода и css- кода) приведено здесь: http://validator.w3.org/ , http://jigsaw.w3.org/css-validator/ .
- http://caniuse.com — проверка кроссбраузерности - сервис, что поможет избежать разного отображения верстки в нескольких браузерах.
+ Обещанный приятный бонус
Если ваша жажда к профессиональным знаниям еще не полностью утолена, спешим порадовать - это еще не все. Изучить HTML и CSS можно также с помощью следующей литературы:
- Марк Пилгрим «HTML5. Up and Running»
- Эрик Мейер “CSS — каскадные таблицы стилей: подробное руководство”
- Питер Лабберс, Брайан Олберс, Фрэнк Салим «HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений»
- Стивен Шафер «HTML, XHTML и CSS. Библия пользователя»
- Эрик Фримен, Элизабет Фримен «Изучаем HTML, XHTML и CSS».
P.S. Приняв решение изучить HTML, откажитесь от использования специальных редакторов. Пишите в обычном блокноте или Notepad++, это поможет вам быстрее приобрести необходимые навыки. Если вы - сторонник интерактивного общения - станьте частым гостем специализированных форумов:
- http://www.cyberforum.ru/html/
- http://ru.html.net/forums/viewforum.php?f=49
- http://www.html.by/
- http://forum.htmlbook.ru/
Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!
Надеемся, эта статья станет для вас достойным руководством в изучении программирования. Следующий материал будет посвящен серверному язику программирования РНР.
Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.
Аркадий, привет!
Базовые знания - это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.
С чего начать?
Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.
Для начала необходимо попробовать. Понравилось? Можно начинать учить.
Установи редактор кода, например, Atom . Попробуй:
- Сверстать домашнюю страницу своего сайта
В заметке про указал ссылки на интересные домашние страницы, посмотри их - Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
Посмотри примеры: помидорковый таймер , тяжеловато . Мой первый проект был XSLT редактор , он упрощал работу по созданию новых XSLT-файлов
Как только сталкиваешься с проблемой - ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru .
Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.
Иногда встречаются весёлые сообщения:
Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать - посмотри эти видео:
Когда начнешь уверенно чувствовать себя в вёрстке - переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.
Изучение языка советую начать с книги Дэвида Флэнагана - « ». Книга большая, но не пугайся. Читать целиком необязательно.
Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:
Что дальше?
У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS , LESS или Stylus . Автоматизируй сборку стилей и их обработку через
От автора: привет, друзья! Как и люди, сайты имеют свой скелет, который можно увидеть в их коде. Обычный пользователь, «гуляя» по просторам Интернета, вряд ли будет заглядывать в HTML-код. Но только не верстальщики - им всегда интересно посмотреть на чужую работу. Создание аккуратного, сбалансированного и работающего во всех браузерах кода - это своего рода искусство. Сегодня мы поговорим с вами о том, как его постигнуть, или, иными словами, как быстро и эффективно научиться верстке веб-страниц.
С чего начинается верстка?
Верстка сайта - это описание программным кодом его визуальной составляющей. При этом сайт должен выглядеть и работать корректно на любом браузере (быть кросс-браузерным). Обучение верстке сайтов с нуля должно начинаться с самостоятельного создания PSD-макета, несмотря на то, что его, по идее, должен создавать веб-дизайнер.
Основная задача верстальщика - это обработка материала, который поступает к нему в виде текстов, изображений, каталогов и т. д., и превращение его в веб-страницы на основании утвержденного веб-дизайна.
Однако, представьте, что вы этакий верстальщик «2-в-одном», и вам по какой-то причине пришлось верстать макет вместо дизайнера, которому глубоко плевать на ваши проблемы.
Для того чтобы быстро научиться рисовать макеты, как бы банально это ни звучало, вам нужно просто много их рисовать. Вам также сильно поможет бесконечный просмотр чужих работ. При этом обращайте внимание на все мелкие детали, на то, какие используются цвета, градиенты, шрифты, отступы и т. д.
Со временем вы сами начнете чувствовать, что выглядит красиво, а что нет. В самом начале же вы можете просто брать и срисовывать, например, чужие элементы интерфейсов. Это заставит вас задуматься о том, как строятся эти самые элементы и из чего они состоят. И тогда красивые дизайны перестанут быть для вас чем-то мифическим, потому что вы будете знать, как создать что-то похожее.
Инструменты для создания макета сайта
Что касается инструментов, то многие веб-дизайнеры для создания интерфейсов используют Adobe Photoshop. С помощью этой программы можно сделать все, что угодно.
Есть люди, которые работают только с векторной графикой и используют для создания макетов Adobe Illustrator.
И еще один редактор, который я не пробовал, но который, по слухам, представляет вполне достойную альтернативу вышеперечисленным, - это Sketch, но он работает только под Mac OS.
Знакомимся - HTML
Следующим шагом после отрисовки макета является его верстка и создание HTML-шаблона. HTML - это язык, который используется для разметки документов в Интернете и интерпретируется браузерами для удобного отображения в виде документа.
С помощью HTML-разметки мы отмечаем, где на веб-странице будет показан текст, изображения, кнопки, и в каком порядке они будут следовать друг за другом. Основными понятиями в этом языке являются тэги, атрибуты, элементы и сущности.
Самый элементарный веб-ресурс - это не более чем набор HTML-страничек. Если сайт статический, то после верстки вы фактически получите его окончательную версию, а не просто шаблон. Сейчас такие сайты, естественно, являются большой редкостью. Все современные веб-странички генерируются динамически, при помощи некой серверной логики, которую вы либо напишете сами, либо будете использовать готовую с помощью какой-либо CMS (системы управления содержимым).
Без этой серверной логики были бы невозможны большинство онлайн-сервисов, которые мы используем каждый день и к которым так привыкли. Что касается HTML, то это совершенно несложный язык.
В Рунете существует огромное количество и платных уроков по верстке сайтов, и других материалов с достойной базой обучения. По моему мнению, выучить этот язык самостоятельно вообще не является проблемой.
Совершенствуемся - CSS
Как только вы освоите основы HTML, можете сразу приступать к изучению CSS (каскадных таблиц стилей), которые позволяют задавать шрифты, цвета, расположение отдельных блоков сайта.
По CSS я могу посоветовать неплохой , который поможет вам построить карьеру верстальщика даже в том случае, если вы вообще не обладаете базовыми знаниями по вопросам веб-дизайна и верстки.
Однако, хочу вас предупредить, что обучение на верстальщика сайтов - это не такая уж простая задача. В верстке есть множество тонкостей и нюансов. Вообще, для того чтобы вы могли взглянуть на макет и сразу представить себе иерархию его элементов, как именно их можно сверстать и при помощи каких свойств, - для всего этого нужно много практического опыта.
Обязательно ли учить все тэги, атрибуты и свойства HTML/CSS?
В HTML много разных тэгов и атрибутов, а в CSS - свойств, которые могут иметь различные значения. Поэтому многих новичков волнует вопрос: с чего начать верстку сайта и нужно ли заучивать наизусть все эти значения, тэги и свойства?
Конечно, если вы обладаете уникальной фотографической памятью, то вам не составит труда выучить все это, а заодно, и три тома «Войны и мира», наизусть. В противном случае заучивать все эти слова не нужно.
Вначале, когда вы только будете знакомиться с CSS, то все равно будете смотреть, что делает каждое свойство и каждое значение этого свойства. Со временем к вам придет понимание, что можно творить с помощью каскадных таблиц стилей, и что-то из этих свойств/значений и так отложится у вас в голове. Ну если вы, конечно, не страдаете амнезией
То же самое касается любых языков, включая JavaScript, PHP и т. д. Все, что вы часто используете, запомнится само по себе. Все, что вы редко используете, вы сможете подсмотреть в справочнике, коих в сети великое множество. В этом нет ничего постыдного и, скажу вам по секрету, все веб-мастера это делают.
Упрощаем процесс верстки
Для тех случаев, когда вам нужно быстро создать какой-то интерфейс или прототип какого-либо сайта, существуют CSS-фреймворки, такие как Bootstrap. Он позволяет стать веб-мастером, веб-программистом и верстальщиком в одном лице без знания таблиц стилей, языков программирования и гипертекстовой разметки.
Когда вы хорошо освоите CSS и начнете верстать что-то свое, уникальное, вам может перестать хватать гибкости этого языка, и вы захотите использовать какой-нибудь CSS-препроцессор. Препроцессоры убирают из кода CSS весь мусор, делают его более чистым и логичным, увеличивают степень абстракции при помощи переменных и прочих «фишек». Наиболее популярными препроцессорами считаются LESS, Sass и Stylus.
Высший пилотаж - JavaScript
Изучая более серьезные уроки верстки сайтов, вы встретите включенные в HTML элементы JavaScript, которые делают веб-страницы интерактивными. Если вы планируете заниматься не только Back-end, но и Front-end разработкой, то JavaScript нужно знать на очень хорошем уровне.
Помимо самого языка, вам нужно знать всю инфраструктуру, которая существует вокруг него (библиотеки, фреймворки, браузерные интерфейсы и т. д). На освоение всех этих элементов у вас может уйти от одного года и до бесконечности (в зависимости от того, есть ли у вас личная жизнь ).
Подведем итоги
Итак, как вы уже, надеюсь, поняли, верстальщик - это очень важная и древняя Интернет-профессия, от которой зависит:
скорость загрузки сайта;
адекватность его отображения в различных браузерах;
адаптивность под различные пользовательские экраны;
соответствие HTML-стандартам и требованиям поисковиков.
Пока что все. Не забудьте подписаться на новости нашего блога, дабы не пропустить все самое интересное по обучению верстке сайтов с нуля.
До новых встреч, уважаемые коллеги и те, кто только вступает на эту нелегкую, но очень увлекательную тропу веб-разработки!
Вас интересует вопрос, как изучить верстку сайтов самостоятельно ? При должном упорстве изучить верстку сайтов может каждый.
Тема сегодняшнего поста: С чего начать изучение верстки? Вопрос этот далеко не праздный, и каждый для себя выбирает собственный путь. Я расскажу о том, как сам начинал это увлекательнейшее путешествие в мир HTML и CSS. Надеюсь, кому-то из вас это станет если не путеводной звездой, то хотя бы ориентирами к цели.
Итак, что такое верстка сайтов ? Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете «Искра», а превращение рисованного в Photoshop макета сайта непосредственно в рабочий сайт.
Если выразиться иначе, верстка - это кодирование, запись на языке HTML данных, которые любой уважающий себя браузер преобразует в красивый и понятный сайт.
Для рядового посетителя сайта этот код так и останется невидимым, спрятанным за широкой спиной браузера. Однако это вовсе не означает, что он при этом может быть абы каким. Код должен быть красивым, удобным и правильным!
Так с чего же начать изучение HTML? Первое, что приходит на ум - это купить книгу. И чем толще, тем лучше. Возможно, кому-то это и пойдет на пользу.
Но лично у меня после некоторого опыта общения с такими «кирпичами» выработался четкий отталкивающий рефлекс. По той простой причине, что информация там подается в избыточном объеме.
Помните школу? Среднестатистическому гражданину вовсе ни к чему знать химию, физику, анатомию и пр. в том объеме, который там пытаются заложить в мозги.
Так и здесь: в толстенной книге много лишнего, а когда его много, то оно затуманивает взор, навевает зевоту и превращает обучение в 2 – 3 дня мучений с последующим забрасыванием данной науки далеко в топку. И все.
Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов , а называется она «HTML, CSS, скрипты: практика создания сайтов» . Издательство «БХВ-Петербург».
В этой книге всего в меру: есть чуток истории веба, немного про стандарты. Но самое главное - весьма доходчиво и просто подан основной материал по HTML, CSS и JavaScript. Для начинающий изучать верстку сайтов - это просто мастхэв!
Но одной книги мало. Мой метод изучения отнюдь не нов, но вместе с тем весьма действенный. Нужна не одна книга, а несколько. Фишка здесь в том, что каждый автор пишет немного по-своему. Когда ты одну и ту же тему прочитаешь в разных вариациях, то общая картинка гораздо быстрее становится понятной и намного лучше запоминается.
У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.
Вообще для начала очень полезно обзавестись данной прогой. Dreamwiever - это визуальный редактор, позволяющий видеть одновременно внешнюю и внутреннюю сторону сайта. То есть, его внешнее представление как для посетителей, и внутреннее - непосредственно код.
Большой плюс данной проги - это возможность просмотреть (опять же в двойном режиме) любой существующий в сети сайт.
К примеру приглянулся мне сайт с красивым и удобным размещением блоков, я сохранил целиком страницу с картинками, а затем запустил эту страницу в Дриме. И вуаля! Все видно, где и что. Хотя по началу все не так очевидно, как хотелось бы. Вот как раз книга - просто отличный помощник здесь.
Конечно, я уже давно не пользуюсь никакими визуальными редакторами, а обхожусь простым текстовиком вроде PSPad. Но опыт был получен немалый. И самое главное - разносторонний. Отчего сам предмет легко и достаточно структурировано уложился в голове.
Кстати, структура - это наиболее важный фактор при изучении любого языка. А HTML - это тоже язык. И вот об этой структуре я расскажу в следующий раз.
А пока обзаведитесь парой полезных книжек. И читайте мой блог Вебсовет. Здесь вы также найдете немало полезных советов по верстке сайтов. Начните изучать верстку сайтов хотя бы с .
UPD от 25.10.2012 : Начинающим верстальщикам рекомендую вот эту статью - Путь верстальщика . Там все гораздо подробнее изложено, со ссылками и прочими полезняхами.
