Изучаем HTML и CSS на практике. Верстка сайта с размещением в интернете

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

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

50% 1

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓
Урок по верстке сайта на HTML и CSS из макета Figma. Верстаем и размещаем работу на хостинге в интернете.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт курса: 27-го Мая 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 3-го Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews

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

15 фев 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@user-fd5le5bx9j 3 года назад

Спасибо большое, Юрий! Все очень грамотно, четко и с первого раза!

@sprutgym2001 3 года назад

отличный пример. все разжевано до мелочей. за отступы отдельное Спасибо.

@tehno.maniak Год назад

Спасибо, что делаете такие ролики! Очень полезно!

@denisly6109 Год назад

От души благодарю! Благодаря вам я сдвинулся с мертвой точки. Это уже не первое видео что смотрю на канале. Ваша манера обучения больше всего мне подходит. Пошел дальше по каналу вашему штудировать науку) скоро приду на курс! мир!

@masteruvz Год назад

Юрий, спасибо за великолепный урок. Ещё пара месяцев по Вашим урокам и я стану крутым вебмастером )))))))))))))))))))))))))

@forestalik9757 Год назад

Спасибо большое! Один из лучших уроков.

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

Юрий, это классный урок, маленькая страничка + хостинг. минимальный набор важных знаний. Спасибо за урок.

@olegger7436 3 года назад

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

@luckytima2315 3 года назад

Хотелось бы побольше таких видео :))

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

Спасибо за детальное объяснение ❤

@PrihodClonim 3 года назад

Спасибо! Все классно!

@luckytima2315 3 года назад

Отлично по больше бы такого ))

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

Спасибо большое, получил опыт, а так же ещё один сайт в портфолио.

@yuraalov Год назад

Спасибо за урок

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

Это классно! Жизнь становится веселей!

@DenisioRyb 24 дня назад

Спасибо за классный урок! Так же подмечу, что через Alt+X / option+X можно копировать все классы из HTML в CSS

@titodima4509 3 года назад

Круто, спасибо очень полезно

@user-en6kk6mk6l 2 года назад

Крутяк. Подписался)

@user-kp5pb2yp9l 2 года назад

Юрий, спасибо вам большое за уроки! Не получается выровнять меню относительно логотипа.

@si_danproduction24 3 года назад

*ТООООП*

@user-gl3if9cw4i 3 года назад

Можно ли было использовать в 20:35 для вертикального центрирования padding-top ? Просто при обнулении стилей мы всё равно указали box-sizing:border-box и padding будет считать не во внешние отступы а внутри блока.

@WebCademy 3 года назад

Можно сделать и через padding. Но тогда у нас будет 2 величины для контроля - высота шапки и отступ сверху. Если выравнять через flex - то только одна цифра, которую надо контролировать.

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

А почему отступы в логотипах аппсторе не сделали через свойство gap?

@psqn__ Год назад

Где берете такие макеты?

@Alexus1504 3 года назад

Юрий, ну где же обещанный Вами урок про натяжку верстки на Wordpress?

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

Было бы классно чуточку уделять времени на хоткеи) а то бывает не понятно, как ты исполнил ту или иную фишку)

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

Интересно для себя узнать. Если уж использовали флекс, то почему не использовали gap для установки расстояний между элементами во флекс контейнере?

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

Потому что видео ролику 2 года. А так да - уже давно используем.

@_good_luck 3 года назад

Скажи пожалуйста как правильно устанавливать свойство line-height в случае если у нас только одна строка текста

@WebCademy 3 года назад

В данном случае некритично, либо отталкиваясь от дизайна. По умолчанию оставить auto, если следующий текст идет слишком близко то можно установить 1, уменьшив тем самым стандартную высоту строки.

@dmitrysertsov3612 3 года назад

А где сам макет?

@alexgordon950 Год назад

вопрос по тегу по селектору! Только я ставлю в body {height: 100%} , у меня вверх уменьшаются с 73px на 40px .header {height: 73px;} body { height: 100%; margin: 0; font-family: 'Manrope', sans-serif; }

@alexgordon950 Год назад

пожалуйста помогите с этим вопросом, а то у Вас все хорошо и ничего не поменялось а у меня почему-то сдвинулось.

@titodima4509 3 года назад

Какой для старта подойдёт ноутбук? Например процессор intel i3 и 8 оперативки подойдёт ?

@WebCademy 3 года назад

Подойдет, это минимальные комфортные. Лучше 16Gb RAM, если есть возможность.

@levonaslanyan8361 3 года назад

когда пишу first-child обе margin убирает (((

@user-zc2dc4dg6m 11 месяцев назад

Здравствуйте, скажите пожалуйста, а почему тегу header был задан класс ? Я возможно ошибаюсь, но сематическим тегам он вроде не нужен.

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

CSS классы можно давать любым тегам. И вообще стилизовать по классу, а не по тегу, это хорошая практика. Така как могут быть ситуации когда тот же тег header будет несколько раз присутствовать на странице.

@user-zc2dc4dg6m 11 месяцев назад

@@WebCademy Спасибо , не знал что тег header может использоваться несколько раз.

@hatefate5036 3 года назад

а почему в nav решили просто "а"-шками сделать, а не через ul -> li ? по доступности правильнее же второй вариант, с ul-li

@WebCademy 3 года назад

В данном случае был выбран более простой вариант, без учета accessibility.

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

всё делаю по примеру, а стили к nav отказываются работать(

@gkh1000 3 года назад

Какая у вас тема в Visual Studio code, ответьте пожалуйста.

@WebCademy 3 года назад

Тема AYU

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

а зачем ты перед image ставишь ./ ?

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

Здравствуйте! Спасибо за урок! Единственное не понимаю как это получается что у Вас в центральной части текст слева, а картинка справа(она у меня уходит вниз) ! пока не задал свойство для картинки , не ушла вправо, хотя вы этого не делали!! уже несколько раз смотрел тот отрезок и не пойму!! А так конечно же спасибо!

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

Может у вас разрешение меньше, и она по ширине не помещается поэтому и уходит вниз.

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

@@WebCademy спасибо огромное за ответ! Дальше буду верстать,в теории тяжко всё запомнить

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

Возник вопрос о фиолетовой кнопке: Почему было просто не задать паддинги со всех сторон? Зачем там display: inline-block? Что он дал?

@sergeymaksimus3103 10 месяцев назад

Как я понимаю раз кнопка сделана ссылкой, а ссылки это строчный элемент, то без преобразования padding не сработает, а inline-block позволяет стилизовать как само оформление кнопки так и текст в ней