Stepik, Дмитрий Фокеев | Верстка и веб-разработка сайтов. Продвинутый уровень Web Develop (2022) WEB-DL [RU]

Автор: Дмитрий Фокеев
Производство: Stepik
Жанр: Видеокурс

Описание:
Этот курс сделает вас настоящим "PRO" верстальщиком веб сайтов! Освойте современные методы создания CSS анимаций, работу с GRID CSS и продвинутые методы адаптации сайтов.
Чему вы научитесь:
По окончании курса вы будете владеть всеми современными способами верстки и создания сайтов.

Вы научитесь использовать CSS анимации на своих сайтах
Вы узнаете продвинутые способы адаптивного дизайна
Вы изучите продвинутые техники работы с препроцессором SASS
Вы научитесь использовать систему контроля версий Git
Вы изучите систему создания сайтов на CSS GRID
Вы узнаете современные способы верстки сайтов

Бонус: работа с Git и NPM

Продолжительность: 20:03:36
Качество видео: WEB-DL
Язык озвучки: Русский

Скриншоты:

Время раздачи: с 09.00 до 21.00 [Киев] (до появления первых 3-5 скачавших)

Indeeccc писал(а):

ссылки на макеты в фигме не работают, либо автор курса закрыл доступ. у кого-то есть свои ссылки? буду благодарен если поделитесь

Тоже столкнулся с этой проблемой. Подскажите, вам удалось найти макеты? Если да, то можете поделиться ссылками на фигму?

Sarumyan писал(а):

Indeeccc писал(а):

ссылки на макеты в фигме не работают, либо автор курса закрыл доступ. у кого-то есть свои ссылки? буду благодарен если поделитесь

Тоже столкнулся с этой проблемой. Подскажите, вам удалось найти макеты? Если да, то можете поделиться ссылками на фигму?

надеюсь еще актуально
https://www.figma.com/file/uJ12OpT4msaEB5uD8dSQ5O/Untitled?node-id=0%3A1&t=UdMpzPYlJM2doJGk-1

https://www.figma.com/file/h7zFMlHssOQvnVLsdMtJG7/Untitled?node-id=0%3A1&t=u5n6SbjcPVse7mq5-1

Друзья, если вы начинаете изучать данную тему, а именно вёрстку, то данный курс совсем не подходит для вас.
Также, если вы уже немного в теме, то где-то 90% из всего времени — просто пустота.
Почему так?
Мой опыт в вёрстке более 10 лет. Я не умничаю, просто имею некоторый опыт, который позволяет в т.ч. оценить данный курс. И я его оцениваю, как недопустимый для новичков, а более опытные могут лишь некоторые моменты почерпнуть для себя.
Вёрстка начинается далеко не с Figma или любой другой программы и даже не с препроцессоров (которые на данный момент просто не нужны уже). Она начинается с понимания основ, а именно что такое <tag> и зачем он нужен, какие они бывают и какую смысловую нагрузку несёт каждый из них. Это называется семантика. Ютубьте по этому запросу "семантическая вёрстка", тогда с вас будет толк. А изучать свойства и значения свойств стилей — этим уже займётесь позже (жизни не хватит, чтобы все их изучить...), так как даже часто используемых довольно много.
Видно, что автор имеет какой-то опыт, может, года 3, не более. Он ужасно верстает, к примеру, использует абсолютное позиционирование там, где в этом нет необходимости и есть масса других способов расположить так или иначе определённый элемент, например, логотип.
Также он сбрасывает стили для всех элементов, используя выборку по "*", что крайне нежелательно делать. Также, к примеру он использует свойства transition: all, что может существенно понижать производительность. Т.е. от "продвинутого уровня" там только расширения для VS Code, которые он рекомендует.
Git сегодня никто не использует в консоли, в каждой IDE есть масса возможностей, чтобы совершать сложные действия в пару нажатий мыши. Поэтому забивать им голову вообще не стоит. А если необходимо сделать что-то вне функционала расширений для IDE, то можно нагуглить.

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

Я смотрел, в надежде узнать что-то новое. Но из нового я не узнал ничего.

inverser писал(а):

и даже не с препроцессоров (которые на данный момент просто не нужны уже).

Серьезно? А чем же заменили Pug/Sass, поведайте пожалуйста.

inverser писал(а):

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

Лично я легко использую его в консоли, хотя и в IDE масса возможностей и Tower лицензионный есть. Просто учился на консольном, теперь привычно и не напряжно. Так что про "никто" ошибка.

Серьезно? А чем же заменили Pug/Sass, поведайте пожалуйста

Каэсэсами заменили. Послушайте WEB-стандарты на YouTube. Поймёте о чём я. В стилях уже даже модули есть.

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

inverser писал(а):

Серьезно? А чем же заменили Pug/Sass, поведайте пожалуйста

Каэсэсами заменили. Послушайте WEB-стандарты на YouTube. Поймёте о чём я. В стилях уже даже модули есть.

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

"Каэсэсами"? Ну вы точно специалист, я даже спорить не стану))

Typodin писал(а):

Каэсэсами"? Ну вы точно специалист, я даже спорить не стану))

