#1 Вёрстка сайта с нуля (почти для начинающих) | CSS | HTML | JS
Рет қаралды 22,246
Жыл бұрынВ этом видео мы начнём верстать сайт 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...
------------------------------------------------
Субскрайб )
@haxprofprofof7550 11 ай бұрын
вообще я хедеры такие пилю по другому , всё же стараюсь избегать отсупы с помощью margin, я бы кинул навигационку и кнопки в один див, дал бы этому блоку max-width как в макете и соответственно width 100% , дал бы им flex и justify-content: space-between; , будет намного гибче хедер при адаптации.
@rustammutaev6658 Жыл бұрын
Спасибо, мэн, лучший! Очень приятно наблюдать и учиться!
@sidoorenko Жыл бұрын
Спасибо)
@rustammutaev6658 Жыл бұрын
@@sidoorenko есть ли возможность с тобой списаться и спросить совета?
@Unknown-xh7rz Жыл бұрын
Спасибо тебе за полезные уроки по верстке. Надо же набивать практику
@user-frond-end_dev Жыл бұрын
красава!!!!))))).........
@Alikgame Жыл бұрын
Молодец продолжай я много чего узнал
@sidoorenko Жыл бұрын
Спасибо большое ❤️
@Alikgame Жыл бұрын
@@sidoorenko код который ты написал я так понял его
@tle1net 7 ай бұрын
Димон, у меня была одна фигня, из-за которой я не мог найти ошибку в css коде, фигня была в том, что обнуляющие стили в твоем исходном коде, который я нашел в телеге отличаются от того обнуляющего стиля который ты так же кидал в телегу. Как только я все заменил, код стал работать как у тебя, но а так, спасибо огромное что видосики пилишь, так как ты с agency еще не закончил я начал верстать этот. Если что, я только начал, поэтому пишу повторяя за тобой. Плюс гуглю те тэги и селекторы которые не понимаю
@sidoorenko 7 ай бұрын
Спасибо большое ❤️
@ikn7968 5 ай бұрын
Приветствую, можешь ответить на пару вопросиков? 1. Как ты оцениваешь свои знания во фронте? 2. Существуют ли у вас в команде шутки про бекэндеров? 3. Сколькл времени ты потратил на обучение, от полного нуля до первой оффициальной работы? 4. Есть планы перейти в бекэнд?
@dojo723 Жыл бұрын
@Sidoorenko Можно ли сделать отступ ровный у item например: column-gap: 53px; что потом last-child'ом не убирать в конце отступ?
@sidoorenko Жыл бұрын
Попробуй, а в инспекторе глянешь, можно или нет, по сути, так тоже будет все ок
@dojo723 Жыл бұрын
@@sidoorenko Да, можно
@user-gd5qo2ec6n Жыл бұрын
.className + .className
@artemdenisov2410 Жыл бұрын
отличный видос, но если учтёшь пару нюансов,будет вообще супер во-первых: очень хорошо слышно клавиатуру, а тебя слышно чуть-чуть тиховато во-вторых: в визуалке шрифт очень маленький, приходится фуллскрин видео открывать чтобы что-то увидеть
@sidoorenko Жыл бұрын
Спасибо, учту)
@artemdenisov2410 Жыл бұрын
@@sidoorenko и еще, ты в видосе сказал что в тг есть твой нормалайз, но его по -моему там нет
@HungerGames911 5 ай бұрын
А позиционирование через absolute - не оторбазится отрицательно на дальнейшем адаптиве?
@sidoorenko 5 ай бұрын
Смотря, относительно чего, если absolute в % указано позиционирование, то может влиять, а если в px то скорее всего нет, но опять-таки, все зависит от кейса
@robertzohrabyan3316 3 ай бұрын
можете пожалуйста в следуюший раз верстать макет на подобие сайта spacex?
@ReMiX-lp6ri 3 ай бұрын
И лучше для стилей использовать scss и вместо дивово использовать section. Они быстро работают
@sidoorenko 3 ай бұрын
Кажется, я секции и так использую по назначению?
@sartjhon3300 Жыл бұрын
Какая же бесячая клава ((( . Почему меню бургер как див а не баттон, и таб индекса нет, как же доступность?
@AntonioBenderas Жыл бұрын
А будет что-то для продолжающих и заканчивающих?)
@sidoorenko Жыл бұрын
Впринцепи, этот видос и следующие будут для продолжающих)
@DYETEl Жыл бұрын
Добрый вечер, заметил, что у вас не очень хорошее звучание микрофона. Могу предложить сотрудничество, а точнее я буду обрабатывать ваш голос (сразу говорю звуки на заднем фоне исчезнут, голос будет громче, а также речь будет более четкая). За это я возьму совершенно небольшую плату ). Если заинтересовал, то ответьте прямо здесь.
@dojo723 Жыл бұрын
Забавно
@hegarmolotov1644 Жыл бұрын
@@dojo723А зачем ты нужен, кгода есть Ai за бесплатно?!
@Bosss509 Жыл бұрын
@@hegarmolotov1644 Что такое Ai?
@midge4738 Жыл бұрын
@@Bosss509 есть искусственный интеллект от adobe который из плохого звука помогает сделать студийный
@haxprofprofof7550 11 ай бұрын
@@midge4738 rtx voice ещё имба, ноль шумов
@Dontdonel 4 ай бұрын
зачем явно свг картинки добавлять как пнг?
@user-tl4sc9wz4r Ай бұрын
по ходу не смог добавить 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; }
@sidoorenko Ай бұрын
Если вы брали шрифт тоже с google fonts то могли заметить, что он уже отличается от того сайта что на видео, там немного изменен link подключения, можете мне в тг группе написать, я постараюсь более подробно описать что нужно сделать)
@dev645r Жыл бұрын
Поделишься своей настройкой данного редактора?
@sidoorenko Жыл бұрын
В смысле, код ?
@sidoorenko Жыл бұрын
Там у фрилансера по жизни есть настройка саблайма, по нему делал 😅
@dojo723 Жыл бұрын
Где код 👉👈?
@html_css_it 4 ай бұрын
сам пиши
@dojo723 4 ай бұрын
@@html_css_it За хлебом уходил?
@reallive459 4 ай бұрын
Клацание клавиатуры и чавкание бесит если чесно, есть над чем работать и надо улучшить качество контента...
@greedy100 3 ай бұрын
Звуки клавы мне наоборот заходят, тут уже дело вкуса каждого, а за чавканье согласен, но меня не вообще не бесит
@user-tx3ih9gx6d Ай бұрын
Чесно говоря не чего не понял
@skomggj2437 4 ай бұрын
сразу видно.самоучка . что такое БЭМ не в курсе , в container лишние стили , паддинги взял из головы, ужас . Что за стиль такой margin: 0 auto 130 px auto ? для тех кто учиться на его уроках,следует найти другого учителя , этот заведет в тупик
@sidoorenko 3 ай бұрын
БЭМ это ж вроде методы в JavaScript'e чтобы добавлять обработки событий на кнопки ?)
@skomggj2437 3 ай бұрын
@@sidoorenko добрый день, бэм это - блок ,элемент - модификатор
@skomggj2437 3 ай бұрын
Допустим если у тебя есть див, назвал его tittle , в этом блоке у тебя лежит ещё один див и ты назвал его text, это не правильно , ты должен назвать его title__text
@skomggj2437 3 ай бұрын
Это на самом деле очень важно так как другой разработчик не сможешь читать вложения блоков
@nickshow890 3 ай бұрын
Чел прав, обрати внимание на методологию БЭМ. Она тебе в будущем поможет, та и как он сказал след разработчики спокойно поймут твой код@@sidoorenko
@oleksiipivniev8433 Жыл бұрын
А где же js ? ))
@sidoorenko Жыл бұрын
Чуть чуть дальше)
Александр Ламков — Friendly Frontend
Рет қаралды 29 М.
ВебКадеми | Юрий Ключевский
Рет қаралды 86 М.