WebForMySelf | HTML5 и CSS3 с нуля до профи (2016) PCRec

Автор (режиссер): Андрей Бернацкий
Жанр: HTML5, CSS3, web

Описание:
Без преувеличения на сегодняшний день это самый полный и актуальный курс в Рунете. Вдумайтесь сами: только лишь основной раздел курса (без учета бонусов) состоит из 47 подробнейших видеоуроков, образующих собой пошаговую практическую систему.

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

В нашем новом курсе ВСЕ макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ.

Изучение курса построено по принципу «от простого к сложному» и от «теории к практике».

Я не просто научу вас верстать простейшие веб-страницы, мы с вами очень подробно (вплоть до малейших деталей) проработаем верстку на примере трех различных по своей сложности наиболее популярных видов веб-сайтов в современном Интернете:

• сайта-визитки

• блога и...

• интернет-магазина

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

Видео: AVC/H.264, 1024x768, ~283 - 681 Kbps
Аудио: AAC, 2 ch, 106 Kbps

ПЕРВАЯ ЧАСТЬ
Верстка макета сайта-визитки

Урок 1. Введение. Настройка страницы
Урок 2. Определение разметки для страницы
Урок 3. Описание стилей шапки сайта
Урок 4. Описание стилей основного блока сайта. Часть1
Урок 5. Описание стилей основного блока сайта. Часть2. Заключение

ВТОРАЯ ЧАСТЬ
Верстка макета блога

Урок 1. Введение. Настройка страницы
Урок 2. Определение разметки шапки сайта
Урок 3. Подключение нестандартных шрифтов
Урок 4. Описание стилей шапки сайта
Урок 5. Описание разметки основного блока сайта
Урок 6. Описание разметки блока постов
Урок 7. Назначение стилей для блока постов
Урок 8. Описание разметки боковой колонки
Урок 9. Назначение стилей для боковой колонки
Урок 10. Описание разметки постраничной навигации
Урок 11. Назначение стилей для постраничной навигации
Урок 12. Верстка footer’а сайта
Урок 13. Доработка верстки макета
Урок 14. Адаптация верстки под мобильные устройства. Часть 1
Урок 15. Адаптация верстки под мобильные устройства. Часть 2
Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
Урок 17. Добавление эффектов CSS3 на страницу. Часть 2

ТРЕТЬЯ ЧАСТЬ
Верстка макета интернет-магазина

Урок 1. Введение
Урок 2. Подключение нестандартного шрифта к странице
Урок 3. Определение разметки шапки сайта
Урок 4. Описание стилей шапки сайта. Часть 1
Урок 5. Описание стилей шапки сайта. Часть 2
Урок 6. Подключение слайдера к странице
Урок 7. Назначение стилей и настройка слайдера
Урок 8. Описание разметки блока новостей
Урок 9. Назначение стилей для блока новостей
Урок 10. Описание разметки блока «Популярные продукты»
Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
Урок 13. Улучшение блока «Популярные продукты»
Урок 14. Описание разметки блока «О магазине»
Урок 15. Назначение стилей для блока «О магазине»
Урок 16. Описание разметки блока «Подписка»
Урок 17. Назначение стилей для блока «Подписка»
Урок 18. Описание разметки для footer’a
Урок 19. Назначение стилей для блока «footer»
Урок 20. Делаем макет адаптивным. Часть 1
Урок 21. Делаем макет адаптивным. Часть 2
Урок 22. Делаем макет адаптивным. Часть 3
Урок 23. Делаем макет адаптивным. Часть 4
Урок 24. Делаем макет адаптивным. Часть 5
Урок 25. Заключение

БОНУС 1
Премиум курс. Учебник по основам HTML

Урок 1. Введение. Основы HTML
Урок 2. Структура HTML документа
Урок 3. Теги форматирования текста
Урок 4. Изображения
Урок 5. Ссылки. Ссылки-изображения
Урок 6. Списки
Урок 7. Таблицы
Урок 8. Формы

