Курс «Основы CSS»


Содержание

Учебник ‘Основы CSS с нуля’

Пару слов об учебнике

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

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

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

Если в ходе освоения учебного материала у вас возникнут трудности, пишите мне в индивидуальный ‘Чат с автором’ (по возможности стараюсь отвечать всем).

Чтобы посмотреть результат выполнения исходного кода примеров учебника во фрейме кодового блока, используйте кнопку ‘Результат’ .

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

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

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

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

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

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

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Верстка-Мастер

От теории до верстки популярных шаблонов

Видеокурс по современной верстке с нуля

Для кого

Абсолютные новички

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

Начинающие верстальщики

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

Продвинутые верстальщики и фрилансеры

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

Бизнесмены, арбитражники, рекламщики

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

Действующие веб-программисты

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

Почему вам стоит пройти этот курс

Бесценная практика

В курсе показана верстка макетов двух наиболее востребованных типов сайтов: Landing Page и интернет-магазина

Современные технологии верстки

Показано, как быстро верстать сайты, применяя новейшие технологии верстки: Flex, препроцессор SasS и сборщик Gulp

Посмотрите живое видео
от автора курса

Так кто же такой верстальщик

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

Верстка — это создание веб-страниц с помощью специальных языков.

Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.

Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.

Как создаются современные сайты

Если упрощенно рассмотреть схему создания сайта, то можно выделить следующие этапы

ПЛАНИРОВАНИЕ

ДИЗАЙН

ВЕРСТКА

ПРОГРАММИРОВАНИЕ

РАЗМЕЩЕНИЕ САЙТА В ИНТЕРНЕТЕ

Современные стандарты верстки

По состоянию на конец 2020 года на верстку налагаются определенные требования, соблюдение которых де-факто является стандартом.

Верстка должна быть:

  • Кроссбраузерной — страница должна одинаково выглядеть во всех браузерах.
  • Адаптивной — также страница должна хорошо отображаться на экранах мобильных устройств: планшетов и смартфонов.
  • Оптимизированной — верстка изначально создается оптимизированной под поисковые системы.
  • Доступной – чтобы люди с ограниченными возможностями, например, инвалиды по зрению, также могли пользоваться сайтом.

Сегодня есть много технологий, которые применяются для верстки. Если раньше были HTML и CSS, то сегодня это HTML5 и CSS3, препроцессоры, технология Flex, различные фреймворки и так далее.

Путь успешного верстальщика

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

Знает основные HTML-теги и CSS-свойства, может править контент на странице, добавлять встроенное содержимое — например, видеоролик из YouTube или карту Googlе. При самостоятельной верстке макета испытывает некоторые затруднения и нуждается в наставнике и руководителе.

Junior должен знать HTML и CSS, разбираться в работе с изображениями, аудио и видео. Обязан знать, какие есть браузеры, редакторы кода, инструменты разработчика. Средний месячный заработок: 40-70 тысяч рублей.

Можно сказать, что такое деление условно. Тем не менее, такая градация дает понять, какие навыки и знания на каждом из этапов необходимы. И самое главное — понять последовательность изучения этих технологий, языков и инструментов.

Верстка — это Must Have
для любого веб-разработчика!

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

Верстальщик — это направление, в котором можно постоянно развиваться, и очень много смежных сфер в веб-разработке неразрывно связаны с версткой.

Независимо от того, чем вы предпочтете в будущем заниматься в области сайтостроения (frontend, backend или полный цикл: fullstack), с навыком верстки вам придется сталкиваться постоянно. Верстка — это Must Have для любого веб-разработчика! Она — вход в веб-разработку.

КОМАНДА WEBFORMYSELF ПРЕДСТАВЛЯЕТ ДОЛГОЖДАННЫЙ ПРОДВИНУТЫЙ ВИДЕОКУРС ОБО ВСЕХ ТОНКОСТЯХ СОВРЕМЕННОЙ ВЕБ-ВЕРСТКИ

Верстка-Мастер

От теории до верстки
популярных шаблонов

Посмотрите видео и
узнайте о курсе подробнее

Что внутри

Основная часть видеокурса состоит из двух больших практических блоков:

  • Блок 1. Верстка макета главной страницы интернет-магазина
  • Блок 2. Верстка макета Landing Page

В этих практических блоках показано, как с нуля шаг за шагом создать верстку PSD-макетов для главной страницы интернет-магазина и для посадочной страницы (Landing Page).

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

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

Из курса вы узнаете

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

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

Как верстать сайты, применяя современные востребованные методы, подходы и технологии верстки.

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

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

Получите современную теоретическую базу в области HTML и CSS, включая новейшие их версии, получите море практического опыта.

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

Главные фишки курса

Абсолютные новички

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

Начинающие верстальщики

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

Продвинутые верстальщики и фрилансеры

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

Бизнесмены, арбитражники, рекламщики

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

Действующие веб-программисты

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

Практический результат изучения курса

В ходе изучения основной части курса верстаются современные макеты двух наиболее востребованных типов сайтов: Landing Page и главной страницы интернет-магазина.

В нашем курсе макеты верстаются по самым передовым технологиям на рынке – с использованием технологии Flex, препроцессора SasS и сборщика Gulp. Верстка будет кроссбраузерной и адаптивной под любые устройства.

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

Сайты, которые создаются в курсе

Содержание видеокурса

Блок 1. Верстка макета главной страницы интернет-магазина

Количество уроков: 23

Продолжительность: более 5 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

В первой части курса показано, как сверстать макет главной страницы интернет-магазина.

В блоке показано, как разбить макет на необходимые блоки, как нарезать изображения из Photoshop, как настроить собственную сборку при помощи менеджера Gulp и полностью сверстать данный макет.

Урок 1. Обзор макета главной страницы интернет-магазина

В данном уроке сделан обзор макета и рассмотрены все его составляющие.

Урок 2. Нарезка изображений из PSD-макета

В этом уроке вы узнаете несколько способов нарезки картинок из PSD-макета.

Урок 3. Сборка проекта при помощи Gulp

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

Урок 4. Реализация HTML-структуры для верхнего блока

В этом видео начинается верстка макета и создается HTML-структура для верхнего блока.

Урок 5. Написание CSS-стилей для верхнего блока

В данном видео прописываются необходимые CSS-стили для верхнего блока.

Уроки 6. Адаптация верхнего блока под различные разрешения

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

Уроки 7. Написание HTML-структуры для блока со слайдером

В данном уроке показано, как создать необходимую HTML-структуру для блока со слайдером.

Урок 8. Полная стилизация слайдера

В данном уроке полностью стилизуется слайдер.

Уроки 9. Медиа-запросы для блока со слайдером

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

Урок 10. Настройка и подключения плагина Owlcarousel 2 для слайдера

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

Урок 11. Полная верстка блока категорий

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

Урок 12. Написание HTML-структуры для блока с предложениями

В этом уроке создается HTML-структура для блока с предложениями.

Урок 13. Стилизация блока с предложениями

В данном видео добавляются CSS-свойства для блока с предложениями.

Урок 14. Адаптация блока с предложениями под различные разрешения

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

Урок 15. Полная верстка блока с баннером

В данном видеоуроке полностью верстается блок с баннером.

Урок 16. Полная верстка блока с продуктами

В данном видеоуроке показано, как реализовать верстку блока с продуктами.

Урок 17. Реализация HTML-структуры и написание стилей для блока с рекомендуемыми товарами

В этом видеоуроке показана верстка блока с рекомендуемыми товарами.

Урок 18. Подключение и настройка карусели для блока рекомендуемых товаров

В данном уроке к блоку с рекомендуемыми товарами будет подключена и настроена карусель.

Урок 19. Полная реализация блока с баннером

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

Урок 20. Верстка и адаптация блока с новостями

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

Урок 21. Верстка и адаптация блока со ссылками

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

Урок 22. Верстка подвала

В данном уроке верстается последний блок футера.

Урок 23. Модернизация блока с поиском при помощи JavaScript

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

Блок 2. Верстка макета Landing Page

Количество уроков: 29

Продолжительность: около 7 часов

ЦЕЛИ И ЗАДАЧИ БЛОКА

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

Урок 1. Обзор макета и подготовка к верстке

В этом видео описана подготовка к верстке, устанавливаются необходимые зависимости при помощи пакетного менеджера NPM.

Урок 2. Написание HTML-структуры для верхнего блока

В этом видео показано создание необходимой HTML-структуры для создания верхнего блока.

Урок 3. Стилизация меню и блока с информацией

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

Урок 4. Завершение стилизации верхнего блока и написание миксина

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

Урок 5. Адаптация верхнего блока под различные разрешения

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

Урок 6. Полная верстка блока с преимуществами

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

Урок 7. Полная реализация блока с историей

В данном уроке создается HTML-структура блока с историей, показано, как добавить CSS-стили и адаптировать блок при помощи медиа запросов.

Урок 8. HTML-структура для блока с услугами

В данном уроке вы узнаете, как сделать HTML-структуру для блока с услугами.

Урок 9. Написание стилей и адаптация блока с услугами

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

Урок 10. HTML-структура для блока портфолио

В данном уроке создается HTML-структура для блока портфолио.

Урок 11. Стилизация блока портфолио

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

Урок 12. Завершение стилизации блока портфолио и его адаптация

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

Урок 13. HTML-структура для блока Case Study

В данном видео узнаете, как сделать HTML-структуру для блока Case Study.

Урок 14. Написание стилей и адаптация блока Case Study

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

Урок 15. Верстка блока со статистикой

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

Урок 16. Написание HTML-структуры для блока с ценами

В данном видео создается HTML-структура блока с ценами.

Урок 17. Стилизация и адаптация блока с ценами

В этом уроке вы узнаете, как назначить стили CSS и адаптацию блока с ценами.

Урок 18. HTML-структура для блока с командой

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

Урок 19. CSS-стили для блока с командой

В данном видео будет продолжена работа над блоком команды, для которого пишутся все необходимые стили.

Урок 20. Адаптация блока с командой при помощи медиазапросов

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

Урок 21. Верстка блока Great Integrations

В данном видеоуроке полностью сверстается блок Great Integrations.

Урок 22. HTML-структура для блока новостей

В этом уроке создается структура для блока новостей.

Урок 23. CSS-стили для блока новостей

В данном видео продолжится реализация блока новостей и создаются необходимые CSS-стили.

Урок 24. Адаптация блока новостей под различные разрешения

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

Урок 25. HTML-структура для блока с формой

В уроке показано, как создать структуру HTML для блока с формой.

Урок 26. Стилизация и адаптация блока с формой

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

Урок 27. Верстка блока с предложением

В этом уроке будет полностью выполнена верстка блока с предложением.

Урок 28. Верстка подвала

Данное видео является последнним по верстке Landing Page. В нем реализуется и адаптируется футер.

Урок 29. Доработка мелочей и заключение

В этом видео дорабатывается верстка Landing Page, устраняются мелкие недочеты и дорабатываются детали.

БОНУСЫ

Бонус 1. Премиум-курс «Редактор NotePad++»

Автор: Бернацкий Андрей

Длительность курса: 0:42:46

Содержание

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

Среди продвинутых возможностей Notepad++ — опция подсветки текста и возможность сворачивания блоков, согласно синтаксису языка программирования. Пользователь может самостоятельно определить синтаксис языка программирования. Есть возможность настроить режим подсветки. Доступно выделение цветом директив и операторов языка программирования.

Notepad++ обеспечивает возможность одновременного просмотра и редактирования нескольких документов. Также Вы можете просматривать и редактировать в двух окнах отображения один и тот же документ в разных местах. Изменение документа в одном окне просмотра будет автоматически перемещено во второе окно просмотра (т. е. вы редактируете один документ, который имеет клона во втором окне просмотра).

