Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

Содержание

Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

Это пять недель плотной работы: вёрстка учебного и личного проектов, еженедельные лекции, пять часов консультаций с наставником, подготовка проекта к финальной защите. Таким образом, формат учёбы максимально приближен к рабочему процессу в крупной IT-компании: настоящие дизайн-макеты, техническое задание, ревью от старшего разработчика и горящие сроки.

Курс рассчитан на тех кто только знакомится с вёрсткой, начинающих верстальщиков и тех, кто нуждается в систематизации своих навыков.

Всего интенсив состоит из десяти вебинаров, их ведут четыре опытных преподавателя-разработчика.

На лекции можно задать вопросы ведущему, чтобы уточнить какие-либо моменты. Если присутствовать не позволяет личное расписание или часовые пояса, то вебинары можно пересматривать в записи.

К каждому разделу предоставляются дополнительные материалы:

— Двадцать три интерактивных демонстраций, на которых пошагово разбираются решения типовых задач.

— Двенадцать скринкастов, объясняющих нюансы вёрстки.

— Статьи для самостоятельного углубления в конкретную тему.

Каждому доступен один учебный проект «Барбершоп», который разбирается на лекции с преподавателем и пять дизайн-макетов разной степени сложности на выбор: «Нёрдс», «Седона», «Техномарт», «Глейси» и «Девайс».

Важная часть обучения — это работа над проектом под руководством наставника.

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

Программа

Каждый поток что-то обновляется и добавляется, но начиная с прошлого восемнадцатого потока программа была серьёзно переработана, согласно изменениям в индустрии: проекты перешли на флексбоксы, больше внимания уделяется разметке и векторной графике, значимое место занимает доступность, добавлены новые критерии и обновлены существующие, полностью обновлены материалы и лекции.

Работа над проектом строится по этапам: ученики делают разметку документа, создают сетку, оформляют контент, работают с флексбоксами и графикой для веба используя Adobe Photoshop СС.

Работа с кодом ведётся через систему контроля версий Гитхаб. После каждого ревью кода от наставника, проект ученика становится всё ближе к защите.

Защита

В конце пяти недель напряжённой работы всех ждёт защита личного проекта.

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

Чтобы защитить проект, нужно полностью сверстать страницу и сделать это профессионально. Для оценки качества работы на этом курсе мы разработали более сорока различных критериев.

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

Они разбиты на две группы: базовые — проверяющие как усвоены основы и дополнительные — на внимательность и скрупулёзность будущего верстальщика.

Получить максимальную оценку в 100 баллов можно только пройдя все критерии.

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

  • Б5. Документ проходит проверку на валидность. Проверка осуществляется через онлайн-валидатор.
  • Б12. Вёрстка идентично отображается в последних версиях браузеров. Chrome, Opera, Firefox, Safari, Edge, а также в Internet Explorer 10+.
  • Д2. Использовано минимально возможное количество HTML-элементов. В разметке должно быть использовано минимально возможное количество элементов. Не должно быть лишних обёрток и блоков, которые используются для оформления и могут быть заменены на псевдоэлементы.
  • Д16. С помощью JavaScript реализовано открытие/закрытие окна с формой. Без вспомогательных библиотек.
  • Д19. Вёрстка проходит тест на переполнение контентом. Не ломается при добавлении в элементы и кнопки большего количества текста, при использовании картинок с неподходящими размерами и при изменении количества потоковых блоков.
  • Д20. Критическая функциональность сайта работоспособна без JavaScript. Использовано прогрессивное улучшение.

По итогам

— Участники получат в портфолио первый выполненный проект.

— Твёрдую базу, достаточную чтобы начать карьеру верстальщика.

— Смогут решать типовые задачи.

— Использовать в своей работе профессиональные инструменты и технологии.

Ближайший и последний в этом году интенсив «Базовый HTML и CSS» пройдёт c 30 октября — 6 декабря. Запись открыта, пока есть свободные места.

Пройти месячные онлайн-курсы от HTML Academy «Базовый HTML и CSS» и «Продвинутый HTML и CSS»

Полезные ссылки в этапах цели!