БОНУС 2
Премиум курс. Учебник по основам CSS

Урок 1. Способы подключения
Урок 2. Назначения классов и id
Урок 3. Свойства шрифта
Урок 4. Свойства текста
Урок 5. Фон
Урок 6. Ширина, высота. Тег Div и Span
Урок 7. Рамка
Урок 8. Отступы
Урок 9. Основы CSS. Float, Clear, Display
Урок 10. Основы CSS. Свойство position

БОНУС 3
Премиум курс. Верстка сайтов для начинающих

Урок 1. Определение разметки
Урок 2. Описание разметки
Урок 3. CSS шапки сайта
Урок 4. CSS области контента
Урок 5. Доработка верстки

БОНУС 4
Премиум курс. HTML 5: основы

Урок 1. Структура документа HTML 5
Урок 2. Обзор тегов header и footer
Урок 3. Тег article
Урок 4. Тег section
Урок 5. Теги nav, main и aside
Урок 6. Теги figure и figcaption
Урок 7. Кроссбраузерное оформление
HTML 5 тегов
Урок 8. Тег input. Новые типы тега в html 5.
Часть 1
Урок 9. Тег input. Новые типы тега в html 5. Часть 2
Урок 10. HTML 5 video. Вставка видео на сайт
Урок 11. HTML 5 audio. Вставка аудио на сайт
Урок 12. HTML 5 canvas. Рисование в HTML 5
Урок 13. HTML 5 geolocation. Определение местоположения в HTML 5

БОНУС 5
Премиум курс по CSS3

Урок 1. Работа с фоном в CSS3
Урок 2. Тени и закругленные углы
Урок 3. Прозрачность фона, картинки, текста и цвета в CSS
Урок 4. Линейные градиенты CSS
Урок 5. Колонки
Урок 6. Радиальные градиенты
Урок 7. Шрифт
Урок 8. Работа с текстом в css 3
Урок 9. Псевдоклассы
Урок 10. Селекторы
Урок 11. Трансформация

БОНУС 6
Анатомия прибыльного лендинг пейдж

Урок 1. Анатомия прибыльного лендинг пейдж

БОНУС 7
Создание лендинг пейдж за один вечер

Урок 1. Введение
Урок 2. Подключаем нестандартный шрифт к странице
Урок 3. Определяем разметку шапки сайта
Урок 4. Описываем стили шапки сайта
Урок 5. Определяем разметку слайдера
Урок 6. Назначаем стили для слайдера
Урок 7. Верстаем блок "Особенности"
Урок 8. Верстаем блок "Галерея"
Урок 9. Определяем разметку блока видео
Урок 10. Описываем стили блока видео
Урок 11. Верстаем блок "Скачать приложение"
Урок 12. Просматриваем макет. Устраняем недочеты
Урок 13. Определяем разметку блока контактов
Урок 14. Описываем стили блока контактов
Урок 15. Верстаем футер
Урок 16. Адаптируем слайдер
Урок 17. Заключение

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

Скриншоты:

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

timmmer11 писал(а):

makerdream писал(а):

Dimentruu писал(а):

nav ul li a {}

Это кошмар

каскадддд !!!

не хватает body nav ul li a {}

Да уж, всему вас учить нужно..., окей, показываю как правильно:
window document html body nav ul li a {}
три года обучения у этой гоп компании и вот результат! Вуаля! :мегашок:

после такого кода у браузера начнется депрессия...

Thyrane писал(а):

cphrz писал(а):

В 2016-ом пользоваться Dw это О нет

Тоже самое про float....Вместо этого я бы лучше продлил подписку на htmlacademy(не реклама). Это ещё мелочи но это просто атас: nav ul li {float: left;}. Нет слов.

Скажите, а что с nav ul li {float: left;} не так? Если есть более лучший вариант, скажите какой?

