Верстка сайта с нуля для начинающих | HTML, Flexbox CSS, Swiper | Создаем сайт веб-студии

Поділитися
Вставка
  • Опубліковано 15 лис 2024

КОМЕНТАРІ • 115

  • @key_a
    @key_a Рік тому +4

    Как же здорово Вы всё объясняете! Легко и просто для восприятия выходит Ваша подача материала ))
    Огромное спасибо за создание этого видео~

  • @ivasuv
    @ivasuv Рік тому +1

    Таких симпатичных людей в сто раз приятнее смотреть и слушать чем иных специалистов 😅

  • @Длятвоейдуши-ь7е

    Благодарю вас дорогая,очень полезная информация!!!))).Я сейчас,как раз начинаю это глубоко изучать и хочу заработать на этом!

  • @АлександрГальмиз-м1ф

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

  • @marinagor
    @marinagor Рік тому +1

    все легко и доступно рассказано, полезная информация!

  • @bortnik__22__sw
    @bortnik__22__sw Рік тому +1

    Круто когда есть такие люди которые всё дословно объясняют. Молодцы😊

  • @xZander79
    @xZander79 9 місяців тому

    Такого УЧИТЕЛЯ я готов слушать БЕСКОНЕЧНО ! .... +300% эффективности обучения (когда слюнки течь перестанут от такой милоты преподавателя) ))))

  • @radzhanzhuatkanov2120
    @radzhanzhuatkanov2120 Рік тому +1

    Обизательно сохраним, спасибо за обзор сайта

  • @ЕленаФ-щ1ш
    @ЕленаФ-щ1ш Рік тому

    Люблю смотреть такие классные видео: все четко, понятно и доступно объясняете. спасибо!

  • @ИгорьПобедитель-ц2г

    Полезные знания, которые помогут заработать много денег, и это очень классно, и супер, вообще молодец

  • @elinalara1752
    @elinalara1752 Рік тому

    О новое видео. Нравится ваша подача знаний. Все очень доступно и понятно.

  • @TV-cy7wz
    @TV-cy7wz Рік тому

    Очень понравилось! Спасибо вам за такие видео на ютубе

  • @ТимофейЗахаров-с1э

    Я как раз новичок в этом деле, спасибо за помощь

  • @АннаПанина-м4л
    @АннаПанина-м4л Рік тому +1

    Легко и просто воспринимается информация. Спасибо за хорошую подачу материала.

  • @anthonyfeodorov1599
    @anthonyfeodorov1599 Рік тому +1

    Все понятно и доходчиво объяснила! Большое спасибо!

  • @dembelsky
    @dembelsky Рік тому +1

    Когда-то пробовал учиться верстке, но забросил. Теперь думаю, что зря...Объясняете понятно и просто!

  • @vovank8977
    @vovank8977 Рік тому

    Скачал уже готовые скрипты. Сделал сам свой сайт. Спасибо за видео!

  • @СергейИванов76
    @СергейИванов76 Рік тому

    Понятно и просто всё объяснили , видео получилось информативным и полезным.

  • @VikaBel40
    @VikaBel40 Рік тому

    Спасибо большое за легкую и интересную инструкцию 😊

  • @JeanaUchiha
    @JeanaUchiha Рік тому

    Спасибо, что так подробно объяснили все тонкости верстки сайта

  • @fomagedov7964
    @fomagedov7964 Рік тому

    Отличная акция, я буду себе регистрировать тоже

  • @Янасташенко-п6ж

    ❤ я даже не думала что достаточно просто пару движений мушкой безумно благодарна за такую информацию❤

    • @j-lewis
      @j-lewis Рік тому +1

      лолшто?

  • @EkaterinaSaydulina
    @EkaterinaSaydulina Рік тому

    спасибо за полезную информацию за то что вы так интересно понятно объяснили спасибо вам большое

  • @perfumer1229
    @perfumer1229 Рік тому +1

    Очень красивое и качественное видео! Продолжайте в том же духе с меня лайкос....

  • @Yaroslav8472
    @Yaroslav8472 Рік тому

    Спасибо за обзор, было очень интересно послушать

  • @etoeernie
    @etoeernie Рік тому +1

    Спасибо за видео!

  • @CityGorsk
    @CityGorsk Рік тому +1

    Интересная альтернатива но не много сложнее, чем через Jquery, но в любом случае, спасибо за подробную, наглядную инструкцию.

  • @МихаилКурилкин-щ5с

    Кстатит, без шуток, давно искал эту информацию, чтобы сделать оригинальный сайт и вот пожалуйста полный гайд!

  • @PearlDpUa
    @PearlDpUa Рік тому

    Дуже детально, дякую!

  • @sergeymickolaenko1161
    @sergeymickolaenko1161 Рік тому

    Казалось бы это неимоверно сложно, но если захотеть то должно получится, спасибо за ваши советы👍👍

    • @j-lewis
      @j-lewis Рік тому

      В начале всё сложно, а потом раз плюнуть, это со всем так.

  • @marykon5
    @marykon5 Рік тому +1

    Почему Вы не пользуетесь плагином, который быстро переносит все классы?

  • @kopchik1000
    @kopchik1000 Рік тому

    Анна вот Вам я верю и готов учиться . Мне правда без надобности но то как вы все подаете подкупает.

  • @EVAEGRES
    @EVAEGRES Рік тому

    Я сейчас,как раз начинаю это глубоко изучать и хочу заработать на этом!

  • @БогданКушнір-к5ы

    HTML - это основа всех современных сайтов.

  • @alenamitrofanova4361
    @alenamitrofanova4361 Рік тому

    Аня скажите пожалуйста, а где можно скачать файл с макетом фигмы? Чтобы сайт с вами по видео сделать:)

  • @andreylagno2372
    @andreylagno2372 Рік тому

    интересное и нужное видео дл тех кто делает верстку сайтов

  • @stalker8828
    @stalker8828 Рік тому

    довольно таки интересное видео

  • @IrinaChernikova90
    @IrinaChernikova90 Рік тому

    Знакомый решил освоить ремесло верстальщика, попросил помочь в этом деле.

  • @sashabest1479
    @sashabest1479 Рік тому +1

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

  • @ДмитрийС-ю8ц
    @ДмитрийС-ю8ц Рік тому

    Никогда бы не подумал, что в 2023 году сделать свой сайт будет не только достаточно легко но ещё и не потребуется почти вложений.

  • @khankhan-oc3ty
    @khankhan-oc3ty Рік тому

    Beautiful

  • @trickyyreal
    @trickyyreal Рік тому

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

  • @АлександрКараванов-д2г

    Самостоятельно трудно и вряд ли получиться. Спасибо за помощь.

  • @andreylatyshev3788
    @andreylatyshev3788 Рік тому

    Блок 🍊

  • @farmlingarchontas2216
    @farmlingarchontas2216 Рік тому

    Хорошая акция. Но выбрать имя сложно... у меня никогда не было таланта подбирать названия.

  • @sergkaskalov3983
    @sergkaskalov3983 Рік тому

    Анна, с какой программой мы делаем урок из этого видео?

  • @nekrartgb
    @nekrartgb Рік тому

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

    • @alext5030
      @alext5030 Рік тому

      А что в нем не так, кроме негуманного веса?

  • @user-korentv85
    @user-korentv85 Рік тому

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

    • @alext5030
      @alext5030 Рік тому

      Нууу... допустим, я могу навелосипедить слайдер (т.е. реально делал), причем даже с синхронной сменой контента в каком-то другом месте страницы одновременно со слайдами. Только зачем мне тратить время на прикручивание к нему всяких наворотов, когда "все уже сделано до нас"?

    • @user-korentv85
      @user-korentv85 Рік тому

      @@alext5030 возможно и так не буду спорить

    • @j-lewis
      @j-lewis Рік тому +1

      Для тренировки да, но для реальной работы лучше нет)

  • @ZPUA24
    @ZPUA24 Рік тому

    Можно еще для надёжности добавить "text-transform: capitalize;", там только в шапке в трёх местах проситься. А адаптив?

    • @umnyicoder
      @umnyicoder Рік тому

      А зачем оно?

    • @ZPUA24
      @ZPUA24 Рік тому +1

      @@umnyicoder По макету видно, что дизайнер подразумевает, что в этих блоках все слова будут начинаться с заглавной. Значит в той же CMS для дальнейшего удобства можно заранее забить это свойством css. Это не обязательно, скорее как хороший тон от верстальщика.

    • @umnyicoder
      @umnyicoder Рік тому

      @@ZPUA24 но ведь не факт, что оно пойдёт в CMS

    • @ZPUA24
      @ZPUA24 Рік тому

      @@umnyicoder Не факт. Это только на усмотрение верстальщика, если конкретно не прописано в ТЗ.

    • @j-lewis
      @j-lewis Рік тому +1

      @@ZPUA24 Интересное замечание, никогда такое не делал, но... it makes sense! TY

  • @podpalmoi
    @podpalmoi Рік тому +2

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

    • @xxxlVladislavlxxx
      @xxxlVladislavlxxx Рік тому

      🤣🤣🤣

    • @monolit-8346
      @monolit-8346 Рік тому +2

      Веб технологии так быстро развиваются, вы всегда найдете что то для начинающих)

    • @виртуоз_ру
      @виртуоз_ру Рік тому

      🤣🤣🤣👍

    • @j-lewis
      @j-lewis Рік тому +1

      Для заканчивающих гуглить видео "Как выйти из айти" 😂

  • @whiteltd5970
    @whiteltd5970 Рік тому

    Очень хочется видеть применение SCSS

    • @виртуоз_ру
      @виртуоз_ру Рік тому +1

      Это уже не модно и смысла нет.
      В css давно уже есть переменные, матиматические вычисления, а миксины заменяются классами.

    • @annblok_webdev
      @annblok_webdev  Рік тому

      Видео с CSS есть в плейлисте с практикой 🙌

    • @j-lewis
      @j-lewis Рік тому

      @@виртуоз_ру Какие же глупости, препроцессоры это не только переменные

    • @Sacar666
      @Sacar666 Рік тому

      @@виртуоз_ру главным идет скорость работы. С препроцессором она в несколько раз выше, чем просто с css. Не говоря уже о всяких фишках типа автопрефиксов и прочего

    • @виртуоз_ру
      @виртуоз_ру Рік тому

      @@Sacar666 Абсолютно не быстрее. Автопрефиксы уже браузерам не нужны. Как 5 лет все браузеры всё понимают. А если тебе внушили, что нужно поддерживать браузеры 20-ти летней давности, которыми уже не пользуются, но вдруг, то это глупости.

  • @sergkaskalov3983
    @sergkaskalov3983 Рік тому

    Swiper 8 или Swiper 9 , есть разница?

    • @umnyicoder
      @umnyicoder Рік тому

      Да вроди нет

    • @sergkaskalov3983
      @sergkaskalov3983 Рік тому

      @@umnyicoder Спасибо!

    • @j-lewis
      @j-lewis Рік тому

      @@umnyicoder Если б не было, то зачем менять версию?))

    • @alext5030
      @alext5030 Рік тому

      @@j-lewis Изменения ради изменения уже 15+ лет как являются краеугольным камнем любого программирования, кроме, разве что, каких-нибудь критических областей (это не про твиттеры, если что). Почти все senior-ы и большинство middle-ов такой подход называют "развитием". Sad, but true. Такая фигня...

    • @j-lewis
      @j-lewis Рік тому

      @@alext5030 Сложно не согласиться, 80% апдейтов фуфел, как вы и описали, но не 100% же. К тому же фуфел обычно клепают в х.* или даже в х.х.* версиях, но это же main update, там должно быть что-то принципиально новое.

  • @Бегущаярысью
    @Бегущаярысью Рік тому

    Почему пиксели?не vw vh?

    • @annblok_webdev
      @annblok_webdev  Рік тому +1

      vw используется в gap, vh можно будет использовать, если работать с адаптивом, чтобы контент по высоте разместился равномерно

  • @СтаниславПотапов-р5о

    46:14-46:22 забыли обрезать

  • @i1nostranec332
    @i1nostranec332 Рік тому

    не понятно зачем такие мучения со стрелочкой в кнопке. Легче ведь в html добавить img и обойтись без позиционирования

    • @annblok_webdev
      @annblok_webdev  Рік тому +1

      Если через img добавить, то свойство stroke не сработает

  • @dimondimonov6417
    @dimondimonov6417 Рік тому

    Вот не понимаю зачем делать переменные цветам. Это трата времени.

    • @j-lewis
      @j-lewis Рік тому +1

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

    • @dimondimonov6417
      @dimondimonov6417 Рік тому

      @@j-lewis Так можно выделить цвет и нажать контр+н и он везде где есть этот цвет заменит на новый

    • @vgshenshin
      @vgshenshin Рік тому

      @@dimondimonov6417 в таком маленьком проекте не заметны плюсы этих переменных

  • @Ricky__Spanish
    @Ricky__Spanish Рік тому

    Да сколько можно уже верстать для начинающих...)

    • @i1nostranec332
      @i1nostranec332 Рік тому

      смысл показывать, что то более сложное? Важна база, если знаешь базу то и все остальное познаешь. Так в любом деле. Я вот более менее познал дзен в CSS и сейчас ни чего толком не смотрю. Зачем? Легко документацию почитать или поэкспериментировать.
      Ну и главное. Есть миллионы людей, которые хотят научиться верстать. Они как правило делают несколько шагов и бросают это гиблое дело. На их место приходят другие. Ну а авторы подобных каналов на них набирают просмотры.
      Ах да. Легко обьяснить, что то более менее простое. Попробуй объяснить хотя бы например как сделать карусель на чистом СSS и JS. Тут уже просмотров будет в разы меньше. Скучноо не понятно, а каналу это не выгодно

    • @annblok_webdev
      @annblok_webdev  Рік тому

      @@i1nostranec332 у меня видео на чистом CSS с каруселью набрало много просмотров)))

    • @i1nostranec332
      @i1nostranec332 Рік тому

      @@annblok_webdev надо что то сложнее, и посмотреть до каких тем дойдете.
      Я тут просто форум читал прогеров, в основном бэкендеров. Так все они с какого то момента своей карьеры начинают смотреть индусов. Просто русскоязычных авторов нет, европейцы и американцы откровенно не тянут и только индусы спасают, обьясняя реально сложные темы для мидлов и сеньеров

    • @j-lewis
      @j-lewis Рік тому +1

      @@i1nostranec332 Всё верно. Лучше и не скажешь. Тем, кто поопытнее, видео с ютьюба редко помогают.

    • @alext5030
      @alext5030 Рік тому

      ​@@i1nostranec332 Только на хабре про индусов такое не пиши в комментах, а то там такая истерика начнется...

  • @madarasan0
    @madarasan0 Рік тому +3

    Даже макет за донат продают, стыд и позор

    • @umnyicoder
      @umnyicoder Рік тому +3

      Скажи спасибо зелибобику за это. Из-за его действий отключили доход чотким ютуберам.

    • @j-lewis
      @j-lewis Рік тому +2

      @@umnyicoder Вы ничего не путаете, случайно?

    • @umnyicoder
      @umnyicoder Рік тому

      @@j-lewis нет, ничего не перепутал

    • @j-lewis
      @j-lewis Рік тому +3

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

    • @j-lewis
      @j-lewis Рік тому +2

      Кстати, один простой, но не всем очевидный совет. НЕЛЬЗЯ использовать свёрстанные точь-в-точь сайты по ютьюб видосам в своём портфолио, велик шанс того, что заказчик или HR уже сто раз видел этот же макет в портфолию других кандидатов, которые также верстали по видео. Следовательно, после вёрстки, нужно менять картинки, цвета и даже переставлять секции местами, что-то убирать, что-то добавлять, менять текст. Короче делать сайт неузнаваемым, как будто это уникальный сайт. Теперь, когда вы знаете всё это, ответьте на вопрос - зачем вам макет, когда можно это делать по ходу?

  • @виртуоз_ру
    @виртуоз_ру Рік тому

    Ну что это за "Верстка сайта", когда она "Вёрстка сайта". Зачем такие глупые ошибки делать. Ты же говоришь не "верстка", а "вЁрстка", но пишешь не грамотно. И не надо мне заливать обратное.

    • @umnyicoder
      @umnyicoder Рік тому

      Душно стало, открой окно

    • @виртуоз_ру
      @виртуоз_ру Рік тому

      @@umnyicoder Глупцам умное читать нельзя. Поднимается температура.