Постоянно натыкаюсь на отзывы (на различных ресурсах) о курсах HTML Academy, где пишут, что у них самое лучшее обучение HTML и CSS. Стало интересно, чем же они отличаются от остальных, заинтересовал их метод. Когда-то раньше проходил пару бесплатных интерактивных мини-курсов на их сайте, но так как я знал большинство из имеющейся там информации — меня процесс изучения особо не впечатлил и не зацепил. Но отзывы на форумах веб-разработчиков все не прекращались, и вот в итоге решил пройти их курсы, закрепив тем самым знания, что-то вспомнить, что-то узнать из упущенного ранее.

В данной цели будет рассматриваться Базовый Месячный онлайн-интенсив.
На данный момент дошел до 4-го раздела.

Верстать буду следующим образом:

  • PhpStorm;
  • UPDATE 21.03.2020:AngularJS;
  • TypeScript (изучаю его сейчас как раз, пока основы);
  • Gulp с настроенными плагинами и Live Reload;
  • Jade;
  • Stylus.

Все файлы будут выложены на Github, включая файлы сборщика.
На Codepen тоже выложу, для наглядности.

Критерий завершения

Все уроки по курсу просмотрены, выполнены все задания из курса, сверстаны все макеты и выложены на github/codepen

Личные ресурсы

Сам курс, время, желание, phpstorm, photoshop

Экологичность цели

Эта цель позволит мне закрепить мои знания по HTML и CSS и, в принципе, пополнить портфолио тестовыми проектами :)

[html adademy] Интенсивный онлайн‑курс Базовый HTML и CSS №13

Тема в разделе «Курсы по программированию», создана пользователем super_geroy, 9 мар 2020 .

    li» data-history=»on» >
  • [html adademy].
  • Отзывы (13)

