#1 Вёрстка сайта с нуля (почти для начинающих) | CSS | HTML | JS
HTML-код
- Опубликовано: 14 мар 2023
- В этом видео мы начнём верстать сайт Shopiy на чистом Css & Html.
Яркий, контрастный макет из Fimga при вёрстке которого Вы узнаете много чего нового и полезного, научитесь грамотному DOM и просто хорошо проведете время :)
------------------------------------------------
Мой телеграмм канал в котором файлы урока и файл с нашей версткой: t.me/sidoorenkoIT
Ссылка на макет из видео : www.figma.com/file/MmWflfWvsj...
------------------------------------------------
Free Download: tunetank.com/track/5075-coffe...
Free Download: tunetank.com/track/5124-latin...
Free Download: tunetank.com/track/5019-vibes/
Free Download: tunetank.com/track/3474-cozy-...
Free Download: tunetank.com/track/3499-warm-...
Free Download: tunetank.com/track/5916-loung...
------------------------------------------------
Субскрайб )
Спасибо, мэн, лучший!
Очень приятно наблюдать и учиться!
Спасибо)
@@sidoorenko есть ли возможность с тобой списаться и спросить совета?
Спасибо тебе за полезные уроки по верстке. Надо же набивать практику
вообще я хедеры такие пилю по другому , всё же стараюсь избегать отсупы с помощью margin, я бы кинул навигационку и кнопки в один див, дал бы этому блоку max-width как в макете и соответственно width 100% , дал бы им flex и justify-content: space-between; , будет намного гибче хедер при адаптации.
красава!!!!))))).........
Молодец продолжай я много чего узнал
Спасибо большое ❤️
@@sidoorenko код который ты написал я так понял его
Димон, у меня была одна фигня, из-за которой я не мог найти ошибку в css коде, фигня была в том, что обнуляющие стили в твоем исходном коде, который я нашел в телеге отличаются от того обнуляющего стиля который ты так же кидал в телегу. Как только я все заменил, код стал работать как у тебя, но а так, спасибо огромное что видосики пилишь, так как ты с agency еще не закончил я начал верстать этот. Если что, я только начал, поэтому пишу повторяя за тобой. Плюс гуглю те тэги и селекторы которые не понимаю
Спасибо большое ❤️
Приветствую, можешь ответить на пару вопросиков?
1. Как ты оцениваешь свои знания во фронте?
2. Существуют ли у вас в команде шутки про бекэндеров?
3. Сколькл времени ты потратил на обучение, от полного нуля до первой оффициальной работы?
4. Есть планы перейти в бекэнд?
отличный видос, но если учтёшь пару нюансов,будет вообще супер
во-первых: очень хорошо слышно клавиатуру, а тебя слышно чуть-чуть тиховато
во-вторых: в визуалке шрифт очень маленький, приходится фуллскрин видео открывать чтобы что-то увидеть
Спасибо, учту)
@@sidoorenko и еще, ты в видосе сказал что в тг есть твой нормалайз, но его по -моему там нет
@Sidoorenko Можно ли сделать отступ ровный у item например: column-gap: 53px; что потом last-child'ом не убирать в конце отступ?
Попробуй, а в инспекторе глянешь, можно или нет, по сути, так тоже будет все ок
@@sidoorenko Да, можно
.className + .className
можете пожалуйста в следуюший раз верстать макет на подобие сайта spacex?
А позиционирование через absolute - не оторбазится отрицательно на дальнейшем адаптиве?
Смотря, относительно чего, если absolute в % указано позиционирование, то может влиять, а если в px то скорее всего нет, но опять-таки, все зависит от кейса
И лучше для стилей использовать scss и вместо дивово использовать section. Они быстро работают
Кажется, я секции и так использую по назначению?
Какая же бесячая клава ((( . Почему меню бургер как див а не баттон, и таб индекса нет, как же доступность?
А будет что-то для продолжающих и заканчивающих?)
Впринцепи, этот видос и следующие будут для продолжающих)
зачем явно свг картинки добавлять как пнг?
Добрый вечер, заметил, что у вас не очень хорошее звучание микрофона. Могу предложить сотрудничество, а точнее я буду обрабатывать ваш голос (сразу говорю звуки на заднем фоне исчезнут, голос будет громче, а также речь будет более четкая). За это я возьму совершенно небольшую плату ). Если заинтересовал, то ответьте прямо здесь.
Забавно
@@dojo723А зачем ты нужен, кгода есть Ai за бесплатно?!
@@hegarmolotov1644 Что такое Ai?
@@Bosss509 есть искусственный интеллект от adobe который из плохого звука помогает сделать студийный
@@midge4738 rtx voice ещё имба, ноль шумов
по ходу не смог добавить fonts, ошибку выдает в 2х местах
body {
background-color: #0E0E2C;
font-family:'Montserrat', sans-serif;
color: #FFFFFF;
overflow-x: hidden;
}
и в
.navgation__link {
position: relative;
font-size: 16px;
color: #FFFFFF
font-weight: 400;
}
Если вы брали шрифт тоже с google fonts то могли заметить, что он уже отличается от того сайта что на видео, там немного изменен link подключения, можете мне в тг группе написать, я постараюсь более подробно описать что нужно сделать)
Поделишься своей настройкой данного редактора?
В смысле, код ?
Там у фрилансера по жизни есть настройка саблайма, по нему делал 😅
Где код 👉👈?
сам пиши
@@html_css_it За хлебом уходил?
Чесно говоря не чего не понял
Клацание клавиатуры и чавкание бесит если чесно, есть над чем работать и надо улучшить качество контента...
Звуки клавы мне наоборот заходят, тут уже дело вкуса каждого, а за чавканье согласен, но меня не вообще не бесит
сразу видно.самоучка . что такое БЭМ не в курсе , в container лишние стили , паддинги взял из головы, ужас . Что за стиль такой margin: 0 auto 130 px auto ? для тех кто учиться на его уроках,следует найти другого учителя , этот заведет в тупик
БЭМ это ж вроде методы в JavaScript'e чтобы добавлять обработки событий на кнопки ?)
@@sidoorenko добрый день, бэм это - блок ,элемент - модификатор
Допустим если у тебя есть див, назвал его tittle , в этом блоке у тебя лежит ещё один див и ты назвал его text, это не правильно , ты должен назвать его title__text
Это на самом деле очень важно так как другой разработчик не сможешь читать вложения блоков
Чел прав, обрати внимание на методологию БЭМ. Она тебе в будущем поможет, та и как он сказал след разработчики спокойно поймут твой код@@sidoorenko
А где же js ? ))
Чуть чуть дальше)