На написание этой статьи меня подтолкнуло моё желание поделиться тем, с чем у меня когда-то были проблемы и обещание перед несколькими людьми. Не люблю учить людей, писать туториалы, поэтому постараюсь писать кратко и только что необходимо и только для новичков. Напишем чуть-чуть кода и походу дела разбираться, что к чему. Детально объяснять не буду, но дам общее понимание. Открывайте свой любимый редактор. Я советую sublime, можно любой другой, но если вы совсем отморозок – открывайте блокнот.
HTML.
Разберем недописанный код простой странички нашего "диванного" интернет магазина по продаже машин. Создайте файл cars-list.html и перепишите следующий код в ваш текстовой редактор.
Переписывание кода поможет запомнить html-структуру, если у вас хорошая память, можете не писать, далее в разработке, вам будет помогать инструмент автозаполнения в вашем текстовом редакторе (в блокноте его нет).
HTML – это язык разметки гипертекста (HyperText Markup Language), а все что выделено в скобочках "больше-меньше" называется "тег". Все что выделено внутри тегов синим цветом называется "атрибуты". Запомнили, записали, закусили, идем дальше.
HTML – это язык разметки гипертекста (HyperTextMarkupLanguage), а все что выделено в скобочках "больше-меньше" называется "тег".
Немного о тегах. Напишу о тех, которые мы будем использовать.
<!DOCTYPE html> – это объявление версии документа HTML 5. Бывают разные версии например 4, сейчас все используют 5 и начинать написание html лучше именно с этой строчки.
html – тег, который говорит нам о том что это html
head – тег для настроек документа, описание для поисковых машин, настройка кодировки, подключение сторонних файлов.
body – главный тег, в котором пишется вся видимая информация на сайте.
p – параграф
img – картинка
button – кнопка
a – якорь (c английского anchor), на русском все называют "cсылка"
h1, h2, h3, h4, h5, h6 – заголовки с разными уровнями. Чем больше цифра, тем меньше заголовок. Максимальная цифра 6.
Допишем немного наш код и откроем браузер. Добавить картинку, заголовок, описание и кнопку "купить".
Видим большую картинку. Заголовок, описание и кнопку, но как можно заметить выглядит это как-то не очень.
CSS
Давайте подкорректируем размеры, отступы, добавим фон в документ, сделаем кнопку немного ухоженной. В этом нам поможет CSS. CSS – язык описания, который помогает стилизовать документ. (Cascading style sheets с английского).
CSS – язык описания, который помогает стилизовать документ. (Cascading style sheets с английского).
Допишем код и вставим наши стили внутри тега <style>{стили}</style>.
Как мы видим наша карточка немного преобразовалась это и есть сила стилей. Давайте я немного поясню что мы написали в стилях и дам вам ресурсы на которых вы можете научится этому всему самостоятельно.
То что мы написали в теге <style> называется селекторами. В селекторах мы описываем непосредственно стили.
Если вы знаете хоть немного английский, то вам будет очень легко понять стили. Если нет, то нужное вы найдете в ссылках, которые я сейчас оставлю. А теперь что нужно знать и сами ресурсы, которые вам помогут в обучении.
Как обучаться?
Ни для кого не секрет, что самый лучший способ обучение – практика. Поэтому я советую выбрать какой-нибудь проект по своим интересам. Например, любите машины, начинайте делать сайт по продаже автомобилей. Нравятся телепузики? Начните делать сайт, где пользователь сможет посмотреть информацию по каждому телепузику и на расписание на каналах, где их показывают. Думаю понятно.
Информация для обучения.
https://www.w3schools.com/html/default.asp – Вот тут есть описание по каждому тегу, распространенным ситуациям в разработке сайтов, в некоторых разделах небольшие задания и текстовый редактор.
https://developer.mozilla.org/ru/docs/Web - здесь вы можете также найти описание разных инструментов в определенной технологии, только более подробно.
https://learn.javascript.ru/ – тут очень подробно написано про язык программирования для JavaScript. В конце каждой страницы имеются практические задания по уроку для закрепления материала
Ютуб, гугл, разные статьи в интернете. – как бы это банально не звучало, но когда вы не знаете что делать, просто спросите совет у вашего лучшего друга под названием GOOGLE. Все банально просто. Нужно поменять размер картинки? Пишем: как поменять размер картинки CSS. Нужно сделать анимацию на сайте? Пишем: как сделать анимацию на сайте. Этот пункт самый основной вид обучения.
Думаю чтобы начать что-то делать этой информации вам достаточно. Если это читают разработчики, напишите свои полезные ресурсы, которые вам помогли в обучении.
Надеюсь вы нашли что-то полезное в этой статье. Пока!