В данном курсе изучается наиболее полезные для верстальщика функции Notepad++. Показывается установка и настройка. Узнаете стандартные функции редактора и как расширить его функционал, установив несколько полезных плагинов. Благодаря огромной популярности и бесплатности этого инструмента, для него написано множество плагинов. И если вам понадобится дополнительный функционал, то, скорее всего, плагин с нужным функционалом уже есть и его нужно просто поискать и установить. В курсе показано, как искать и ставить нужные плагины.

Бонус 2. Премиум-курс «Редактор Sublime Text»

Автор: Бернацкий Андрей

Длительность курса: 0:31:41

Содержание

Хороший инструмент в любой работе повышает качество работы и позволяет выполнить ее гораздо быстрее. Верстка в данном случае не исключение. Для верстальщика основной инструмент – это редактор кода. Конечно, к инструментам для верстальщика можно отнести и Photoshop и множество различных сервисов. Но все-таки самым главным, без которого невозможно выполнять основную функцию верстки, – это редактор кода.

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

Текстовый редактор Sublime Text на данный момент является одним из самых популярных текстовых редакторов, используемых для веб-разработки. Используя плагины, можно сколько угодно расширять функционал редактора и сделать его именно таким, как вам нужно. Конечно, как и любой другой редактор, в SublimeText есть и так называемые стандартные функции подсветки синтаксиса, автодополнения, смена кодировки и еще множество других полезных функций, которые упрощают написание кода и помогают экономить время и силы.

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

Бонус 3. Премиум-курс «Учебник по основам HTML для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:57:09

Содержание

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

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

Задания для самостоятельного выполнения дадут возможность лучше изучить HTML и закрепить полученные знания на практике.

В курсе разбирается форматирование текста, работа с изображениями, ссылками, списками, таблицами и формами.

Бонус 4. Премиум-курс «Учебник по основам CSS для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:31:17

Содержание

При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS.

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

В учебнике по основам CSS для начинающих изучаются CSS-свойства и их значения.

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

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

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

Бонус 5. Премиум-курс «Верстка сайта для начинающих»

Автор: Бернацкий Андрей

Длительность курса: 01:24:02

Содержание

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

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

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

В курсе пошагово показано, как выполнить верстку на примере конкретного проекта.

Бонус 6. Премиум-курс «Курс по HTML5. Основы»

Автор: Бернацкий Андрей

Длительность курса: 02:23:17

Содержание

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

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

В данном премиум-курсе по HTML5 рассматриваются лишь основы, наиболее востребованные и актуальные в процессе верстки.

Рассмотриваются важные новшества, которые появились в HTML5 и которых не было в предыдущих спецификациях стандарта.

Появились новые теги, которые делают разметку страницы более структурированной и семантической: header, footer, article, nav, section.

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

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

Теперь стало возможным рисование векторных фигур прямо в браузере. Делается это с помощью тега Canvas. Именно с помощью данного тега можно рисовать векторные фигуры, а с помощью JavaScript можно управлять нарисованными фигурами, тем самым создавая анимации, небольшие мультфильмы, и даже игры!

Так же с приходом HTML5 стало возможно хранить некоторые данные на стороне клиента, используя LocalStorage(локальное хранилище).

Еще одна полезная возможность, которая стала доступна в HTML5 — это геолокация. То есть теперь возможно легко определять местоположение посетителя нашего сайтов.

Бонус 7. Премиум-курс «Курс по CSS3»

Автор: Булыга Денис

Длительность курса: 04:46:02

Содержание

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

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

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

Основными преимуществами CSS3 являются простота использования, ускорение процесса разработки и оформления web-страниц, уменьшение размера кода, практически 100% кроссбраузерность, при этом множество свойств уже можно использовать без префиксов.

Данный видеокурс от команды WebForMySelf поможем вам в изучении множества новых возможностей и свойств CSS3, которые сделают вашу работу более продуктивной и комфортной!

Бонус 8. Премиум-курс «Курс по Flexbox»

Автор: Булыга Денис

Длительность курса: 02:02:19

Содержание

В данном видеокурсе рассматривается CSS-модуль Flexbox, испольуя который можно верстать гибкие макеты различной сложности, при этом не используя float и inline-block.

На протяжении курса изучаются все основные свойства, которые нам предоставляет Flexbox, а также по шагам разобраны необходимые в процессе верстки полезные функции модуля.

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

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

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

Бонус 9. Премиум-курс «Курс по Sass»

Автор: Булыга Денис

Длительность курса: 01:58:51

Содержание

CSS-препроцессор — это профессиональный инструмент, который должен освоить каждый web-разработчик.

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

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

Помимо этого, появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.

Однажды попробовав использовать CSS препроцессор, становится понятно, как давно этого не хватало. Поможет вам в изучении препроцессора SasS данный видеокурс от команды WebForMySelf.

Бонус 10. Курс «Размещение лендинга в интернете. Хостинг. Домен»

Автор: Булыга Денис

Длительность курса: 00:09:18

Содержание

В этом бонусном блоке вы узнаете, что такое домен и хостинг, для чего они нужны, а также купите необходимые услуги на сервисе хостинг-провайдера «Макхост».

В курсе показано, как разместить страницу Landing Page в интернете, используя в качестве файлового менеджера панель управления хостингом.

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

АВТОР ВИДЕОКУРСА
Денис Булыга

  • Автор проекта WebForMySelf
  • Успешный высокооплачиваемый фрилансер-практик, профессиональный верстальщик
  • Специализируется на верстке и дизайне сайтов, а также разработке сайтов с нуля на движке WordPress
  • В общей сложности успешно завершено более 100 проектов
  • Страница профиля на всем известной бирже фриланса, где можно увидеть примеры выполненных работ: freelance.ru/felon20
  • К слову, на одной только этой бирже у Дениса 50 положительных отзывов и ни одного отрицательного, что уже многое говорит о его профессионализме…

Что говорят
о профессионализме автора

Стоимость видеокурса

Мгновенное скачивание

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск

100% возврат средств в случае неудачи

Почему видеокурс покупать выгоднее
чем участвовать в тренингах

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

Но при этом – в 3-5, а иногда и 10 раз дешевле!

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

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

Сколько зарабатывают верстальщики

Верстальщик может найти работу не только в веб-студии или компаниях, занимающихся созданием сайтов на заказ. Эти профессионалы также нужны в интернет-СМИ, рекламных агентствах, IT-отделах некоторых организаций и так далее. Зарабатывать верстальщики в подобных областях могут в среднем от 30 до 70 тысяч рублей.

Востребованность на фрилансе

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

Нам можно доверять

WebForMyself вот уже 11 лет известно высочайшим качеством своей продукции и профессиональным уровнем нашей команды. За все это время издательство выпустило более 30 видеокурсов на самые разные темы сайтостроения и веб-дизайна.

Также мы одни из первых в отрасли разработали и запустили революционную платформу предоставления постоянно обновляемых качественных материалов в режиме онлайн для веб-разработчиков с доступом по подписке – Премиум-Клуб.

ГАРАНТИИ

WebForMyself предоставляет на все свои продукты уникальную 4-уровневую гарантитворенности

БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

WebForMyself официально гарантирует вам полный безусловный возврат стоимости курса, если вы по каким-либо причинам посчитаете, что знания и навыки из курса оказались вам бесполезными.

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

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

ВЫСОЧАЙШЕЕ КАЧЕСТВО*

Все уроки — эксклюзивные, актуальные и подробные, тщательно подготовленные лично мной, профессиональным верстальщиком Денисом Булыгой.

Вы на наглядных примерах с полного нуля увидите верстку PSD-макетов для главной страницы интернет-магазина и для посадочной страницы (Landing Page).

ПОЛУЧЕНИЕ КУРСА

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

Объем видеокурса составляет 8,4 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

Если вдруг (всякое бывает!) ссылка не работает — просто напишите в службу поддержки. Мы сразу устраним проблему и вы в кратчайшие сроки начнете работать с курсом.

ОТЗЫВЫ КЛИЕНТОВ

(на другие продукты WebForMyself.com)

Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути у меня было огромное желание сменить основную профессию на более интересный и денежный род занятий .

Вопрос: Опишите себя сейчас?

Ответ: Сейчас у меня этой решимости только прибавились. Имея за плечами больше 20 лет педагогического стажа, поняла, что это совсем не то, чем мне хочется заниматься сейчас и в дальнейшем. Совсем уходить из преподавания мне бы не хотелось. Идеальный вариант: остаться работать на 0,25 ставки, а остальное время заниматься разработкой сайтов на заказ. Тем более сейчас, когда уровень знаний значительно вырос по сравнению с началом пути.

Вопрос: Что впервые подумали, когда узнали о нашем проекте? Какие мысли у Вас возникли?

Ответ: Очень крутой проект. Нужно познакомиться с ним поближе. Обязательно воспользоваться материалами вашего проекта.

Вопрос: Что Вам понравилось?

Ответ: Понравилось качество курсов, их оформление, профессионализм авторов не вызывает сомнений .

Вопрос: Какие у Вас были ощущения?

Ответ: Полный восторг от процесса изучения.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Курсы помогли систематизировать разрозненные знания, и появилась уверенность, что у меня все получится .

Мне вас посоветовал мой хороший знакомый, который уже был на тот момент вашим клиентом

Вопрос: Жизненный опыт?

Ответ: Так уж получилось, что я пошёл учиться по специальности программиста практически случайно (это была вторая специальность по приоритетам). После обучения посчастливилось сразу устроиться программистом 1С, в итоге я задержался в этой сфере на целых 5 лет.

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

В перерывах между монтажом ТВ-программ решил начать самостоятельно изучать PHP, к тому же, в этот момент у меня появился курс по PHP от Webformyself — собственно, это и дало толчок к возвращению в профессию программиста, но уже с уклоном только на веб.

