#4 Теги глобальной структуры сайта: header, nav, main, footer [Курс по Верстке от AROKEN]

2 роки тому

👋 Привет! Это курс по верстке от Арокен.ру!
В этом курсе ты обучишься основам верстки, поймешь, как создавать сайты и сделаешь свой собственный крутой проект!
👨‍💻 Материалы курса (верстка и макеты):
Яндекс.Диск - disk.yandex.ru/d/sPwFI1parDsGSA
💥 Основной канал - / @arokenez
✈️ Телеграм - t.me/moodaroken
🖥 Бесплатное сообщество - t.me/arokenru
📜 Группа ВКонтакте - aroken
🔥 Мой сайт AROKEN.RU - aroken.ru
📩 Мой Телеграм Бот - t.me/aroken_bot
🙋‍♂️ Мой блог - t.me/arokendays
⚠️ Осторожно! После прохождения курса ты рискуешь научиться создавать удобные сайты и ворваться в развивающийся айти рынок!
❓ Остались вопросы? Нет мотивации и уверенности в обучении? Пиши в наше бесплатное сообщество в телеграмме!
Там опытные ребята помогут тебе разобраться в проблеме!
👨‍🏫 Преподаватель курса - выпускник Личного Менторства (ныне Премиум) (aroken.ru) и ныне участник команды АроКод: Никита Бёркхардт.

КОМЕНТАРІ: 63

@azia.t Рік тому

Интересно и очень доступно объясняете, не все на примерах объясняют структуру сайта

@antiplash5935 8 місяців тому

с header, footer, aside, main и nav проблем нет, а вот с секциями и артикулами я чего то так до конца и не понял 🥺

@MrHeavy-po2or 7 місяців тому

Хорошее видео,спасибо большое,очень информативно

@leslieburkeCW 3 місяці тому

Пыталась найти хороший пример сайта для повторения, в итоге после просмотра кода у всех почти сайт состоял на 90% из дивов) В итоге забила и на основе урока сделала сама по семантике, логически разобрав сайт.

@ffestiik 26 днів тому

+++, я так и не нашел нормальный сайт(

@azn8703 4 місяці тому

Спасибо вам за урок!

@user-wt6uz3zr1r Рік тому

Благодарю, да, классные примеры))

@kluqueen569 4 місяці тому

примеры имба, спасибо за ролик

@user-nf2hg6eb4m Рік тому

Четвёртый урок на уровне, полёт нормальный. Разбил сайт на части, при этом сильно глубоко не лез, не делил на очень маленькие секции (хотя в режиме разработчика это было сделано). И при таком грубом обрубилове получилось 137 строчек!!! Если не сворачивать готовый код, то и потеряться легко... Спасибо за урок!!

@arokenru Рік тому

Кул) Молодец)

@orazaliorazali1000 2 місяці тому

Благодарю!

@OlchiMio Рік тому

разбираю сайт, на мой взгляд там много article, нажимаю "исследовать элемент" и это все оказывается div 😮‍💨. Там в принципе весь сайт в div

@user-sc7qb4id1u 8 місяців тому

полностью согласен большинство сайтов делают через див ) походу всем пофигу на семантику

@nastyarobloxplay 5 місяців тому

Спасибо

@augustfondrajk2440 7 місяців тому

ты лучший

@TeomunMete 10 місяців тому

Спасибо мужик

@mihail_krash 2 місяці тому

header может быть и два, один глобальный -шапка сайта с навигацией его role должна быть banner, и второй header это начало какойнибуть статьи например где общая информация а дальше идет остальная статья. Счас многие уже говорят что ошибочно считать что header может быть только один.

@SEO-mq5tz 2 роки тому

🔥

@anvarxabibov8969 Рік тому

спасибо за такой ролик, посмотрел один сайт и около 10 или 15 потратил чтоб угадать какой код в нем а оказалось там все написано с div

@Sergey_Yrevich 8 місяців тому

Есть более удобный способ копирования строки Ctrl+D 😉, а еще vs code поддерживает запись например section * n где n количество повторений. В целом очень доходчиво, спасибо! 👍

@user-vi4cu5mb1j 7 місяців тому

O, полезная инфа с умножением тэгов.

@f-len Рік тому

Тегов header на странице может быть несколько (маленькое незначительное замечание))). А в остальном урок по html крутой.

@zagites7763 6 місяців тому

но это как-то странно, чисто по логике, шапка у сайта-то одна

@OtamanMamoru Рік тому

Лайк, информация подана отлично!

@loutreck Рік тому

Открыл сайт компании в которой работаю (компания небольшая локальная) и нашел пасхалку в логотипе разработчика сайта "Мы здесь были ;)"

@user-qk3fy7he8v Рік тому

