ВЕРСТКА САЙТА ($70) ВЫПОЛНЯЕМ РЕАЛЬНЫЙ ЗАКАЗ

Подписаться 7 тыс.

Просмотров 68 тыс.

50% 1

🔴🔴🔴 НУЖНЫ МАКЕТЫ ДЛЯ ВЕРСТКИ? 🔴🔴🔴
👉 ТЕЛЕГРАМ-КАНАЛ bit.ly/3sH24jq публикует по 2 крутых макета в день
🔴Скачать макеты и стартовый шаблон: t.me/the_freel...
Привет, в данном видео я показываю на реальном примере ход выполнения верстки сайта , реального заказа на фрилансе.
ПОНРАВИЛОСЬ ВИДЕО - ПОДПИШИСЬ bit.ly/3b4lGFh
👉Подпишись на наш телеграм-канал: bit.ly/3hNeyPC
👉Задай свой вопрос в чате: bit.ly/3hsvD1L
🎓Смотри мой бесплатный курс по верстке и заработай свои первые $100 на фрилансе с нуля. Ссылка на плейлист: • HTML МАРАФОН
ЧАСТЬ 2: • ВЕРСТКА САЙТА ($70) ВЫ...
ЧАСТЬ 3: • ВЕРСТКА САЙТА ($70) ВЫ...
ЧАСТЬ 4: • ВЕРСТКА САЙТА ($70) ВЫ...
ЧАСТЬ 5: • ВЕРСТКА САЙТА ($70) ВЫ...
ЧАСТЬ 6: • ВЕРСТКА САЙТА ($70) ВЫ...
Заранее сорян за звук, на фоне играет музыка, в след. видео ее не будет.
=============
🌐 Хостинг: bit.ly/3juDrka
💰 Фриланс Биржа: bit.ly/2EJFd1Z
=============
🔴RU-vid: bit.ly/3b4lGFh
🔴Instagram: / denchatbots
🔴Facebook: / denchatbots
🔴Telegram: t.me/denchatbots
=============
--| МОИ ДРУГИЕ ВИДЕО | --
Видео Фон Для Текста - • Как вставить видео в т...
Стилизация Чекбокс - • СТИЛИЗАЦИЯ ЧЕКБОКС. Ка...
Текст Заполняется Водой - • Как сделать анимирован...
Поворот При Наведении На 180 Градусов - • Анимация. Поворот при ...
Смена Цвета Картинки На CSS - • Смена Цвета Картинки Н...
#верстка #версткасайта #реальныйзаказ landing page

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

26 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 165

@htmlbookpro 3 года назад

🔴🔴🔴 НУЖНЫ МАКЕТЫ ДЛЯ ВЕРСТКИ? 🔴🔴🔴 👉 ТЕЛЕГРАМ-КАНАЛ bit.ly/3sH24jq публикует по 2 крутых макета в день

@way2win23 4 года назад

Братан продолжай в том же духе для начинающих очень полезно! Лайк + Подписка! Спасибо за твой труд!

@htmlbookpro 4 года назад

Спасибо

@optimax7357 4 года назад

Оболденно делаешь, мне как новичку, больше смотреть на профессионала намного удобнее, запоминается, продолжай в том же духе. буду ждать еще таких видеороликов, пока смотрел, многое для себя узнал :)

@htmlbookpro 4 года назад

Рад стараться

@ibcgi 4 года назад

из за фонового музыки звук плохо слышно

@sergeypetrovetsky3431 4 года назад

Это очень полезно,если хочешь брать заказы.Хоть какой то "вид" для новичка в плане удаленной работы.Спасибо!

@htmlbookpro 4 года назад

Буду почаще такое делать, а также покажу как брать заказы новичкам

@sergeypetrovetsky3431 4 года назад

@@htmlbookpro как раз подмал что надо дописать о том как правильно общаться с заказчкиком чтобы получить работу,и желательно на практическом примере) Буду ждать)

@ShosenProdukt 4 года назад

@@htmlbookpro уже есть такое видео?

@bahtiyaramirshin6395 4 года назад

Конец убил конечно 😂

@htmlbookpro 4 года назад