Первым коммерческим опытом веб-разработки был проект, который я разрабатывал на Joomla, это было долгое, трудное, малоденежное занятие, но я выдержал этот период, набрался опыта и начал понимать, как работать на результат, и как общаться непосредственно с заказчиком. Далее был самостоятельный опыт разработки пары магазинов на Joomla+Virtuemart, знания и решения черпались непосредственно с курса «Интернет-магазин на Joomla» (https://webformyself.com/jshop/).

Затем в жизни случился крутой поворот, я заключил первый полноценный контракт с IT-компанией. После налаживания всех внутренних процессов и понимания стратегии компании, у меня появилось время для дальнейшего саморазвития в области веб-разработчика. Остановил свой выбор на PHP-фреймворке Yii2 и, без сомнений, приобрел курс на эту тему у команды webformyself (https://webformyself.com/yii2/).

Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?

Ответ: В этом плане сомнения были минимальными, и только в одном — насколько быстро окупятся потраченные средства. А в том, что они окупятся, была полная уверенность.

Вопрос: Назовите самые значимые для Вас убеждения и ценности в жизни в целом и веб-разработке в частности?

Ответ: Главное в жизни — это любовь. Что касается веб-разработки — постоянное развитие и принятие новых вызовов.

Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?

Ответ: Была основная проблема: так как я был полным новичком в мире веб-разработки — у меня не было четкого структурированного плана о том, с чего начать, и в каком направлении действовать. После приобретения курса по PHP я узнал все основы этого языка, как строить приложения, и от этого уже появилось понимание и видение, как и куда это все развивать.

Вопрос: Каких успехов Вы достигли?

Ответ: Моя разработка стала более быстрой и качественной, я овладел несколькими технологиями, избавился от походов в офис, да и вообще профессия веб-разработчика позволяет мне зарабатывать в комфортных для меня условиях и в удобное время.

Вопрос: Какие перемены к лучшему произошли в жизни?

Ответ: Семья, дети, путешествия и мое хобби перешло в основную деятельность, которым я зарабатываю (это я про веб-разработку).

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

Вопрос: Жизненный опыт?

Ответ: После школы поступал на программиста, но баллов не хватило. Учился на инженера-электронщика. Работал в разных сферах, в основном — на производстве. Та сфера, которая раньше приносила неплохой доход — перекочевала в Китай, работу стало сложно найти, да и надоело уже.

Вопрос: Опишите себя в начале пути?

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

Вопрос: Опишите себя сейчас?

Ответ: Прошло почти три года, я уже обладаю определенными знаниями и постоянно получаю новые благодаря курсам от WebForMySelf.

Вопрос: Как Вы узнали о наших курсах?

Ответ: Стал искать, что же это за школа или курсы какие, где так хорошо и подробно все объясняют. Нашел на YouTube, и далее поиски привели на сайт Webformyself.

Вопрос: Что впервые подумали, когда узнали о нашем проекте?

Ответ: Подумал, как хорошо, что столько информации есть в одном месте.

Вопрос: Вы испытывали какие-то сомнения?

Ответ: Честно говоря, сомнения были. Но я подписался на Премиум клуб. И я многому научился по видео: PHP, JavaScript, регулярные выражения, курс по объектно-ориентированному программированию (ООП PHP) и пр.

Вопрос: Что Вам понравилось?

Ответ: Мне очень понравилось, что бонусом к курсу шли другие курсы и видео из премиум доступа . И так удачно было, что мне не пришлось выбирать между Yii2 и Laravel, потому что они шли в комплекте.

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

Ответ: Мне пришлось бы потратить много времени на поиски более-менее структурированной информации по нужным темам.

Вопрос: Каких успехов Вы достигли?

Ответ: Как-то незаметно для себя, стал разбираться в том, что раньше казалось недоступным для понимания. На данный момент почти год работаю программистом (Yii, MS SQL Server, JavaScript), участвую в разработке нового функционала и сопровождении проекта CRM в организации, занимающейся системами безопасности, автоматики и связи.

Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?

Ответ: Чувствую себя уверенно, оптимистично. Планирую и дальше повышать свой профессиональный уровень.

Вопрос: Какие перемены к лучшему произошли в жизни?

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

Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути для меня веб-программирование было «темным лесом», где было страшно и неуютно, но жажда знаний заставила двигаться вперед , да, на Делфи мне приходилось писать парсеры, были написаны Ebay снайпер, программа для участия на тендерах. На данный момент я понимаю, что написать подобное лучше на PHP (не нужно «придумывать велосипед» с библиотекой Synapse).

Вопрос: Что Вы скажете по поводу возражений, с которыми Вы, возможно, сталкивались перед покупкой информационных продуктов, как преодолевали данные возражения (нет денег; у меня не получится; слишком поздно начинать; слишком рано начинать; родственники против; слишком сложно; возможно, какие-либо Ваши возражения)?

Ответ: Я никогда не жалел денег на самообразование, а отговорки типа «поздно начинать» или «я не смогу», для меня не приемлемы — дорогу осилит идущий.

Вопрос: Какую проблему Вы пытались решить, какие проблемы испытывали до приобретения курса?

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

Вопрос: О чем Вы думали в начале пути?

Ответ: Нашел через интернет, на тот момент нужно было срочно сделать сайт-галерею, и я приобрел первый курс по верстке. Тот проект я благополучно завалил — не хватало знаний. Сверстать макет я смог, прикрутил даже JQuery, а дальше мои знания закончились, нужна была админка, нужно было хранить где-то данные. Тут произошло мое знакомство с паттерном MVC и желание освоить PHP (с MySQL проблем не было, так как по роду своей деятельности я хорошо знаком с SQL, часто приходится вытаскивать данные из БД в разрезе складов, контрагентов и т.д.).

Вопрос: Какие изменения стали происходить, когда Вы узнали о курсах?

Ответ: Когда я узнал о курсах, изменений никаких не происходило, я просто приобрел сначала один курс и начал изучать, потом второй…. изменения стали происходить во время изучения материала, и эти изменения однозначно в лучшую сторону.

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

Ответ: Вряд ли бы что-то серьезное случилось, веб-разработка — это мое хобби, я не беру денег за это, и берусь лишь за то, что мне действительно интересно. Ну, а что касается именно Ваших продуктов, именно они направляли меня в мире веб-разработки, так как в начале пути я был подобен слепому котенку, мои знания были нулевыми, и я не знал, куда идти, и что делать. Я считаю, в начале пути просто необходим наставник, указывающий тебе путь, и этим наставником для меня как раз и стали Ваши курсы. Да, не все сразу получилось, но главное — не сдаваться.

Вопрос: Каких успехов Вы достигли?

Ответ: Каких успехов добился? Буквально за 2 недели написал сайт для сервисных центров Huawei в Казахстане , сейчас этот сайт уже не действует, так как Huawei интегрировали внесение заявок в свою систему. Писал сайт для транспортной компании с возможностью отследить расположение груза онлайн , сайт интернет-магазина, сайт для сестры — она практикующий психолог. Особо-то и хвастаться нечем, это для меня прежде всего хобби.

Вопрос: Как Вы себя чувствуете? О чем думаете? Какие планы?

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

Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе

Вопрос: Жизненный опыт?

Ответ: Начиналось все с верстки, постигал все азы с нуля, начинал брать несложные заказы на фрилансе. Далее познакомился с Joomla, но как-то не срослось с ней, не знаю, почему. Наткнулся на WordPress — и тут мы нашли друг друга. Начал тщательно изучать эту CMS и плотно с ней работать. Изучил бесплатный курс от WFM по созданию темы с нуля, решил купить сразу курс WordPress-Профессионал — так как там был бонусом еще и курс по PHP, который мне очень нужен был тогда. В процессе изучения пришло понимание, что не все так сложно, как кажется, понемногу начал брать заказы и на создание тем для WordPress. Сейчас на фриланс биржи не заглядываю даже, есть свои постоянные заказчики. Основной профиль — создание тем для WordPress с нуля.

Вопрос: Опишите себя в начале пути?

Ответ: В начале пути были сомнения — а есть ли деньги в интернете, на фрилансе. Честно говоря, стартовать было непросто — с небольшим опытом и «не толстым» портфолио долго приходилось искать заказчиков. Вообще для себя вывел некую формулу — сначала все всегда кажется страшным, непонятным, невыполнимым, но достаточно разбить большую задачу на этапы и начать делать — как все начинает получаться, складываться. Нужно только не бояться и делать — решение найдется всегда.

Вопрос: Опишите себя сейчас?

Ответ: Сейчас мой основной профиль — это создание тем для WordPress с нуля. На фриланс биржи не заглядываю, есть заказчики и поток постоянной интересной работы. Точно знаю, что заработать в вебе можно. Есть желание расширить свои знания в области PHP, поэтому купил курс PHP мастер от команды WFM от Андрея Кудлая. Его курсы и уроки мне очень нравятся — у него получается прекрасно объяснять материал. Помимо этого, его курсы/уроки мне очень интересно смотреть, они для меня не скучные, что ли. Не знаю, как это объяснить корректно, но на своем пути я встречал много уроков, при просмотре которых хотелось засыпать).

Вопрос: В какой момент Вы решили купить курсы?

Ответ: Понимал, что для дальнейшего роста мне необходим новый набор структурированных знаний. Искал курсы/уроки для себя. На тот момент, в рунете я не видел конкурентов WFM в курсах по WordPress. Вообще я всегда нахожусь в поиске нужных мне качественных материалов для развития.

Вопрос: Что Вам понравилось?

Ответ: Мне очень нравятся курсы и уроки Андрея Кудлая. Как по мне, так он просто волшебник в вебе). Стоит отметить его прекрасный навык в объяснении сложной информации.

Вопрос: Каких успехов Вы достигли?

Ответ: Нашел работу, которая мне очень нравится. Нашел много интересных людей вокруг себя. Получил знания и навыки, которые я могу сейчас свободно продавать. Есть уверенность в завтрашнем дне. Фриланс для меня — это свобода и возможность развиваться, строить себя.

Раньше эти технологии мне казались заоблачными

Начинал я с того, что для начала просто слушал. А затем пытался создать даже не сайт. А простенькую страничку. Изменяя её при помощи медиа запросов. Это мне удалось.

Абсолютно не знал, что такое адаптивная вёрстка, всё это мне казалось тёмным лесом. За сайты для мобильных устройств сейчас хорошо платят. В среднем адаптивный сайт стоит у нас в городе 15 000 — 20 000 рублей. Желание научиться делать такие сайты и способствовало приобретению курса.

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

Что мне запомнилось больше всего из курса? Дотошность, я бы сказал занудливость Андрея :-) Сначала это раздражало, а затем наоборот понравилось. И сам принцип подачи материала. Сначала мы верстаем сайт. Его идеология вёрстки через блоки. А затем начинаем его адаптировать при помощи медиа запросов.

Хочу зарабатывать на вёрстке адаптивных сайтов до 50 000 рублей в месяц :-)

Ещё мне понравилось бесплатный бонус к этому курсу в виде уроков по CSS3. Раньше эти технологии мне казались заоблачными. Теперь же после прохождения этих уроков. Я запросто могу заставить картинку или вращаться или сделать так, чтобы при наведении мышки она перемещалась. Всё это мне стало доступно после прохождения уроков по CSS3.

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

Привет, меня зовут Юлия Ритфелд, я фронт энд разработчик в Министерстве Юстиции в Нидерландах.

Я очень сомневалась купить ли мне курс о Ларавел. Я уже 5 лет работаю верстальщицей и графическим дизайнером и мне всегда казалось, что php (и другие языки бэкенд) — это удел супер умных программистов. Но в какой-то момент мой начальник сказал, что мне надо тоже выучить пхп, а именно Ларавел, чтобы помочь в разработке аппликаций. Я очень долго сомневалась потяну ли такую сложную теорию. Как я как креативный человек смогу ли строить сложные вещи, да еще и в пхп?

Стоит ли инвестировать столько времени и средств?

Я посмотрела курс о Ларавел на lynda.com. Потом купила несколько курсов об этом фреймворке на Udemy.com. Потом были курсы на pluralsight.com. Все было сложно. И даже не в языке дело, на английском я учусь и работаю уже 2 десятка лет. И перед тем как сдаться я увидела в ютюбе ролик Виктора. Посмотрела один, второй и не смогла оторваться.

Но пойдя на данный момент уже 19 из 39 уроков (50%) теоретической части курса о Ларавел хочу сказать с полной уверенностью, что все мои страхи были напрасны. Виктор просто предугадывает мои вопросы и мысли типа ‘а что если..’. Видео записаны в отличном качестве и картинки на которых он объясняет о том, что такое, например, Middleware для меня как визуального человека просто спасение.

Я даже добавила этот курс в свой профиль ЛинкдИн. По качеству этот курс превосходит все, что на данный момент есть на мировом рынке по этому фреймворку.

С уважением и признанием,
Юлия Рифтелд

Я узнала что такое вёрстка, виртуальный сервер, база данных, язык PHP и т.д. и я знаю как с этим работать

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

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

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

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

CSS Основы

Технология CSS используется в первую очередь дизайнерами, ведь именно они создают дизайн сайта. Однако, ошибочно полагать, что Web-мастерам CSS знать не обязательно. Достаточно вспомнить хотя бы пример из описания раздела по CSS. Помимо мобильности своего сайта, таблицы стилей позволяют создавать различные классические дизайнерские решения (например, выпадающее меню). А вместе с JavaScript позволяют создавать динамические HTML-страницы (DHTML), красота и удобство которых, порой, просто поражают.

