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

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

Привет, Гость! Войдите или зарегистрируйтесь.



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

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

1

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

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

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

http://sd.uploads.ru/MbP0L.jpg

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

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

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

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

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

Видео: AVC/H.264, 1920x1080, ~627 Kbps
Аудио: AAC, 2 ch, 235 Kbps

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

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

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

http://s8.uploads.ru/3kJFO.png

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

2. Разметка

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

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

http://s7.uploads.ru/2bmip.png

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

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

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

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

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

http://sa.uploads.ru/L3uw8.png

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. Финал

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

http://s1.uploads.ru/rfGIo.gif
HTML Academy - Интенсивный онлайн-курс «Базовый HTML и CSS» (2017), 10,6 GB, by 26.10.2017

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

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

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

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

0

2

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

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

+2

3

киборг написал(а):

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

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

Конечно можно, без проблем. Считаю, будет здорово, собрать полезные ресурсы и ссылки  http://s020.radikal.ru/i711/1509/46/8410405a3850.jpg

0

4

киборг написал(а):

можно добавить?

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

киборг написал(а):

просто наткнулся на еще один обучательный сайт в нуожиданном месте - на сайте Мозиллы.
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 - дремучий лес и непроходимая тайга?!

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

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

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

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

0

5

Dimitriy Gerasimov написал(а):

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

Вот и наш капитан поддерживает и одобряет такой подход!

0

6

Thomas написал(а):

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

   :blush:

0