[HTML/CSS] Верстаем очень простой сайт-визитку. Базовые знания для новичков. Верстка сайта с нуля.
HTML-код
- Опубликовано: 22 сен 2019
- От начала до конца создаем простейший сайт на основе шаблона, подходит для создания небольшого сайта-визитки или чего-то подобного. Работа скорей для обучения, нежели для реального применения, но знания полученные на подобных макетах позволят в ближайшее время брать более сложные шаблоны.
2022 год студент, спасибо что есть такие люди, которые обучают так прекрасно программированию! Таких бы нам преподователей!)))
Спасибо тебе добрый человек за это замечательное видео! Я не знаю почему, но ютуб выдал мне твой ролик первым по запросу "Верстка простого сайта", но это просто идеальное видео для начинающих. У тебя отлично получается доходчиво все объяснять и благодаря твоему умению я сделал первый-маленький шажок в верстке, большое спасибо еще раз ))
С меня лайк и подписка)
Я охерел просто. Однозначно лайк и подписка. Увидел, как в живую все это верстается, завораживает, как автор умело быстро пишет код. Есть чему поучиться, спасибо)
На всех роликах этот комент..
Спасибо тебе за твою работу и за время которое ты потратил, чтобы это все сделать и рассказать, мне так помогает!!! Успеха тебе во всем!
привет у тебя есть код? Хотел скопировать, если есть можешь скинуть в соц.сеть?
conteiner - 12:00
работа с навигацией - 34:13
структура html кода - 18:10
header - 22:35
title-block - 28:38
nav (html) - 32:09 (список)
nav (css) - 33:25
отталкиваем ссылки друг от друга - 36:25
доп настройки - 36:50
разделение ссылок - 37:54
hover - 38:22
плавность анимации - 39:09
отступ от края (nav) - 40:38
content wrapper - 41:24
content - 42:18
txt - 43:05
отступы - 45:00
sidebar - 43:48
skills - 48:10
не знаешь что за программу он использует?
@@user-qk2ve8ys2d visual studio
@@user-qk2ve8ys2d VS Code
Добрый человек, благословений тебе по жизни.
лучшая дикция, все ясно и доходчиво, спасибо вам большое!
“И в итоге называется неправильным” 😅
Спасибо за урок. Как всегда с юмором и полезностями 😁
По моему лучшее объяснение для новичков что я встретил. Однозначно лайк
Да, ваше мнение правильное. Канал является хорошим дополнением ко всем создателям контента или программистам. Спасибо за отличное объяснение. Я подписался на канал
Блин, все объяснил понятно и коротко. Автору респект 👍
Спасибо, мне как новичку очень полезно:)
Столько видео роликов посмотрел не помогло, а тут сразу пошло и HTML и CSS сомо собой. Большой респект от кыргызского начинающего девелопера)
Спасибо, все просто и понятно! Установил для себя представление выстраивания )
За работу с opacity отдельная благодарочка) начал макет верстать сам, без урока, и наткнулся на такую проблему, что текст тоже прозрачным становится,я уже и отдельным элементом делал, чтобы текст не наследовал прозрачность и с z-idnex игрался, и background через rgba пробовал делать, один хрен по тому же месту) ну что же, добра тебе, дядь)
Хорошая работа, друг, без сомнения, программирование - лучшее!
Спасибо, все объяснил понятно и коротко!
Спасибо за видео! Узнал достаточно много нового с видео, удачи)
Ты просто супер ! Ты самый идеальный для начинающего фронтендера учитель !
Порядочный пример создания странички .)
Спасибо за классный урок !!!!
Cпасибо! Полезно и очень понятно! Очень помогло!
Благодарю , это было познавательно 👍
отличная тема! лайк от вебмастера и гуру по сео и не только СЕООНЛИ
Мощно! Благодарю!!
Однозначно лайк, спасибо.
Спасибо
Обьяснил все понятно.
А те сайты которые верстал по вашим видео потом можно использовать во фрилансерком портфолио ?
Парень спасибо тебе огромное. Ты не представляешь какой я тупой, но у меня все получилось, делал 3 дня, ещё я узнал что есть среда для разработки вижен студио)). Очень интересно объясняешь, непонятно почему так мало подписчиков??
удачи вам в развитии
Хотелось бы продолжения:)
Спасибо за урок! Сделай еще верстку простого лэндинга, в таком же ритме, для начинающего)
Макс Максимыч хорошо, я думаю вернуться с подобными темами
Отличное видео для начинающих. Автору уважение за проделанную работу. 🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
Ваааау! Спасибо тебе большое! Так доходчиво и не спеша все рассказал и показал! Потрясающе!
очень круто)
А как ещё можно вставить картинки? Просто я ставлю в html в title-block картинка та ставится но уже текст на стороне остается,а не на картинке. Подскажите пожалуйста, я хочу загруженную картинку вставлять в css ,а не через интернет.
Спасибо))
а это пойдет как проект на инфу? 9 класс я выбрал создание сайта с использованием кода HTML?
Спасибо за урок!
PS: какой Вы красивый🙈
Спасибо☺️
Здравствуйте
Пишу код уже 5 час и на 46 минуте sidebar вообще не работает уже 30 минут сижу
Как можно с вами связаться, очень устал уже 3 часа ночи
Большое спасибо
Помогите кстати с юрл ссылками на кнопках, хочу чтобы слова не светились и не выделялись синим и фиолетовым цветом, хочется красиво так то оформить кнопки, скажите куда и какую команду нужно вписать??? Очень нужно!!
помоги пожалуйста, у меня в sidebare SKILLS почему то относится к .nav ul backgraund. (Название Skills с рамкой от backgraund(( я не понимаю в чем проблема ((
Спасибо!
Спасибо.🙂
Кто может скинуть на почту готовый код? Я пробывал сделать но остановился на подвале . Рамка просто не отходит от боков сайта.
Подскажите, пожалуйста, что мне делать, если я меняю файл CSS обновляю и стили не применяються?
Возможно вы забыли его подключить в или по указанному пути файла его не существует
полезное видео. Пожелание - фоновую музыку потише
Пишу url а он у меня не выделяется, что делать ??
Спасибо
Классно
Очень классно, самый наверно адекватный обзор, но почему вы остановились и не продолжили наполнять страницы и завершить данный проект? Пожалуйста, я не хочу смотреть других авторов, как создавать страницы, их наполнение, пожалуйста сделайте это.
Хорошее видео, спасибо. Только голос чуть потише сделать стоит, а то музыку плохо слышно
Не можу загрузити зображення на .userpic , роблю все так само, хоть з іншими фонами все добре, в чому проблема?
Да с узерпиг чот не то. У меня блок справа не встаёт вылезает снизу.
А что за редактор кода у тебя?
Не получается как не колдовал сделать ссілку изменяющей цвет по команде .nav li a:hover, что может быть, сделал все как у вас????
DaYrEn DAYS а попробуй проинспектировать ссылку и если браузер хром то в той области где описание стилей сверху есть кнопочка :hov. Там можно вручную имитировать hover и посмотреть какие стили применяются и что не так.
Что делать если background не работает
Подскажите а как он тег моментально оборачивает в div и class? То есть он пишет просто nav, нажимает на кнопку и там сразу
Называется Emmet, встроенная фича в редакторах. У меня vs code, погугли как пользоваться
Первый сайт хоть он и простой, но я впервые сделал до конца. Потому что у блогеров в начале обьясняют что такое h1 p долго мурыжат а когда уже идет сложно, они как понос бегут и нихера не понятно, 107 часов потрачено из которых половина в пустую
У меня почему то не включается Live Server. Подскажи, пожалуйста, почему? Плагин установил. Видео твое хорошее.
Сложно сказать, посмотри инструкции по свежим видео, может мое уже устарело
обязательно ли навигационные ссылки делать посредством li ?
Kolyan ссылка делается с помощью и использовать li не обязательно. Это просто оболочка которая говорит что у нас "список" таких ссылок
@@temofart насколько ответственно указывать размер шрифта в пикселях? Не вызовет ли это проблемы при разных экранах?
@@grenadier1653 нет, никаких проблем при использовании пикселей нет. Ознакомьтесь с этой статьей:
medium.com/hackernoon/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f
@@temofart Благодарю
@@grenadier1653 хороший вопрос
Как у тебя поучится?
Привет, подскажите пожалуйста в какой программе он пишет код ?
VS Code
@@chickenworld9054 благодарю
Чет прикола не понимаю, все идеально только в .nav li a { transition: background } слово background красным горит. И в sidebar "Skills" не переносится в сам сайдбар...
Красным подсвечивает не просто так. Наведи мышкой и посмотри что будет написано. Возможно забыл точку с запятой на предыдущей линии поставить?
@@temofart .nav li a {
padding: 20px;
display: flex;
text-decoration: none;
color: #404040;
border-right: 1px solid #b1b1b1;
transition: background .3s ease;
}
и вот, что пишет (Shorthand property combines four of the transition properties into a single property.
Syntax: #)
Я извиняюсь, вроде обучения с нуля, а как называется программа на котором ты работаешь?
Vscode
40:20 почему - то не сработал а:hover меняет background только при нажатии. Почему не работает при наведении?
Может это мобильная / планшетная версия? Там такая особенность, что навести пальцем невозможно, только клик, а если в браузере эмулировать эту версию сайта то нужно только кликать. Других причин не знаю
@@temofart Спасибо за ответ.
а зачем в sidebar прописывать ширину = 30%, если уже контейнеру прописал 70% ? Компутер сам посчитает
что за программа?
vs code
Все написал без ошибок, но ничего не отображается на моем сайте, просто белый фон и все, что делать?
Я ж не Ванга чтобы определить) Наверняка ошибка есть, нужно видеть код. Попробуй открыть вручную в браузере тот файл html в котором пишешь код, возможно не тот открыт.
@@temofart та пробовал уже 3 раза, и код по новому переписывал( Даже не знаю в чем проблема
@@phant1k683 если написать в index.html какие-то теги с текстом и открыть этот файл в браузере там по-любому что-то будет.
@@temofart Спасибо, а как сделать для каждой кнопки разный текст?
спасибо!
кинь свой плейлист
Хорошее видео всё чётко только автор самое главное не указал программу на которой он работает ...
Капец из за того что я обнуляющий поставил ниже. padding у меня и не работал, а я думаю, все же переписал а не работает )
Чувак ты ахуенный. Надеюсь не бросишь канал, у тебя все впереди
Ill.Uchiha9 Спасибо, планирую продолжать)
padding:100px 0 ; в body не работает
гг гг не может быть)
Я надеюсь в коде пробела нет перед точкой с запятой ?
@@temofart я тупо conteiner дал margin:50px auto и все ,
@@temofart не было вроде
@@user-qk2ue3vt3o надо margin: 50px;
в какой программе это всё делать?
В любом блокноте. Я использую Sublime Text3
Спасибо , как раз искал что-то подходящие что бы стартануть !
Только пришлось в "reset .css" убрать margin чтобы анимация не дергалась...не знаю почему так , но для первого раза думаю пойдет.
mikebiryu.github.io/Mr.Cat/
Можешь скинуть готовый код архивом?
@@user-hi1xn7rt6v напиши почту скину)
@@TheEegmen vladokzotov@yandex.ru
Здравствуйте, как вы сделали дополнительный переход, что бы переходить о Main info и остальным?
@@kerly3116 не понял о чем вы , если про открытие в новом окне , то - Ссылка откроется в новом окне
28:05 появляется новый div с классом title о котором ты не сказал, долго искал что за хуйня у меня творится...
32:44
ul>li*3>a
=\
Кто не нашел шаблон, вот ссылка для вас - www.php-s.ru/templates/001/
ну это прям для детей
одностраничники не каму не нужны дичь какая то
Необразованные тоже
новичкам лучше не смотреть и не запоминать как делать неграмотно
автор даже сам это признаёт ниже
Да, лучше не смотри
@@temofart те*
Всё даже лёгким языком объяснил он, если вы не можете просто смотреть в видео где объяснили всё подробно то просто закройте видео и идите дальше. Не будьте душнилами.
@@sbmasterart1081 интересно через сколько лет до тебя дойдёт что автор неграмотно делает-показывает
@@user-gk4zw2eh6o до вас *