Тёмный

[HTML/CSS] Верстаем очень простой сайт-визитку. Базовые знания для новичков. Верстка сайта с нуля. 

temofart
Подписаться 3,5 тыс.
Просмотров 68 тыс.
50% 1

От начала до конца создаем простейший сайт на основе шаблона, подходит для создания небольшого сайта-визитки или чего-то подобного. Работа скорей для обучения, нежели для реального применения, но знания полученные на подобных макетах позволят в ближайшее время брать более сложные шаблоны.

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

 

22 сен 2019

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 139   
@mmisha22
@mmisha22 4 года назад
Спасибо тебе добрый человек за это замечательное видео! Я не знаю почему, но ютуб выдал мне твой ролик первым по запросу "Верстка простого сайта", но это просто идеальное видео для начинающих. У тебя отлично получается доходчиво все объяснять и благодаря твоему умению я сделал первый-маленький шажок в верстке, большое спасибо еще раз )) С меня лайк и подписка)
@rettjaconomaili8201
@rettjaconomaili8201 3 года назад
лучшая дикция, все ясно и доходчиво, спасибо вам большое!
@kichipim1281
@kichipim1281 Год назад
2022 год студент, спасибо что есть такие люди, которые обучают так прекрасно программированию! Таких бы нам преподователей!)))
@Python_in_UA
@Python_in_UA 2 года назад
Добрый человек, благословений тебе по жизни.
@Hanna_1648
@Hanna_1648 4 года назад
“И в итоге называется неправильным” 😅 Спасибо за урок. Как всегда с юмором и полезностями 😁
@johnnylk7966
@johnnylk7966 3 года назад
По моему лучшее объяснение для новичков что я встретил. Однозначно лайк
@user-gg1ez8db2u
@user-gg1ez8db2u 4 года назад
Блин, все объяснил понятно и коротко. Автору респект 👍
@usamaalrody2
@usamaalrody2 4 года назад
Да, ваше мнение правильное. Канал является хорошим дополнением ко всем создателям контента или программистам. Спасибо за отличное объяснение. Я подписался на канал
@pioner_keybeatz7135
@pioner_keybeatz7135 2 года назад
Спасибо, все просто и понятно! Установил для себя представление выстраивания )
@egoregoroff104
@egoregoroff104 4 года назад
Спасибо, мне как новичку очень полезно:)
@reinaldojb8985
@reinaldojb8985 4 года назад
Хорошая работа, друг, без сомнения, программирование - лучшее!
@user-ey8gr3ml7c
@user-ey8gr3ml7c 4 года назад
Спасибо, все объяснил понятно и коротко!
@user-zx3bm1dn6x
@user-zx3bm1dn6x Год назад
Спасибо за видео! Узнал достаточно много нового с видео, удачи)
@ste5aha654
@ste5aha654 Год назад
За работу с opacity отдельная благодарочка) начал макет верстать сам, без урока, и наткнулся на такую проблему, что текст тоже прозрачным становится,я уже и отдельным элементом делал, чтобы текст не наследовал прозрачность и с z-idnex игрался, и background через rgba пробовал делать, один хрен по тому же месту) ну что же, добра тебе, дядь)
@ZhanaraAitanova
@ZhanaraAitanova Год назад
Ты просто супер ! Ты самый идеальный для начинающего фронтендера учитель !
@user-zw9mp2fd7d
@user-zw9mp2fd7d Год назад
Спасибо тебе за твою работу и за время которое ты потратил, чтобы это все сделать и рассказать, мне так помогает!!! Успеха тебе во всем!
@flaryos9325
@flaryos9325 Год назад
привет у тебя есть код? Хотел скопировать, если есть можешь скинуть в соц.сеть?
@user-tx3bm4cl2g
@user-tx3bm4cl2g 4 года назад
Я охерел просто. Однозначно лайк и подписка. Увидел, как в живую все это верстается, завораживает, как автор умело быстро пишет код. Есть чему поучиться, спасибо)
@alexpetrov521
@alexpetrov521 Год назад
На всех роликах этот комент..
@user-pp3cv4nz4n
@user-pp3cv4nz4n 3 года назад
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
@user-qk2ve8ys2d 2 года назад
не знаешь что за программу он использует?
@user-pp3cv4nz4n
@user-pp3cv4nz4n 2 года назад
@@user-qk2ve8ys2d visual studio
@8TieR
@8TieR Год назад
@@user-qk2ve8ys2d VS Code
@ua7230
@ua7230 Год назад
Благодарю , это было познавательно 👍
@user-qw9uo4wo5p
@user-qw9uo4wo5p 2 года назад
Мощно! Благодарю!!
@a.viktor2947
@a.viktor2947 4 года назад
Порядочный пример создания странички .)
@user-qj3xx4gv2o
@user-qj3xx4gv2o Год назад
Cпасибо! Полезно и очень понятно! Очень помогло!
@quizilizi
@quizilizi Год назад
Спасибо за классный урок !!!!
@jbbaatyrbekov2739
@jbbaatyrbekov2739 2 года назад
Столько видео роликов посмотрел не помогло, а тут сразу пошло и HTML и CSS сомо собой. Большой респект от кыргызского начинающего девелопера)
@antonmolchanov9327
@antonmolchanov9327 3 года назад
Ваааау! Спасибо тебе большое! Так доходчиво и не спеша все рассказал и показал! Потрясающе!
@dimanwostock
@dimanwostock 3 года назад
Спасибо Обьяснил все понятно.
@user-bk7qe3jr1j
@user-bk7qe3jr1j 4 года назад
Однозначно лайк, спасибо.
@seoonlyRU
@seoonlyRU 2 года назад
отличная тема! лайк от вебмастера и гуру по сео и не только СЕООНЛИ
@user-sg9tu2wu7e
@user-sg9tu2wu7e 4 года назад
удачи вам в развитии
@gerompauel
@gerompauel 3 года назад
Хотелось бы продолжения:)
@alekse7433
@alekse7433 3 года назад
Парень спасибо тебе огромное. Ты не представляешь какой я тупой, но у меня все получилось, делал 3 дня, ещё я узнал что есть среда для разработки вижен студио)). Очень интересно объясняешь, непонятно почему так мало подписчиков??
@jackbutler2156
@jackbutler2156 3 года назад
очень круто)
@antresolweb
@antresolweb 2 года назад
Отличное видео для начинающих. Автору уважение за проделанную работу. 🤝👍💪 У меня тоже есть пример создания сайта в блокноте попроще конечно, но по шагам с исходником и коментами для скачивания. Кому интересно, забирайте.
@tou.f6016
@tou.f6016 4 года назад
Спасибо))
@angelinano903
@angelinano903 Год назад
Большое спасибо
@Makswell-oo5gu
@Makswell-oo5gu 3 года назад
Спасибо за урок! Сделай еще верстку простого лэндинга, в таком же ритме, для начинающего)
@temofart
@temofart 3 года назад
Макс Максимыч хорошо, я думаю вернуться с подобными темами
@dimitrybobkov9577
@dimitrybobkov9577 2 года назад
А те сайты которые верстал по вашим видео потом можно использовать во фрилансерком портфолио ?
@mikedkry
@mikedkry Год назад
Спасибо!
@user-mw2pk2hz9o
@user-mw2pk2hz9o 3 года назад
Спасибо за урок! PS: какой Вы красивый🙈
@temofart
@temofart 3 года назад
Спасибо☺️
@wiktorzhak2862
@wiktorzhak2862 Год назад
Спасибо.🙂
@evgenm4756
@evgenm4756 3 года назад
Спасибо
@wallet666
@wallet666 2 года назад
Хорошее видео, спасибо. Только голос чуть потише сделать стоит, а то музыку плохо слышно
@Foromantik21
@Foromantik21 4 года назад
Классно
@Vulpes_91
@Vulpes_91 3 года назад
полезное видео. Пожелание - фоновую музыку потише
@user-hk1ed4zd3j
@user-hk1ed4zd3j 2 года назад
а это пойдет как проект на инфу? 9 класс я выбрал создание сайта с использованием кода HTML?
@ill.uchiha9938
@ill.uchiha9938 4 года назад
Чувак ты ахуенный. Надеюсь не бросишь канал, у тебя все впереди
@temofart
@temofart 4 года назад
Ill.Uchiha9 Спасибо, планирую продолжать)
@kichipim1281
@kichipim1281 Год назад
Помогите кстати с юрл ссылками на кнопках, хочу чтобы слова не светились и не выделялись синим и фиолетовым цветом, хочется красиво так то оформить кнопки, скажите куда и какую команду нужно вписать??? Очень нужно!!
@sbmasterart1081
@sbmasterart1081 Год назад
А как ещё можно вставить картинки? Просто я ставлю в html в title-block картинка та ставится но уже текст на стороне остается,а не на картинке. Подскажите пожалуйста, я хочу загруженную картинку вставлять в css ,а не через интернет.
@borodyy
@borodyy Год назад
помоги пожалуйста, у меня в sidebare SKILLS почему то относится к .nav ul backgraund. (Название Skills с рамкой от backgraund(( я не понимаю в чем проблема ((
@user-xl9bm9wf8h
@user-xl9bm9wf8h 4 года назад
спасибо!
@user-ov3gf3jn3g
@user-ov3gf3jn3g Год назад
А что за редактор кода у тебя?
@flaryos9325
@flaryos9325 Год назад
Здравствуйте Пишу код уже 5 час и на 46 минуте sidebar вообще не работает уже 30 минут сижу Как можно с вами связаться, очень устал уже 3 часа ночи
@adrianj1703
@adrianj1703 3 года назад
Очень классно, самый наверно адекватный обзор, но почему вы остановились и не продолжили наполнять страницы и завершить данный проект? Пожалуйста, я не хочу смотреть других авторов, как создавать страницы, их наполнение, пожалуйста сделайте это.
@olegkiselev6262
@olegkiselev6262 Год назад
Как у тебя поучится?
@alekse7433
@alekse7433 3 года назад
Пишу url а он у меня не выделяется, что делать ??
@user-jv1vi3ti6v
@user-jv1vi3ti6v Год назад
У меня почему то не включается Live Server. Подскажи, пожалуйста, почему? Плагин установил. Видео твое хорошее.
@temofart
@temofart Год назад
Сложно сказать, посмотри инструкции по свежим видео, может мое уже устарело
@alphabetta3740
@alphabetta3740 3 года назад
Кто может скинуть на почту готовый код? Я пробывал сделать но остановился на подвале . Рамка просто не отходит от боков сайта.
@user-ne9cw6dq2x
@user-ne9cw6dq2x 3 года назад
Не можу загрузити зображення на .userpic , роблю все так само, хоть з іншими фонами все добре, в чому проблема?
@romannaumenko8292
@romannaumenko8292 2 года назад
Да с узерпиг чот не то. У меня блок справа не встаёт вылезает снизу.
@sashkashibitskiy
@sashkashibitskiy 2 года назад
Что делать если background не работает
@Hol1y9
@Hol1y9 3 года назад
Подскажите, пожалуйста, что мне делать, если я меняю файл CSS обновляю и стили не применяються?
@artemkravchenko6210
@artemkravchenko6210 3 года назад
Возможно вы забыли его подключить в или по указанному пути файла его не существует
@bikoza
@bikoza Год назад
Подскажите а как он тег моментально оборачивает в div и class? То есть он пишет просто nav, нажимает на кнопку и там сразу
@temofart
@temofart Год назад
Называется Emmet, встроенная фича в редакторах. У меня vs code, погугли как пользоваться
@serg-k
@serg-k 3 года назад
Первый сайт хоть он и простой, но я впервые сделал до конца. Потому что у блогеров в начале обьясняют что такое h1 p долго мурыжат а когда уже идет сложно, они как понос бегут и нихера не понятно, 107 часов потрачено из которых половина в пустую
@user-xk7rs4ls1v
@user-xk7rs4ls1v Год назад
Хорошее видео всё чётко только автор самое главное не указал программу на которой он работает ...
@ci4417
@ci4417 Год назад
кинь свой плейлист
@Andreydntu
@Andreydntu 3 года назад
Не получается как не колдовал сделать ссілку изменяющей цвет по команде .nav li a:hover, что может быть, сделал все как у вас????
@temofart
@temofart 3 года назад
DaYrEn DAYS а попробуй проинспектировать ссылку и если браузер хром то в той области где описание стилей сверху есть кнопочка :hov. Там можно вручную имитировать hover и посмотреть какие стили применяются и что не так.
@serg-k
@serg-k 3 года назад
Капец из за того что я обнуляющий поставил ниже. padding у меня и не работал, а я думаю, все же переписал а не работает )
@grenadier1653
@grenadier1653 4 года назад
обязательно ли навигационные ссылки делать посредством li ?
@temofart
@temofart 4 года назад
Kolyan ссылка делается с помощью и использовать li не обязательно. Это просто оболочка которая говорит что у нас "список" таких ссылок
@grenadier1653
@grenadier1653 4 года назад
@@temofart насколько ответственно указывать размер шрифта в пикселях? Не вызовет ли это проблемы при разных экранах?
@temofart
@temofart 4 года назад
@@grenadier1653 нет, никаких проблем при использовании пикселей нет. Ознакомьтесь с этой статьей: medium.com/hackernoon/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f
@grenadier1653
@grenadier1653 4 года назад
@@temofart Благодарю
@user-qk2ue3vt3o
@user-qk2ue3vt3o 4 года назад
@@grenadier1653 хороший вопрос
@suxxtome
@suxxtome 2 года назад
Чет прикола не понимаю, все идеально только в .nav li a { transition: background } слово background красным горит. И в sidebar "Skills" не переносится в сам сайдбар...
@temofart
@temofart 2 года назад
Красным подсвечивает не просто так. Наведи мышкой и посмотри что будет написано. Возможно забыл точку с запятой на предыдущей линии поставить?
@suxxtome
@suxxtome 2 года назад
@@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: #)
@user-tq5ev8vp2x
@user-tq5ev8vp2x 2 года назад
Привет, подскажите пожалуйста в какой программе он пишет код ?
@chickenworld9054
@chickenworld9054 Год назад
VS Code
@user-tq5ev8vp2x
@user-tq5ev8vp2x Год назад
@@chickenworld9054 благодарю
@sultankeneev8093
@sultankeneev8093 2 года назад
Я извиняюсь, вроде обучения с нуля, а как называется программа на котором ты работаешь?
@temofart
@temofart 2 года назад
Vscode
@user-ne6ho8zg6o
@user-ne6ho8zg6o Год назад
40:20 почему - то не сработал а:hover меняет background только при нажатии. Почему не работает при наведении?
@temofart
@temofart Год назад
Может это мобильная / планшетная версия? Там такая особенность, что навести пальцем невозможно, только клик, а если в браузере эмулировать эту версию сайта то нужно только кликать. Других причин не знаю
@user-ne6ho8zg6o
@user-ne6ho8zg6o Год назад
@@temofart Спасибо за ответ.
@olegonkos
@olegonkos 3 месяца назад
а зачем в sidebar прописывать ширину = 30%, если уже контейнеру прописал 70% ? Компутер сам посчитает
@phant1k683
@phant1k683 Год назад
Все написал без ошибок, но ничего не отображается на моем сайте, просто белый фон и все, что делать?
@temofart
@temofart Год назад
Я ж не Ванга чтобы определить) Наверняка ошибка есть, нужно видеть код. Попробуй открыть вручную в браузере тот файл html в котором пишешь код, возможно не тот открыт.
@phant1k683
@phant1k683 Год назад
@@temofart та пробовал уже 3 раза, и код по новому переписывал( Даже не знаю в чем проблема
@temofart
@temofart Год назад
@@phant1k683 если написать в index.html какие-то теги с текстом и открыть этот файл в браузере там по-любому что-то будет.
@phant1k683
@phant1k683 Год назад
@@temofart Спасибо, а как сделать для каждой кнопки разный текст?
@user-qk2ue3vt3o
@user-qk2ue3vt3o 4 года назад
padding:100px 0 ; в body не работает
@temofart
@temofart 4 года назад
гг гг не может быть)
@temofart
@temofart 4 года назад
Я надеюсь в коде пробела нет перед точкой с запятой ?
@user-qk2ue3vt3o
@user-qk2ue3vt3o 4 года назад
@@temofart я тупо conteiner дал margin:50px auto и все ,
@user-qk2ue3vt3o
@user-qk2ue3vt3o 4 года назад
@@temofart не было вроде
@feelyt8134
@feelyt8134 4 года назад
@@user-qk2ue3vt3o надо margin: 50px;
@wertuuughost7337
@wertuuughost7337 3 года назад
что за программа?
@vasya8696
@vasya8696 3 года назад
vs code
@xlamara721
@xlamara721 4 года назад
в какой программе это всё делать?
@markgrigoriev2338
@markgrigoriev2338 3 года назад
В любом блокноте. Я использую Sublime Text3
@TheEegmen
@TheEegmen 3 года назад
Спасибо , как раз искал что-то подходящие что бы стартануть ! Только пришлось в "reset .css" убрать margin чтобы анимация не дергалась...не знаю почему так , но для первого раза думаю пойдет. mikebiryu.github.io/Mr.Cat/
@user-hi1xn7rt6v
@user-hi1xn7rt6v 3 года назад
Можешь скинуть готовый код архивом?
@TheEegmen
@TheEegmen 3 года назад
@@user-hi1xn7rt6v напиши почту скину)
@user-hi1xn7rt6v
@user-hi1xn7rt6v 3 года назад
@@TheEegmen vladokzotov@yandex.ru
@kerly3116
@kerly3116 3 года назад
Здравствуйте, как вы сделали дополнительный переход, что бы переходить о Main info и остальным?
@TheEegmen
@TheEegmen 3 года назад
@@kerly3116 не понял о чем вы , если про открытие в новом окне , то - Ссылка откроется в новом окне
@marvolo9770
@marvolo9770 Год назад
28:05 появляется новый div с классом title о котором ты не сказал, долго искал что за хуйня у меня творится...
@taran22eight
@taran22eight 2 года назад
32:44 ul>li*3>a =\
@dkfire7636
@dkfire7636 3 года назад
Кто не нашел шаблон, вот ссылка для вас - www.php-s.ru/templates/001/
@user-mn2po8ns2z
@user-mn2po8ns2z 2 года назад
ну это прям для детей
@user-hu1kz1qe9l
@user-hu1kz1qe9l 2 года назад
одностраничники не каму не нужны дичь какая то
@temofart
@temofart 2 года назад
Необразованные тоже
@user-gk4zw2eh6o
@user-gk4zw2eh6o Год назад
новичкам лучше не смотреть и не запоминать как делать неграмотно автор даже сам это признаёт ниже
@temofart
@temofart Год назад
Да, лучше не смотри
@user-gk4zw2eh6o
@user-gk4zw2eh6o Год назад
@@temofart те*
@sbmasterart1081
@sbmasterart1081 Год назад
Всё даже лёгким языком объяснил он, если вы не можете просто смотреть в видео где объяснили всё подробно то просто закройте видео и идите дальше. Не будьте душнилами.
@user-gk4zw2eh6o
@user-gk4zw2eh6o Год назад
@@sbmasterart1081 интересно через сколько лет до тебя дойдёт что автор неграмотно делает-показывает
@sbmasterart1081
@sbmasterart1081 Год назад
@@user-gk4zw2eh6o до вас *
Далее
СКУФИЗАЦИЯ ЗА 4 МЕСЯЦА
00:16
Просмотров 978 тыс.
where is the ball to play this?😳⚽
00:13
Просмотров 2,9 млн
СКУФИЗАЦИЯ ЗА 4 МЕСЯЦА
00:16
Просмотров 978 тыс.