Верстка сайта HTML, GULP, SASS | Персональный блог #4
HTML-код
- Опубликовано: 19 ноя 2020
- В этом видео продолжаем верстать сайт на html css используя gulp и препроцессор sass. Делаем многостраничный сайт - персональный блог. Макет сайта нарисован в Figma.
Ссылки
-------------------------------------------
Материалы урока: bit.ly/2UJv4a4
О проекте
-------------------------------------------
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
Соц. сети
-------------------------------------------
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #sass #gulp
HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp
Лучшие видео по вёрстке! Понятно, полезно, познавательно!
Наконец то,вчера весь день ждал)
+
Я так серии Игр Престолов не ждал, как твои видео)
ахах)
Класс!!!))) Спасибо, Дмитрий!!
Спасибо Дмитрий за такие замечательные уроки , я посоветовал вас всем своим друзьям, верстаем в месте с вами)
Дааа!!! Тоже ждал с нетерпением...
Спасибо, за уроки повторяю иногда за тобой. И применяю на практике,твои советы.
Спасибо Вам за урок! Каждый день жду с нетерпением начала видео =)
Дмитрий спасибо что не останавливаешься!!!
все 4 видео просмотрел залпом!!! жду еще, очень круто!!!много нового узнал и интересные решиния по подготовки верстки.
натянуть потом бы ещё эту красотень на wordpress!)) был бы полный мини-курс создания сайта
на october будет натягивать, если я внимательно слушал...
Хорошие видео. Профессиональная верстка. Спасибо за Ваш труд!
"В этом году хочу добить 100 тысяч подписчиков.."😁 👍 😇👍👍
Те кто смотрят и не подписан - это какой-то позор, уважайте автора ведь он от вас денег не требует!
Как всегда лучший
100к не за горами
Лучший, кого я видел 👌⭐️
Очень неплохое практическое занятие )
отличные уроки, просто супер
Дмитрий благодарю за то, что делитесь с нами своими секретами. Представляю сколько времени вам стоило довести знания до такого уровня.
Спасибо очень помогают твои уроки
Спасибо Вам!
контент супер, спасибо!
Круто!
Спасибо!
12 секунд назад...
Сори, я знаю что Вам не нравятся такие комменты, но кажется я первый, а может и второй...
c 100 тыс. подписчиков))
Серьезный подход!
Спасибо!
Жаль, что с таким контентом, 100К подписчиков не набирается...
Отличный видос
Чтобы экспортировать оригинал картинки из фигмы: выбираешь нужный элемент -> кликаешь по нему правой кнопкой мыши -> Select layer -> выбираешь слой с картинкой -> в правой части экрана вверху открываешь режим Inspect -> Пролистываешь вниз и находишь File name, сразу после которого идет ссылка на оригинал картинки -> скачиваешь картинку
Спасибо! а то у меня скачивается картинка, несоответствующего размера
Классный канал
Спасибо))
Как я понимаю, курс уже готов и нам просто нужно ставить лайки и ждать?? :)
не полностью, но лайки - это да, надо бы )
непонятно пока как будет это всё работать, но выглядит довольно интересно =)
Ооо первый))) На конец-то вышло
Нет ты не первый
Ты третий
ты 4-ый :)
Ну мне кажется я первый я зашёл и не одного коммента и было 12 секунд наЗАД!..
😂😂😂
26 секунд назад / урра!
а я увидел 12 секунд назад у меня было
Дмитрий, спасибо вам большое!Очень интересно и в тоже время доходчиво объясняете!А можно как-то сделать,чтобы при клике на label для добавления картинки,отображались только картинки,чтобы невозможно было добавлять текстовые файлы?
на 34 минуте можно попробовать justify-content:space-around;
Дима, покажи натяжку на какую-нибудь cms? спасибо за труд
Всё, я разобрался насчет вставки изображения на .add-post__file в вебпаке.
Объявляем переменную с путем и получаем background: #EBEBEB url($pathImg + 'add-photo.svg') center no-repeat;
35:30 Я атрибутом rows сделал )
Ок ес!;)
Привет. Какой плагин или настройку ты используешь для показа линий, связывающих начало и конец div? Спасибо!
indent guides
@@BrainsCloud Благодарю!!!
Скажи плз у тебя верстка Резиновая или Эластичная? или смешанная?
@BrainsCloud Подскажи пжл, почему gulp стартует долго, минуты 2-5
Вопрос по стилю написания стилей....
Не все предыдущие видео смотрел.
Почему не используете вложенность в scss и не используете схему с "&" , для составных имён классов?
Можно же не писать .stories {} и .stories__item {}, а использовать внутри .stories { &__item {***} }
Проще читать или по другой причине?
мне кажется , это дело привычки, сути это не меняет, а для восприятия выглядит легче (лично для меня)
Здравствуйте, подскажите пожалуйста, почему у меня не работает "&:hover" в селекторе цсс?
такое работает в sass
В форме add-post__textarea появилась полоса прокрутки вертикальная, а плейсхолдера вообще не видно
А почему мы используем грид а не флекс?
Добрый день! Отличные уроки! Но у меня возник один вопрос: как Вы контролируете название классов в РАЗНЫХ файлах? Ведь можно забыть, что в одном из файлов есть уже такой блок (например content), а потом два одинаковых блока запишутся в одинт Css и будет конфликт стилей. (только не подумайте, что я критикую, я до этого ещё профессионально не дорос ;) просто хочу знать, чтоб не попасть в такую ситуацию)
Я вот совсем недавно всё это начал смотреть, но как я понимаю нужно делать. Когда создаешь container, то присваиваешь ему класс container_main и прописываешь стили для него. В результате чего не запутаешься. Для статей будет container_article и т.д. Он к примеру для главного написал для главной страницы просто container, значит будет писать для остальных через нижний слэш название классов.
Такой вопрос, почему мы картинку ставим через img в , а не через фон???
тег не должен быть пустым
add-post уж слишком не рационально сверстан. Блок add-post (flex; aligen-items:center), add-post__textarea( flex:1; - будет прижимать все что справа). Кнопки оборачивать не нужно, они прижмутся в один ряд по флексу. Все остальное по фильму. А так очень хорошие уроки, СПАСИБО!!!!
Дима у меня есть проблема с этой версткой. Может это из-за vs coda. У меня нехочет принимать цвета если их указывать rgba($black, .45). Сразу все ломается. Если просто пишу чёрный все норм. Именно rgba не хочет принимать. Все остальное хорошо.
а почему не вебпак?
Видео класс! Благодарю. Но у меня появилась проблема которую не могу решить уже несколько дней: когда я в консоли закрываю проект и когда хочу снова открыть оно не открывается. И выводиться это: Cannot Get /
Кто может сказать почему не работает выбор варианта из тегов в vs code как и в brackets типа открываешь < и там появляются все возможные теги а в vs code предлагает только закрывать текущий тег хотя он закрыт. Заранее спасибо. В Brackets нашел расширение с название HTMLCodeHints и оно отвечает за это в vs code такое расширение нету но установил другие которые в preview показывают тоже самое но они не работают.
почему когда я застилизовал кнопку прикрепления файла, при нажатии она не работает?
VetaLiza
Почему после команды gulp удаляются файлы/картинки из папки images? (((
15:00
Было бы здорово натянуть эту верстку на wordpress
Обьяснение почему у автора основная страница default и при этом есть еще index ,мы берем в итоге дефалт и вставляем ы итоге в индекс, зачем это , почему не собрать все в дефалте или в индексе?....
Сборка классная, урок тоже! Спасибо! Не понятно как подключать скрипты из папки node_modules. Допустим мне нужно подключить jquery, он лежит в папке node_modules/jquery/dist/jquery.min.js, как подключить его чтобы сначала подключился jquery , потом другой скрипт, а потом уже app.js и все это минимизировать в одном файле.
Подключать нужно через import
@@BrainsCloudпробовал , ошибку выдает
Попробуйте в gulpfilr.js
Почему у тебя всё по центру сразу, а у меня нет?
У меня никак не получилось сделать кнопку "Отправить" с нужным размером картинки (стрелочки). Она почему-то становится размером 44px(4.4rem) а не ~17px. Может кто-то знает в чём дело?
у сторис белые края из-за заднего фона, его я прозрачным сделал(при том, что экспортировал картинки в png)
я залил цветом страницы, тоже края у картинок исчезли
grid-template-columns: 140px 140px 140px 140px;
Почему столько дивов, там где можно использовать span, p, h2-h6?
Тут ему негде их использовать.
+
0:13 го добем ищо 30к
24к всего-лишь )
@@BrainsCloud я заметил что в день по 1к набирается
@@peterparker3794 не, если бы)
Можно макет?
на первом видео есть макет
@@BrainsCloud спасибо
2000
когда пишешь css код для блока прыгаешь по строчкам, сложно переписывать. Пиши, пожалуйста, код по порядку. Спасибо за уроки
Чем это тебе мешает?
Спасибо!
Спасибо!