это прилось обрезать видео из-за музыки, думаю ничего архисложного не вырезал)

@niceman5890 2 года назад

Спасибо! Узнал что - то новое.

@htmlbookpro 4 года назад

Хочешь зарабатывать как я? Подпишись и получай новые видео - ru-vid.com

@ВикторБукин-у3м 2 года назад

Здравствуйте, мне не понятен один момент, почему в начале ролика для текста используется тег а не ?

@Bruce_Waynne 2 года назад

Потому что это не visual code , а другой редактор

@zloyn Год назад

параграфы подходят для большого обьема текста, если там обычные текст ссылки то можно стилизовать спаном

@maxim_hj 2 года назад

Спасибо, что ты есть )

@maxskurski1138 3 года назад

концовка топ

@ghost8652 4 года назад

Лайкос за видос! И подписочка)

@danilaundead4760 3 года назад

Видос топ но музыка громкая , мешает сосредоточиться и лучше запоминать .

@webdev9062 4 года назад

Почему вы не подключаете шрифты через Google Fonts?

@Hello_world_2020A 3 года назад

Не купил он шрифт Почему ??? У клиента будут проблемы

@СнегМороз 3 года назад

Почитал комменты - оборжался с Ваших споров. Особенно смешно то, как "профессионалы\миллионеры, у которых куча времени на споры" обсирают автора

@Unknown-gf5lo 7 месяцев назад

Здравствуйте, я только учусь и у меня возник вопрос а зачем верстать этот сайт если есть уже готовый макет? И дают ли такие макеты в каждом заказе? Спасибо за ответ!

@AkkayHT228 3 года назад

Капец как весело

@mallouny_ 2 года назад

Главное помнить, верстка != программирование )

@soromirdima1686 4 года назад

Для чего flex Элементу ставить width , думаю правильно будет flex:0 0 50%. Если не ошибаюсь , container должен быть не width , а max-width

@htmlbookpro 4 года назад

Согласен, немного привычка осталась)

@fmg-games2537 Год назад

А что верстальщик делает с сайтом потом? точнее, как он его высылает или что то такого?

@ВадимСвирчевский-д8о 3 года назад

Я начинающий программист и хочу задать вопрос, как на 20:04 текст и кнопки обрели стиль если вы его им не задавали?

@206-3 2 года назад

думаю это сделал normalize код который он вставлял в начале

@206-3 2 года назад

4:34 при замедлении можно увидеть

@doomguy591 2 года назад

Где вы этому научились? По курсам или ютуб или книгам?

@DmitryM-e4m 4 года назад

Отличное видео ! Буду следить за новинками. Скажите,пожалуйста, как опыт в верстке у вас ,на момент записи видео?

@htmlbookpro 4 года назад

Если чисто в верстке от лет 12, а в заработке на фрилансе 9 лет

@catrey1 4 года назад

FAQ и "Смотреть видео-приветствие", они же ссылки должны быть.

@htmlbookpro 4 года назад

Нет, FAQ будет обрабатываться jQuery - заменятся текст справа, а видео-приветствие будет всплывающее окно с видео

@catrey1 4 года назад

@@htmlbookpro понял.

@leviakerman9013 2 года назад

Никогда не смогу понять философию пиксель перфекта, макет делают дизайнеры произвольной ширины. А стандартный дисплей сейчас на пк 1920 px в ширину. Это получается что для соответствия нужно в инструментах разработчика ставить необходимую ширину и уже под нее делать пиксель перфект. Неужели есть заказчики которые с линейкой измеряют сколько пикселей где отступ хД

@jizikjizik71 4 года назад

sps очень полезно

@htmlbookpro 4 года назад

Рад

@bykunti 3 года назад

Не могу смотреть засыпаю какую ты мелодию вставил на фон ты нас обучаешь или ….

@annarozova4349 2 года назад

А проекты готовые скидывает сам заказчик?

@Sq_yrw777 3 года назад

Подскажите 1 заказ сложно найти??

@cleancode4046 3 года назад

Здравствуйте! А как вы так быстро подключили шрифты? Скопировать вставить.. не понятно

@АлленХасанов 3 года назад

