Хотите за ближайшие 6 дней изучить азы адаптивной верстки в HTML5 и CSS3?

Влад Мержевич

Реклама

Прямо сейчас забирайте БЕСПЛАТНО пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3.

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

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

Самоучитель HTML

Влад Мержевич

Сделал самоучитель HTML в виде мобильного приложения под Android. Кроме самой теории с примерами есть куча вопросов для самопроверки и небольших заданий на закрепление материала. Установить можно через Google.Play.

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

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

Дэнни Марков

Оригинал: tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/
Перевод: Влад Мержевич

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

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

CSS Grid и Flexbox: сравнение на практике

Дэнни Марков

Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
Перевод: Влад Мержевич

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

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

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Создайте дизайн вашего первого сайта уже сегодня

Влад Мержевич

Реклама

Прямо сейчас забирайте БЕСПЛАТНО практический пошаговый видеокурс по созданию дизайна лендинга.

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

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

Начинаем работать с CSS-счётчиками

Самуэль Олорунтоба

Оригинал: scotch.io/tutorials/getting-started-with-css-counters
Перевод: Влад Мержевич

Для веб-разработчиков правильное представление информации стоит на первом месте. Одним из способов соответственного отображения информации — обозначить иерархию, отвечая на вопрос «что идёт первым?».

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

PHP

<ul class="numbered-list">
  <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
  <li class="numbered-list__item">
  <span class="numbered-list__counter">
  <?php echo $i ?>
  </span>
  <!-- Остальная разметка -->
  </li>
  <?php endfor ?>
</ul>

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

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

Меняющееся гамбургер меню на CSS

Луис Мануэль

Оригинал: scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css
Перевод: Влад Мержевич

Недавно я обнаружил эту потрясающую картинку на dribbble.com от Виталия Рубцова и не мог удержаться от желания её реализовать.

В этом уроке я расскажу, как сделать такое с помощью одного CSS, без какого-либо использования JavaScript. Итак, мы увидим некоторые трюки CSS (и SCSS), которые позволят нам добиться почти такой же плавной анимации, как и этот анимированный gif.

Хватит мечтать, начинайте кодить

Влад Мержевич

Реклама

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

Хочешь создать свой сайт, но не знаешь с чего начать?

Влад Мержевич

Реклама

У тебя есть уникальная возможность стать Веб-разработчиком уже через несколько месяцев! Ты научишься верстать сайты, создавать интерактивные веб-приложения, изучишь язык PHP. После обучения на GeekBrains ты пройдешь гарантированную стажировку.

Не откладывай мечту на завтра, начни прямо сейчас!

Справочник HTML для Андроид

Влад Мержевич

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

Купить справочник

Справочник HTML в виде файлов

Влад Мержевич

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

Купить справочник

Справочник HTML

Влад Мержевич

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

Новогодний конкурс картинок на CSS

Влад Мержевич

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

Подробности в этой теме, приём работ открыт до 13 декабря 2016.

Фреймворк Bootstrap — верстаем адаптивно, просто, быстро!

Влад Мержевич

Реклама

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

Прямо сейчас забирайте пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

За ближайшие 7 дней вы повысите СКОРОСТЬ качественной адаптивной верстки по меньшей мере в два раза и сможете пропорционально повысить свои доходы.

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

Онлайн-курсы для веб-разработчиков

Влад Мержевич

Хочешь стать веб-разработчиком или прокачать свои знания и навыки в определённом направлении? Нетология дарит пользователям htmlbook.ru промокод html_prog на скидку 2000 руб. на любой онлайн-курс по направлениям: HTML и CSS, JavaScript, Node, Python, PHP и др. Промокод действителен до конца этого года. Успей подать заявку!

Выбрать онлайн-курс и записаться: http://netolo.gy/cI1

Страницы