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

Подписаться 14 тыс.

Просмотров 59 тыс.

50% 1

👋 Привет! Это курс по верстке от Арокен.ру!
В этом курсе ты обучишься основам верстки, поймешь, как создавать сайты и сделаешь свой собственный крутой проект!
👨‍💻 Материалы курса (верстка и макеты):
Яндекс.Диск - 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) и ныне участник команды АроКод: Никита Бёркхардт.

Опубликовано:

17 мар 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@antiplash5935 9 месяцев назад

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

@leslieburkeCW 4 месяца назад

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

@ffestiik Месяц назад

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

@azia.t Год назад

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

@mihail_krash 2 месяца назад

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

@MrHeavy-po2or 8 месяцев назад

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

@user-wt6uz3zr1r Год назад

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

@azn8703 5 месяцев назад

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

@OlchiMio Год назад

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

@user-sc7qb4id1u 9 месяцев назад

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

@user-nf2hg6eb4m Год назад

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

@arokenru Год назад

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

@penisegvetv2yv 8 дней назад

у меня 87 получилось

@kluqueen569 5 месяцев назад

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

@anvarxabibov8969 Год назад

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

@OtamanMamoru Год назад

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

@f-len Год назад

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

@zagites7763 7 месяцев назад

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

@Sergey_Yrevich 9 месяцев назад

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

@user-vi4cu5mb1j 8 месяцев назад

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

@TeomunMete 11 месяцев назад

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

@orazaliorazali1000 3 месяца назад

Благодарю!

@user-qk3fy7he8v Год назад

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

@iamnovikovmaksim 22 дня назад

в прошлом уроке была картинка где показано main>section>article почему тут идет main>article>section?

@nastyarobloxplay 6 месяцев назад

Спасибо

@loutreck Год назад

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

@lialiova9084 7 месяцев назад

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

@KoltovichLAB 2 года назад

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

@arokenru 2 года назад

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

@clojure_sith Год назад

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

@arokenru Год назад

)))

@rsotm435 5 месяцев назад

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

@augustfondrajk2440 8 месяцев назад

ты лучший

@user-sk6pu8rk2x 22 дня назад

при вводе ! ни чего не происходит вопрос почему?

@shayh9699 Год назад

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

@20ash14 Год назад

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

@shayh9699 Год назад

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

@arokenru Год назад

Верно!

@yamanekopaws Год назад

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

@SEO-mq5tz 2 года назад

🔥

@sayme_az3069 2 года назад

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

@arokenru 2 года назад

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

@user-wl9dy2dz2p Месяц назад

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

@usermanafrtyh Месяц назад

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

@user-hb1ms2qc5w Год назад

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

@musicfan507 Год назад

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

@theniks1437 Год назад

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

@theniks1437 Год назад

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

@arokenru Год назад

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

@youdotaalex1229 Год назад

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

@user-bo9hp4qy7c 6 месяцев назад

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

@damir5581 6 месяцев назад

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

@nevercrymore 4 месяца назад

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

@he1vann-42 2 месяца назад

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

@rufus1110 Год назад

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

@arokenru Год назад

Ну окей)

@musicfan507 Год назад

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

@user-bn7fl9ny1t Год назад

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

@musicfan507 Год назад

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

@wigeonN 2 месяца назад

3:33

@User-wi7rd 10 месяцев назад

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

@User-wi7rd 10 месяцев назад

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

@yanziuy 6 месяцев назад

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

@fusha_andrurin 5 месяцев назад

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