[HTML/CSS] Верстаем очень простой сайт-визитку. Базовые знания для новичков. Верстка сайта с нуля.
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- От начала до конца создаем простейший сайт на основе шаблона, подходит для создания небольшого сайта-визитки или чего-то подобного. Работа скорей для обучения, нежели для реального применения, но знания полученные на подобных макетах позволят в ближайшее время брать более сложные шаблоны.
2022 год студент, спасибо что есть такие люди, которые обучают так прекрасно программированию! Таких бы нам преподователей!)))
За работу с opacity отдельная благодарочка) начал макет верстать сам, без урока, и наткнулся на такую проблему, что текст тоже прозрачным становится,я уже и отдельным элементом делал, чтобы текст не наследовал прозрачность и с z-idnex игрался, и background через rgba пробовал делать, один хрен по тому же месту) ну что же, добра тебе, дядь)
Спасибо тебе добрый человек за это замечательное видео! Я не знаю почему, но ютуб выдал мне твой ролик первым по запросу "Верстка простого сайта", но это просто идеальное видео для начинающих. У тебя отлично получается доходчиво все объяснять и благодаря твоему умению я сделал первый-маленький шажок в верстке, большое спасибо еще раз ))
С меня лайк и подписка)
Блин, все объяснил понятно и коротко. Автору респект 👍
“И в итоге называется неправильным” 😅
Спасибо за урок. Как всегда с юмором и полезностями 😁
Однозначно лайк, спасибо.
Спасибо за урок!
PS: какой Вы красивый🙈
Спасибо☺️
Не можу загрузити зображення на .userpic , роблю все так само, хоть з іншими фонами все добре, в чому проблема?
Да с узерпиг чот не то. У меня блок справа не встаёт вылезает снизу.
Очень классно, самый наверно адекватный обзор, но почему вы остановились и не продолжили наполнять страницы и завершить данный проект? Пожалуйста, я не хочу смотреть других авторов, как создавать страницы, их наполнение, пожалуйста сделайте это.
Спасибо))
Как у тебя поучится?
Классно
Все написал без ошибок, но ничего не отображается на моем сайте, просто белый фон и все, что делать?
Я ж не Ванга чтобы определить) Наверняка ошибка есть, нужно видеть код. Попробуй открыть вручную в браузере тот файл html в котором пишешь код, возможно не тот открыт.
@@temofart та пробовал уже 3 раза, и код по новому переписывал( Даже не знаю в чем проблема
@@Vladsds если написать в index.html какие-то теги с текстом и открыть этот файл в браузере там по-любому что-то будет.
@@temofart Спасибо, а как сделать для каждой кнопки разный текст?
что за программа?
vs code
спасибо!
ну это прям для детей
Чет прикола не понимаю, все идеально только в .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: #)
Я охерел просто. Однозначно лайк и подписка. Увидел, как в живую все это верстается, завораживает, как автор умело быстро пишет код. Есть чему поучиться, спасибо)
На всех роликах этот комент..
Пишу url а он у меня не выделяется, что делать ??
а зачем в sidebar прописывать ширину = 30%, если уже контейнеру прописал 70% ? Компутер сам посчитает
28:05 появляется новый div с классом title о котором ты не сказал, долго искал что за хуйня у меня творится...
Добрый человек, благословений тебе по жизни.
Здравствуйте
Пишу код уже 5 час и на 46 минуте sidebar вообще не работает уже 30 минут сижу
Как можно с вами связаться, очень устал уже 3 часа ночи
Спасибо тебе за твою работу и за время которое ты потратил, чтобы это все сделать и рассказать, мне так помогает!!! Успеха тебе во всем!
привет у тебя есть код? Хотел скопировать, если есть можешь скинуть в соц.сеть?
Первый сайт хоть он и простой, но я впервые сделал до конца. Потому что у блогеров в начале обьясняют что такое h1 p долго мурыжат а когда уже идет сложно, они как понос бегут и нихера не понятно, 107 часов потрачено из которых половина в пустую
У меня почему то не включается Live Server. Подскажи, пожалуйста, почему? Плагин установил. Видео твое хорошее.
Сложно сказать, посмотри инструкции по свежим видео, может мое уже устарело
отличная тема! лайк от вебмастера и гуру по сео и не только СЕООНЛИ
А те сайты которые верстал по вашим видео потом можно использовать во фрилансерком портфолио ?
Спасибо за урок! Сделай еще верстку простого лэндинга, в таком же ритме, для начинающего)
Макс Максимыч хорошо, я думаю вернуться с подобными темами
Спасибо, мне как новичку очень полезно:)
помоги пожалуйста, у меня в sidebare SKILLS почему то относится к .nav ul backgraund. (Название Skills с рамкой от backgraund(( я не понимаю в чем проблема ((
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
не знаешь что за программу он использует?
@@Харя-ю9я visual studio
@@Харя-ю9я VS Code
А как ещё можно вставить картинки? Просто я ставлю в html в title-block картинка та ставится но уже текст на стороне остается,а не на картинке. Подскажите пожалуйста, я хочу загруженную картинку вставлять в css ,а не через интернет.
Подскажите, пожалуйста, что мне делать, если я меняю файл CSS обновляю и стили не применяються?
Возможно вы забыли его подключить в или по указанному пути файла его не существует
Помогите кстати с юрл ссылками на кнопках, хочу чтобы слова не светились и не выделялись синим и фиолетовым цветом, хочется красиво так то оформить кнопки, скажите куда и какую команду нужно вписать??? Очень нужно!!
Да, ваше мнение правильное. Канал является хорошим дополнением ко всем создателям контента или программистам. Спасибо за отличное объяснение. Я подписался на канал
Отличное видео для начинающих. Автору уважение за проделанную работу. 🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
Привет, подскажите пожалуйста в какой программе он пишет код ?
VS Code
@@Feedback576 благодарю
Столько видео роликов посмотрел не помогло, а тут сразу пошло и HTML и CSS сомо собой. Большой респект от кыргызского начинающего девелопера)
а это пойдет как проект на инфу? 9 класс я выбрал создание сайта с использованием кода HTML?
Хорошее видео всё чётко только автор самое главное не указал программу на которой он работает ...
Капец из за того что я обнуляющий поставил ниже. padding у меня и не работал, а я думаю, все же переписал а не работает )
Кто может скинуть на почту готовый код? Я пробывал сделать но остановился на подвале . Рамка просто не отходит от боков сайта.
Хорошее видео, спасибо. Только голос чуть потише сделать стоит, а то музыку плохо слышно
Ты просто супер ! Ты самый идеальный для начинающего фронтендера учитель !
Парень спасибо тебе огромное. Ты не представляешь какой я тупой, но у меня все получилось, делал 3 дня, ещё я узнал что есть среда для разработки вижен студио)). Очень интересно объясняешь, непонятно почему так мало подписчиков??
Что делать если background не работает
одностраничники не каму не нужны дичь какая то
Необразованные тоже
лучшая дикция, все ясно и доходчиво, спасибо вам большое!
Спасибо за видео! Узнал достаточно много нового с видео, удачи)
Не получается как не колдовал сделать ссілку изменяющей цвет по команде .nav li a:hover, что может быть, сделал все как у вас????
DaYrEn DAYS а попробуй проинспектировать ссылку и если браузер хром то в той области где описание стилей сверху есть кнопочка :hov. Там можно вручную имитировать hover и посмотреть какие стили применяются и что не так.
Спасибо за классный урок !!!!
Подскажите а как он тег моментально оборачивает в div и class? То есть он пишет просто nav, нажимает на кнопку и там сразу
Называется Emmet, встроенная фича в редакторах. У меня vs code, погугли как пользоваться
32:44
ul>li*3>a
=\
Благодарю , это было познавательно 👍
Cпасибо! Полезно и очень понятно! Очень помогло!
Спасибо, все просто и понятно! Установил для себя представление выстраивания )
полезное видео. Пожелание - фоновую музыку потише
Спасибо , как раз искал что-то подходящие что бы стартануть !
Только пришлось в "reset .css" убрать margin чтобы анимация не дергалась...не знаю почему так , но для первого раза думаю пойдет.
mikebiryu.github.io/Mr.Cat/
Можешь скинуть готовый код архивом?
@@ВладиславЗотов-к4с напиши почту скину)
@@TheEegmen vladokzotov@yandex.ru
Здравствуйте, как вы сделали дополнительный переход, что бы переходить о Main info и остальным?
@@kerly3116 не понял о чем вы , если про открытие в новом окне , то - Ссылка откроется в новом окне
Кто не нашел шаблон, вот ссылка для вас - www.php-s.ru/templates/001/
А что за редактор кода у тебя?
Я извиняюсь, вроде обучения с нуля, а как называется программа на котором ты работаешь?
Vscode
обязательно ли навигационные ссылки делать посредством li ?
Kolyan ссылка делается с помощью и использовать li не обязательно. Это просто оболочка которая говорит что у нас "список" таких ссылок
@@temofart насколько ответственно указывать размер шрифта в пикселях? Не вызовет ли это проблемы при разных экранах?
@@grenadier1653 нет, никаких проблем при использовании пикселей нет. Ознакомьтесь с этой статьей:
medium.com/hackernoon/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f
@@temofart Благодарю
@@grenadier1653 хороший вопрос
padding:100px 0 ; в body не работает
гг гг не может быть)
Я надеюсь в коде пробела нет перед точкой с запятой ?
@@temofart я тупо conteiner дал margin:50px auto и все ,
@@temofart не было вроде
@@гггг-щ9е надо margin: 50px;
кинь свой плейлист
По моему лучшее объяснение для новичков что я встретил. Однозначно лайк
Большое спасибо
Спасибо!
Хорошая работа, друг, без сомнения, программирование - лучшее!
Спасибо.🙂
40:20 почему - то не сработал а:hover меняет background только при нажатии. Почему не работает при наведении?
Может это мобильная / планшетная версия? Там такая особенность, что навести пальцем невозможно, только клик, а если в браузере эмулировать эту версию сайта то нужно только кликать. Других причин не знаю
@@temofart Спасибо за ответ.
Порядочный пример создания странички .)
Хотелось бы продолжения:)
Спасибо
Обьяснил все понятно.
очень круто)
Спасибо
удачи вам в развитии
Мощно! Благодарю!!
Спасибо, все объяснил понятно и коротко!
в какой программе это всё делать?
В любом блокноте. Я использую Sublime Text3
Чувак ты ахуенный. Надеюсь не бросишь канал, у тебя все впереди
Ill.Uchiha9 Спасибо, планирую продолжать)
Ваааау! Спасибо тебе большое! Так доходчиво и не спеша все рассказал и показал! Потрясающе!
новичкам лучше не смотреть и не запоминать как делать неграмотно
автор даже сам это признаёт ниже
Да, лучше не смотри
@@temofart те*
Всё даже лёгким языком объяснил он, если вы не можете просто смотреть в видео где объяснили всё подробно то просто закройте видео и идите дальше. Не будьте душнилами.
@@sbmasterart1081 интересно через сколько лет до тебя дойдёт что автор неграмотно делает-показывает
@@Александр-н8х7н до вас *