Мир Веб технологий очень интересен и разнообразен. Когда только начинаешь изучать Веб, глаза разбегаются от обилия новых терминов. Но это не должно Вас пугать, главное желание и всё получится. Со временем Web вас затянет, уж поверьте. Не буду сильно затягивать со вступлением, а сразу перейдем к сути. Ниже я кратко опишу, что читать для быстрого старта, какие инструменты, сервисы пригодятся, упростят разработку.
С чего начать. HTML, CSS
Если вы хотите стать хорошим Web разработчиком, то необходимо начинать с изучения html, css. html — язык разметки вашей страницы, css — стили, которые описывают внешний вид странички. Это основы, ознакомиться можно за день, два.
Редактор кода. Sublime Text
Какой редактор выбрать для написания кода? Посоветую Sublime Text. В нем есть всё что нужно — и подсветка синтаксиса, автозаполнение, куча плагинов, приятный и интуитивно понятный интерфейс. Sublime — платный. Но не переживайте, можно им пользоваться и бесплатно, просто с определенным интервалом времени выскакивает окно, типа “купите, зарегистрируйте”. Закрываете его и работаете дальше. Функционал не обрезан в бесплатной версии. Для того, чтобы быстро верстать, можете установить мой любимый плагин(пакет) Emmet для Sublime Text. Посмотрите, что можно творить теперь:
-
-
//из этой строки вы получаете….
-
div#my-id>.my-class>ul>li{привет$}*5^a.class2{ссылка$}*4
- //получается вот это
- <div id=«my-id»>
- <div class=«my-class»>
- <ul>
- <li>привет1</li>
- <li>привет2</li>
- <li>привет3</li>
- <li>привет4</li>
- <li>привет5</li>
- </ul>
- <a href=«» class=«class2»>ссылка1</a>
- <a href=«» class=«class2»>ссылка2</a>
- <a href=«» class=«class2»>ссылка3</a>
- <a href=«» class=«class2»>ссылка4</a>
- </div>
- </div>
-
Это ли не круто? Сколько времени сэкономили на написании html… Не будем долго останавливаться на редакторе, продолжим дальше.
Как научиться верстать
Чтобы хорошо верстать, надо много верстать. Больше практики, качайте бесплатные макеты psd и тренируйтесь на них. Смотрите чужие исходники, как реализовано у других. В Google Chrome нажимаете F12 на любой открытой страничке и откроется панель разработчика(DevTools). Теперь изучайте чужую разметку и стили (вкладка Styles).
Дальше Javascript
Когда немного освоитесь в html, css. Приступайте к изучению javascript — скриптовый язык. С его помощью добавится интерактивность вашим Веб страницам. По началу обрабатывать простые события — нажатие на кнопку, наведение на элемент и так далее. Далее, в качестве задачки, попробуйте реализовать свой слайдер картинок.
Небольшое отступление. Если будет что-то не получаться, Google Вам в помощь. Это вообще основное средство поиска информации. Не бегите сразу на форумы строчить вопрос. Ищите сами ответы, ковыряйтесь пока не найдете. Так толку больше от обучения.
Для javascript могу посоветовать классную песочницу jsFiddle. В этом сервисе четыре блока для html-кода, css, javascript и результата. Не надо создавать файлы у себя на компе, быстренько накидали код и посмотрели результат.
Так же хочу порекомендовать видео по javascript и css. Сам с них начинал.
Думаю на сегодня хватит. Все равно в одну статью не уместить всё, даже кратко. Будет продолжение.