Решили попробовать себя в веб разработке, в частности frontend, но не знаете с чего начать? Тогда эта статья для вас!
Фронтенд
Это то, что пользователь видит и с чем взаимодействует на странице. Дизайн, визуальные элементы, схемы — вся лицевая сторона. Задачи фронтенд разработчика — сделать сайт, который будет решать задачи владельца, одинаково корректно работать на всех устройствах, независимо от браузера и размера экрана и при этом будет удобен пользователю. Основные инструменты: HTML, CSS и JavaScript. И начать тут стоит именно с HTML.
Что такое HTML ?
Прежде всего нужно начать с основ, а именно языка разметки HTML. HTML ( HyperText Markup Language , язык разметки гипертекста ) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице.
Стандарт HTML был разработан W3C ( World Wide Web Consortium ) или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов – это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например H1) по-прежнему составляют ядро HTML.
С течением времени в HTML было много обновлений, и в настоящее время его новейшей версией является HTML5. HTML5, конечно прежде всего является языком разметки, но он приобрел множество функций в отличии от HTML и устранил некоторые из строгостей, присутствовавших в XHTML. Хотя HTML5 обновляется практически каждый день, однако новых выпущенных пронумерованных версий нет. Основным различием между HTML и HTML5 может стать то, что ни аудио, ни видео не являются составной частью HTML, тогда как они оба могут рассматриваться как неотъемлемые части HTML5.
Где изучать?
В сети есть много ресурсов для изучения HTML5. Однако я смело могу посоветовать следующие:
https://html5book.ru/html-html5/
Отличные ресурсы для новичков. Вы познакомитесь с тегами и вариантами их применения на практике.
В разделе курсы найдите HTML5, там все интерактивно и интересно!
Этот ресурс будет полезен, при условии, что вы хорошо владеете английским языком.
Также не лишним будет и просмотр видео курсов по данной тематике. Тут я не могу посоветовать что-то конкретное, так как сам изучал HTML на ресурсах, которые указал выше. На Youtube есть множество видео, смело вбивайте в поиск html5 уроки и вам выдаст множество вариантов, там правда есть из чего выбрать. Если хорошо знаете английский язык ( в веб разработке это желательно ), то вот ссылка на курс от freeCodeCamp.
Еще один полезный сайт с видео курсами это Udemy. Но тут курсы платные, вы можете выбрать как на русском, так и на английском языке.
Практика
Из личного опыта могу сказать, что лучше всего новые знания сразу же применить на практике. Но как это сделать?
Для начала вам нужен редактор кода, в котором вы и будете работать. Из всех имеющихся редакторов, лично мне нравиться Visual Studio Code, но вы можете воспользоваться любым, из перечисленных ниже. Вот наиболее популярные редакторы:
Устанавливаете редактор, создаете файл с расширением html( как правило такой файл называют index.html ). В этом файле прописываете теги которые выучили, а потом открываете его в браузере и вы увидите результат того, что написали. А далее практика и еще раз практика.
После того, как вы освоите HTML, можно приступать к следующему шагу на пути превращения во фронтенд разработчика, а именно изучения CSS. О котором пойдет речь в следующей публикации.