Вполне стабилен, поэтому не удивительно, что растет и количество желающих освоить данное ремесло. К тому же, как по мне, это один из самых простых «путей попадания в ИТ». Хотя важно понимать, что для хорошей отдачи вы должны стать профи — кроме наличия знаний надо постоянно систематизировать и модернизировать свои навыки, всегда быть «на волне» и использовать только актуальные современные методы.
Как и в любой другой профессии, начинается обучение верстке сайтов с нуля — с базовых понятий и теории. Об них сегодня и поговорим. В частности рассмотрю супер полезный сервис 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 и CSS. Надеюсь, кому-то из вас это станет если не путеводной звездой, то хотя бы ориентирами к цели.
Итак, что такое верстка сайтов ? Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете «Искра», а превращение рисованного в Photoshop макета сайта непосредственно в рабочий сайт.
Если выразиться иначе, верстка - это кодирование, запись на языке HTML данных, которые любой уважающий себя браузер преобразует в красивый и понятный сайт.
Для рядового посетителя сайта этот код так и останется невидимым, спрятанным за широкой спиной браузера. Однако это вовсе не означает, что он при этом может быть абы каким. Код должен быть красивым, удобным и правильным!
Так с чего же начать изучение HTML? Первое, что приходит на ум - это купить книгу. И чем толще, тем лучше. Возможно, кому-то это и пойдет на пользу.
Но лично у меня после некоторого опыта общения с такими «кирпичами» выработался четкий отталкивающий рефлекс. По той простой причине, что информация там подается в избыточном объеме.
Помните школу? Среднестатистическому гражданину вовсе ни к чему знать химию, физику, анатомию и пр. в том объеме, который там пытаются заложить в мозги.
Так и здесь: в толстенной книге много лишнего, а когда его много, то оно затуманивает взор, навевает зевоту и превращает обучение в 2 – 3 дня мучений с последующим забрасыванием данной науки далеко в топку. И все.
Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов , а называется она «HTML, CSS, скрипты: практика создания сайтов» . Издательство «БХВ-Петербург».
В этой книге всего в меру: есть чуток истории веба, немного про стандарты. Но самое главное - весьма доходчиво и просто подан основной материал по HTML, CSS и JavaScript. Для начинающий изучать верстку сайтов - это просто мастхэв!
Но одной книги мало. Мой метод изучения отнюдь не нов, но вместе с тем весьма действенный. Нужна не одна книга, а несколько. Фишка здесь в том, что каждый автор пишет немного по-своему. Когда ты одну и ту же тему прочитаешь в разных вариациях, то общая картинка гораздо быстрее становится понятной и намного лучше запоминается.
У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.
Вообще для начала очень полезно обзавестись данной прогой. Dreamwiever - это визуальный редактор, позволяющий видеть одновременно внешнюю и внутреннюю сторону сайта. То есть, его внешнее представление как для посетителей, и внутреннее - непосредственно код.
Большой плюс данной проги - это возможность просмотреть (опять же в двойном режиме) любой существующий в сети сайт.
К примеру приглянулся мне сайт с красивым и удобным размещением блоков, я сохранил целиком страницу с картинками, а затем запустил эту страницу в Дриме. И вуаля! Все видно, где и что. Хотя по началу все не так очевидно, как хотелось бы. Вот как раз книга - просто отличный помощник здесь.
Конечно, я уже давно не пользуюсь никакими визуальными редакторами, а обхожусь простым текстовиком вроде PSPad. Но опыт был получен немалый. И самое главное - разносторонний. Отчего сам предмет легко и достаточно структурировано уложился в голове.
Кстати, структура - это наиболее важный фактор при изучении любого языка. А HTML - это тоже язык. И вот об этой структуре я расскажу в следующий раз.
А пока обзаведитесь парой полезных книжек. И читайте мой блог Вебсовет. Здесь вы также найдете немало полезных советов по верстке сайтов. Начните изучать верстку сайтов хотя бы с .
UPD от 25.10.2012 : Начинающим верстальщикам рекомендую вот эту статью - Путь верстальщика . Там все гораздо подробнее изложено, со ссылками и прочими полезняхами.
- Стили - это набор параметров, определяющих положение, вид и функциональность элементов веб-страницы. Главное преимущество стилей - они предоставляют гораздо больше возможностей для форматирования, дизайна и верстки в сравнении с уже родным вам 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/
Спрашивайте советов у более опытных коллег, делитесь собственными знаниями с новичками!
Надеемся, эта статья станет для вас достойным руководством в изучении программирования. Следующий материал будет посвящен серверному язику программирования РНР.
Описание
: создание сайтов очень не простой процесс. Все, наверное, знают, что в его создании принимают участие веб-дизайнер и программист, но многие не знают про верстальщика. А ведь именно работа верстальщиком расставляет все элементы дизайна по местам. Хотите научиться этому? Тогда читайте статью о том, как стать верстальщиком с нуля.
Оплата
: в среднем 10$ за час или 50-100$ за проект.
Требования
: усидчивость, внимательность, знать html, css, JavaScript, Photoshop
Многие люди даже не знают о такой профессии, так что для начала стоит понять что делает верстальщик и в чем заключается его работа.
Верстальщик создает каркас сайта, используя макет от дизайнера. Он отвечает за адаптацию ресурса под различные браузеры, мониторы и экраны смартфонов/планшетов, чтобы везде сайт выглядел определенным образом. Иными словами, он получает статичную картинку от дизайнера, а затем «оживляет» ее.
Что требуется для работы ? Минимальный набор верстальщика включает в себя:
- Notepad++, чтобы писать код;
- Photoshop или другой подобный графический редактор;
- Популярные браузеры, чтобы посмотреть, как отображается работа в разных браузерах.
Что нужно знать и какие качества понадобятся?
- HTML.
- JavaScript.
- Photoshop или другую подобную программу.
- Усидчивость.
- Внимательность.
- Зрительная память.
- Аккуратность.
Как стать верстальщиком ?
Желательно иметь среднее или высшее образование в этой области, но многие верстальщики-фрилансеры самоучки. Либо своими силами изучили всю необходимую информацию, либо окончили специальные курсы в интернете. К счастью, подобных школ теперь довольно много.
1. Для начала вам нужно изучить HTML, CSS и JavaScript. Можно не запоминать с ходу все значения, а составить себе понятную и удобную шпаргалку. Особенно обратите внимание на следующие моменты:
- как строится HTML страница – основные теги страницы (head, body) и что в них может находиться.
- главные HTML элементы — a, p, div, table, h1-h6, ol, ul, span и т.п.. Научитесь их правильно прописывать, изучите зачем нужны. Поймите разницу между блочными и строчными элементами.
- Ознакомьтесь с версиями HTML и какие теги в них входят.
- Изучите отличие табличной и блочной верстки, какие у них преимущества.
- Основные элементы HTML5.
- Изучить виды селекторов.
- Основные (фон, размер, цвет, шрифт, границы и т.п.) и особенные (position, float …) свойства CSS.
- Ознакомьтесь с версиями CSS, какие к ним относятся свойства.
- Какие свойства работают по другому в некоторых браузерах.
- Научитесь делать блочную структуру web-страницы.
- Изучите основны CSS3.
JavaScript:
- Зачем и когда применяется.
- Как скрыть или показать определенный блок.
- Как добавить анимацию (скроллер или слайдер).
- Как сменить класс и стиль элемента.
- Как получить или изменить значение определенного элемента.
2. Освойте программу Photoshop , ведь вам придется работать в графическом редакторе и довольно много. Верстальщику не обязательно уметь рисовать, ведь вы работаете с готовым макетом страницы. В основном вам нужно будет:
- Делать нарезку макета.
- Определять размеры.
- Получать нужные цвета.
- Вырезать определенные элементы из макета.
3. Изучите основы верстки – разберитесь в терминологии (кроссбраузерность, валидность, семантика). Почитайте пару книг по этой теме или посмотрите хотя бы бесплатные курсы – их полно. Желательно научиться работать с WordPress и Joomla, так как многие сайты работают на этих CMS, и у них много особенностей в работе.
4. Практикуйтесь – не нужно сразу идти на биржу фриланса и хватать самый сложный заказ. Сделайте 2-3 тестовые работы, чтобы набить руку и отточить практические навыки.
Работа верстальщиком удаленно
Где ее найти? Ведь во фрилансе основная проблема – найти заказ. А новичкам сделать это очень и очень сложно, особенно если вы самоучка и нет опыта реальной работы.
- Первый опыт можно получить бесплатно. Т.е. предлагать свои услуги за положительный отзыв. Найти заказчиков несложно – находите сайты и предлагайте сделать верстку за положительный отзыв. Многие вебмастера будут рады такому предложению, а в дальнейшем будут обращаться к вам по другим вопросам (уже платно) или посоветуют знакомым. Главное покажите себя с лучшей стороны.
- Найти работу можно там, где требуется постоянно создавать или дорабатывать сайты. Так что вам стоит обратиться в студии веб-дизайна или крупные интернет-проекты. Можно напрямую написать веб-студиям с предложением о сотрудничестве. На первых порах можно работать на бесплатной основе (испытательный срок + обучение), а через месяц выйти на оплату. Так вы сможете получить реальный опыт работы, а потом сможете пристроиться на постоянную удаленную работу. Но тут многое зависит от ваших умений, талантов и удачи.
- Не забывайте про самый распространенный вариант – биржи фриланса. Именно там новички могут получить свой первых опыт, хотя взять первый заказ будет проблематично. На сайте weblancer.net довольно много заказов по верстке, а конкуренция не так сильна как на fl.ru
5 советов для начинающих верстальщиков:
- Думай. Верстка это не простое дело, которому легко и просто обучиться.
- Будь в курсе всего нового в этой сфере – читайте блоги, форумы, сайты и другие источники информации по этой теме. Постоянно появляются новые технологии, техники, выявляются распространенные ошибки – вы должны держать руку на пульсе, чтобы не пропустить важную информацию.
- Html + css – старайтесь по минимуму использовать javascript, чтобы ускорить загрузку страницы.
- Используйте наработки – сохраняйте свои старые наработки, чтобы была возможность к ним вернуться и воспользоваться в новом проекте.
- Занимайтесь версткой только если вам действительно это интересно. Просто выучить Html и css мало – надо жить версткой. Ведь в каком-то смысле это искусство, в котором нужно отдавать все свои силы, время и интерес, и только тогда можно получить удовольствие от работы и прийти к успеху.
Так что прежде чем задаваться вопросом «как стать верстальщиком с нуля», спросите себя «нравится ли мне работа верстальщиком удаленно или лучше попробовать что-то другое?». Ведь вариантов очень много, и это не та сфере, в которую стоит идти только ради денег.
Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.
Аркадий, привет!
Базовые знания - это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.
С чего начать?
Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.
Для начала необходимо попробовать. Понравилось? Можно начинать учить.
Установи редактор кода, например, Atom . Попробуй:
- Сверстать домашнюю страницу своего сайта
В заметке про указал ссылки на интересные домашние страницы, посмотри их - Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
Посмотри примеры: помидорковый таймер , тяжеловато . Мой первый проект был XSLT редактор , он упрощал работу по созданию новых XSLT-файлов
Как только сталкиваешься с проблемой - ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru .
Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.
Иногда встречаются весёлые сообщения:
Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать - посмотри эти видео:
Когда начнешь уверенно чувствовать себя в вёрстке - переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.
Изучение языка советую начать с книги Дэвида Флэнагана - « ». Книга большая, но не пугайся. Читать целиком необязательно.
Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:
Что дальше?
У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS , LESS или Stylus . Автоматизируй сборку стилей и их обработку через
