Специалист | HTML5 и CSS3 (Уровень 1,2,3) (2016) PCRec

Автор (режиссер): Специалист
Жанр: Верстка

Описание:
- HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3
- HTML и CSS. Уровень 2. Кроссбраузерная верстка, основы юзабилити, HTML5 и CSS3
- HTML и CSS. Уровень 3. Продвинутые методологии и инструменты верстки

Преподаватели: Игорь Борисов, Валентин Гривцов, Сергей Алмазов

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

Видео: AVC/H.264, 1024x768, ~120 kbps
Аудио: AAC, 2 ch, 122 kbps

Просмотр доступен только для зарегистрированных пользователей

HTML and CSS. Level 1. Creation of sites in HTML 5 and CSS 3

Планируете сделать веб-технологии своей профессией? Хотите создавать сайты? Работать верстальщиком, web-дизайнером, а может, интернет-маркетологом? У вас есть онлайн-проект, который Вы продвигаете сами? В любом случае, Вам не обойтись без знания HTMLи CSS – языков разметки веб-страниц и их внешнего оформления.

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

Во время обучения Вы получите начальные навыки работы в HTML и CSS, а также научитесь применять интерактивные возможности последних версий – HTML 5 и CSS 3.

По окончании курса Вы будете уметь:

создавать web-страницы, содержащие все необходимые компоненты: текст, изображения и гиперссылки;
определять правильную иерархию страниц для создания сайта;
использовать интерактивные элементы для улучшения его юзабилити;
применять возможности CSS для эффективного оформления сайта и совершенствования его функциональности;
работать с фреймами;
применять новый функционал HTML 5 и CSS 3.

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

А еще во время обучения Вы узнаете, что важнее – дизайн или чёткая структура? И как спроектировать сайт таким образом, чтобы он успешно продвигался в дальнейшем?

Программа курса соответствует требованиям профессионального стандарта.

HTML и CSS. Level 2. Cross-browser development, usability fundamentals, HTML5 и CSS3

HTML и CSS — основные языки, с помощью которых разрабатываются веб-страницы. Формально HTML и CSS являются разными языками, но применяются в тесной связи друг с другом и на практике составляют единый комплекс технологий. Этот учебный курс даст вам представление о современных технологиях HTML и CSS, которые совместимы со стандартами Консорциума W3C и поддерживаются в браузерах, распространённых на сегодняшний день.

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

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

HTML and CSS. Level 3 Advanced methodologies and tools typesetting

На данном курсе вы научитесь работать с большим объемом кода, получите необходимое представление о том, как пишется быстрый, эффективный и качественный код HTML/CSS. Узнаете о возможностях использования 3D на страницах, а также о том, как можно быстро разрабатывать HTML-код. На курсе рассматриваются следующие технологии: Bower, WebComponents, OOCSS, Yandex.БЭМ, FlexBox, 3D, Parallax, Polymer. Курс поможет научиться культуре разработки кода, а также методологии, чтобы научиться грамотно структурировать информацию и закладывать прочный фундамент для больших сайтов.

Скриншоты:

Время раздачи: с 09:00 до 23:00 (до появления первых 3-5 скачавших)

Dvorik_2010 писал(а):

Поддерживаю вопрос пользователя Raven23. И Продублирую, поскольку не было ответа на него: А что не так у Вас с вёрсткой float-ами, Ребят? ...

С флоатами "не так" то, что это свойство вообще не для блочной верстки! Это свойство было введено в CSS для работы с текстом.
Написали вы статью для своего сайта, решили вставить в текст картиночку, и чтобы она красиво обрамлялась текстом справа? Пожалуйста, float: left сделает это для вас. Хотите наоборот, картинка справа и текст обтекает красиво слева? Без проблем, float: right и всё будет в лучшем виде! Вот для чего нужны флоаты.
То, что их некоторое время назад верстальщики использовали для блочной верстки, это было не от хорошей жизни, просто потому что CSS на том этапе имел недостаточно возможностей, вот и изгалялись. Было это хитрожопо, но на том этапе еще допустимо. Но сейчас на дворе почти 2017 год, использование свойств display и position позволяют верстать шаблоны как только душе угодно!
Поэтому верстка флоатами - зло, она уже сейчас выглядит архаично, а через год на такую верстку будут показывать пальцем и смеяться.

derini писал(а):

Dvorik_2010 писал(а):

Поддерживаю вопрос пользователя Raven23. И Продублирую, поскольку не было ответа на него: А что не так у Вас с вёрсткой float-ами, Ребят? ...

использование свойств display и position позволяют верстать шаблоны как только душе угодно!

И для адаптивной вёрстки подойдёт?
Может уж лучше тогда flex-box?

nonameclaber писал(а):

И для адаптивной вёрстки подойдёт?
Может уж лучше тогда flex-box?

Флексами вообще можно вытворять самые невообразимые вещи, за ними будущее и оно почти наступило. Просто я сказал про display и position потому что это пока еще более нативные вещи, более универсальный стандарт. Повсеместный переход на верстку с помощью flex box не перешли пока только из-за того, что можно нарваться на проблемы с кроссбраузерностью на старых версиях чертового IE (гореть ему в аду). Но если плюнуть на ретроградов, сидящих на 8 и 9 Интернет Эксплорера, то flex box конечно идеальный вариант для верстки!
В любом случае, свойство float только для картинок в тексте, блочная верстка флоатами это ересь.

