Совет: c чего начать изучение вёрстки. Совет: c чего начать изучение вёрстки После обучения Вы будете уметь
Главная задача курсов HTML и CSS — научить основам верстки сайтов и создания веб-страниц. Для тех, кто начинает карьеру в интернет-технологиях, навыки верстки являются базой для дальнейшего развития.
- В основном, курсы и обучение верстке на HTML предназначено для начинающих верстальщиков и веб-дизайнеров. Именно эти специалисты создают сайты и являются на данный момент очень востребованными на рынке труда.
- Помимо базовых программ есть еще курсы программирования на HTML 5 и разработки веб-приложений. Они созданы для профессионалов или уже опытных программистов интернет-сферы.
Формат занятий есть как очный, так и дистанционный. Чаще всего, длительность обучения стандартна и составляет около 40 академических часов, но есть и более длинные программы — 72 ак.часа.
После обучения Вы будете уметь
Как правило, прохождение базового курса верстки и основ HTML и CSS с нуля научит вас:
- Создавать веб-страницы.
- Разрабатывать простые сайты.
- Создавать формы отправки данных.
- Функционально верстать (чтобы потом легко было вносить изменения).
Продвинутое обучение программированию на языке HTML и CSS дает набор более сложных навыков:
- Кроссбраузерная верстка и знание стандартов W3C.
- Основы юзабилити и удобства сайтов.
- Расширенные возможности CSS.
- Различные подходы к верстке.
- Создание веб-страниц для смартфонов и планшетов.
Также на рынке можно найти более серьезное обучение разработке веб-приложений на HTML5. Такие учебные программы ориентированы на опытных программистов и дают знания об управлении скоростью загрузки страницы, хранении данных, работе с JavaScript (File API, Geolocation API) и о многом другом.
Для кого
Базовые программы рассчитаны на всех желающих изучать веб-технологии и освоить современную профессию веб-программиста или дизайнера. Продвинутые программы требуют уверенные навыки верстки и создания сайтов.
Свидетельства об окончании
Все учебные центры выдают сертификаты об окончании от своего имени. Некоторые центры трудоустраивают.
- Стили - это набор параметров, определяющих положение, вид и функциональность элементов веб-страницы. Главное преимущество стилей - они предоставляют гораздо больше возможностей для форматирования, дизайна и верстки в сравнении с уже родным вам 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/
Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!
Надеемся, эта статья станет для вас достойным руководством в изучении программирования. Следующий материал будет посвящен серверному язику программирования РНР.
Здравствуйте, меня зовут Александр Зеленин , и я веб-разработчик.
Многократно я слышал мнение, что верстка - удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.
В данной статье представляю схему развития верстальщика
[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.
Хочу сразу добавить, что конкретных ссылок на учебные материалы в статье не будет. Буду рад дополнениям в комментариях.
Чего мы ожидаем?
В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior
- знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle
- более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior
- может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.
Junior
HTML
- знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика
- умение отформатировать текст. Текст - основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика
- понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа
- какие виды медиа можно встраивать в страницу.
Iframe
- встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео
- можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки
- какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр
- jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG
- можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты
- можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка
- опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1
- шрифты, цвета, выравнивание, размеры.
CSS 2.1
- управление поведением блоков, позиционирование, полноценное оформление.
Селекторы
- простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа:hover.
Именование
- как называть классы, чтобы не было мучительно больно.
Блочная вёрстка
- разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры
- можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика
- можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы
- какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий
- я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git
- понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket
- уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull
- базовые операции для личного использования.
Stash
- для временного сохранения ненужных в данный момент данных.
10 работ
- сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.
Middle
CSS 3
- градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы
- элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации
- опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки
- зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS)
- зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры
- можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries
- можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода
- понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID
- можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS
- опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация
- понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование
- научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция
- можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется:-)
Постановка задач
- можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox
- понимание модели, умение применять полноценно.
Вёрстка писем
- опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы
- разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка
- понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка
- понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка
- можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация
- можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю. - можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка
- можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO
- можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы
- разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP
- можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS
- можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую Wordpress).
Javascript
- можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery
- можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS
- можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка
- опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE
- опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching
- научиться управлять ветками в git.
Merge
- научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase
- разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы
- разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ
- к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.
Senior
Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка
- разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение
- понять, что это и зачем. Использовать.
Gitflow
- уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ
- опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ
- иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.
Заключение
Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).
Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.
Также планирую создать полноценный бесплатный курс с подробным рассмотрением каждой из тем-прямоугольников со схемы. Буду рад предложением, отзывам, пожеланиям и так далее.
Курс, вероятно, будет в формате видеоуроков с полным текстовым и графическим дублированием. Если дело пойдёт, приложу в будущем ссылки в комментарии.
upd
Много сообщений о том, что верстальщик без знания фреймворка не нужен. В основном это пишут разработчики в крупных проектах. И, для них, это вполне так. Но есть ещё много студий делающих лендинги, различные шаблоны для вордпресов и других CMS. Это вполне себе хороший рынок и возможность зарабатывать. Есть довольно много совершенно небольших проектов, с гораздо меньшими требованиями, которые верстальщик способен закрыть на отлично.
Вполне стабилен, поэтому не удивительно, что растет и количество желающих освоить данное ремесло. К тому же, как по мне, это один из самых простых «путей попадания в ИТ». Хотя важно понимать, что для хорошей отдачи вы должны стать профи — кроме наличия знаний надо постоянно систематизировать и модернизировать свои навыки, всегда быть «на волне» и использовать только актуальные современные методы.
Как и в любой другой профессии, начинается обучение верстке сайтов с нуля — с базовых понятий и теории. Об них сегодня и поговорим. В частности рассмотрю супер полезный сервис 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 тематических блоков. Давайте вкратце рассмотрим их:
- Introduction . Ознакомительная часть, в которой рассказывается, для чего нужны HTML, CSS и . Там же объясняются различия между фрэймворками и языками, а также показывается принцип работы с текстовым редактором АТОМ.
- Basic Web Pages . Вторая глава иллюстрирует строение элементарной веб-страницы. Здесь демонстрируется HTML-структура – «скелет» сайта. Посетитель узнает, зачем нужны теги, какие они бывают и для чего предназначен каждый из них.
- Links and Images . Зная основы проектирования, в третьем разделе пользователь ознакомится с размещением изображений и соединением веб-страниц друг с другом.
- Hello, CSS . Далее начинается – так называемых таблиц стилей. В данное понятие входит все, что касается оформления: шрифт, цвет, расположение, форма и размер текста.
- The Box Model . Продолжает тему дизайна пятая глава учебного плана, рассказывая о «блочной» модели содержимого. Будущие верстальщики знакомятся с такими вещами, как внешние отступы, рамки, внутренние поля и контентное наполнение.
- CSS Selectors . За боксами следуют селекторы – основа CSS. С помощью примеров кода в редакторе создатели курса обучают правильному использованию стилей.
- Floats . Седьмая часть расширяет полученные знания об управлении размерами блоков и областями вокруг них. Она посвящена понятию потока на веб-странице (Float) и описывает нюансы работы с сеткой сайта.
- Flexbox . По достижении экватора учебного плана, вам предлагается ознакомиться с Flexbox-ом. Это современный инструмент верстки, который дает полный контроль над выравниванием, направлением, порядком и размером блоков. Недавно, кстати, рассказывал про — еще более крутую штуку.
- Advanced Positioning . Далее начинается более сложный материал – продвинутое позиционирование и его основные типы: относительное, абсолютное и фиксированное. Хотя, помнится, на курсах данную фишку мы проходили совместно с Float и явно до Flexbox.
- Responsive Design . В десятом разделе рассказываются основы и роль адаптивного дизайна на сайте. Сейчас без него никуда.
- Responsive Images . Урок посвящен адаптивным изображениям, их масштабированию, режиссированию и созданию альтернативных форматов с помощью специальных функций.
- Semantic HTML . Двенадцатая глава снова возвращает к базовым понятиям HTML, раскрывая его с семантической точки зрения. Здесь читатель знакомится с «секционными» элементами, новыми тегами и их применением.
- Forms . В предпоследнем пункте посетителю дается возможность изучить построение форм и ее элементов: выпадающие списки, меню, текстовые поля их оформление и отправка информации, например, через .
- Web Typography . Последний туториал рассказывает о современной веб-типографии на сайтах — о внешнем виде текстов, заголовков, о шрифтах и т.п. В другом моем блоге есть раздел про веб-типографику где найдете массу полезных заметок по теме.
Структура уроков для обучения верстке
Чтобы по достоинству оценить функционал и удобство сервиса Interneting is Hard предлагаю рассмотреть реализацию одного из его подразделов. Возьмем второй урок по созданию элементарных веб-страниц.
Что мне лично нравится:
- Весь материал упорядочен подзаголовками. Текст при этом изложен доступным языком и не требует глубоких познаний сложной терминологии. Все кратко и по существу — в лучших традициях .
- Важные и сложные моменты прекрасно иллюстрируются диаграммами.
- Для простоты понимания и практических навыков даются примеры написания кода.
- Все максимально удобно: в правом верхнем углу есть кнопка возвращения в меню, возможен мгновенный переход к желаемому подзаголовку урока (навигация справа) и после лекции доступно открытие следующей главы. Отличное юзабилити.
Выводы
Как мо мне Interneting is Hard — на данный момент один из лучших сайтов по обучению верстке с нуля. Авторы курса позаботились о том, чтобы новички, которые никогда не имели дело с HTML и CSS, могли в простой и доступной форме понять азы создания веб-страниц. Информация очень хорошо структурирована — постепенно за 14 разделов вы преодолеете путь от начинающего пользователя до опытного верстальщика. Конечно, без практики и применения знаний никак нельзя, но что касается теоретической базы — это самое полное собрание инфы, что я встречал. Если хотите заниматься с преподавателями — посмотрите вариант от Нетологии тоже весьма неплохой, хотя и платный.
Если знаете еще какие-то интересные сервисы по изучению верстки сайтов, присылайте линки в комментариях.
,Блочная верстка
Как вы уже догадались выше, в этой статье речь пойдет именно от блочной верстке, если предыдущая статья была, как вводная, то сейчас мы будем уже разбираться более конкретно на примере — как сверстать сайт с нуля . Во время своего изучения верстки я был в поисках подробного мануала — как по шагам сверстать даже самую простую html страницу. В этой статье я хочу максимально подробно рассмотреть каждую строчку кода и объяснить принципы работы с html, чтобы любому новичку в этом деле было понятно. Надеюсь, у меня это получится. 🙂
Итак, начнем. Для примера я взял простой прототип, макетом его нельзя назвать, нормальный макет рисуется в psd формате, а у нас он в jpg. Нам главное понять принцип как же верстать сайты с помощью блочной верстки. Чтобы работать с блочной версткой нужно знать не только html , но и css (каскадные таблицы стилей). В ходе цикла статей по верстке сайта , мы как раз с вами и изучим тот набор css стилей, который в дальнейшем вам всегда поможет верстать практически любые каркасы макетов/мокапов, ведь принцип один и тот же.
Итак, вот макет (кликабельно).
Мы видим у него 4 логические части:
- Шапка сайта (далее будем называть header, хедер);
- Левая колонка (далее будем называть left sidebar);
- Правая колонка (далее будем называть content);
- Подвал (далее будем называть footer, футер);
Итак, начнем конечно же с блока хедер. У нас мокап шириной 1000 пикселей (px).
Для начала скажу, что верстка делается с помощью html тегов. Например,
В начале работы вам нужно создать новый каталог у вас на диске под названием, например, myfirsthtml и в редакторе кода (я пользуюсь sublime text 3, это самая новая версия на момент написания статьи), создать 2 файла index.html и style.css. Теперь откроем index.html и начнем с разметки нашей страницы, а именно с хедера. Но перед тем как делать хедер, нам нужно сделать стандартную разметку любой html страницы. Сейчас покажу о чем я.
Теперь разберем каждую строку. Комментарии:
Строка №1: здесь указан так называемый доктайп документа, он обязателен, чтобы браузер понимал в каком виде ему нужно интерпретировать веб-страницу. Существует 4 вида доктайпов:
- XHTML 1.0
- XHTML 1.1
- HTML 4.01
- HTML 5
В свою очередь XHTML 1.0 делится на подвиды: строгий синтаксис (Strict) — не допускает никаких вольностей, нельзя применять тег , ; переходный (Transitional) — допускает некоторые вольности в верстке, которые нельзя использовать при строгом; содержащий фреймы (Frameset). XHTML 1.1 не делится ни на какие подвиды, он единственный, разработчики даже пророчили, что он вытеснит постепенно HTML, но если почитать за это детальней, то у HTML развился с 4 версии до 5, а стандарт XHTML, приостановил свое развитие, но тем не менее можно встретить проекты, у которых указан именно этот doctupe.
HTML 4.01 также делится на 3 повида: строгий синтаксис (Strict), переходный (Transitional) и содержащий фреймы (Frameset).
Ну и наконец-то HTML5 для всех типов документов, самый универсальный. В дальнейшем у нас предстоит большое количество статей именно с этим доктайпом. Все свои новые проекты я делаю с применением именно его. Но не будем забегать наперед, сейчас мы разбираем именно HTML 4.01. В данном примере мы используем как раз Transitional (переходный), он очень подходит для новичков.
Строка №2: открытый тег он идет сразу же после указания доктайпа и включает в себя абсолютно весь html-код, вконце документа следует закрывающий тег .
- заголовок страницы
Заголовок страницы - описание страницы
- ключевые слова, разделенные запятой
- и множество другой мета-информации.
После
следует тег . Именно в нем мы уже будет верстать наш сайт. Все, что находится в пределах этого тега, будет отображаться непосредственно в браузере.Вот мы выполнили и разобрали стандартную разметку страницы с применением html4. Этот урок я буду завершать, а как сверстать основные элементы, с применением я расскажу в следующем уроке, который напишу в ближайшие дни. Не забывайте добавляться в