Разумеется, для того, чтобы создавать подобные вещи необходимо познакомиться с основами CSS. И данная категория сайта поможет Вам это сделать максимально быстро и эффективно.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Прочитав статьи по основам CSS, Вы узнаете:

1) Синтаксис CSS.

2) Способы и их приоритеты задания CSS-стиля.

3) Типы селекторов в CSS.

4) CSS хаки для браузеров.

5) Правила написания CSS.

6) Как создать всплывающую подсказку на CSS.

7) Как изменить внешний вид первой буквы через CSS.

8) Как задать вид курсора через CSS.

9) Как изменить вид курсора при наведении мыши с помощью CSS.

10) Как сделать подменю на CSS.

11) О замене свойства min-width в IE6.

12) О валидности CSS.

13) Как задать цвет посещённых ссылок.

14) Как задать отступ абзаца через CSS.

15) Как сделать закруглённые углы через CSS.

16) Как вместо маркера списка поставить своё изображение через CSS.

17) Как сделать фон картинкой.

18) Как сделать затемнение фона на CSS.

19) Что такое дочерние селекторы в CSS.

20) Какие единицы измерения имеются в CSS.

21) Как сделать всплывающее окно с затемнением.

22) Как сделать анимированный фон.

23) Как сделать красивое текстовое поле.

24) Как менять изображение при наведении на него курсора мыши.

25) Что такое псевдоэлементы в CSS.

26) Что такое CSS спрайты.

27) Как прижать футер (подвал) к низу через CSS.

28) Как запретить изменение размеров textarea через CSS.

29) Как нарисовать треугольник через CSS.

30) Как обработать событие click через CSS.

31) Как задать свой курсор через CSS.

32) Как сделать горизонтальное выпадающее меню на CSS.

33) Как использовать нестандартный шрифт на сайте.

34) Как изменить фон у радиокнопки через CSS.

35) Можно ли использовать CSS3.

36) Как сделать тень на CSS.

37) Как задать атрибуты cellpadding и cellspacing на CSS.

38) Как сделать div со 100% height.

39) О совместимости z-index и плеера Youtube.

40) Почему плохо использовать -moz, -ms, -webkit и прочие свойства.

41) Стоит ли использовать CSS Reset.

42) Как вертикально выравнять маркер списка.

43) Как сделать версию для печати.

44) Как сделать кроссбраузерную прозрачность на CSS.

45) Что такое clearfix.

46) Как частично отменить float.

47) Как сделать двухколоночную вёрстку с одинаковой высотой колонок.

48) Что такое адаптивная вёрстка.

49) Что такое медиа-запросы в CSS.

50) Что такое less.

51) Как сделать эффект загнутого уголка на CSS.

52) Как сделать отзывчивый «липкий» подвал сайта.

53) Как использовать Google Fonts API.

54) Как использовать сервис Livetools.

55) Как разрешить или запретить выделение текста на CSS.

56) Как изменить внешний вид элемента на стандартный с помощью свойства appearance в CSS.

57) Зачем нужно свойство page-break-inside в CSS.

58) Как выравнять по центру блок переменной ширины на CSS.

59) Как сделать треугольники на чистом CSS.

60) Сервис по генерации CSS треугольников.

61) Как прижать футер к нижней грани страницы(позиционирование).

62) Как прижать футер к низу страницы(табличный способ).

63) Изучаем Sass. Установка и настройка.

64) Как скрыть элемент на странице на CSS.

65) Изучаем Sass. Основы.

66) Когда использовать reset.css и normalize.css.

67) Сервис по работе с изображениями с мощным API.

68) Как сделать эффект увеличения картинки на CSS.

69) Koala — быстрая компиляция sass файлов.

70) Как добавить фильтры к фотографиям на CSS.

71) Изучаем Sass. Миксины.

72) Изучаем Sass. Математические операции.

73) Анимированная иконка меню на Sass.

74) Изучаем Sass. Функции.

75) Что такое PostCSS.

76) Как установить и настроить PostCSS.

77) Как сделать возможность оценивания на CSS.

78) Изучаем Sass. Стиль написания кода.

79) Изучаем Sass. Расширение родительского селектора.

80) 10 полезных SASS миксинов.

81) Как сделать интро в стиле «Звёздных Войн» на CSS.

82) Bootstrap 4. Введение.

83) Bootstrap 4. Установка.

84) Bootstrap 4. Reboot.

85) Bootstrap 4. Контейнеры и ключевые точки.


86) Bootstrap 4. Система сеток.

87) Bootstrap 4. Flex-свойства сетки.

88) Какие 5 нововведений появятся в CSS4.

89) Bootstrap 4. Что такое Jumbotrons.

90) Bootstrap 4. Утилиты и типография.

91) Bootstrap 4. Компонент Cards.

92) Разницу между class и id на примере тега div.

93) Неудачные элементы веб-дизайна, которые не стоит использовать.

94) Bootstrap 4. Модальные окна.

95) О приоритете и наследовании в CSS на практике

96) Как верстать PSD макет по Bootstrap сетке. Часть 1.

97) Как верстать PSD макет по Bootstrap сетке. Часть 2.

98) Как использовать псевдоэлементы after и before в CSS.

99) Об особенностях ширины и высоты блока в CSS.

100) Псевдоэлемене after и псевдоклассе last-child.

101) Как показать сайт на различных девайсах.

102) Верстка по сетке Bootstrap (часть 1)

103) Верстка по сетке Bootstrap (часть 2)

104) Верстка по сетке Bootstrap (часть 3)

105) Верстка по сетке Bootstrap (часть 4)

106) Препроцессор LESS, начиная с простого.

107) Как устроена сетка Bootstrap.

108) Модальное окно на Bootstrap. Стилизация.

Онлайн обучение Профессия
HTML верстальщик

Получите профессию за 2 месяца под руководством опытного наставника. После курса – трудоустройство в веб‑студию или работа на фрилансе.

Основатель онлайн школы WebCademy.ru,
автор обучающего блога по веб-разработке RightBlog.ru,
основатель студии WebOtdel.

  • Product designer, UI & UX дизайнер.
  • FrontEnd разработчик
  • Опыт в веб-разработке: более 10-ти лет
  • Преподавательский стаж: более 5 лет
  • Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

Мне нравится делать, пожалуй, лучшие курсы по IT обучению в Рунете.

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

Работа веб-разработчика позволяет мне работать удаленно, путешествовать и жить в любой точке мира. Позволит и Вам!)

  • Обзор редакторов кода
  • Установка и настройка редактора
    Sublime Text
  • Плагины для Sublime Text, package control
  • Тема Material Theme
  • Редактор Brackets
  • HTML теги
  • Основные HTML теги
  • Структура проекта
  • Верстка таблиц
  • CSS3 эффекты
  • Градиенты
  • Трансформации
  • Анимация
  • Хостинг и домены
  • Работа сайта
  • Покупка домена
  • Покупка хостинга
  • Настройка Домена и Хостинга
  • Автообновление страницы при верстке
  • Firefox плагин AutoReload
  • Google Chrome LivePage
  • Стартовый шаблон для верстки
  • Использование Google Fonts
  • Использование WebFont.ru
  • Генерация веб-шрифтов
  • Шрифтовые иконки
  • Карусель — подключение и настройка
  • Табы, вкладки и переключатели
  • Многоуровневая навигация
  • Галерея фотографий
  • Модальные окна
  • Сортировка и фильтрация элементов
  • Работа с Google Maps, вставка карт на сайт
  • Сетка Bootstrap
  • Подключение и использование
  • Быстрое прототипирование на Bootstrap
  • Использование и стилизация компонентов
  • Flex box верстка
  • Pixel Perfect верстка
  • CSS gr >Оптимизация верстки
  • Спрайты
  • Оптимизация работы с изображениями
  • Препроцессор LESS
  • Сниппеты Sublime Text
  • Gist заготовки кода
  • Анимация при прокрутке страницы
  • Параллакс эффекты
  • Загрузчики (эффект загрузки страницы)
  • Плавная прокрутка на сайте
  • Mobile first подход
  • Мобильная адаптивная навигация
  • Онлайн калькулятор
  • Формы обратной связи
  • Отправка писем с сайта
  • Валидация данных в формах
  • Подключение jQuery плагинов
  • Написание jQuery скриптов
  • Основы PHP
  • PHP — основы ООП
  • Основы JavaScript (предпросмотр)
  • JavaScript — модульный подход
  • JavaScript — ООП
  • jQuery — библиотека языка JS
  • ajax запросы на сервер без обновления страницы
  • Контроль версий — Git
  • Сервис GitHub
  • Установка и настройка необходимых программ.
  • Основные понятия в веб-разработке.
  • Основы разметки HTML.
  • Создаем HTML сайт.
  • HTML таблицы и формы.
  • Оформляем домен и хостинг.
  • Работа с FTP.
  • Знакомство с CSS стилями и их возможностями.
  • Основы таблицы стилей CSS.
  • CSS селекторы.
  • Основные CSS свойства.
  • Веб-Шрифты — подключение и генерация.
  • Блочная верстка — часть 1. Типы блоков. Float. Clear.
  • Блочная верстка — часть 2. Типы блоков. Block, inline, inline-block. Clearfix.
  • Абсолютное позиционирование. Псевдоклассы.
  • Стандарты верстки: Валидация CSS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Photoshop.
  • Работа с макетом в Photoshop.
  • Блочная верстка. Позиционирование.
  • Инструмент — Сетка, для разметки сайта.
  • Стартовый шаблон. Организация работы.
  • БЭМ-нейминг методология.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Что такое фреймворк. Зачем он нужен.
  • Медиа-запросы, мобильная верстка.
  • Верстка адаптиной навигации.
  • Что такое фреймворк. Зачем он нужен.
  • Знакомство с Bootstrap.
  • Сетка, элементы, быстрое прототипирование.
  • CSS3. Градиенты.
  • Размеры текста: em, rem.
  • CSS3. Анимация, тени, переходы.
  • Библиотека Animate.css
  • Анимация при открытии страницы.
  • Препроцессор LESS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с макетом Аполло.
  • Java Script — основы.
  • Знакомство с jQuery.
  • Bootstrap элементы.
  • Оптимизация верстки.
  • jQuery — основы
  • jQuery интерактивные элементы страницы:
    • — Карусель.
    • — Модальные окна.
    • — Табы.
    • — Галерея фотографий.
    • — Сортировка элементов.
  • Знакомство с PHP.
  • PHP — основы.
  • Форма обратной связи на сайт.
  • Фриланс.
  • Проект менеджмент.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Ajax.
  • Критерии сдачи сайта — чек лист.
  • PHP — основы. Форма обратной связи на сайт.
  • Ajax. Ajax форма обратной связи.
  • Устройство на работу.
  • Карьера.
  • Распределение и обсуждение персональных проектов.
  • Консультации по индивидуальным проектам.
  • Большой блок: Фриланс в веб-разработке.
  • Общие задания по фрилансу и трудоустройству.
  • Прием индивидуальных дипломных проектов.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Большой блок: Трудоустройство в веб-разработке.
  • Мастер-майнд в группе по куочингу.
  • Пуленепробиваемая кроссбраузерная верстка. Покоряем IE. Modernizr.
  • Ускорение верстки.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Проект менеджмент в веб-разработке.
  • Финал. Выдача сертификатов. ВИП группа. Закрытие курса.

Верстаем макет начального уровня. Сайт для туристической компании «ФорестТревел» из 4-х страниц.

Учебный макет для приложения Юнит.
Мобильная верстка под планшеты и смартфоны.

Каждый студент в финале курса создает свой личный сайт портфолио со своими работами. Адаптивная верстка, скрипты, форма обратной связи с проверкой и отправкой сообщений.

Видео уроки

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

Домашние задания

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