derini писал(а):

что можно нарваться на проблемы с кроссбраузерностью на старых версиях чертового IE (гореть ему в аду).

Мне кажется, что тут виноваты сами верстальщики!) не потакали бы прихотям IE (перестать верстать под старые версии IE), он сам бы и отвалился)

Так, а display и position как дружат с адаптивностью? с bootstrap и другими фреймворками?

nonameclaber писал(а):

Мне кажется, что тут виноваты сами верстальщики!) не потакали бы прихотям IE (перестать верстать под старые версии IE), он сам бы и отвалился)

Всё не так просто. Дело не в "потакании прихотям", а в том что если вы делаете сайт интернет-магазина или сайт туроператора (к примеру), то для них важен каждый посетитель как потенциальный покупатель, здесь идет охота даже за теми кто сидит на древних браузерах, поэтому для них кроссбраузерность реально критична. Но если делается сайт на айтишную тематику или вообще рассчитанный на продвинутых юзеров, то тогда конечно на проблемы владельцев 7,8 и 9 IE можно плевать с высокой колокольни.

nonameclaber писал(а):

Так, а display и position как дружат с адаптивностью? с bootstrap и другими фреймворками?

Как они могут "не дружить"? Адаптивность - это свойство вебдизайна. display и position - это свойства CSS, то есть инструмента с помощью которого этот дизайн создается (адаптивый и неадаптивный). Одно создается с помощью другого. Тоже самое и фреймфорками. Там эти свойства используются во всю.

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

а) с помощью технологии медиа-запросов в CSS ("css media queries");

б) с помощью выделения отдельно основного домена сайта для главной "десктопной" версии ресурса, например www (точка) mysite (точка) ru, и отдельного поддомена сайта для его мобильной версии, например www (точка) mobile (точка) mysite (точка) ru.

В общем, вы поняли смысл.

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

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

Вопрос: Какой из способов более предпочтительный в данном случае? Если можно, то аргументировать... Поскольку сейчас мне необходимо определиться с этим вопросом для самого себя...

goblin2016
Конечно же "css media queries"!!!
Во-первых второй вариант с точки зрения SEO никудышный, во-вторых во втором варианте сайт для мобильной версии какой? сейчас на рынке сотни (ну, ладно, десятки) различных мобильных устройств со своими размерами экранов и разрешениями. А "css media queries" имеют гибкий контент, сайт сам подстраивается под нужное разрешение.

nonameclaber писал(а):

Конечно же "css media queries"!!! Во-первых второй вариант с точки зрения SEO никудышный, во-вторых во втором варианте сайт для мобильной версии какой? сейчас на рынке сотни (ну, ладно, десятки) различных мобильных устройств со своими размерами экранов и разрешениями. А "css media queries" имеют гибкий контент, сайт сам подстраивается под нужное разрешение.

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

Спасибо.

во, Борисов дает, консорциум называется W3C, а не W3, стыдно должно быть гуру )))

spasibo

goblin2016 писал(а):

где можно в официальной документации сравнить и посмотреть корректный синтаксис "медиа-запросов". Имею ввиду, именно официальные источники, а не просто статьи на просторах Интернета.

Я так понял, вы хотите увидет официальную спецификацию? Вот она: http://www.w3.org/TR/css3-mediaqueries/#syntax

Ребята, я Вас умоляю, эти курсы просто напрасная трата времени и сил. Вы видели сайт Специалиста? Специалисты обучают создавать адаптивные и юзабельные сайты, а у самих как наоборот, я сравниваю например с Udemy или Udacity. Конечно, возможно это не означает что они плохие преподаватели, но мне кажется что если вы обучаете этим технологиям тои сами должны их придерживатся. Так что, изучаем английский Duolingo+Youtube channels+Instant Translate extension для перевода текста. А потом уже Codeacademy+Udacity(Udemy/Linda) и будет вам счастье.

BvzBvzBvz писал(а):

во, Борисов дает, консорциум называется W3C, а не W3, стыдно должно быть гуру )))

Это одно и тоже

epsilonclub писал(а):

Ребята, я Вас умоляю, эти курсы просто напрасная трата времени и сил. Вы видели сайт Специалиста? Специалисты обучают создавать адаптивные и юзабельные сайты, а у самих как наоборот, я сравниваю например с Udemy или Udacity. Конечно, возможно это не означает что они плохие преподаватели, но мне кажется что если вы обучаете этим технологиям тои сами должны их придерживатся. Так что, изучаем английский Duolingo+Youtube channels+Instant Translate extension для перевода текста. А потом уже Codeacademy+Udacity(Udemy/Linda) и будет вам счастье.

На счет полезности не спорю, дело каждого, а вот поводу сайта Борисов еще в 10-ых годах в своих курсах часто ссылался на сайт спеца и молвил мол, что «нас туда не пускают», имея ввиду в разработку офф. сайта, а так уверен они запросто могли б давно освежить дизайн

Спасибо за материал! Специалист конечно лучший в своем роде.

Коллеги, кто смотрел уже: много ли там критической информации было удалено в конце первого уровня (тот, который с Борисовым)? Он начинал рассказывать о вопросах поискового продвижения... Кроме указанного последнего дня с Борисовым, более нигде видео не обрезано??