Отвечу тебе лично: а что с nav ul li {float: left;} не так? я шесть лет работаю FrontEnd-ом и видел много разного кода это указание делается для того чтобы точно указать к которому селектору относятся данные стили, так как ранее чем точнее укажешь тем быстрее загрузка страниц происходила, в пример, как ранее медленная скорость интернета загрузка страниц происходила частично по блокам, но сейчас машины скоро работают и можно уже сокращенно указывать но поверь знать это и уметь указывать надо, когда будешь работать с большим проектом где ты не один разработчик там тебе и объяснять как указывать а как нет... не слушай что многие говорят чем большее знаешь тем востребован будешь

makerdream писал(а):

Dimentruu писал(а):

nav ul li a {}

Это кошмар

каскадддд !!!

писал(а):

Скажите, а что с nav ul li {float: left;} не так? Если есть более лучший вариант, скажите какой?

По стандартам CSS все вразумительно, связи предков соблюдены, довольно читабельная конструкция, хотя можно было и проще.
а лучше будет не nav ul li {float: left;}, а вот так, на мой взгляд nav ul li {display: inline-block;}

Благодарю за раздачу!

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

Комментарии его

По вводному курсу: https://webformyself.com/minikurs/html5/index-subscribe.html

Цитата:

по структуре вообще печаль
в плане использования html элиментов
ну если тут такой вводный урок
это капец

Когда я сказал, что качнул полный урок с этой раздачи

Цитата:

не смотри
не порть мне психику)
его верстка ничего общего не имеет с реальностью

Потом я ему кинул результаты верстки с примеров к урокам. Можете и сами их скачать отдельно.

Цитата:

я уже все увидел
такая же ернуда что и там

все забудь теперь точно об этих уроках

Я: Даже как вводная не подойдет?

нет
у тебя будет каша в голове после этого
которую придется потом разбирать

Вам решать, стоит ли учиться по этому курсу.

Добавлено спустя 2 минуты 31 секунду:

kolian899 писал(а):

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

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

Советую после него для дальнейшего развития и закрепления пройти курсы HTML academy.

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

AVTOXA78 писал(а):

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

Цитата:

по структуре вообще печаль
в плане использования html элиментов
это капец

А по css все ок? :подмигивание:

Друг бы свои образцы поскидывал, было бы более эффективно.

AVTOXA78 писал(а):

kolian899 писал(а):

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

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

Советую после него для дальнейшего развития и закрепления пройти курсы HTML academy.

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

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

church30 писал(а):

AVTOXA78 писал(а):

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

Цитата:

по структуре вообще печаль
в плане использования html элиментов
это капец

А по css все ок? :подмигивание:

Друг бы свои образцы поскидывал, было бы более эффективно.

Ну, он мне и скинул. У него, как минимум ,код красивый и понятный. Но вопрос корректных уроков для меня еще открыт.

Прохожу эти уроки, и чет приуныл делая последний урок 2го макета.
Задача, сделать выезжающую плашку на картинку, но у автора все хорошо и эта плашка появляется только на картинке, у меня же, когда она в "нижнем" положении она стоит поверх заголовка (а должна по идее быть под ним)
http://screenshot.ru/upload/image/zJE8

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

https://jsfiddle.net/stqdbLaj/

Решил вопрос, подсмотрев у другом месте:
- для "article header" нужно добавить overflow: hidden; тогда не будет панель на другие элементы заходить

P.S. моя проблема была из-за того, что "overflow: hidden;" в уроке есть в самом начале когда для тега "header" его задали, когда шапку делали, я же описывал шапку с помощью класса, по этому не от наследовал, такие дела.

спасибо за курс!!

А почему так все негативно отзываются о дримвивере?

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

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

Спасибо за курс!.
Ни у кого не найдется их курс по angular js (28 премиум уроков)?
Напишите пожалуйста в личку или на мыло = greenwald80 + gmail точка com
Буду безумно благодарен.