Чат для общения

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

Онлайн мастер-классы

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

Три выпускных проекта

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

Консультации с наставником

Возникли трудности с проектом? Не беда! На индивидуальной консультации наставник подробно расскажет и объяснит что к чему.

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

��‍�� Вакансии и проекты

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

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

☕ Раз в месяц встречи в Москве

Раз в месяц мы с ребятами собираемся в Москве. Время от времени мы будем устраивать живые встречи и в других городах.

Валерий Молчанов

Виктория Рустамова

Татьяна Берлова

Михаил Кушков

Сергей Галена

Дарья Воропаева

Антон Петров

Ольга Ившина

  • Полноценная верстка страниц сайта
  • Свободное владение HTML и CSS
  • HTML5 и CSS3
  • Знание Adobe Photoshop для работы с макетами
  • Кроссбраузерная верстка
  • Верстка для мобильных устройств (адаптивная и отзывчивая верстка)
  • Оптимизация под мобильные устройства
  • Оптимизация работы с изображениями
  • Умение разбираться в чужом коде
  • Понимание основ юзабилити
  • Основы JavaScript
  • Основы PHP

На курсе есть блок по трудоустройству и фрилансу. Чтобы вы смогли найти достойную работу и хорошо зарабатывать, применяя навыки и знания полученные на курсе. Примеры вакансий с сайта headhunter.ru

Оригиналы отзывов находятся в группе Вконтакте

За чем пришел на курс

За знаниями html & css.

Результат

Вход в профессию / необходимые предметные основы. Во время обучения сделал редизайн своего сайта. Хорошо прокачал свой уровень в верстке сайтов.

Отзыв

Большое спасибо за обучение! Юрий Ключевский – отличный преподаватель. Как педагог по образованию, могу от себя сказать, что созданный Юрием курс очень хорош для новичков в знаниях html & css. Методика – интенсив, плавный, верно построенный; интересный, не напрягающе-нудный, и если есть возможность и желание делать домашние задания, вы никак не останетесь по окончанию этого курса без самостоятельно сделанных и разобранных преподавателем работ-сайтов.

За чем пришел на курс

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

Результат

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

Отзыв

Если вы хотите получить знания по HTML и CSS, то я рекомендую этот курс от Юрия Ключевского! Доступно и понятно о сложных технических моментах и терминах! Если вам интересно то, что скрыто под «капотом» сайта, если вы самостоятельно хотите сделать сайт с нуля до его запуска или просто научиться этому ремеслу, то для начала советую получить знания от профи.

Огромное спасибо! Рекомендую как профессионала своего дела.

За чем пришла на курс

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

Результат

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

Отзыв

Курс очень прикладной, практика, практика, практика. Это мне очень понравилось. Современные технологии, методологии, разные языки. Все это то, что действительно нужно для того чтобы начать работать в данной сфере. Если кто-то действительно ищет возможность для старта в мире верстки, веб программирования, фронтенда, то курс будет очень полезным.

За чем пришел на курс

Результат

Структура верстки стала понятна сама по себе, теперь, если придется, я смогу разобраться в ранее неизвестных мне приемах или функциях и подключить их в свой проект. В итоге мы научились создавать сайты, которые мой знакомый дизайнер оценил как современные и с актуальными «фишками». Самый тренд!))

Отзыв

Курс очень эффективный. Юрий излагает материал настолько понятно и структурированно, что я мог не присутствовать на ночных (в моем часовом поясе) вебинарах и всё равно делать задания. Инструменты, которыми он учит пользоваться, ускоряют верстку в несколько раз, превращая её из рутинной нудятины в нормальный творческий рабочий процесс. Почти круглосуточное сопровождение: от проверки заданий до советов по оптимизации кода. Мне кажется, что Юрий проверял работы гораздо быстрее, чем группа их создавала))

За чем пришел на курс

Я решил что-то поменять в свой жизни. Я подумал, что IT (web) — самое то.

Результат

Хорошо понял необходимые для работы основы. Для себя следующим шагом вижу — изучение JavaScript, JQuery

Отзыв

Я решил пройти курсы и о чем не жалею. Потому что: 1. Все доступно. 2. Юра помогал по тем вопросам. которые возникали в ходе выполнения заданий. 3. Достаточно много материала, который еще нужно переваривать и т.д. Всем рекомендую!

За чем пришел на курс

Решил сделать свой первый шаг в сторону web разработки.

Результат

Хорошая база, которая дает понять, в каком направлении развиваться дальше.

Отзыв

Настоятельно советую курс Юрия по верстке сайтов! Обучение систематизировано таким образом, что на протяжении всего курса ты получаешь только те знания, которые нужны новичку на данном этапе, ничего лишнего. Информативный и сбалансированный курс, опытный преподаватель, адекватная цена. Советую всем интересующимся пройти этот курс, а Юрию желаю успехов!

За чем пришел на курс

Решил найти работу, которая будет нравиться, и приносить не плохие деньги. Остановился на верстке, понравилось, но многое не получалось. Хотелось большего. Решил пройти курсы

Результат

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

Отзыв

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

За чем пришла на курс

Очень люблю Flat-дизайн, красивые минималистичные сайты — слабость моя. Поэтому давно мечтала создавать такие же, но знакомые программисты говорили, что года 2 нужно, чтоб научиться. Поэтому верстка так и оставалась у меня на уровне фантазий.

Результат

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

Отзыв

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

Смущала 7-часовая разница во времени. (я из Вадивостока) Но Юрий меня успокоил. Каждый вебинар я смотрела в записи, в удобное для себя время).

Тема для меня новая. Сложная. Информации много! Иногда даже мозг закипал, и я чувствовала себя глупой телкой (не без этого)) Но процесс обучения грамотно выстроен и интересен! Очень многое зависит от преподавателя! Юра классный преподаватель! Если у вас реальный интерес к созданию сайтов, то очень рекомендую, не пожалеете!

За чем пришел на курс

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

Результат

На этом курсе изучили все основные темы по верстке, а также затронули и даже попробовали более углубленные штуки, такие как PHP, JS, Ajax, WordPress.

Отзыв

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

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

За чем пришел на курс

Устал от офисной работы и решил, что нужно менять профессию, чтобы делать работу из любого места. Решил, что стану фронт-эндером. В первую очередь, занялся азами — html/css. Зарегался на html-academy, стал проходить курс, но чем дальше уходил, тем больше понимал, что что-то не так. Я знал теги, знал свойства и атрибуты, понимал логику разметки, но что с этим знанием делать? Я будто научился ездить на велосипеде, ни разу на него не сев. Вычитал, что удобнее всего материал усваивается за личным проектом, но не знал, как вообще создать сайт. Мне было необходимо обучение на практике.

Результат

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

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

Отзыв

Планирую идти дальше, углубляться в FE, после перепрохождения курса вернуться к изучению JS и его фреймворков, немного больше узнать о PHP(который, кстати, немного тоже рассматривается в рамках этого курса), Python, и софте для разработки UI/UX, вроде Adobe xd.

Цена курса невысокая, длительность — что надо, и самое главное: охватываются все необходимые темы. Очень хороший курс. Материал подаётся плавно, местами с рывками вперёд, но эти рывки необходимы, это своеобразные барьеры, которые хочется преодолеть, чтобы подсмотреть, что ждёт дальше. Курс рекомендую! Спасибо Юрию за составление такой программы обучения, профессионализм и отзывчивость!

За чем пришла на курс

Мне приходится часто ездить, и я задумалась о смене профессии на фриланс.

Результат

Теперь я разбираюсь в предмете и моя цель — накопить опыт работы в новой сфере и углублять знания!

Отзыв

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

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

За чем пришел на курс

Сам процесс онлайн обучения считал не очень привлекательным, потому что при выборе курсов опираться можно лишь на шаблонное описание программы обучения и на сайт автора. Выбирал несколько недель, кое-где оставлял заявки, но везде отказывался по разным причинам. И тут наткнулся на симпатичный сайт Юрия. Оставил заявку, списался в контакте, появились проблемы по времени, так как середина учёбы совпадала с моим отъездом, на что Юрий предложил очень увесистые доводы остаться.

Результат

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

Отзыв

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

За чем пришел на курс

Освоить профессию HTML-верстальщика.

Результат

После того как прошёл курс «Верстка сайтов HTML5/CSS3» я получил огромное количество полезного материала поданного в интересной форме, который пригодится в карьере веб-разработчика.

Отзыв

Благодаря тому, что автор имеет отличные навыки преподавателя, каждый урок был увлекательный и лёгкий для понимания. Юрий всегда отвечал на мои вопросы и помогал разобраться с любыми проблемами. Грамотно построенные домашние задания, при выполнении которых я укреплял знания полученные на вебинарах. Данный курс включал в себя очень актуальные темы, которые ценятся работодателями в сфере веб-разработки. Огромное спасибо Юрию за данный курс, так как это отличная возможность получить актуальную и востребованную профессию.

За чем пришла на курс

Я имела представление о HTML и CSS из различных бесплатных ресурсов, но верстать что-то более-менее серьезное не могла.

Результат

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

Отзыв

Для меня данный курс оказался очень полезным и эффективным. На практике мы сверстали несколько работ, причем все непонятные моменты Юрий разъяснял очень подробно в индивидуальном порядке. Ценно и то, что помимо HTML и CSS мы рассмотрели полезные инструменты разработчика, о которых я и не догадывалась. От души благодарна Юрию за его труд, желаю творческих успехов, и надеюсь на дальнейшее общение.

За чем пришла на курс

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

Результат

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

Отзыв

Очень благодарна Юрию за терпение, за подробные, конструктивные разъяснения. Курс великолепен и максимально наполнен всем необходимым. Конечно, курс прошёл в интенсивном режиме, зато очень эффективно. Так что всем желающим познать тайны HTML и CSS очень рекомендую. Говорят, время — деньги, потому не стоит растрачивать время на поиски тьюториалов — всё есть в одном курсе. Еще раз спасибо нашему учителю

За чем пришел на курс

Начинал курс с нулевыми знаниями в область HTML, CSS да и вообще всего, что касается разработки веб-страниц, Landing page и.т.д. На работе возникла потребность в освоение нашей фирмы интернета. Подумали , посовещались, и решили, что-то найти, подходящее для изучения

Результат

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

Отзыв

Главные фишки в курсе:
1. Его продуманная последовательность от самых основ, до библиотек, фишек.
2. Интенсивность курса, несмотря на очень большой объем работы.

Хотел бы порекомендовать этот курс всем — абсолютно всем — от начинающих до квалифицированных специалистов.

За чем пришел на курс

Начинал изучать верстку сам. Прошёл почти до конца онлайн тренажёр на codecademy, смотрел тюториалы на YouTube, по частицам собрал некоторые знания. Но как то все в перемешку было, хотя думал что уже достаточно много знаю. В теории вроде нормально разбирался, а на практике не очень получалось.

Результат

Курс помог структурировать уже имеющиеся знания + приобрести новые навыки. Главное понял и немного изучил сам процесс верстки.

Отзыв

Я доволен курсом и преподавателем. Хочется отметить, что Юрий всегда готов помочь, то есть в «нерабочее время».

За чем пришла на курс

Хотела изучать HTML и CSS, но не знала, с чего начать, вернее, с какой стороны подойти к такому «зверю».

Результат

Курс был отличным стартом и дал тот объем знаний, который теперь позволяет мне УВЕРЕННО погружаться в более глубокое изучение HTML и CSS. Теперь меня не пугают никакие title, div, webkit, ul, meta, bootstrap, font-weight, padding и другие неведанные мне ранее звери)))

Отзыв