Вбей в ютуб gulp, канал фрилансер по жизни, прокачаешь свои скиллы

@cleancode4046 3 года назад

@@АлленХасанов gulp я и так знаю просто не заметил как он открыл файл стилей шрифтов и скопировал их

@user-rinat007 3 года назад

Привет, давай учиться вместе и мотивировать друг друга? напиши мне в телеграм. @rinatx07

@htmlbookpro 3 года назад

а вы не пробовали не спамить о своей чудо фирме?😂

@darklight7167 3 года назад

Не понял маленького момента, как у вас сразу контейнер выравнивается по середине, когда вы только задали ширину контейнера, пересматривал эту часть видео несколько раз а так и не понял, буду благодарен за ответ)

@htmlbookpro 3 года назад

когда задаешь margin: 0 auto; то блок который имеет ширину - становится по центру по горизонтали

@darklight7167 3 года назад

@@htmlbookpro спасибо

@Solcheg 3 года назад

Очень иетересно Научи меня, пожалуйста!

@htmlbookpro 3 года назад

ха ха

@РусланИсрапилов-у4в 4 года назад

Js и jquery необходимы?

@htmlbookpro 4 года назад

Ну да)

@Yukrop 3 года назад

Помогите плз , у меня 2к монитор и у меня с изоброжением фона все время что то не так . картинка не до конца при сворачивание окна картинка квадратная

@htmlbookpro 3 года назад

Напиши в чат по ссылке в кописании - помогу. Да при 2к там я не учел один момент

@DeErovRee 2 года назад

Есть пара вопросов после 13 минут просмотра: Семантическую верстку не используете? Заказчики не просят? Почему картинки не в svg экспортируете из макета?

@htmlbookpro 2 года назад

Я это делаю только тогда, когда мне за это платят

@htmlbookpro 2 года назад

Не знать и не использовать - это разные вещи, и даже если мне после сдачи скажут сделать семантику, это дело пары минут, так как все стили завязаны на классах

@ironorion8888 3 года назад

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

@htmlbookpro 3 года назад

небыло толкового микрофона, последние видео уже четко слышно

@verem2900 3 года назад

А зачем ты подключал Bootstrap если ты писал на флексах?

@htmlbookpro 3 года назад

потом его выпилил, не заметил сначала

@SergeyFominVL 3 года назад

что за редактор кода? Там бьютифай по умолчанию установлен?

@АгентГейба-ю1ф 3 года назад

Брекетс

@Alexey_Gri 3 года назад

Как все мелко на экране 19 дюймов, не у всех же мониторы 32, хоть бы шрифт увеличил (((

@daniilthegunner843 4 года назад

Я думал язык надо делать селектом, типа же выбор должен выпадать. Или нет?

@htmlbookpro 4 года назад

выбор будет на дивах, селекты не стилизируются нормально

@daniilthegunner843 4 года назад

@@htmlbookpro а как это на дивах? Тоже что-то типа раскрывающегося списка?

@htmlbookpro 4 года назад

Да

@antonnikonov7379 4 года назад

почему у меня выдает ошибку, а у тебя нет? если я в css прописываю .class{ color: white; span{ color: red; } }

@htmlbookpro 4 года назад

ты используешь LESS?

@verem2900 3 года назад

ты прописуешь вложенность с препроцесоров очевидно что у тебя их просто напрсото нет, сначала подключи его

@dhgchmghm1915 4 года назад

как же это охуенно, спасибо

@xPyc9x 3 года назад

А ЧТО ЗА ЛАЙФ ХАК БЫЛ С ФОНОМ ? ЧЕТ Я НЕ ПОНЯЛ

@АлленХасанов 3 года назад

pixel perfect

@intqwe6271 2 года назад

а долго нужно учится чтобы так же можно было работать ?

@alekseyivanow Год назад

Без js примерно 1-2 месяца, а с js даже не знаю

@sergeyys7149 Год назад

@@alekseyivanow а парень на видео использует только html и css?

@Tonylylven Год назад

музыка мешала постоянно

@ДмитрийИванов-о8щ5т 4 года назад

Сколько в месяц получаешь если не секрет ?

@htmlbookpro 4 года назад

Достаточно для того, чтоб не учить этому делу за деньги)

@sheyh_umar7624 4 года назад

@@htmlbookpro а в цифрах ?) больше 100к ? меньше 200к

@ghost8652 4 года назад

@@htmlbookpro хорошо сказано

@kodyar7081 3 года назад

@@htmlbookpro Не один уважаемый себя человек не скажет об этом, т.к. это не прилично)

