• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

Обновление бесплатного HTML-курса

ДневникПросмотров: 2241Комментарии: 46 марта 2021 г.

Сделал большое обновление своего HTML-курса для новичков (теперь с котиками). По сути мне пришлось его полностью переписать, поскольку я хотел поменять всю структуру.

Сам по себе курс рассчитан на новичков. Старый вариант базировался на UniCSS, новый на Berry CSS. Большой разницы в классах между ними нет, но в Berry хорошая документация с примерами и есть Builder, который используется при прохождении курса.

В новой версии я упростил сложность уроков и добавил задания для каждого. Раньше большая часть уроков была закрыта, поскольку была частью платного обучения. Сейчас всё открыто и бесплатно. Часть старых уроков я убрал, например работу с Sass, Git, обработку форм на PHP. Как показал мой опыт обучения, они всё-таки сложны для новичков.

Сам по себе курс, как и прежде, строится на атомарных классах. Ученик может после короткой теории, сразу же начать верстать html-блоки. Такой подход хорошо себя зарекомендовал. Если в других курсах начинают сразу писать CSS-код, то здесь используются готовые классы, а погружение в CSS происходит по ходу урока. То есть не будет ситуации, когда новичку предлагается написать css-код, который он элементарно ещё не понимает.

У меня сделано по другому — используем атомарные классы Berry CSS, которые легки и понятны. Последующий переход на компонентный CSS не вызывает никаких сложностей, поскольку ученик уже знает назначение каждого класса и его css-свойства.

Что ещё?.. Добавил много практических уроков. Я считаю, что лучше двигаться от практики к теории. Многие html-курсы часто представляют собой обычный справочник, только своими словами. Эта информация новичку просто не нужна, поэтому я отказался от уроков про псевдоклассы и сложных css-селекторов. То есть идея в том, чтобы показать и объяснить как верстаются разные блоки/элементы, где нет этой сложной теории. Так обучение происходит проще и быстрей, а на ученика не сваливается тонна информации, которую даже не понимает где и как использовать.

Курс представляет собой самоучитель, поэтому снабжён заданиями. Опять же, по опыту отмечу, что прогресса нет, если не выполняются домашние задания. «Спотыкачки» есть у всех: начиная от незакрытых тэгов, до ужасного форматирования кода. В старой версии курса мы работали с LPF, поскольку так было проще отслеживать задания. В новой версии подобных требований нет, хотя я рекомендую поставить локальный сервер. В какой-то мере это тест на профпригодность — если ученик не может этого сделать, то ему будет сложновато войти в IT. :-) А так, в принципе курс проходится даже обычными html-файлами или Berry Builder.

В какой-то мере этот курс будет полезен и более опытным разработчикам, тем, кто хочет попробовать Berry CSS, да и вообще саму методику атомарного CSS. Наглядные уроки показывают как можно быстро верстать блоки любой сложности без правки css-кода.

Все пожелания и замечания по HTML-курсу можно оставить на моём форуме. Обратная связь будет полезна и автору, и пользователям. :-)


Создание сайтов (Украина) →
Релиз Berry CSS 4.0
Создаём To-do List на Alpine.js
twitter.com facebook.com
Другие записи сайта
Микро-фреймворк как основа веб-проекта на PHP
Микро-фреймворк как основа веб-проекта на PHP
CMS. Схема/описание работы
CMS. Схема/описание работы
Шаблон Prototype (Прототип)
Шаблон Prototype (Прототип)
Бесплатный PHP, HTML, CSS и JavaScript редактор - CodeLobster IDE
Бесплатный PHP, HTML, CSS и JavaScript редактор - CodeLobster IDE
Корректное урезание строк по словам в PHP
Корректное урезание строк по словам в PHP
34 отличия блогера от колхозника или Тут есть кто живой?
34 отличия блогера от колхозника или Тут есть кто живой?

Комментариев: 4 RSS

1Денис14-03-2021 22:04

Спасибо, хороший курс. В нем уделено много внимания к адаптивной верстке, но вот как сделать кнопку Меню в мобильной версии не указано. А ведь без этого 99% сайтов будет отображаться черти как, с большущим списком ссылок в меню. Может добавите урок?

2MAX15-03-2021 07:18

Обычно такая кнопка использует JS, поэтому будет сложна для новичков. Да и не всегда меню нужно скрывать в кнопку, вполне достаточно добавить им адаптивности через flex.

3Денис23-03-2021 17:28

Ну почему же. Вот здесь internet-technologies _ru/articles/20-poleznyh-snippetov-css-dlya-sozdaniya-adaptivnogo-menyu.html#header-10317-3 есть много примеров, в том числе и без JS, например Bootstrap Navbar от Bobby. Я сейчас пытаюсь в шаблон, сделанный на Berry впихнуть кнопку на css, получилось, работает, но т.к. разные стили, то уже дофига времени вожусь и всё коряво. Вот если бы вы один урок посвятили этому, это бы сэкономило много часов времени и нервов новичкам. И не пришлось бы гуглить в поисках решений и всяких костылей. Да и на JS тоже там коды маленькие, тоже получалось внедрить, но основная проблема - совместить разные стили в одном дизайне, часто они пересекаются.

А без такой кнопки большинство сайтов будут совсем не по красоте.

4MAX24-03-2021 09:44

Какое вообще отношение курс имеет к бутсрапу или вашему дизайну? Задача — дать начальные сведения и ввести новичков в html-вёрстку и css-стили. Если вы это всё знаете, прекрасно, двигайтесь дальше. :-)

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2798 | SQL: 20 | Память: 4.61MB | Вход