Если вы новичок, то данный курс вам очень подойдет. Вы сразу окунетесь в самую суть процесса и быстро увидите результаты своих стараний — не сложные рабочие странички на вашем же сайте. Но это не всё, в процессе обучения задания будут усложняться, и углубляться, и в конечном итоге вы будете в силах создавать свои полноценные рабочие страницы с оригинальным дизайном и некоторыми забавными «примочками». Спасибо Юрию за терпение и внимание к участникам курса!

За чем пришел на курс

Нужны были чёткие знания, для начала работы в html.

Результат

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

Отзыв

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

За чем пришла на курс

Были нужны знания по веб-разработке. Нужна была практика (очень много практики) + ментор, который бы направил на нужную информацию.

Результат

Разобралась в трудных моментах с версткой и теперь, не используя туториалы и уроки, могу спокойно верстать страницы используя фрэймеворки и без них. Наконец нашла человека, который бы дал хороший стартовый пинок для работы в верстке =)).

Отзыв

Этот курс хорош для совсем начинающих и для тех кто не первый раз видит HTML и CSS. Хотелось бы еще раз сказать большое спасибо за терпение и время которое Юрий потратил на объяснения одних и тех же вещей помногу раз. Помогло (и все еще помогает) это все-таки.

За чем пришла на курс

Усовершенствовать свои знания.

Результат

Знания верстки у меня уже были, но благодаря курсу я смогла узнать все тонкости, разобраться в деталях, более подробно изучить все нюансы. Сейчас я уже изучаю php и интеграцию готовой верстки на bitrix, но когда у меня возникают вопросы по верстке, я без сомнения обращаюсь к Юре, он всегда поможет и подскажет, за что я очень благодарна.

Отзыв

Хочу порекомендовать этот курс всем, кто хочет учить html и css с нуля, а также тем, кто хочет усовершенствовать свои знания.

Отмечу, что Юра отличный учитель, он очень доступно и понятно объясняет. Мне понравилось, что он очень правильно продумал структуру курса, благодаря чему курс очень легок в изучении и очень понятен. Детальное объяснение всех ошибок в д/з и видеозапись, это очень полезно и удобно. Записывайтесь на курс, не сомневайтесь, учитесь и все у Вас получится!

За чем пришел на курс

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

Результат

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

Отзыв

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

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

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

За чем пришел на курс

Хотел начать изучать html. До курса мои знания были на уровне «есть html, в нем есть какие-то теги, и из них получается страничка».

Результат

Сейчас, после прохождения курса, я могу сверстать практически любую страничку, при этом она будет семантична, и адекватно выглядеть на любом устройстве. Конечно, еще можно и нужно подучить всякие вещи, типа js, php, wordpress (если конечно ориентироваться на front-end разработчика широкого уровня), но благодаря курсу, и в частности Юрию, я получил достаточно мощный старт в знаниях (html5, css3, гриды, медиа-запросы, адаптивность, немного photoshop’а, и много сопутствующего), особенно в практике.

Отзыв

Прошел курс, и остался очень доволен. На занятиях, после прохождения базовых вещей, в качестве домашних задания, мы начали верстать странички по шаблонам, при том, шаблоны достаточно насыщенные — блоки, картинки, формы, меню. Сложно, сначала непонятно, но интересно. Опять же, спасибо Юрию: на любой вопрос, который возникал в процессе урока (как работает та или иная технология, или сервис), или в процессе выполнения домашнего задания, (почему какой-то блок, или меню не хочет выглядеть так, как их накодили), всегда был понятный подробный ответ, «объяснение на пальцах», почему именно так. В общем лично я остался доволен обучением, ни разу не пожалел вложенные деньги, все-таки инвестиции в себя, в свое образование и будущее.

За чем пришла на курс

Хотела начать изучение html и css. Пришла с практически нулевыми знаниями.

Результат

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

Отзыв

Понравился тренер, Юрий. Я не понимаю, откуда у него столько свободного времени?! Он был доступен практически в любой час, готов был ответить на вопросы, и в режиме он-лайн разобрать проблему — даже если это неурочное время! Рассказывал очень понятно, системно, не возникало ощущения «галопом по Европе». Все изучали, пока не будет понятно, и дз обязательно нужно было сделать и сдать. Если хотите начать изучение html и css, то советую этот курс!

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

Стандарт: 04 Ноября — 28 Декабря (2 месяца)
Премиум: 04 Ноября — 31 Января (3 месяца)

Основы CSS для начинающих

Все кто увлекается WEB технологиями, слышали про такую технологию как CSS. И они, наверное, хотят знать основы CSS, для того чтобы уметь изменять стили своих сайтов или страничек, или просто уметь читать и понимать CSS файлы. Сегодня мы с Вами и займемся рассмотрением основ CSS.

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

CSS (Cascading Style Sheets) — каскадные таблицы стилей. В HTML существуют свои инструменты визуального оформления, но они во многом уступают возможностям CSS, да и если у Вас много страничек, то представьте себе, Вам вдруг захотелось поменять цвет всех заголовков, Вам придется вносить изменения во все HTML файлы, а на CSS это делается в одной строке. Я думаю, что хватит только этого аргумента, для того чтобы начать изучать CSS.

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

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

Ну что переходим к практике, и начнем мы с Вами с простого синтаксиса. Выглядит он примерно так:

Элемент оформления принято называть селектор, но для простоты я указал его именно так.

Чтобы был понятен синтаксис, приведем простейший пример:

  • p – это тег абзаца;
  • color – это свойство, т.е. в нашем случае это цвет;
  • red – это значение, в нашем случае это красный.

И в итоге у Вас текст во всех абзацах станет красным цветом.

С синтаксисом немного разобрались, перейдем к тому моменту, где это все писать, т.е. подключать CSS к нашему HTML документу.

Способы подключения CSS

1. Непосредственно в самом элементе документа по средствам атрибута style, например, если перевести вышеуказанный пример в сам документ и описать его в самом элементе, то это будет выглядеть так:

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

2. Немного по удобней способ — это применение CSS, когда таблица стилей описана в самом документе. В разделе head применяется элемент style, в котором и описывается сама таблица стилей. Например, снова задействуем вышеуказанный пример, но уже с использованием этого способа:

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

3. В третьем способе используется импорт CSS документа, я редко встречал применение этого способа, может им и никто и не пользуется, но знать о нем нужно. Здесь таблица стилей уже описана в отдельном документе.

css-file.css – это файл CSS, где и описана таблица стилей, если он лежит в другой папке, то нужно писать путь к этому файлу.

4. Самый распространенный способ применений каскадной таблицы стилей — это подключение CSS файла к Вашему документу. Этим способом пользуются практически все, так как он самый удобный. Подключается CSS по средствам тега link в элементе head.

css-file.css – это файл, в котором описана таблица стилей, снова если файл лежит в папке отличной от расположения самого документа, то необходимо писать путь к нему.

Виды селекторов в CSS

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

С селекторами элементов (тегов) мы уже познакомились вышеперечисленные примеры, применялись ко всем тегам:

p – это и есть селектор элемента, здесь могут быть практически любые теги HTML документа, такие как body, div, table, tr, td, h1 и много, много других.

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

Текст CSS будет таким:

Текст документа будет таким:

Для практики подключите сами любым из способов каскадную таблицу стилей к Вашему документу.

Наверное, Вы уже поняли, что идентификаторы в CSS обозначаются с помощью символа # (#idred), а классы с помощью точки и названия класса (.black).

В HTML документе они обозначаются с помощью соответствующих тегов: id для идентификатора и class для классов.

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

Текст HTML документа:

Как Вы видите у нужной нам ссылки, шрифт стал 20 пикселей.

Теперь рассмотрим тоже популярный вид селекторов это — селекторы потомков. Другими словами, Вы указываете, что этот элемент, идентификатор или класс имеет вот таких потомков, т.е. он находится в том или ином элементе который, например, имеет тот или иной id или class. Пример:

Текст HTML документа:

Вы здесь видите что абзац, который находится в элементе div стал зеленым, а все абзацы, которые не находятся в элементе div, станут красным.

Нужно отметить, что выделять потомков нужно с права налево, например, у нас сначала идет потомок (div), потом идет наш нужный элемент (p).

Как Вы видите, сегодня мы использовали всего два свойства: это font-size и color. На самом деле их очень много поэтому на сегодня я думаю достаточно, в следующих уроках продолжим рассмотрение других свойств и много чего еще! А пока рекомендую почитать книгу по CSS для начинающих, где более подробно описаны все возможности CSS и как их применять на практике.

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

Основы CSS

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

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

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

Более подробно о том, что такое Cascading Style Sheet (CSS) и для чего она используется читайте ниже.

Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки — HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

Значит, для изучения и эффективного использования CSS необходимо знать основы HTML. Без этого постижение каскадных таблиц стилей не имеет практического смысла. Если вы все еще не знакомы с основами языка гипертекста — пройдите мои уроки по HTML.

Наглядный пример

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

Содержание будущей картины

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

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

Сайт на голом HTML, без CSS

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке «Установить».

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

Соц. сеть с подключенными CSS файлами

Как работает CSS?

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

Во время загрузки html страницы, через тег
загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.

Например, через селектор ‘p’ мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор ‘h1’.

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

Зачем изучать CSS?

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

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

Плюсы CSS

  • С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
  • При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
  • CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
  • Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
  • Используя CSS вы идете в ногу с временем.

Как быстро научиться основам CSS

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

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

Суть работы с каскадными таблицами стилей довольна проста, поэтому не теряйте время и приступайте к ее освоению. Список уроков:

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

Основы CSS #3217

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

Грубо говоря, HTML — это каркас страницы, а CSS — это ее декорирование.

Для начала стоит разобраться, как взаимодействуют HTML и CSS внутри Системы Управления.

Существует три способа подключения стилей CSS к документу HTML.

Подключение CSS. Способ 1: внутри элемента

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

Итак, суть данного способа в том, что Вы прописываете стили прямо внутри тега HTML с помощью атрибута style.

Чтобы было нагляднее, представим пример:

В данном примере в документе HTML у нас есть абзац (он находится внутри тегов

). Чтобы задать стиль конкретно для этого абзаца, мы дописали прямо в теге атрибут style =» color : blue «, таким образом, весь текст в данном абзаце будет выделен синим цветом.

Подключение CSS. Способ 2: внутри документа

Данный способ тоже не является оптимальным, так как в нем Вам тоже придется вставлять стили CSS в документ HTML.

Он позволяет задавать стили не для каждого отдельного тега, а для всех элементов отдельной страницы.

Для того чтобы это сделать Вам необходимо прописать стили в самой структуре страницы в теге (об этом теге мы упоминали тут).

Опять же для простоты приведем пример:

Как видите, в данном примере мы прямо в начале файла HTML прописали тег

Онлайн обучение Профессия
HTML верстальщик

Получите профессию за 2 месяца под руководством опытного наставника. После курса – трудоустройство в веб‑студию или работа на фрилансе.

Основатель онлайн школы WebCademy.ru,
автор обучающего блога по веб-разработке RightBlog.ru,
основатель студии WebOtdel.

  • Product designer, UI & UX дизайнер.
  • FrontEnd разработчик
  • Опыт в веб-разработке: более 10-ти лет
  • Преподавательский стаж: более 5 лет
  • Опыт работы в международных IT компаниях, из TOP 10 в своей отрасли. США, Норвегия. Делаю дизайн и фронтенд для IT продуктов.

Мне нравится делать, пожалуй, лучшие курсы по IT обучению в Рунете.

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