@N32-e1g 2 года назад

@@kodyar7081 бред, значит зарабатывает меньше, чем хотелось бы

@NickRuster 2 года назад

на этой бирже меня кинули на 1000$

@eroskaeroska6921 Год назад

Ну, ты и объясняешь - "это сюда", "это туда", "это так", "это вот так", "это не хочу показывать". Нужно точно описывать то, что ты делаешь и о чем думаешь в процессе работы, поменьше номинализаций и всяких обобщений

@Виктор-ж2р2и 4 года назад

Ндаа.. можно кукухой поехать с этим Pixel Perfect.)) Я не думал что его надо соблюдать до такой степени, и заказчики так следят за этим.

@htmlbookpro 4 года назад

Есть заказчики которые следят, есть которые нет. Но с Pixel Perfect проще позиционировать элементы

@АнтонКуклин-и2у 2 года назад

Симатически правильные теги ушли в сторонку?)

@htmlbookpro 2 года назад

Да

@УхТыБоты 2 года назад

и вообще, нахуя это все верстать два дня если уже есть такие шаблоны на конструкторе сайтов, ничего нового?

@zloyn Год назад

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

@МосковскийБоров-к1м 3 года назад

Через что смотреть шблоны?, ну именно как и какие пиксели задавать и тд, именно с помощью какой программы

@htmlbookpro 3 года назад

не понял вопроса

@artemgrunin2011 Год назад

Через avacode или фигму (есть и другие, но эти два самые лучшие) В avacode можно работать со всеми форматами (.psd, .fig, sketch и т.д), но он платный. А фигма принимает только макеты с форматом .fig, но зато она бесплатная)

@dariagrebenyuk8203 4 года назад

А почему не верстаете по БЭМу?

@htmlbookpro 4 года назад

На данном проекте за это не платят, а я не делаю то, за что мне не платят) и вам не советую

@htmlbookpro 4 года назад

@@rarecase3666 не всегда, есть проекты где он не нужен просто

@verem2900 3 года назад

@@htmlbookpro прикол не в оплате а в твоем скилле! БЭМ делает код более качественим.

@nosferatu9042 3 года назад

Слооооожно

@UkraineAb0veAll 4 года назад

Chrome заблокировал скачивание и файла с макетом, и пустого стартового шаблона из-за подозрений на вирусы или что-то другое нехорошее...

@htmlbookpro 4 года назад

кликаешь стрелочку вверх и нажимаешь Сохранить. там просто макет

@htmlbookpro 4 года назад

prntscr.com/uwwc9e

@UkraineAb0veAll 4 года назад

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

@УхТыБоты 2 года назад

что я не хуя не понимаю что с чего начинается

@Rasch999 3 года назад

как мелко все, глаза сломаешь так%

@htmlbookpro 3 года назад

Сейчас качество видео лучше чем раньше, скоро будут крутые уроки в хорошем качестве без косяков) Ведь я также учусь как и вы, только изучаю ютуб и подачу информации)

@Rasch999 3 года назад

@@htmlbookpro я не про кеачество видео) оно вроде норма, шрифт маленький на самом раб столе) а на видео вроде еще меньше получается

@stranger7025 3 года назад

Бл музыку нельзя было сделать еще громче?

@htmlbookpro 3 года назад

это была моя ошибка как начинающего😂

@estaiaisin8119 3 года назад

Некст раз музыку более нормальную подберай ,а не это угнетающию тягомотину!

@АнтонХавалджи 3 года назад

png, не svg?

@htmlbookpro 3 года назад

это к чему?

@АнтонХавалджи 3 года назад

@@htmlbookpro просто интересно, почему не svg. Времени не сильно много заберёт, но приятно.

