Верстка простого сайта с нуля для начинающих 🔥 HTML, SCSS, VS Code, Figma

✅ Надежный хостинг FirstVDS! Скидка 25% на первый месяц на любой тариф: https://firstvds.ru/s/tpv1504

🔥 Конкурс в рамках видео:
Cкидывайте ваши варианты сверстанного адаптива этого макета ссылкой на Github или Gitlab (архивы не принимаю) на почту info@tpverstak.ru с темой письма PAKKO. Работы принимаются до 30 апреля включительно.

После 30 апреля мы подведем итог.
Я выберу несколько работ и далее мы вместе определимся с победителем, если выбрать будет сложно среди нескольких вариантов. Если работ будет мало за это время, сделанные тяп-ляп, то конкурс аннулируется. Цель конкурса показать альтернативное видение сверстанного макета от и до + адаптив.

🤗 Победитель получит:
– Отправленные 5000 рублей на карту
– Добавлю вашу ссылку с работой в описание к видео.

Макет – https://www.figma.com/file/f4Lu6ypvtf8JKHU899vjsF/Pakko-Copy?node-id=2%3A2 (чтобы управлять слоями, сделайте дубликат документа перед началом работы)
Верстка из видео – https://github.com/annblok/Pakko
Шрифт – https://fonts.google.com/specimen/Inter?query=inter
Normilize CSS – https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

Таймкоды:
00:00:00 Вступление
00:00:32 Реклама
00:01:40 Верстка шапки
00:20:57 Верстка остальной части
01:05:52 Конкурс

✅ Instagram — https://www.instagram.com/annblok/
✅ TikTok — https://www.tiktok.com/@annblok_webdev
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

✅ Поддержать канал — https://www.youtube.com/channel/UCn5wduCq2Mus0v85QZn9IaA/join

Обучение Frontend-разработке — https://frontendblok.com/
Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru

source by Анна Блок

html code

Mourad ELGORMA

Mourad ELGORMA

Fondateur de summarynetworks, passionné des nouvelles technologies et des métiers de Réseautique , Master en réseaux et système de télécommunications. ,j’ai affaire à Pascal, Delphi, Java, MATLAB, php …Connaissance du protocole TCP / IP, des applications Ethernet, des WLAN …Planification, installation et dépannage de problèmes de réseau informatique……Installez, configurez et dépannez les périphériques Cisco IOS. Surveillez les performances du réseau et isolez les défaillances du réseau. VLANs, protocoles de routage (RIPv2, EIGRP, OSPF.)…..Manipuler des systèmes embarqués (matériel et logiciel ex: Beaglebone Black)…Linux (Ubuntu, kali, serveur Mandriva Fedora, …). Microsoft (Windows, Windows Server 2003). ……Paquet tracer, GNS3, VMware Workstation, Virtual Box, Filezilla (client / serveur), EasyPhp, serveur Wamp,Le système de gestion WORDPRESS………Installation des caméras de surveillance ( technologie hikvision DVR………..). ,

26 réflexions sur “Верстка простого сайта с нуля для начинающих 🔥 HTML, SCSS, VS Code, Figma

  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Анна – наша Маотвина! Строгая,конкретная и без излишней болтовни!!! При виде Вас – сразу ставлю Лайк,а потом смотрю!!!

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Cпасибо за видео! Есть пару вопросов:
    1) Правильно ли я понимаю, что при использовании rem за одну его единицу будет всегда браться значение font-size указанное именно в html, а не body (не смотря на то, что body идет после html?
    2) При использовании плагина PixelPerfect все же видно, что не все встает ровно по макету. Это не считается критичным и можно сказать, что верстка сделана пиксель в пиксель?

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

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

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Я прошлый ещё доделываю, а тут новый) Здорово! Тот увидел только неделю назад и пришлось напрячься нехило) теперь, надеюсь, полегче будет) Времени, всяко, больше будет)

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Перезапускать VS Code не обязательно, достаточно в рабочем поле нажать правой кнопкой мыши и выбрать "Open with Live Server"

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Ань, не сложновато ли для первого сайта? Ты класная и умница, но может надо так: открываем блокнот – создаём новый файл – сохраняем как html – …..

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Знаете в чем проблема в верстке и программировании?
    Когда ты знаешь 50+ вариантов того как можно что-то сделать, то самое сложное это выбрать какой способ лучше =)

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    а зачем margin и padding если ты используешь flex? и кода будет меньше. я кстати недавно экспериментировал и выяснял можно ли сделать полностью адаптивный шаблон (не резиновый, а именно адаптивный) без использования @media, оказывается даже если комбинировать возможности grid и flex, не под все экраны можно подстроиться без @media, но под большинство можно =)
    а еще я обычно не делаю обёртку вокруг обёртки вокруг элементов и использую hsla для задания цвета, это сильно уменьшает количество кода за счет того что можно задать только 1 базовый цвет, а остальные под него подстраиваются – люблю минимум кода =)

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    вот зачем эта бубуйня с вырезом округлости для tarif-item? можно же просто сразу весь фон из трех элементов сохранить и всё. я так сделал – поторопился видимо. или есть какое то объяснение почему в данном случае возня с вырезанием псевдоэлемента лучше чем скопировать весь фон для tarif-header целиком?

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Добрый день
    Прошу помощи) Я новичок в этой сфере) с плагином "Go Live" не работала, с начала верстки все было ок, а потом что-то произошло…какие бы стили я не писала – ни чего не меняется на странице…В чем ошибка?

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

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

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Она просто восхищается эстетикой Даниила Степнова, вот так вот и получился сайт xD

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    Доброго дня! Отправили Ваш на почту предложение о сотрудничестве. (ConveyThis)

    Répondre
  • Avatar
    avril 23, 2021 à 9:24
    Permalien

    🔥 Конкурс в рамках видео:
    Cкидывайте ваши варианты сверстанного адаптива этого макета ссылкой на Github или Gitlab (архивы не принимаю) на почту info@tpverstak.ru с темой письма PAKKO. Работы принимаются до 30 апреля включительно.

    После 30 апреля мы подведем итог.
    Я выберу несколько работ и далее мы вместе определимся с победителем, если выбрать будет сложно среди нескольких вариантов. Если работ будет мало за это время, сделанные тяп-ляп, то конкурс аннулируется. Цель конкурса показать альтернативное видение сверстанного макета от и до + адаптив.

    🤗 Победитель получит:
    – Отправленные 5000 рублей на карту
    – Добавлю вашу ссылку с работой в описание к видео.

    Répondre

Laisser un commentaire