Работа веб-разработчика позволяет мне работать удаленно, путешествовать и жить в любой точке мира. Позволит и Вам!)

  • Обзор редакторов кода
  • Установка и настройка редактора
    Sublime Text
  • Плагины для Sublime Text, package control
  • Тема Material Theme
  • Редактор Brackets
  • HTML теги
  • Основные HTML теги
  • Структура проекта
  • Верстка таблиц
  • CSS3 эффекты
  • Градиенты
  • Трансформации
  • Анимация
  • Хостинг и домены
  • Работа сайта
  • Покупка домена
  • Покупка хостинга
  • Настройка Домена и Хостинга
  • Автообновление страницы при верстке
  • Firefox плагин AutoReload
  • Google Chrome LivePage
  • Стартовый шаблон для верстки
  • Использование Google Fonts
  • Использование WebFont.ru
  • Генерация веб-шрифтов
  • Шрифтовые иконки
  • Карусель — подключение и настройка
  • Табы, вкладки и переключатели
  • Многоуровневая навигация
  • Галерея фотографий
  • Модальные окна
  • Сортировка и фильтрация элементов
  • Работа с Google Maps, вставка карт на сайт
  • Сетка Bootstrap
  • Подключение и использование
  • Быстрое прототипирование на Bootstrap
  • Использование и стилизация компонентов
  • Flex box верстка
  • Pixel Perfect верстка
  • CSS gr >Оптимизация верстки
  • Спрайты
  • Оптимизация работы с изображениями
  • Препроцессор LESS
  • Сниппеты Sublime Text
  • Gist заготовки кода
  • Анимация при прокрутке страницы
  • Параллакс эффекты
  • Загрузчики (эффект загрузки страницы)
  • Плавная прокрутка на сайте
  • Mobile first подход
  • Мобильная адаптивная навигация
  • Онлайн калькулятор
  • Формы обратной связи
  • Отправка писем с сайта
  • Валидация данных в формах
  • Подключение jQuery плагинов
  • Написание jQuery скриптов
  • Основы PHP
  • PHP — основы ООП
  • Основы JavaScript (предпросмотр)
  • JavaScript — модульный подход
  • JavaScript — ООП
  • jQuery — библиотека языка JS
  • ajax запросы на сервер без обновления страницы
  • Контроль версий — Git
  • Сервис GitHub
  • Установка и настройка необходимых программ.
  • Основные понятия в веб-разработке.
  • Основы разметки HTML.
  • Создаем HTML сайт.
  • HTML таблицы и формы.
  • Оформляем домен и хостинг.
  • Работа с FTP.
  • Знакомство с CSS стилями и их возможностями.
  • Основы таблицы стилей CSS.
  • CSS селекторы.
  • Основные CSS свойства.
  • Веб-Шрифты — подключение и генерация.
  • Блочная верстка — часть 1. Типы блоков. Float. Clear.
  • Блочная верстка — часть 2. Типы блоков. Block, inline, inline-block. Clearfix.
  • Абсолютное позиционирование. Псевдоклассы.
  • Стандарты верстки: Валидация CSS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Photoshop.
  • Работа с макетом в Photoshop.
  • Блочная верстка. Позиционирование.
  • Инструмент — Сетка, для разметки сайта.
  • Стартовый шаблон. Организация работы.
  • БЭМ-нейминг методология.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Что такое фреймворк. Зачем он нужен.
  • Медиа-запросы, мобильная верстка.
  • Верстка адаптиной навигации.
  • Что такое фреймворк. Зачем он нужен.
  • Знакомство с Bootstrap.
  • Сетка, элементы, быстрое прототипирование.
  • CSS3. Градиенты.
  • Размеры текста: em, rem.
  • CSS3. Анимация, тени, переходы.
  • Библиотека Animate.css
  • Анимация при открытии страницы.
  • Препроцессор LESS.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с макетом Аполло.
  • Java Script — основы.
  • Знакомство с jQuery.
  • Bootstrap элементы.
  • Оптимизация верстки.
  • jQuery — основы
  • jQuery интерактивные элементы страницы:
    • — Карусель.
    • — Модальные окна.
    • — Табы.
    • — Галерея фотографий.
    • — Сортировка элементов.
  • Знакомство с PHP.
  • PHP — основы.
  • Форма обратной связи на сайт.
  • Фриланс.
  • Проект менеджмент.
  • Разбираем темы за неделю. Ответы на вопросы.
  • Знакомство с Ajax.
  • Критерии сдачи сайта — чек лист.
  • PHP — основы. Форма обратной связи на сайт.
  • Ajax. Ajax форма обратной связи.
  • Устройство на работу.
  • Карьера.
  • Распределение и обсуждение персональных проектов.
  • Консультации по индивидуальным проектам.
  • Большой блок: Фриланс в веб-разработке.
  • Общие задания по фрилансу и трудоустройству.
  • Прием индивидуальных дипломных проектов.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Большой блок: Трудоустройство в веб-разработке.
  • Мастер-майнд в группе по куочингу.
  • Пуленепробиваемая кроссбраузерная верстка. Покоряем IE. Modernizr.
  • Ускорение верстки.
  • Индивидуальные задания фриланс или трудоустройство.
  • Мастер-майнд в группе по куочингу.
  • Проект менеджмент в веб-разработке.
  • Финал. Выдача сертификатов. ВИП группа. Закрытие курса.

Верстаем макет начального уровня. Сайт для туристической компании «ФорестТревел» из 4-х страниц.

Учебный макет для приложения Юнит.
Мобильная верстка под планшеты и смартфоны.

Каждый студент в финале курса создает свой личный сайт портфолио со своими работами. Адаптивная верстка, скрипты, форма обратной связи с проверкой и отправкой сообщений.

Видео уроки

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

Домашние задания

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

Чат для общения

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

Онлайн мастер-классы

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

Три выпускных проекта

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

Консультации с наставником

Возникли трудности с проектом? Не беда! На индивидуальной консультации наставник подробно расскажет и объяснит что к чему.

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

��‍�� Вакансии и проекты

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

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

☕ Раз в месяц встречи в Москве

Раз в месяц мы с ребятами собираемся в Москве. Время от времени мы будем устраивать живые встречи и в других городах.

Валерий Молчанов

Виктория Рустамова

Татьяна Берлова

Михаил Кушков

Сергей Галена

Дарья Воропаева

Антон Петров

Ольга Ившина

  • Полноценная верстка страниц сайта
  • Свободное владение HTML и CSS
  • HTML5 и CSS3
  • Знание Adobe Photoshop для работы с макетами
  • Кроссбраузерная верстка
  • Верстка для мобильных устройств (адаптивная и отзывчивая верстка)
  • Оптимизация под мобильные устройства
  • Оптимизация работы с изображениями
  • Умение разбираться в чужом коде
  • Понимание основ юзабилити
  • Основы JavaScript
  • Основы PHP

На курсе есть блок по трудоустройству и фрилансу. Чтобы вы смогли найти достойную работу и хорошо зарабатывать, применяя навыки и знания полученные на курсе. Примеры вакансий с сайта headhunter.ru

Оригиналы отзывов находятся в группе Вконтакте

За чем пришел на курс

За знаниями html & css.

Результат

Вход в профессию / необходимые предметные основы. Во время обучения сделал редизайн своего сайта. Хорошо прокачал свой уровень в верстке сайтов.

Отзыв

Большое спасибо за обучение! Юрий Ключевский – отличный преподаватель. Как педагог по образованию, могу от себя сказать, что созданный Юрием курс очень хорош для новичков в знаниях html & css. Методика – интенсив, плавный, верно построенный; интересный, не напрягающе-нудный, и если есть возможность и желание делать домашние задания, вы никак не останетесь по окончанию этого курса без самостоятельно сделанных и разобранных преподавателем работ-сайтов.

За чем пришел на курс

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

Результат

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

Отзыв

Если вы хотите получить знания по HTML и CSS, то я рекомендую этот курс от Юрия Ключевского! Доступно и понятно о сложных технических моментах и терминах! Если вам интересно то, что скрыто под «капотом» сайта, если вы самостоятельно хотите сделать сайт с нуля до его запуска или просто научиться этому ремеслу, то для начала советую получить знания от профи.

Огромное спасибо! Рекомендую как профессионала своего дела.

За чем пришла на курс

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

Результат

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

Отзыв

Курс очень прикладной, практика, практика, практика. Это мне очень понравилось. Современные технологии, методологии, разные языки. Все это то, что действительно нужно для того чтобы начать работать в данной сфере. Если кто-то действительно ищет возможность для старта в мире верстки, веб программирования, фронтенда, то курс будет очень полезным.

За чем пришел на курс

Результат

Структура верстки стала понятна сама по себе, теперь, если придется, я смогу разобраться в ранее неизвестных мне приемах или функциях и подключить их в свой проект. В итоге мы научились создавать сайты, которые мой знакомый дизайнер оценил как современные и с актуальными «фишками». Самый тренд!))

Отзыв

Курс очень эффективный. Юрий излагает материал настолько понятно и структурированно, что я мог не присутствовать на ночных (в моем часовом поясе) вебинарах и всё равно делать задания. Инструменты, которыми он учит пользоваться, ускоряют верстку в несколько раз, превращая её из рутинной нудятины в нормальный творческий рабочий процесс. Почти круглосуточное сопровождение: от проверки заданий до советов по оптимизации кода. Мне кажется, что Юрий проверял работы гораздо быстрее, чем группа их создавала))

За чем пришел на курс

Я решил что-то поменять в свой жизни. Я подумал, что IT (web) — самое то.

Результат

Хорошо понял необходимые для работы основы. Для себя следующим шагом вижу — изучение JavaScript, JQuery

Отзыв

Я решил пройти курсы и о чем не жалею. Потому что: 1. Все доступно. 2. Юра помогал по тем вопросам. которые возникали в ходе выполнения заданий. 3. Достаточно много материала, который еще нужно переваривать и т.д. Всем рекомендую!

За чем пришел на курс

Решил сделать свой первый шаг в сторону web разработки.

Результат

Хорошая база, которая дает понять, в каком направлении развиваться дальше.

Отзыв

Настоятельно советую курс Юрия по верстке сайтов! Обучение систематизировано таким образом, что на протяжении всего курса ты получаешь только те знания, которые нужны новичку на данном этапе, ничего лишнего. Информативный и сбалансированный курс, опытный преподаватель, адекватная цена. Советую всем интересующимся пройти этот курс, а Юрию желаю успехов!

За чем пришел на курс

Решил найти работу, которая будет нравиться, и приносить не плохие деньги. Остановился на верстке, понравилось, но многое не получалось. Хотелось большего. Решил пройти курсы

Результат

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

Отзыв

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

За чем пришла на курс

Очень люблю Flat-дизайн, красивые минималистичные сайты — слабость моя. Поэтому давно мечтала создавать такие же, но знакомые программисты говорили, что года 2 нужно, чтоб научиться. Поэтому верстка так и оставалась у меня на уровне фантазий.

Результат

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

Отзыв

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

Смущала 7-часовая разница во времени. (я из Вадивостока) Но Юрий меня успокоил. Каждый вебинар я смотрела в записи, в удобное для себя время).

Тема для меня новая. Сложная. Информации много! Иногда даже мозг закипал, и я чувствовала себя глупой телкой (не без этого)) Но процесс обучения грамотно выстроен и интересен! Очень многое зависит от преподавателя! Юра классный преподаватель! Если у вас реальный интерес к созданию сайтов, то очень рекомендую, не пожалеете!

За чем пришел на курс

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

Результат

На этом курсе изучили все основные темы по верстке, а также затронули и даже попробовали более углубленные штуки, такие как PHP, JS, Ajax, WordPress.

Отзыв

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

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

За чем пришел на курс

Устал от офисной работы и решил, что нужно менять профессию, чтобы делать работу из любого места. Решил, что стану фронт-эндером. В первую очередь, занялся азами — html/css. Зарегался на html-academy, стал проходить курс, но чем дальше уходил, тем больше понимал, что что-то не так. Я знал теги, знал свойства и атрибуты, понимал логику разметки, но что с этим знанием делать? Я будто научился ездить на велосипеде, ни разу на него не сев. Вычитал, что удобнее всего материал усваивается за личным проектом, но не знал, как вообще создать сайт. Мне было необходимо обучение на практике.

Результат

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

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

Отзыв

Планирую идти дальше, углубляться в FE, после перепрохождения курса вернуться к изучению JS и его фреймворков, немного больше узнать о PHP(который, кстати, немного тоже рассматривается в рамках этого курса), Python, и софте для разработки UI/UX, вроде Adobe xd.

Цена курса невысокая, длительность — что надо, и самое главное: охватываются все необходимые темы. Очень хороший курс. Материал подаётся плавно, местами с рывками вперёд, но эти рывки необходимы, это своеобразные барьеры, которые хочется преодолеть, чтобы подсмотреть, что ждёт дальше. Курс рекомендую! Спасибо Юрию за составление такой программы обучения, профессионализм и отзывчивость!

За чем пришла на курс

Мне приходится часто ездить, и я задумалась о смене профессии на фриланс.

Результат

Теперь я разбираюсь в предмете и моя цель — накопить опыт работы в новой сфере и углублять знания!

Отзыв

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

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

За чем пришел на курс

Сам процесс онлайн обучения считал не очень привлекательным, потому что при выборе курсов опираться можно лишь на шаблонное описание программы обучения и на сайт автора. Выбирал несколько недель, кое-где оставлял заявки, но везде отказывался по разным причинам. И тут наткнулся на симпатичный сайт Юрия. Оставил заявку, списался в контакте, появились проблемы по времени, так как середина учёбы совпадала с моим отъездом, на что Юрий предложил очень увесистые доводы остаться.

Результат

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

Отзыв

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

За чем пришел на курс

Освоить профессию HTML-верстальщика.

Результат

После того как прошёл курс «Верстка сайтов HTML5/CSS3» я получил огромное количество полезного материала поданного в интересной форме, который пригодится в карьере веб-разработчика.

Отзыв

Благодаря тому, что автор имеет отличные навыки преподавателя, каждый урок был увлекательный и лёгкий для понимания. Юрий всегда отвечал на мои вопросы и помогал разобраться с любыми проблемами. Грамотно построенные домашние задания, при выполнении которых я укреплял знания полученные на вебинарах. Данный курс включал в себя очень актуальные темы, которые ценятся работодателями в сфере веб-разработки. Огромное спасибо Юрию за данный курс, так как это отличная возможность получить актуальную и востребованную профессию.

За чем пришла на курс

Я имела представление о HTML и CSS из различных бесплатных ресурсов, но верстать что-то более-менее серьезное не могла.

Результат

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

Отзыв

Для меня данный курс оказался очень полезным и эффективным. На практике мы сверстали несколько работ, причем все непонятные моменты Юрий разъяснял очень подробно в индивидуальном порядке. Ценно и то, что помимо HTML и CSS мы рассмотрели полезные инструменты разработчика, о которых я и не догадывалась. От души благодарна Юрию за его труд, желаю творческих успехов, и надеюсь на дальнейшее общение.

За чем пришла на курс

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

Результат

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

Отзыв

Очень благодарна Юрию за терпение, за подробные, конструктивные разъяснения. Курс великолепен и максимально наполнен всем необходимым. Конечно, курс прошёл в интенсивном режиме, зато очень эффективно. Так что всем желающим познать тайны HTML и CSS очень рекомендую. Говорят, время — деньги, потому не стоит растрачивать время на поиски тьюториалов — всё есть в одном курсе. Еще раз спасибо нашему учителю

За чем пришел на курс

Начинал курс с нулевыми знаниями в область HTML, CSS да и вообще всего, что касается разработки веб-страниц, Landing page и.т.д. На работе возникла потребность в освоение нашей фирмы интернета. Подумали , посовещались, и решили, что-то найти, подходящее для изучения

Результат

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

Отзыв

Главные фишки в курсе:
1. Его продуманная последовательность от самых основ, до библиотек, фишек.
2. Интенсивность курса, несмотря на очень большой объем работы.

Хотел бы порекомендовать этот курс всем — абсолютно всем — от начинающих до квалифицированных специалистов.

За чем пришел на курс

Начинал изучать верстку сам. Прошёл почти до конца онлайн тренажёр на codecademy, смотрел тюториалы на YouTube, по частицам собрал некоторые знания. Но как то все в перемешку было, хотя думал что уже достаточно много знаю. В теории вроде нормально разбирался, а на практике не очень получалось.

Результат

Курс помог структурировать уже имеющиеся знания + приобрести новые навыки. Главное понял и немного изучил сам процесс верстки.

Отзыв

Я доволен курсом и преподавателем. Хочется отметить, что Юрий всегда готов помочь, то есть в «нерабочее время».

За чем пришла на курс

Хотела изучать HTML и CSS, но не знала, с чего начать, вернее, с какой стороны подойти к такому «зверю».

Результат

Курс был отличным стартом и дал тот объем знаний, который теперь позволяет мне УВЕРЕННО погружаться в более глубокое изучение HTML и CSS. Теперь меня не пугают никакие title, div, webkit, ul, meta, bootstrap, font-weight, padding и другие неведанные мне ранее звери)))

Отзыв

Если вы новичок, то данный курс вам очень подойдет. Вы сразу окунетесь в самую суть процесса и быстро увидите результаты своих стараний — не сложные рабочие странички на вашем же сайте. Но это не всё, в процессе обучения задания будут усложняться, и углубляться, и в конечном итоге вы будете в силах создавать свои полноценные рабочие страницы с оригинальным дизайном и некоторыми забавными «примочками». Спасибо Юрию за терпение и внимание к участникам курса!

За чем пришел на курс

Нужны были чёткие знания, для начала работы в html.

Результат

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

Отзыв

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

За чем пришла на курс

Были нужны знания по веб-разработке. Нужна была практика (очень много практики) + ментор, который бы направил на нужную информацию.

Результат

Разобралась в трудных моментах с версткой и теперь, не используя туториалы и уроки, могу спокойно верстать страницы используя фрэймеворки и без них. Наконец нашла человека, который бы дал хороший стартовый пинок для работы в верстке =)).

Отзыв

Этот курс хорош для совсем начинающих и для тех кто не первый раз видит HTML и CSS. Хотелось бы еще раз сказать большое спасибо за терпение и время которое Юрий потратил на объяснения одних и тех же вещей помногу раз. Помогло (и все еще помогает) это все-таки.

За чем пришла на курс

Усовершенствовать свои знания.

Результат

Знания верстки у меня уже были, но благодаря курсу я смогла узнать все тонкости, разобраться в деталях, более подробно изучить все нюансы. Сейчас я уже изучаю php и интеграцию готовой верстки на bitrix, но когда у меня возникают вопросы по верстке, я без сомнения обращаюсь к Юре, он всегда поможет и подскажет, за что я очень благодарна.

Отзыв

Хочу порекомендовать этот курс всем, кто хочет учить html и css с нуля, а также тем, кто хочет усовершенствовать свои знания.

Отмечу, что Юра отличный учитель, он очень доступно и понятно объясняет. Мне понравилось, что он очень правильно продумал структуру курса, благодаря чему курс очень легок в изучении и очень понятен. Детальное объяснение всех ошибок в д/з и видеозапись, это очень полезно и удобно. Записывайтесь на курс, не сомневайтесь, учитесь и все у Вас получится!

За чем пришел на курс

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

Результат

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

Отзыв

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

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

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

За чем пришел на курс

Хотел начать изучать html. До курса мои знания были на уровне «есть html, в нем есть какие-то теги, и из них получается страничка».

Результат

Сейчас, после прохождения курса, я могу сверстать практически любую страничку, при этом она будет семантична, и адекватно выглядеть на любом устройстве. Конечно, еще можно и нужно подучить всякие вещи, типа js, php, wordpress (если конечно ориентироваться на front-end разработчика широкого уровня), но благодаря курсу, и в частности Юрию, я получил достаточно мощный старт в знаниях (html5, css3, гриды, медиа-запросы, адаптивность, немного photoshop’а, и много сопутствующего), особенно в практике.

Отзыв

Прошел курс, и остался очень доволен. На занятиях, после прохождения базовых вещей, в качестве домашних задания, мы начали верстать странички по шаблонам, при том, шаблоны достаточно насыщенные — блоки, картинки, формы, меню. Сложно, сначала непонятно, но интересно. Опять же, спасибо Юрию: на любой вопрос, который возникал в процессе урока (как работает та или иная технология, или сервис), или в процессе выполнения домашнего задания, (почему какой-то блок, или меню не хочет выглядеть так, как их накодили), всегда был понятный подробный ответ, «объяснение на пальцах», почему именно так. В общем лично я остался доволен обучением, ни разу не пожалел вложенные деньги, все-таки инвестиции в себя, в свое образование и будущее.

За чем пришла на курс

Хотела начать изучение html и css. Пришла с практически нулевыми знаниями.

Результат

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

Отзыв

Понравился тренер, Юрий. Я не понимаю, откуда у него столько свободного времени?! Он был доступен практически в любой час, готов был ответить на вопросы, и в режиме он-лайн разобрать проблему — даже если это неурочное время! Рассказывал очень понятно, системно, не возникало ощущения «галопом по Европе». Все изучали, пока не будет понятно, и дз обязательно нужно было сделать и сдать. Если хотите начать изучение html и css, то советую этот курс!

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

Стандарт: 04 Ноября — 28 Декабря (2 месяца)
Премиум: 04 Ноября — 31 Января (3 месяца)

Видео-курс «CSS — основы вёрстки»

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

Технические подробности Длительность: 0.5 часа Начало курса:
Курс в работе.

Вы записаны!
Курс ещё в работе. Мы сообщим вам, когда он будет готов.

Вы записаны, однако вам нужно оплатить курс.

Зачем это нужно?

Язык CSS (по-английски «Cascading Style Sheets» — «каскадные таблицы стилей») — это язык описания того, как веб-страница должна выглядеть, т.е. задания внешнего вида документа, написанного с использованием языка разметки HTML.

В этом курсе вы узнаете, где и как применяется CSS, как оформлять веб-страницы, как писать CSS-селекторы и как задавать свойства сразу многим элементам на странице.

Овладеть языком CSS рекомендуется всем, кто хочет работать в сфере веб-технологий — веб-разработчикам (backend\frontend), тестировщикам, SEO-специалистам и даже маркетологам. Уверенно владея языком CSS, можно начинать изучать такие фреймворки и библиотеки, как jQuery, Bootstrap, и другие.

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

Структура курса

1. Зачем нужен CSS?

  • Оформление веб-страниц в интернете
  • Пример — сайт CSS Zen Garden

2. Свойства и их значения

  • Как менять цвет, шрифт и размер элементов
  • Как изменить курсор над элементом
  • Как сверстать «хлебные крошки»

3. CSS-селекторы

  • Основные виды селекторов
  • Псевдо-классы

4. CSS Box Model

  • Внутренние и внешние отступы
  • Цвета и ширина границ элементов

5. Макетирование на CSS

  • Свойство display и его значения
  • Как можно задавать позиции элементов на странице
  • Свойство float и обтекание текстом
  • Media queries и девиз «Mobile first»

6. Практика с CSS

  • Меняем CSS любой страницы через консоль
  • Верстаем форму сбора контактов
  • Верстаем «хлебные крошки»

Александр Скакунов
(Дания)

Веб-программист на датском телеканале TV2

Основы CSS нужно знать всем, кто планирует работать с веб-страницами (в частности, frontend-часть) — верстальщикам и тестировщикам.

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