Ваше право.
Это стёбное название стилей.
Поделитесь своими профилями на GitHub, YouTube, Codepen, чтобы не быть голословным?
github_com/inverser-pro
codepen_io/inverser
youtube_com/c/@InverserPro

inverser писал(а):

Typodin писал(а):

Каэсэсами"? Ну вы точно специалист, я даже спорить не стану))

Ваше право.
Это стёбное название стилей.
Поделитесь своими профилями на GitHub, YouTube, Codepen, чтобы не быть голословным?
github_com/inverser-pro
codepen_io/inverser
youtube_com/c/@InverserPro

Я опенсурсом не занимаюсь, мой аккаунт на гите только с закрытыми рабочими репозиториями. Про понятие CSS модульности знаю прекрасно и про применение тоже - от CSS-in-JS, до концепций React на который перешел года полтора назад. И каким боком они могут заменить SASS, а уж тем более PUG вы совершенно не прояснили.

Поясняю. Препроцессоры больше не нужны по причине того, что в стилях уже частично допилили функционал, который присутствует в том же SASS. К примеру, вложенное написание кода.

Интересно, откуда Вы знаете о CSS модулях, если это только "завезли"
https://www.youtube.com/watch?v=iYzuiZVdRqY&t=1449s

Sass и CSS-нестинг
https://www.youtube.com/watch?v=eVWpO083fhg&t=2960s

Также многое зависит от того, какие инструменты Вы используете. Если Вы пишите грубо говоря на PHP, то куда же без PUG (хотя, если знать JS, то вдвойне "зачем он нужен?" можно же просто выводить данные асинхронно... но это уже вопрос "веры", знаний, конкретной задачи). Но зачем нужен шаблонизатор, если Вы, к примеру, пишите на TS+React я не понимаю.

Кстати, не обязательно "заниматься opensource", чтобы иметь профиль и наброски на codepen, к примеру, если Вы так хорошо знаете стили (по Вашему утверждению). Либо можно было показать те проекты, которые Вы делали/~ете... или они тоже в "закрытых частях паутины"?)

inverser писал(а):

Интересно, откуда Вы знаете о CSS модулях, если это только "завезли"
https://www.youtube.com/watch?v=iYzuiZVdRqY&t=1449s

Sass и CSS-нестинг
https://www.youtube.com/watch?v=eVWpO083fhg&t=2960s

Также многое зависит от того, какие инструменты Вы используете. Если Вы пишите грубо говоря на PHP, то куда же без PUG

Ну Макеев не говорит о том, что его только завезли. Он описал технологию. Вот например про css-модули из 2015 года https://www.sitepoint.com/understanding-css-modules-methodology/

Насчет инструментов - в теме про верстку я имею в виду именно верстку. А так вариаций много для разметки.

P.S. сообщение в лс видел, отпишусь на днях, тут в запаре права меняю(

inverser

Хочется спросить, а в стилях уже допилили такой вариант? когда есть такое:

<header class="header">
<div class="header__top"></div>
</header>

И я могу в том же SCSS написать так: (я что-то не нашёл в css такого, есть только вложенности отдельных классов)

.header {
некоторые свойства;
&__top {
некоторые свойства;
}

}
Плюс в scss удобно задавать переменные, которые после трансляции в css подставляются и всё, они не висят в самом css. Я интересуюсь ради повышения знаний и не более

Просьба стать на раздачу, докачать 200мб.

Благодарю!

Prizrak_13 писал(а):

inverser

Хочется спросить...
<header class="header">
<div class="header__top"></div>
</header>
...

Поютубьте «css nesting».
(полупокер Кевин рассказывает)
youtube_com/watch?v=YnWPeA6l5UE

Курс оказался слабым, и это касается как первой, так и второй части.

Проекты не доведены до конца
Ни один из проектов не завершён. Автор начинает верстку, но финального результата нет, что вызывает ощущение незаконченности и хаоса.

Излишние усложнения
Все действия неоправданно усложнены. Например, свойства body разбиваются по нескольким файлам Sass, вместо того чтобы держать их в одном месте. Зачем так делать? Куча компонентов. Объясняется это тем, что "так проще переиспользовать компоненты". Но переиспользовать можно и из одного файла. А в итоге: бегаешь по куче файлов в поисках, где что прописано.

Непоследовательность в работе с макетами
В первом курсе автор создал макет, заявив, что он "идеально подготовлен". Однако по ходу верстки он постоянно вносит изменения в дизайн: то пиксели меняет, то элементы двигает. Это создает неправильный подход: ученик начинает думать, что менять клиентский дизайн под свои нужды — это нормально.

Бесполезные вставки
Зачем рассказывать про npm, если тут же заявляешь, что без знания JavaScript его изучение бессмысленно? Выглядит так, будто нужно просто "набить" объем курса. В первой части ситуация аналогичная: добавили Bootstrap, слегка показали, что это такое, и больше к нему не возвращались.

Общее впечатление
Складывается ощущение, что курс наполнен лишним материалом для объема, а не для пользы. Проекты брошены на полпути, важные вещи не доведены до конца, а методика обучения скорее запутывает, чем помогает.

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