Уроки по тегу «developer tools»

Урок «Знакомство с HTML»

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

Урок «Элементы, теги и атрибуты»

Изучить простую идею HTML и структуру элементов страницы.

Урок «Верстальщик vs. веб-дизайнер»

Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.

Урок «div, span и display»

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

Урок «Правило близости»

Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.

Урок «Структура страницы»

Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.

Урок «Основы CSS»

Научиться задавать оформление — стили — элементам HTML-страницы.

Урок «Каскад»

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

Урок «Chrome DevTools»

Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.

Урок «Размещение на GitHub Pages»

Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.

Урок «Интеграция с соц. сетями и семантический веб»

Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.

Урок «Введение»

Курс «Основы современной вёрстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.

Урок «Семантический HTML»

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

Урок «Редакторы кода»

Чтобы сохранять результаты работы, вам потребуется редактор кода. В этом уроке разберем, как установить Visual Studio Code. Это мощный инструмент, который можно использовать не только для вёрстки, но и для программирования на любом языке.

Урок «Блочная модель»

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

Урок «Графические редакторы»

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

Урок «Emmet»

Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.

Урок «Публикация в интернете»

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

Урок «Базовая структура HTML документа»

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

Урок «Chrome DevTools»

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

Урок «Основы CSS»

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

Урок «Введение в HTML»

Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.

Урок «Каскадность в CSS»

Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.