Изучаем HTML и CSS на практике. Верстка сайта с размещением в интернете
ฝัง
- เผยแพร่เมื่อ 15 ก.พ. 2021
- ↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓
Урок по верстке сайта на HTML и CSS из макета Figma. Верстаем и размещаем работу на хостинге в интернете.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Спасибо большое, Юрий! Все очень грамотно, четко и с первого раза!
отличный пример. все разжевано до мелочей. за отступы отдельное Спасибо.
Спасибо! Все классно!
Спасибо, что делаете такие ролики! Очень полезно!
Спасибо, очень понравилась подача материала
От души благодарю! Благодаря вам я сдвинулся с мертвой точки. Это уже не первое видео что смотрю на канале. Ваша манера обучения больше всего мне подходит. Пошел дальше по каналу вашему штудировать науку) скоро приду на курс! мир!
Отлично по больше бы такого ))
Спасибо большое! Один из лучших уроков.
Юрий, спасибо за великолепный урок. Ещё пара месяцев по Вашим урокам и я стану крутым вебмастером )))))))))))))))))))))))))
Хотелось бы побольше таких видео :))
Спасибо за детальное объяснение ❤
Круто, спасибо очень полезно
Это классно! Жизнь становится веселей!
Спасибо за урок
Юрий, это классный урок, маленькая страничка + хостинг. минимальный набор важных знаний. Спасибо за урок.
Спасибо большое, получил опыт, а так же ещё один сайт в портфолио.
Крутяк. Подписался)
*ТООООП*
Спасибо за классный урок! Так же подмечу, что через Alt+X / option+X можно копировать все классы из HTML в CSS
Юрий, спасибо вам большое за уроки!
Не получается выровнять меню относительно логотипа.
Можно ли было использовать в 20:35 для вертикального центрирования padding-top ? Просто при обнулении стилей мы всё равно указали box-sizing:border-box и padding будет считать не во внешние отступы а внутри блока.
Можно сделать и через padding. Но тогда у нас будет 2 величины для контроля - высота шапки и отступ сверху. Если выравнять через flex - то только одна цифра, которую надо контролировать.
Юрий, ну где же обещанный Вами урок про натяжку верстки на Wordpress?
Где берете такие макеты?
Было бы классно чуточку уделять времени на хоткеи) а то бывает не понятно, как ты исполнил ту или иную фишку)
А почему отступы в логотипах аппсторе не сделали через свойство gap?
вопрос по тегу по селектору! Только я ставлю в body {height: 100%} , у меня вверх уменьшаются с 73px на 40px .header {height: 73px;}
body {
height: 100%;
margin: 0;
font-family: 'Manrope', sans-serif;
}
пожалуйста помогите с этим вопросом, а то у Вас все хорошо и ничего не поменялось а у меня почему-то сдвинулось.
а почему в nav решили просто "а"-шками сделать, а не через ul -> li ? по доступности правильнее же второй вариант, с ul-li
В данном случае был выбран более простой вариант, без учета accessibility.
А где сам макет?
Какой для старта подойдёт ноутбук? Например процессор intel i3 и 8 оперативки подойдёт ?
Подойдет, это минимальные комфортные. Лучше 16Gb RAM, если есть возможность.
Интересно для себя узнать.
Если уж использовали флекс, то почему не использовали gap для установки расстояний между элементами во флекс контейнере?
Потому что видео ролику 2 года. А так да - уже давно используем.
Скажи пожалуйста как правильно устанавливать свойство line-height в случае если у нас только одна строка текста
В данном случае некритично, либо отталкиваясь от дизайна. По умолчанию оставить auto, если следующий текст идет слишком близко то можно установить 1, уменьшив тем самым стандартную высоту строки.
когда пишу first-child обе margin убирает (((
Какая у вас тема в Visual Studio code, ответьте пожалуйста.
Тема AYU
Здравствуйте! Спасибо за урок! Единственное не понимаю как это получается что у Вас в центральной части текст слева, а картинка справа(она у меня уходит вниз) ! пока не задал свойство для картинки , не ушла вправо, хотя вы этого не делали!! уже несколько раз смотрел тот отрезок и не пойму!!
А так конечно же спасибо!
Может у вас разрешение меньше, и она по ширине не помещается поэтому и уходит вниз.
@@WebCademy спасибо огромное за ответ!
Дальше буду верстать,в теории тяжко всё запомнить
всё делаю по примеру, а стили к nav отказываются работать(
58:50
Возник вопрос о фиолетовой кнопке:
Почему было просто не задать паддинги со всех сторон? Зачем там display: inline-block? Что он дал?
Как я понимаю раз кнопка сделана ссылкой, а ссылки это строчный элемент, то без преобразования padding не сработает, а inline-block позволяет стилизовать как само оформление кнопки так и текст в ней
а зачем ты перед image ставишь ./ ?
Здравствуйте, скажите пожалуйста, а почему тегу header был задан класс ? Я возможно ошибаюсь, но сематическим тегам он вроде не нужен.
CSS классы можно давать любым тегам. И вообще стилизовать по классу, а не по тегу, это хорошая практика. Така как могут быть ситуации когда тот же тег header будет несколько раз присутствовать на странице.
@@WebCademy Спасибо , не знал что тег header может использоваться несколько раз.
Я бы лого запихал в nav
почему у меня появился скрол вниз хотя вроде всё писал как у вас??
Высота экрана меньше чем у меня.
Как автоматически преобразовать английские буквы в русские буквы?
Погуглите Punto Switcher.
@@natalianatalia3357 Благодарю
36:29 что за плагин который сворачивает код?
Это не плагин. Просто наведите на левую панель где номера строк и там появится > чтобы свернуть блок кода. Стандартная возможность в VS Code.
@@WebCademy Благодарю за ваши уроки!
Как вы скопировали только классы? 53:09
23:24 подскажите, а как так делать?
В VS cod - alt+ctrl+стрелочки вверх/вниз
@@Transguddit спасибо
как открыть формат .fig
Перетянуть файл в программу Figma.
спасибо, нужно кидать было на стартовое окно, а я в new desing file
и еще эти два стиля пустыми остались, это нормально ? .main {} , .main-img {}
Не стиля, а селектора. Удалите их. Проблемы в этом нет.
@@WebCademy ооо, картинка слаживается)
@@WebCademy Могли бы Вы ответить, на коментарий ниже?