Подскажи плиз. А как ты сделал что у тебя после ентера сразу пустое место с табом есть? Мне приходится нажимать два раза его и таб потом, а это не удобно и занимает много времени.

@clojure_sith Рік тому

Открыл два сайта, оба были написаны исключитльно на div)))

@arokenru Рік тому

)))

@KoltovichLAB 2 роки тому

2:40 - Разве не наоборот принято? - Определяет статью в документе. В него принято помещать несколько блоков из , т.к. нечто крупное. А лишь раздел. Их может быть несколько в .

@arokenru 2 роки тому

Оба варианта верны) Артикл не привязан к размеру, это может быть как крупная статья, так и мелкая самостоятельная карточка в каком-нибудь эсайде или секции

@yamanekopaws Рік тому

Ютуб написан div-ами. Еще нашла в нем какой-то уникальный тег ytd-playlist-panel-renderer

@rsotm435 4 місяці тому

я написал див блок и спан инлайн , они просто написались без окантовки в чем проблема моя?

@lialiova9084 6 місяців тому

2:54 "... - может быть на сайте только один- ..." 3:08 "... - он тоже только один- ..." 3:11 "... - всегда находится внизу- ..." 4:31 - добавляйте это лучше после каждого своего утверждения Всегда считал, что учить - большая ответственность.

@sayme_az3069 2 роки тому

а можно было ли после header написать main, а потом aside? ( 1 пример )

@arokenru 2 роки тому

Конечно, если это необходимо. В данном же примере aside потребовалось написать до main)

@shayh9699 Рік тому

не расслышала в видео момент, то ли закоментирую, или другое, но это сочетание CNTRL+/. Что это и для чего это делают?

@20ash14 Рік тому

"Закомментирую" , то есть та информация , которую мы закомментировали, программой читаться не будет, её как будто бы в коде нет, но мы её видим и можем обратно раскомментировать.

@shayh9699 Рік тому

@@20ash14 спасибо)

@arokenru Рік тому

Верно!

@user-hb1ms2qc5w Рік тому

у меня в браузере открывается просто код, который написан в редакторе. Что то не так делаю?

@musicfan507 Рік тому

У меня тоже,походу здесь и мы остановимся

@LemonNaBalance Місяць тому

3:33

@theniks1437 Рік тому

я не знаю почему , но когда я написал див блок и спан инлайн , они просто написались без окантовки как в видео 😮‍💨

@theniks1437 Рік тому

мне кажется я даун

@arokenru Рік тому

напиши в чат бесплатного тарифа

@youdotaalex1229 Рік тому

это потому что ты не применил стили css, которые были в видео, но их не нужно было добавлять)

@user-bo9hp4qy7c 5 місяців тому

Со всего у меня получилось только значёк поменять😂 на остальном ошибки,блочный элемент не показывает...тупо нифига не работает от слова вообще

@user-wl9dy2dz2p 9 днів тому

ребят, кто знает скажите, почему когда я ввожу "div" или "span", то появляется просто текст без блока (в css я даже не лез, для справки)

@usermanafrtyh 6 днів тому

Нужно задать background

@musicfan507 Рік тому

у меня в начале не получается .с тегом див и спан

@user-bn7fl9ny1t Рік тому

Так как там в CSS добавлены стили, ты пока что ещё его не изучал и он сделал это для наглядности

@musicfan507 Рік тому

@@user-bn7fl9ny1t зачем показывать того чего ещё не было

@rufus1110 Рік тому

твой плагин по обвертке тегов марочный какой-то. Все это есть в деффолтном emmet. Просто клавиши устанавливай

@arokenru Рік тому

Ну окей)

@damir5581 5 місяців тому

Открыл исходный код 5 сайтов, везде используется только div и span... Даже Хабр ими написан, ХАБР!!! Появляется вопрос, а так ли семантика влияет на продвижение сайта и важна ли она вообще? Все сайты, которые я проверял, были на первом месте в поиске.

@nevercrymore 3 місяці тому

Не всегда выйдет с помощью div`a сделать разметку сайта как с секциями и тому подобным. На продвижение сайта оно не влияет, и каждый делает по своему или как может.

@he1vann-42 2 місяці тому

давно хабр у нас теперь венец творения человеческого?)

@User-wi7rd 9 місяців тому

11:05 - что есть "закомментировать" плохо понятно

@User-wi7rd 9 місяців тому

нашёл ответ в комментариях*

@yanziuy 5 місяців тому

можешь сказать пожалуйста@@User-wi7rd

@fusha_andrurin 4 місяці тому

@@yanziuy Комментарий - это текст, который предназначен для программистов и не обрабатывается компилятором. Обычно комментарии используются для создания заметок к коду для дальнейшего использования. Компилятор обрабатывает их как пробел.