Поздравляем с созданием своего первого полноценного сайта. Вы сумели сделать страницу с тремя колонками, меню и формой комментариев.
Следующие шаги, которые вы сделаете в качестве разработчика, оставляем на ваше усмотрение, потому что это бесконечные перспективы. Возможно, вас интересует что делать дальше? У меня есть несколько советов, которые вам помогут!
Для начала, пожалуйста, подпишитесь на мою рассылку. Я буду присылать вам много полезных материалов, в том числе новости о других моих книгах, которые будут опубликованы в ближайшее время.
Вы также можете следить за мной через Twitter, чтобы оставаться в курсе моих работ.
Затем выберите свой любимый сайт и попробуйте поиграться с ним и написать код с нуля. Найдите отдельные части сайта и определите их функциональность. Вначале создайте код HTML, а затем примените CSS (всегда в таком порядке). После завершения сравните результат с оригиналом и спросите себя, что необходимо выучить. Это было бы идеальным путём для старта!
Шаблоны
Для дальнейшего развития важно понимать, что фронтенд-программирование (это название для программирования пользовательских интерфейсов, в нашем контексте это главным образом написание кода на HTML, CSS и JavaScript) — это работа на основе хорошо известных повторяемых действий. Каждый раз, когда вы работаете с новым сайтом, вы должны подготовить семантическую разметку HTML, затем написать CSS-код для получения эффектов, которые отражают дизайн целевого сайта. Дьявол кроется в мелочах, вот почему фронтенд это интересное поле деятельности.
Когда вы узнаете больше, то быстро обнаружите, что обычно существует множество различных способов решить проблему и от вас зависит выбор наиболее подходящего. Даже простой круг можно отобразить на сайте множеством методов. Вы можете использовать изображение, HTML5 Canvas, SVG или свойство border-radius. Помните наш многоколоночный проект? Его также можно сделать разными путями (погуглите «inline-block вёрстка», «вёрстка на flex-box»). Вы должны выяснить, что лучше всего подходит для вашего проекта.
Реальность
Реальностью программирования сайта является то, что современные браузеры постоянно совершенствуются, добавляя новые возможности CSS3 и HTML5. Неделю за неделей вы получаете обновления браузера с кучей новых функций. Как разработчик, вы должны внедрять их все и использовать наиболее правильные, основываясь на разных обстоятельствах. Вы должны ответить на вопрос — на поддержку каких браузеров ориентирован ваш проект. Вы должны решить, стоит ли заботиться о некотором количестве людей использующих браузер X. Затем появляются новые вопросы. Браузер Х поддерживает скруглённые уголки в CSS, а другие нет. Если вы хотите поддерживать оба браузера, то вам нужно найти подходящий обходной путь этой проблемы. Это одна из обязанностей фронтенд-разработчика — выбирать средства и методы, которые будут работать в любом браузере, который ваш проект предполагает поддерживать.
История
Соответственно важно ознакомиться с историей разработки HTML5 и CSS3. Это была сумасшедшая поездка за последние двадцать лет и некоторые побочные эффекты до сих пор остались. Мы постоянно изучаем новые вещи и пытаемся найти ответы, задавая уже новые вопросы. Вы будете учиться пока решаете разные проблемы. Так выглядит процесс саморазвития.
Делать ошибки
Ещё одним важным пониманием для становления хорошего фронтенд-программиста является то, что все мы делаем ошибки и учимся на них. Нет другого способа для совершенствования себя в роли веб-разработчика, чем постоянно пробовать разные вещи и учиться на них. Будьте любопытны. Процесс обучения не измеряется временем окончания. Наша индустрия движется быстро и каждый месяц мы должны узнавать что-то новое.
Хорошие новости
Несмотря на то, что новые знания сыпятся на нас каждый день, хорошей новостью является то, что все они построены на много лет известном фундаменте. HTML и CSS не меняют резко форму или способ написания. Нет. Эти языки остаются более или менее одинаковыми. Год за годом у нас просто появляется больше ответов на некоторые проблемы.
Хотя вы можете спросить — что сейчас в тренде? Что мне нужно знать, чтобы быть в теме?
Доступность
По оценкам 285 миллионов человек во всем мире слабовидящие: 39 миллионов слепых и 246 миллионов имеют плохое зрение. ВОЗ
Есть понятия, существующие благодаря тому, что их важность будет сильнее расти в будущем. Одним из них является веб-доступность.
Веб-доступность относится к практике устранения барьеров, которые препятствуют доступу к сайтам людям с ограниченными возможностями. Если сайты правильно спроектированы, разработаны и отредактированы, то все пользователи имеют равный доступ к информации и возможностям.
Ответственный разработчик просто не может забыть об этом. Я настоятельно рекомендую вам Web Accessibility: Web Standards and Regulatory Compliance и Apps For All: Coding Accessible Web Applications, чтобы ознакомиться с этим важным вопросом.
Адаптивный веб-дизайн
Следующий новый метод веб-разработки — адаптивный веб-дизайн. Если кратко, то речь идёт о том, как проектировать сайты, чтобы они красиво и наглядно выглядели на различных устройствах, включая мобильные телефоны, планшеты и телевизоры. Имеет смысл немного подумать над тем, почему это имеет значение. Вы не можете показывать пользователям один и тот же макет сайта на мобильных телефонах и ноутбуках. Ну, на самом деле можно, но это скорее всего окажется неэффективным. Имея ограниченный размер экрана мобильного телефона, возможно, имеет смысл пересмотреть вёрстку сайта и по другому приспособить доступное пространство. И вот тогда адаптивный дизайн становится полезным. Благодаря ему вы можете установить особую кучу правил CSS только для определённых разрешений экрана, чтобы ваш сайт выглядел иначе на мобильных устройствах, тогда как на ноутбуках он останется прежним. Вот простой пример для установки определённых правил CSS только для устройств шириной более 320px:
@media screen and (min-width: 320px) {
.news {
display: none;
}
}
Мы использовали здесь медиа-запросы. В приведённом фрагменте каждый элемент .news в коде будет скрыт для разрешения экрана шире, чем 320px (потому что мы установили display: none).
Конечно, есть более современные темы, о которых вы узнаете в ближайшее время, когда продолжите учиться. Как веб-разработчики мы строим сайты с параллаксом, рассказываем интерактивные истории с помощью видео и аудио на HTML5 или позволяем людям буквально рисовать в браузере. Взгляните на следующий список, чтобы получить лучшее представление о современной веб-разработке:
Почитайте блоги об HTML и CSS. Вот список наиболее ценных из них:
Изучите больше новых концепций. Следующие очень привлекательные темы:
- блочная модель;
- адаптивный веб-дизайн;
- прогрессивное улучшение;
- сначала мобильные;
- система сеток;
- CSS-фреймворки;
- семантический веб;
- доступность;
- WAI-ARIA.
Прочтите хорошие книги:
Почитайте интересные статьи и подпишитесь на рассылку:
Проверьте также:
Кроме этого, попробуйте регулярно учить новые теги HTML5 и играть с новыми вещами, связанными с CSS3. Если вы не уверены что функция, которую вы хотите использовать широко поддерживается, перейдите на Caniuse.com и проверьте. Если вы ищите достойную документацию, пожалуйста, посетите Mozilla Developer Network. Создайте аккаунт на Twitter и следите за наиболее известными людьми. Зарегистрируйтесь на Github, публикуйте свой код и, что более важно, пытайтесь анализировать код других. Кроме того, экспериментируйте с codepen.io. Посмотрите на JSBin или JSFiddle, где вы можете писать и тут же получить предварительный просмотр результата. Нет необходимости сохранять файлы локально!
Не прекращайте учиться! Пытайтесь и создавайте. Будьте открытыми и терпеливыми. Мы все живём в открытой сети, в конце концов!