@gr1n4h 2 года назад

так один page 400$ стоит ты за грошы работаешь

@htmlbookpro 2 года назад

Ок

@Hello_world_2020A 3 года назад

Ты не купил шрифт Почему

@htmlbookpro 3 года назад

зачем?

@Hello_world_2020A 3 года назад

@@htmlbookpro Не все шрифты бесплатные Есть организации которые следят за этим Такое бывает очень редко Могут потом дать штраф

@htmlbookpro 3 года назад

@@Hello_world_2020A это проблемы заказчиков, никто не будет покупать шрифты по 300 баксов

@ZoRTuL-p2n Год назад

а их надо покупать? Не можно через гугл фонтс вставить или скачать?

@zemaxvell8956 3 года назад

Музыка ужасная, аж раздражает, лучше бы ее не вставлял))

@htmlbookpro 3 года назад

ехх, знал бы я это раньше) но я как и вы, учусь постепенно)

@userNerbat 2 года назад

Тема сисек не расскрыта. В итоге Автор понял что-то или нет🤠

@УхТыБоты 2 года назад

и нахрена его верстать если он уже есть, его макет что это?

@zloyn Год назад

да уж, второй раз отвечать, это макет сделанный дизайнерами для фронтендера, в самом этом макете уже видны отступы, размеры, стили, шрифты, все что нужно.

@dt5801 4 года назад

Зачем eot, ttf???

@NEUROSHIMAONE 4 года назад

это расширения шрифтов

@dt5801 4 года назад

@@NEUROSHIMAONE я в курсе, сейчас они не нужны

@verem2900 3 года назад

@@dt5801 да? тогда в explorer будешь наблюдать стандартый шрифт

@dt5801 3 года назад

@@verem2900 ie 9 уже поддерживает woff

@htmlbookpro 3 года назад

пусть себе будет на всякий древний случай, это не влияет на скорость работы сайта

@bogdanvoitovych 4 года назад

Одним словом - Гавнокод

@htmlbookpro 4 года назад

Одним словом идина#уй

@bogdanvoitovych 3 года назад

@@htmlbookpro 🤣🤣🤣 большего от тебя и не следовало ожидать...

@bogdanvoitovych 3 года назад

@@htmlbookpro хамство и невежество, признак слабого человека

@htmlbookpro 3 года назад

@@bogdanvoitovych ну тогда для начала обоснуй свои слова)

@verem2900 3 года назад

Дядь почему так плохо? Даже новичок знает что нужно менять путы в шрифтах усе уже давно знают что нужно делать один контейнер для всего сайта, Боже поключено куча всякой фигни которая сайт тормозит.. 2000 это много для такой роботы!

@htmlbookpro 3 года назад

интересно бы выслушать что именно лишнее подключено в проекте? Бутстрап потом выпилил так как не заметил сначала, что дальше?

@verem2900 3 года назад

@@htmlbookpro ну признай именно эта верстка достаточно плохо сделана, много ошибок. Может сонный может еще что то но очень много ошибок))

@htmlbookpro 3 года назад

Конкретно? Ну и желательно обосновано)

@htmlbookpro 3 года назад

то что уставший, да

@te4enietime854 3 года назад

@@verem2900 если не можешь ничего конкретно сказать по фактам, то зачем начинать критиковать?

@aaffbdefdfab 2 года назад

Нашел такой скрипт, который позволяет хедеру при скролле вниз скрываться, а при скролле вверх появляться. Js я плохо знаю, поэтому прошу помощи тут: как сделать так, чтобы хедер при скролле вверх не сразу появлялся, а только через заданное количество прокрученных пикселей? let lastScroll = 0; const defaultOffset = 200; const header = document.querySelector('.header'); const scrollPosition = () => window.pageYOffset || document.documentElement.scrollTop; const containHide = () => header.classList.contains('hide'); window.addEventListener('scroll', () => { if(scrollPosition() > lastScroll && !containHide() && scrollPosition() > defaultOffset) { //scroll down header.classList.add('hide'); } else if(scrollPosition() < lastScroll && containHide()){ //scroll up header.classList.remove('hide'); } lastScroll = scrollPosition(); })