Статус темы: Закрыта.

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

    Шикарно! И огромное спасибо за дополнительно предоставленные демо и все остальное. *благодаря организатору интенсив гораздо лучше предыдущего*
    Сам курс отличный — объясняют что и как делать и куда смотреть, чтобы понять правильность построения кода. Детальные разборы базового макета, наработки для остальных.

    Лучший курс по ремеслу верстальщика. Шикарное качество звука. Брал для жены, но даже сам засмотрелся. Ждём продолжения.

    Отличный материал, учит реальной верстке, а не как все html css, а как верстать разберешься сам.

    Отдельное спасибо организатору за поддержку, ответы на вопросы

    Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

    Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

    Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.

    Через месяц вы научитесь:

    • Создавать современные веб-интерфейсы;
    • Эффективно решать типовые задачи верстальщика;
    • Начать карьеру с готовым портфолио.

    Интенсив разделён на пять частей: «разметка», «графика», «сетки», «оформление» и «оптимизация». Вас ожидает 700 интерактивных заданий, 18 часов живых вебинаров, 5 качественных макетов дизайна и общение с личным наставником, который будет делиться секретами мастерства.

    Вводная лекция про роль и место верстальщика в мире веб-технологий.

    1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
    —IP-адрес, сервер и веб-сервер, «виртуалхосты».
    —Доменные имена, URL-aдреса и система DNS.
    —Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
    —Приёмы оптимизации веб-страниц.

    2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
    —Системы контроля версий. Git и GitHub.
    —Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
    —Немного о браузерах, браузерных движках и различиях между ними.

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

    1. Введение в HTML и CSS.
    —Синтаксис HTML.
    —Структура простейшего HTML-документа.
    —Синтаксис CSS. Базовые CSS-селекторы.
    —Наследование, каскадность и приоритеты в CSS.

    2. Качественная разметка и стили кодирования.
    —Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
    —Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
    —Модульность разметки или использование «пространств имён».
    —Когда использовать
    —Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

    3. Создаём разметку главной страницы учебного проекта.

    3. Фотошоп для верстальщика

    Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

    1. Типовые задачи верстальщика в фотошопе.
    —Настройка интерфейса фотошопа.
    —Работа со слоями, типы слоёв.
    —Получение параметров текста.
    —Измерение размеров блоков, отступов, получение информации о цвете.
    —Получение параметров сложных декоративных эффектов: тени и прочее.
    —Экспорт графики, работа с повторяющимися паттернами.

    2. Обзор форматов графики в вебе.
    —PNG, JPEG, SVG, GIF.
    —Как выбрать подходящий формат?

    3. Разбор графических макетов проектов.

    Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

    1. Поток документа и блочная модель документа.
    —Понятие сетки и потока документа.
    —Блочные и строчные элементы и их особенности.
    —Свойства блочной модели: размеры, рамки и отступы.
    —Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

    2. Как управлять потоком и строить сетки?
    —Свойство display. Управление типом элементов.
    —Свойство float и его особенности.
    —Построение сеток на «плавающих» элементах.
    —Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
    —Построение сеток на блочно-строчных элементах.

    3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

    5. Декоративные элементы

    Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

    1. Позиционирование.
    —Относительное позиционирование.
    —Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
    —Фиксированное позиционирование.
    —Управление порядком слоёв.

    2. Другие важные приёмы.
    —Псевдоэлементы.
    —Спрайты.
    —normalize.css.
    —Подключение нестандартных шрифтов.

    3. Завершаем вёрстку главной страницы учебного проекта.

    6. Оформление контента

    Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

    1. Практикуемся в вёрстке элементов содержимого.
    —Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS.
    —Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
    —Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

    2. Разбираем типовые случаи переполнения и способы борьбы с ними.

    3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

    7. Введение в jаvascript

    Познакомимся с jаvascript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

    1. Язык программирования jаvascript.
    —Роль программирования в жизни верстальщика.
    —Что такое DOM и зачем нам объект document.
    —Зачем нужен объект window.

    2. Типовые случаи использования jаvascript.
    —Как найти любой элемент на странице.
    —Как реагировать на события, происходящие на странице.
    —Как менять CSS-стили у элементов.
    —Как использовать анимацию на странице.

    3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

    8. Прогрессивное улучшение

    Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

    1. Знакомство с прогрессивным улучшением и постепенной деградацией.
    —«Житейские» примеры двух подходов.
    —Этапы прогрессивного улучшения.
    —Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
    —Как добавлять улучшения независимыми и цельными слоями.
    —Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

    2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

    3. Немного о минификации стилей и скриптов.

    781 — 1134 Kbps
    Аудио: AAC, 2 ch, 235 Kbps, VBR

    САМЫЙ ЛУЧШИЙ ФОРУМ ДЛЯ ОБЩЕНИЯ ПОДРОСТКОВ, ВЗРОСЛЫХ И ДЕТЕЙ. ФОРУМ ДЛЯ ВСЕХ И КАЖДОГО

    Меню навигации

    Пользовательские ссылки

    Информация о пользователе

    HTML Academy — Интенсивный онлайн-курс «Базовый HTML и CSS» (2020)

    Сообщений 1 страница 6 из 6

    Поделиться12020-10-27 22:07:31

    • Автор: Thomas
    • VIP
    • Зарегистрирован: 2015-02-23
    • Приглашений: 0
    • Сообщений: 10782
    • Уважение: +226
    • Позитив: +178
    • Пол: Мужской
    • Провел на форуме:
      10 дней 7 часов
    • Последний визит:
      2020-10-31 21:55:07

    ДОРОГИЕ ДРУЗЬЯ!

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

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

    Автор (режиссер): HTML Academy
    Жанр: Веб-дизайн, HTML, CSS

    Описание:
    HTML Academy — стандарт в обучении фронтендеров. Наша задача — сделать из любого новичка полноценного и востребованного специалиста, готового работать в веб-индустрии.

    Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

    Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.

    Продолжительность: 25:51:07
    Качество видео: PCRec

    Видео: AVC/H.264, 1920×1080,

    627 Kbps
    Аудио: AAC, 2 ch, 235 Kbps

    ПРОГРАММА КУРСА:
    1. Вводная

    1. Вводная лекция про роль и место верстальщика в мире веб-технологий.

    1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
    —IP-адрес, сервер и веб-сервер, «виртуалхосты».
    —Доменные имена, URL-aдреса и система DNS.
    —Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
    —Приёмы оптимизации веб-страниц.

    2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
    —Системы контроля версий. Git и GitHub.
    —Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
    —Немного о браузерах, браузерных движках и различиях между ними.

    2. Разметка

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

    1. Введение в HTML и CSS.
    —Синтаксис HTML.
    —Структура простейшего HTML-документа.
    —Синтаксис CSS. Базовые CSS-селекторы.
    —Наследование, каскадность и приоритеты в CSS.

    2. Качественная разметка и стили кодирования.
    —Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
    —Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
    —Модульность разметки или использование «пространств имён».
    —Когда использовать , и

    3. Создаём разметку главной страницы учебного проекта.

    3. Фотошоп для верстальщика

    Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

    1. Типовые задачи верстальщика в фотошопе.
    —Настройка интерфейса фотошопа.
    —Работа со слоями, типы слоёв.
    —Получение параметров текста.
    —Измерение размеров блоков, отступов, получение информации о цвете.
    —Получение параметров сложных декоративных эффектов: тени и прочее.
    —Экспорт графики, работа с повторяющимися паттернами.

    2. Обзор форматов графики в вебе.
    —PNG, JPEG, SVG, GIF.
    —Как выбрать подходящий формат?

    3. Разбор графических макетов проектов.

    4. Сетки

    Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

    1. Поток документа и блочная модель документа.
    —Понятие сетки и потока документа.
    —Блочные и строчные элементы и их особенности.
    —Свойства блочной модели: размеры, рамки и отступы.
    —Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

    2. Как управлять потоком и строить сетки?
    —Свойство display. Управление типом элементов.
    —Свойство float и его особенности.
    —Построение сеток на «плавающих» элементах.
    —Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
    —Построение сеток на блочно-строчных элементах.

    3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

    5. Знакомство с флексбоксами

    1. Теория: введение во флексбоксы.
    2. Практика: сетка Барбершопа на флексбоксах.

    6. Декоративные элементы

    Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

    1. Позиционирование.
    —Относительное позиционирование.
    —Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
    —Фиксированное позиционирование.
    —Управление порядком слоёв.

    2. Другие важные приёмы.
    —Псевдоэлементы.
    —Спрайты.
    —normalize.css.
    —Подключение нестандартных шрифтов.

    3. Завершаем вёрстку главной страницы учебного проекта.

    7. Оформление контента

    Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

    1. Практикуемся в вёрстке элементов содержимого.
    —Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS.
    —Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
    —Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

    2. Разбираем типовые случаи переполнения и способы борьбы с ними.

    3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

    8. Введение в JavaScript

    Познакомимся с JavaScript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

    1. Язык программирования JavaScript.
    —Роль программирования в жизни верстальщика.
    —Что такое DOM и зачем нам объект document.
    —Зачем нужен объект window.

    2. Типовые случаи использования JavaScript.
    —Как найти любой элемент на странице.
    —Как реагировать на события, происходящие на странице.
    —Как менять CSS-стили у элементов.
    —Как использовать анимацию на странице.

    3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

    9. Прогрессивное улучшение

    Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

    1. Знакомство с прогрессивным улучшением и постепенной деградацией.
    —«Житейские» примеры двух подходов.
    —Этапы прогрессивного улучшения.
    —Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
    —Как добавлять улучшения независимыми и цельными слоями.
    —Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

    2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

    3. Немного о минификации стилей и скриптов.

    10. Доступность интерфейсов

    11. Финал

    И как всегда в заключении вот вам ссылка на наше облачное хранилище:

    с которого вы сможете скачать, и начать само обучение.

    Уверен, в том, что на этот раз данный материал удовлетворит даже самых взыскательных форумчан, тем более, что это один из самых свежих и последних видеокурсов, пользующийся популярностью и количеством прошедших обучение.

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

    Удачи всем на тернистом пути
    веб-программирования.

    Поделиться22020-12-12 19:49:13

    • Автор: киборг
    • Хороший человек
    • Зарегистрирован: 2020-07-10
    • Приглашений: 0
    • Сообщений: 248
    • Уважение: +23
    • Позитив: +7
    • Провел на форуме:
      2 дня 0 часов
    • Последний визит:
      2020-02-11 20:19:26

    можно добавить?
    просто наткнулся на еще один обучательный сайт в нуожиданном месте — на сайте Мозиллы.
    https://developer.mozilla.org/ru/docs/Learn — во, обучение веб-программированию от Мозиллы ))

    конечно по английски там более понятно все написано, вообще такие тексты переводить — непростое занятие.
    Но читать можно. Рекомендую! Так сказать веб-девелопмент от создателей веба ))))

    Поделиться32020-12-12 20:03:50

    • Автор: Dimitriy Gerasimov
    • Хороший человек
    • Откуда: Москва
    • Зарегистрирован: 2015-02-03
    • Приглашений: 0
    • Сообщений: 16368
    • Уважение: +532
    • Позитив: +758
    • Пол: Мужской
    • Провел на форуме:
      5 месяцев 8 дней
    • Активен

    можно добавить?
    просто наткнулся на еще один обучательный сайт в нуожиданном месте — на сайте Мозиллы.
    https://developer.mozilla.org/ru/docs/Learn — во, обучение веб-программированию от Мозиллы ))

    конечно по английски там более понятно все написано, вообще такие тексты переводить — непростое занятие.
    Но читать можно. Рекомендую! Так сказать веб-девелопмент от создателей веба ))))

    Конечно можно, без проблем. Считаю, будет здорово, собрать полезные ресурсы и ссылки

    Поделиться42020-12-12 20:55:59

    • Автор: Thomas
    • VIP
    • Зарегистрирован: 2015-02-23
    • Приглашений: 0
    • Сообщений: 10782
    • Уважение: +226
    • Позитив: +178
    • Пол: Мужской
    • Провел на форуме:
      10 дней 7 часов
    • Последний визит:
      2020-10-31 21:55:07

    Не можно, а нуно! Ведь чем больше и разнообразней будет у нас тут собран материал, тем лучше для всех!

    просто наткнулся на еще один обучательный сайт в нуожиданном месте — на сайте Мозиллы.
    https://developer.mozilla.org/ru/docs/Learn — во, обучение веб-программированию от Мозиллы ))

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

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

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

    Это ведь раньше все что касалось компьютеров, и ИТ, на русском невозможно было отыскать, приходилось самим «методом тыка» и экспериенс догадываться, и допереть до нужного результата, зато какие были познания, ни чета сегодняшнему. А уж про командную строку или DOS лучше и не заикаться, а ведь умели наши родители, или те кто начинал еще до появления Windows 3.11 или Windows 95.

    А когда-то совсем в недалеком прошлом, какие-то 5-7 лет назад и представить себе не могли тот уровень веб- программирования, которым на сегодня мы с успехом пользуемся, и уже вовсе не нужен Adobe Photoshop, Macromedia Flash, все это легко решается с помощью HTML5, CSS3, JavaScript, JQuery и др.

    А что еще нас ожидает впереди? Аж дух захватывает, если уже такие, как 7-летний Еремка, уже способны творить чудеса, когда для кого то взять тот же PHP, Pyton — дремучий лес и непроходимая тайга?!

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

    Жаль пока только нет горячих споров и обсуждений, мало активных откликов, комментов, предложений, а как хотелось бы?!

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

    Вообщем, спасибо, Киборг, за твое понимание, участие, и помощь!

    Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

    Интенсив пройдёт c 30 октября по 6 декабря.

    «Базовый HTML и CSS» — это профессиональный курс, за который вы фундаментально освоите вёрстку и сможете начать карьеру в IT. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

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

    На курсе вас ждёт:

    20 часов онлайн-вебинаров, с возможностью задать вопрос лектору; 23 интерактивных демонстраций, на которых пошагово разбираются решения типовых задач; 12 скринкастов, объясняющих нюансы вёрстки; 6 профессиональных дизайн-макетов; еженедельные консультации с персональным наставником.

    Последний интенсив в этом году стартует уже в понедельник. Количество мест ограничено.

    Приятная скидка для учеников портала по промокоду HTMLBOOK3110 (промокод действует до 30.10.2020 включительно). Успейте зарегистрироваться!

    ИНТЕНСИВНЫЙ ОНЛАЙН-КУРС «БАЗОВЫЙ HTML И CSS» (2020)

    Dracula

    Трушка

    Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

    Дополнительная информация о видеокурсе:
    Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.

    Через месяц вы научитесь:
    — Создавать современные веб-интерфейсы;
    — Эффективно решать типовые задачи верстальщика;
    — Начать карьеру с готовым портфолио.

    Интенсив разделён на пять частей: «разметка», «графика», «сетки», «оформление» и «оптимизация». Вас ожидает 700 интерактивных заданий, 18 часов живых вебинаров, 5 качественных макетов дизайна и общение с личным наставником, который будет делиться секретами мастерства.

    Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

    Интенсив пройдёт c 30 октября по 6 декабря.

    «Базовый HTML и CSS» — это профессиональный курс, за который вы фундаментально освоите вёрстку и сможете начать карьеру в IT. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

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

    На курсе вас ждёт:

    • 20 часов онлайн-вебинаров, с возможностью задать вопрос лектору;
    • 23 интерактивных демонстраций, на которых пошагово разбираются решения типовых задач;
    • 12 скринкастов, объясняющих нюансы вёрстки;
    • 6 профессиональных дизайн-макетов;
    • еженедельные консультации с персональным наставником.

    Последний интенсив в этом году стартует уже в понедельник. Количество мест ограничено.

    Приятная скидка для учеников портала по промокоду HTMLBOOK3110 (промокод действует до 30.10.2020 включительно). Успейте зарегистрироваться!

    Онлайн-интенсив «Базовый HTML и CSS» с личным наставником

    Личный наставник и структурированные знания в практической форме.

    Для всех, кто хочет начать карьеру в IT.

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

    Интенсив длится пять недель, c 30 октября по 6 декабря. Каждую неделю проходят два живых вебинара, после которых надо выполнять практические задания и работать с наставником.

    Интенсивный онлайн-курс «Базовый HTML и CSS» (2020) PCRec

    Download fast

    Интенсив «Базовый HTML и CSS» это профессиональный курс, построенный на базе платформы HTML Academy. Вести его будут практикующие преподаватели с десятилетним опытом веб-разработки.

    Дополнительная информация о видеокурсе:
    Курс подойдёт для тех, кто делает свои первые шаги и тех, кто считает себя начинающим верстальщиком. Также, если ваши знания не систематизированы, он подойдёт и вам.

    Через месяц вы научитесь:
    — Создавать современные веб-интерфейсы;
    — Эффективно решать типовые задачи верстальщика;
    — Начать карьеру с готовым портфолио.

    Интенсив разделён на пять частей: «разметка», «графика», «сетки», «оформление» и «оптимизация». Вас ожидает 700 интерактивных заданий, 18 часов живых вебинаров, 5 качественных макетов дизайна и общение с личным наставником, который будет делиться секретами мастерства.

    Вводная лекция про роль и место верстальщика в мире веб-технологий.

    1. Что на самом деле происходит, когда вы вводите в браузере адрес сайта и нажимаете Enter?
    —IP-адрес, сервер и веб-сервер, «виртуалхосты».
    —Доменные имена, URL-aдреса и система DNS.
    —Загрузка и «сборка» веб-страницы, TCP/IP, HTTP.
    —Приёмы оптимизации веб-страниц.

    2. Инструменты веб-разработчика и рабочий процесс на интенсиве.
    —Системы контроля версий. Git и GitHub.
    —Инструменты вёрстки: редакторы кода, инспекторы, полезные веб-сервисы.
    —Немного о браузерах, браузерных движках и различиях между ними.

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

    1. Введение в HTML и CSS.
    —Синтаксис HTML.
    —Структура простейшего HTML-документа.
    —Синтаксис CSS. Базовые CSS-селекторы.
    —Наследование, каскадность и приоритеты в CSS.

    2. Качественная разметка и стили кодирования.
    —Простая, понятная, читабельная и логичная разметка: примеры и антипримеры.
    —Типовые ошибки разметки: «ссылка или кнопка», «картинка или фон» и другие.
    —Модульность разметки или использование «пространств имён».
    —Когда использовать , и

    ?
    —Зачем нужен стиль кодирования? Обзор популярных стайлгайдов.

    3. Создаём разметку главной страницы учебного проекта.

    3. Фотошоп для верстальщика

    Разберём всё необходимое для работы верстальщика в фотошопе. Подготовим графику для проектов.

    1. Типовые задачи верстальщика в фотошопе.
    —Настройка интерфейса фотошопа.
    —Работа со слоями, типы слоёв.
    —Получение параметров текста.
    —Измерение размеров блоков, отступов, получение информации о цвете.
    —Получение параметров сложных декоративных эффектов: тени и прочее.
    —Экспорт графики, работа с повторяющимися паттернами.

    2. Обзор форматов графики в вебе.
    —PNG, JPEG, SVG, GIF.
    —Как выбрать подходящий формат?

    3. Разбор графических макетов проектов.

    Разберёмся с блочной моделью документа. Создадим сетки страниц учебного и личного проектов.

    1. Поток документа и блочная модель документа.
    —Понятие сетки и потока документа.
    —Блочные и строчные элементы и их особенности.
    —Свойства блочной модели: размеры, рамки и отступы.
    —Тонкости блочной модели: «схлопывание» и «выпадание» внешних отступов, width: 100% и width: auto, свойство box-sizing и другие.

    2. Как управлять потоком и строить сетки?
    —Свойство display. Управление типом элементов.
    —Свойство float и его особенности.
    —Построение сеток на «плавающих» элементах.
    —Блочно-строчные элементы и их особенности, борьба с пробелами между блочно-строчными элементами.
    —Построение сеток на блочно-строчных элементах.

    3. Создаём сетку главной страницы учебного проекта, экспериментируем с «карточными» элементами интерфейса на блочно-строчных элементах.

    5. Декоративные элементы

    Познакомимся с приёмами создания декоративных элементов. Завершим вёрстку главных страниц учебного и личного проектов.

    1. Позиционирование.
    —Относительное позиционирование.
    —Абсолютное позиционирование: координаты, изменение точки начала координат, относительные координаты и размеры, координаты по умолчанию.
    —Фиксированное позиционирование.
    —Управление порядком слоёв.

    2. Другие важные приёмы.
    —Псевдоэлементы.
    —Спрайты.
    —normalize.css.
    —Подключение нестандартных шрифтов.

    3. Завершаем вёрстку главной страницы учебного проекта.

    6. Оформление контента

    Завершим вёрстку внутренних страниц и подготовим проекты к публикации. Начнём готовиться к защите личного проекта.

    1. Практикуемся в вёрстке элементов содержимого.
    —Сверстаем текстовую страницу учебного проекта. Подготовим универсальные стили содержания, которые будут хорошо работать и при наполнении страницы из CMS.
    —Сверстаем всплывающие окна с формой входа и интерактивной картой. Разберём приёмы стилизации нестандартных элементов форм.
    —Подготовим свёрстанный учебный макет к публикации или передаче заказчику.

    2. Разбираем типовые случаи переполнения и способы борьбы с ними.

    3. Готовим проект к защите. Подробный разбор критериев защиты выпускных проектов.

    7. Введение в javascript

    Познакомимся с javascript, узнаем что такое Vanilla JS и оживим некоторые блоки вёрстки.

    1. Язык программирования javascript.
    —Роль программирования в жизни верстальщика.
    —Что такое DOM и зачем нам объект document.
    —Зачем нужен объект window.

    2. Типовые случаи использования javascript.
    —Как найти любой элемент на странице.
    —Как реагировать на события, происходящие на странице.
    —Как менять CSS-стили у элементов.
    —Как использовать анимацию на странице.

    3. Оживляем всплывающее окно и вставляем интерактивную карту на главной странице учебного проекта.

    8. Прогрессивное улучшение

    Узнаем, как использовать новые возможности HTML и CSS, не ломая работоспособность вёрстки.

    1. Знакомство с прогрессивным улучшением и постепенной деградацией.
    —«Житейские» примеры двух подходов.
    —Этапы прогрессивного улучшения.
    —Влияет ли прогрессивное улучшение на скорость и эффективность разработки?
    —Как добавлять улучшения независимыми и цельными слоями.
    —Прогрессивное улучшение и прокси-браузеры — друзья навсегда.

    2. Вносим изменения в вёрстку учебного проекта с учётом прогрессивного улучшения.

    3. Немного о минификации стилей и скриптов.

    Автор: Александр Першин, Николай Громов, Алексей Симоненко
    Название: Интенсивный онлайн-курс «Базовый HTML и CSS»
    Год выхода: 2020
    Жанр: Видеокурс обучающий Вэб-дизайн, верстка
    Язык: Русский
    Выпущено: Россия
    Продолжительность: 18:37:38
    Качество видео: PCRec
    Формат: MP4 (+ доп. материалы)
    Видео: AVC/H.264, 1728×1080,

    781 — 1134 Kbps
    Аудио: AAC, 2 ch, 235 Kbps, VBR
    Размер файла: 9.36 Gb

    Илон Маск рекомендует:  Что такое код mysql_escape_string
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL