Добрий день, друзі! Сьогодні маємо гарні новини для всіх, хто хоче спростити та прискорити свою техніку верстання вебсторінок – на ITVDN вийшли всі уроки курсу “Шаблонізатор Pug”. Курс українською мовою! Pug – це HTML-препроцесор, який дозволяє у зручній манері писати код, котрий буде  більш зрозумілий для сприйняття людиною. За допомогою шаблонізатору розробник пише менше коду, створює зручні для сприйняття вкладені конструкції, необхідні змінні та інше. У ході курсу ви детально розберете особливості синтаксису Pug, його тегів та атрибутів. Будуть докладно розглянуті способи використання тексту в рамках різних тегів, а також ви опануєте можливості управління атрибутами, класами та ідентифікаторами. Навчитеся працювати з вбудованим кодом JavaScript у Pug, використовувати умовні оператори, а також опануєте створення циклів та міксинів для оптимізації та полегшення роботи над проєктами. На завершальному етапі на вас чекає практика – проєкт, який включатиме розробку повноцінної сторінки з використанням усіх навичок, отриманих під час курсу. Автор курсу – Кінаш Станіслав, FrontEnd Developer. Тривалість курсу – 6 годин 27 хвилин. Структура курсу: Pug. Основи шаблонізації. Налаштування середовища Pug. Основи Pug: синтаксис, теги, текст. Робота з текстом всередині тегів. Робота з атрибутами. Класи та ідентифікатори. Робота зі змінними. Вбудований код JavaScript. Умовний синтаксис / Оператор case (when). Цикли та міксини. Використання макетів та включень. Практичний проєкт з використанням Pug. Чого ви навчитеся на даному курсі: Використовувати весь функціонал шаблонізатора Pug. Розуміти основи шаблонізації і налаштовувати для роботи середовище Pug. Використовувати Pug для роботи з синтаксисом, тегами та текстом. Використовувати рядковий текст (inline) у тегах, конвеєрний (piped) та блоковий текст. Використовувати умовний синтаксис в шаблонізаторі Pug, а саме: умовні оператори if та else, оператор unless, оператор case (when). Розуміти та застосовувати цикли each та while в шаблонізаторі Pug. Користуватися міксинами як аналогом функціональних компонентів. Застосовувати атрибути міксинів та так званий Rest Arguments. Використовувати Pug для створення структурованих і оптимізованих HTML-шаблонів. Створювати гнучкі та адаптивні макети вебсторінок з використанням всього функціоналу Pug. Розробляти шаблони, що відрізняються чистотою та структурованістю, без використання додаткових стилів та класів CSS. Попередні вимоги Курс підійде тим, хто вже має базові знання HTML, CSS та JavaScript. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект для більш глибокого засвоєння матеріалу. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до комплексної програми підготовки за спеціальностями: Верстальник FrontEnd Developer React Developer Angular Developer     

С 20 по 27 января на ITVDN проходит акция — вы можете пройти обучение по курсу “HTML5 & CSS3 Углублённый” бесплатно! Что такое HTML5 & CSS3? HTML5 и CSS3 являются фундаментальными технологиями, которыми обязан владеть каждый веб-разработчик. Язык гипертекстовой разметки HTML позволяет создать разметку (каркас) каждой веб-страницы, а CSS —  язык стилей — преображает сайт, придавая ему привлекательный и эффектный внешний вид. Хорошее владение HTML и CSS уже позволяет верстать сайты и зарабатывать деньги. Именно с этих двух базовых технологий начинается путь к профессии FrontEnd разработчика. О курсе “HTML5 & CSS3 Углублённый” Данный курс предназначен для тех, у кого уже есть базовые знания HTML5 и CSS3. В курсе будут рассмотрены такие темы, как: гибкая верстка, реализации анимаций, использование хранилищ браузера, многопоточность, а также подключение препроцессора и сборщика для отображения кроссбраузерности веб-страницы на различных устройствах. Автор видео курса — Сергей Патёха, Senior Software Engineer at ITernal Group. Программа курса: Микроданные, геолокация. Canvas. WebStorage. Audio, Video. Принципы построения разметки Flex, Grid. Шаблоны сайтов. Трансформация и анимация. Градиенты. Основы SASS. Практика. Предварительные требования Для понимания курса нужны базовые знания по HTML & CSS, в частности по таким темам: основные теги HTML5 и свойства CSS3; работа с изображениями, таблицами и списками; позиционирование элементов; стили для текста; формы, метатеги. Также нужны определенные знания JavaScript, в частности: навигация по DOM элементам и модификация DOM дерева; работа со свойствами, атрибутами и стилями из JS; события в JavaScript; функции конструкторы, классы; работа с формами и элементами управления, валидация формы; Cookies и Web Storage; обработка исключений; асинхронность; сетевые запросы. Чему вы научитесь на этом курсе: Работать с обновленными спецификациями HTML5 & CSS3. Применять гибкую и адаптивную верстку (Flex, Grid). Настраивать проект с помощью сборщика Gulp, работать с менеджером пакетов npm. Придавать динамичность страницам, используя анимации и переходы. Понимать основы препроцессора SASS. После изучения материала курса вы можете пройти онлайн тестирование и получить Сертификат, подтверждающий ваши знания. Сроки акции Акция проходит с 20 по 27 января 2022 года включительно. Доступ к курсу открывается на 10 дней.

Всем привет! Друзья, хотим вас порадовать новым видео курсом, который будет интересен каждому начинающему FrontEnd разработчику, а также BackEnd программистам, использующим язык JavaScript в качестве основного или дополнительного инструмента написания кода. Его название — “JavaScript Базовый”. Он является логическим продолжением курса “JavaScript Starter” и посвящен более углубленному изучению работы с языком программирования JavaScript, без которого сегодня буквально немыслима веб-разработка. JavaScript – это один из самых популярных языков программирования. Без его знания не обойтись в web-разработке, однако, он может быть применен и для решения иных задач. Сегодня JavaScript, кроме добавления динамического поведения HTML страницам, применяется в разработке серверных приложений, игровых и мобильных приложений, а также для создания сценариев для автоматизации тестирования и многого другого. Изучение JavaScript — это хорошее вложение в будущее, так как язык пригодится для решения разных задач и будет полезным как Frontend или Backend разработчику, так и тестировщику программного обеспечения. В ходе курса “JavaScript Базовый” вы изучите главные принципы использования JavaScript при построении пользовательских интерфейсов и при создании сценариев, использующих объектно-ориентированные техники и функциональные подходы. Эти уроки станут фундаментом для дальнейшего изучения библиотек и фреймворков, базирующихся на языке JavaScript. Также, знания, полученные на этом курсе, помогут вам при изучении и использовании такого фреймворка, как Angular или библиотеки React. Курс записан одним из лучших авторов ITVDN — Дмитрием Охрименко, являющимся CEO CyberBionic Systematics, сертифицированным тренером Microsoft и автором курсов по .NET и FrontEnd разработке. В записанных видео уроках Дмитрий делится эффективными техниками работы с языком JavaScript, которые актуальны и востребованы на сегодняшний день. Структура курса: DOM и поиск элементов. Навигация по DOM элементам. Модификация DOM дерева. Свойства и атрибуты. Стили. События. Часть 1. События. Часть 2. События. Часть 3. HTML шаблоны. Функции конструкторы. Классы. Классы. Наследование. Контекст функции. Замыкания. Формы и элементы управления. Проверка данных формы. Cookies и Web Storage. Обработка исключений. Асинхронный код. Promise. Сетевые запросы. Чему вы научитесь на данном курсе: Создавать веб страницы с полноценным пользовательским интерфейсом Использовать классы и наследование классов, понимать принципы объектно-ориентированного подхода при разработке на JavaScript. Работать с функциями конструкторами и прототипами. Работать с функциями и использовать замыкания – понимать, что такое лексическое окружение, контекст. Работать с DOM деревом, находить элементы, создавать, удалять и менять состояние существующим элементам. Работать со стилями через JavaScript код. Использовать события, применять технику делегирования событий, работая с разными фазами события (Capture Phase и Bubble Phase). Использовать HTML template и шаблонизатор mustache.js. Работать с формами и проверять данные, введенные в формы. Работать с данными на стороне клиента, используя cookies и Web Storage. Обрабатывать исключения и создавать пользовательские исключения. Организовывать асинхронный код с помощью функций обратного вызова и Promise. Создавать сетевые запросы с помощью метода fetch. Предварительные требования Для понимания материалов данного курса потребуется знание базового синтаксиса JavaScript (материал курса “JavaScript Стартовый”) и знание основ HTML и CSS. Если вы уже занимаетесь разработкой на другом языке программирования и хотите изучить JavaScript – эти видео материалы вам идеально подойдут: просто бегло просмотрите уроки и сконцентрируйте внимание на особенностях работы JavaScript. Если вы занимаетесь тестированием ПО, “JavaScript Базовый” поможет вам в дальнейшем погружении в особенности языка JS и станет надежным помощником в освоении автоматизации тестирования. Смотрите первый урок курса в свободном доступе. Также, можем вам предложить ознакомиться с бесплатным вебинаром “Как стать FrontEnd разработчиком” для лучшего понимания важности JavaScript в веб-разработке. Видео курс “JavaScript Базовый” является второй ступенькой на пути к полноценному освоению языка программирования JavaScript. Если вы желаете не останавливаться на стартовом курсе и хотите дальше ринуться в изучение всех нюансов языка, вам также пригодятся ссылки на другие курсы по JS: ECMAScript 6 JavaScript Шаблоны JavaScript: Расширенные возможности Смотрите также записи вебинаров-практикумов по JS и фронтенд разработке. Оставайтесь на ITVDN!

До 30 апреля продолжается регистрация на Чемпионат по разработке DEV Challenge 11. Несколько фактов о DEV Challenge 11: Мировые гиганты Amazon и Facebook в партнерах, вы можете познакомиться с их судьями на Финале Big MeetUp для всех полуфиналистов - событие open air: фидбэк от судей и знакомство с другими участниками Крутая локация оффлайн событий: первый технопарк Украины Номинации: Front-end (HTML + CSS), Front-end (JS), Fullstack developer, Back-end developer, QC & QA engeneer, UI \ UX designer (web, mobile), Android developer, iOS developer, UI \ UX designer DEV Challenge - это возможность вырасти из опытного разработчика в эксперта, добавить весомости собственном слову и зарекомендовать себя на рынке как ведущего специалиста. DEV Challenge - это возможность испытать себя на прочность и перейти на новый уровень. Перспективные знакомства, амбициозные карьерные предложения, сложные задачи и общения с гуру в своей области. Регистрируйся уже сейчас по ссылке.

12 ноября в Ростове-на-Дону пройдет конференция DevFest - часть глобальной серии мероприятий, проводимых по всему миру сообществами Google Developer Group при поддержке компании Google.  В программе встречи, лекции о последних разр аботках и технологиях Google от IT-специалистов со всей России, воркшопы и общение с единомышленниками. Это мероприятие будет интересно как разработчикам и IT-специалистам, так и всем неравнодушным к современным технологиям.  А вечером и ночью, после мероприятия, будет проводиться очень интересное соревнование для front-end разработчиков – Code in the dark. Турнир уже прошёл в Нью-Йорке, Стокгольме и Париже. А мы проводим его одними из первых в России! Задача турнира – сверстать макет. Основные правила: раунд длится 15 минут, можно использовать только HTML и CSS, запрещается смотреть результат верстки до окончания раунда. Подробная информация о конференции и соревновании. 

Видео курс Twitter Bootstrap 3 разработан и записан Сергеем Швайцером - веб-разработчиком, сертифицированным специалистом Microsoft, тренером учебного центра CyberBionic Systematics. Видео курс состоит из 4 уроков и рассматривает такие темы: Видео урок 1. Знакомство с Bootstrap  Загрузка и подключение. Введение в Bootstrap CSS. Колоночная верстка. Оформление и шрифты. Добавление фрагментов кода в HTML-страницу Видео урок 2. Bootstrap CSS Таблицы. Формы. Кнопки. Картинки. Вспомогательные классы. Видео урок 3. Компоненты Bootstrap. Часть 1. Типографика Glyphicon; Выпадающее меню; Группировка кнопок; Группировка элементов форм; Создание навигационных блоков. Видео урок 4. Компоненты Bootstrap. Часть 2. "Хлебные крошки"; Постраничная навигация; Полосы прогресса; Группы списков;  Панели контента; Переключатели контента; Всплывающие подсказки; Слайдер для баннеров. Смотрите первый урок видео курса Twitter Bootstrap 3

Новый видеокурс "ASP.NET MVC Fundamentals" от Дмитрия Охрименко будет интересен для тех, кто хочет с нуля изучить популярнейшую технологию ASP.NET MVC. Видеокурс дает базовые знания MVC, не требующие предварительного глубокого изучения ASP.NET. Программа  видео курса: Видеоурок 1. Введение в ASP.NET MVC. Видеоурок 2. Система маршрутизации и работа с областями Видеоурок 3. Представления и компоновки в ASP.NET MVC. Видеоурок 4. Контролеры и действия. Асинхронное выполнение. Возвращение данных Видеоурок 5. Вспомогательные методы и HTML формы Видеоурок 6. Модель. Шаблонизированные методы. Использование EntityFramework. Видеоурок 7. Привязка модели и валидация. Видеоурок 8. Типы фильтров. Работа с фильтрами. Авторизация. Видеоурок 9. AJAX в MVC Видеоурок 10. Вопросы безопасности в MVC Framework. Защита. Продолжительность видеокурса 10 часов 19 минут. Стоимость 62 USD. В видеокурсе 2 бесплатных урока - первый и пятый. Изучайте современные технологии и расскажите о видеокурсах Вашим друзьям-разработчикам!

Адаптивнный дизайн сайта уже стал почти постоянным требованием заказчиков. Адаптивность - это способность веб страниц правильно отображаться на различных устройствах, универсальная верстка у которой есть свои правила, техники и хитрости.  Ваш сайт должен одинаково хорошо работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств и с разными разрешениями. Как решить эту задачу быстро и оптимально, с чего начать - этому посвящен бесплатный вебинар Александра Петрика, на который мы приглашаем всех желающих. Вебинар состоится 30 июня 2014 года с 16:00 до 17:30 (по киевскому времени). Программа вебинара: Зачем нужен адаптивный веб-дизайн Адаптивная верстка сайта Мобильные версии сайтов Вебинар рассчитан на тех, кто уже знает HTML, CSS, JavaScript и имеет некоторый опыт веб разработки. Регистрируйтесь на вебинар, задавайте вопросы тренеру! Если Вы не сможете принять участие в этом вебинаре, смотрите его в записи в нашем канале на YouTube или в группе vKontakte. Поделитесь информацией о вебинаре со знакомыми web разработчиками!

Верстальщик сайтов – это специалист, который занимается созданием веб-страниц. Его работа заключается в том, чтобы при помощи различных элементов языка разметки веб-страницы перевести графические элементы дизайна (рисунки, шрифты, таблицы и т.д.) в понятный для браузера формат, то есть сверстать сайт. Работа верстальщика не очень сложная, но требует определенного уровня подготовки и большого внимания к деталям. На хороших специалистов практически постоянно существует большой спрос. На ITVDN все, кто заинтересован в изучении технологий для верстки веб-страницы, найдут необходимые видео уроки и материалы. А также курсы для «прокачки» практических навыков верстки сайта и Тренажер для навыков написания кода. Курсы записаны сертифицированными разработчикам и тренерами Microsoft. ITVDN рекомендует проходить обучение в такой последовательности:    HTML & CSS, автор Александр Петрик How to HTML & CSS, автор Сергей Раздобудько Photoshop. Базовый курс для web-разработчика, автор Сергей Воропаев JavaScript Essential, автор Дмитрий Охрименко How to JavaScript, автор Валерия Прокопенко Основы использования Git, автор Александр Пономаренко Twitter Bootstrap 3, автор Сергей Швайцер Создание адаптивного сайта с Bootstrap 3, автор Александр Пономаренко WordPress Starter, автор Артем Кондранин Практический курс по верстке лендинга, автор Сергей Рубец HTML5 & CSS3, автор Дмитрий Охрименко Также вас могут заинтересовать записи вебинаров ITVDN (все в свободном доступе): Верстаем сайт правильно Photoshop: зачем он нужен веб-разработчику? WordPress: создаем блог за час Скоростная верстка, или как упростить себе жизнь с Bootstrap 3 Интеграция верстки лендинга на CMS WordPress Адаптивный веб-дизайн: типы адаптивных макетов Семантика HTML5, создаем змейку, используя canvas Что надо знать для веб разработки. (реальная разработка + обзор вакансий) Создание веб-приложения с Angular 1.5, Firebase и Gulp Как решить проблемы верстки с помощью HTML5 Web Components Если вы планируете свое обучение с нуля, тогда наилучшим решением будет приобретение подписки ITVDN сроком от 3 месяцев. Это оптимальный срок, за который вы сможете научиться создавать красивые сайты, мастерски владея современным инструментарием  верстальщика.

Введение Метатеги никак не влияют на отображение содержимого веб-страниц, но их активно используют поисковые машины для сбора информации про сайт. Тег meta можно записать внутри элемента head безмерное количество раз с такими атрибутами, как charset, name, http-equiv и content. При применении атрибута name или http-equiv  content обязателен. Names Значения атрибута name разнообразные. Это и author, и description, и keywords. Author явно указывает на автора HTML- страницы, description обычно используется поисковыми машинами для отображение описания страницы в выдаче поиска. Поисковики активно используют метатеги для определения некоего доверия веб-страницам. Вот почему так важно использовать теги meta. Так, например, keywords очень широко используется (иногда слишком). Хотя, современные поисковые машины генерируют релевантный контент самостоятельно. HTTP эквиваленты Атрибут http-equiv может быть использован вместо name и сгенерирует HTTP название, что будет отправлено на сервер. Атрибут должен редко применятся, его значения: Content-type – оправляются зашифрованные данные; Default-style – предпочитаются стили с указанных источников; Refresh –определяется, как часто (в секундах) страница будет обновляться или пересылать на другую. Не очень разумно. Очень удобно использовать запись вместо аналогичного для определения кодировки страницы. <head>     <title>Air conditioners? YEAH conditioners!title>     <meta charset="utf-8">     <meta http-equiv="refresh" content="3">         <meta name="description" content="This is my really, really, REALLY exciting web page about air conditioners"> Источник: http://www.htmldog.com/guides/html/intermediate/metatags/