8 заметок с тегом

учусь

Скелет таблицы

Таблица в HTML состоит из следующих тегов: <table>, <caption>, <tr>, <td> или <th>.

<table> — главный тег таблицы, который включает остальные теги
<caption> — название/заголовок таблицы
<tr> — строка таблицы (table row)
<th> — ячейка-заголовок (table header)
<td> — ячейка таблицы (table data)


Пример таблицы с оформлением:

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

24 марта   учусь

Виды списков в HTML

Пока знаю два вида списков: маркированный и нумерованный.


Неупорядоченный список (маркированный):

<ul>
    <li>Раз</li>
    <li>Два</li>
    <li>Три</li>
</ul>


Упорядоченный (нумерованный) список:

<ol>
    <li>Первый</li>
    <li>Второй</li>
    <li>Третий</li>
</ol>


16 марта   учусь

Наполнение тега <head>

Дефолтный доктайп выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Кодировка HTML-страницы</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>


Если разобрать наполнение тега <head>:

<meta charset="utf-8"> — задаёт кодировку
<title>Кодировка HTML-страницы</title> — задаёт название, которе будет отображаться во вкладке веб-браузера
<link rel="stylesheet" href="style.css"> — подключает внешний css-файл cо стилями


14 марта   учусь

Стили


Это пример самого простого применения стиля:

<p style="color: red;">…</p>

Такой стиль называется «инлайновый» или «встроенный стиль».


Ещё стили можно завернуть в тег <style> и они будут существовать в одном HTML-документе с основной разметкой. Но такими стилями много не «наоформляеш».


Поэтому следует выделять все стили в отдельный CSS-файл и подключать в шапке через тег <link>:

<link rel="stylesheet" href="style.css">


12 марта   учусь

Наименование сущностей в CSS

Полезно знать терминологию, чтобы не тыкать пальцем в «вот эту штуковину».


Вот пример кода CSS:

body {
  padding: 0 20px;

  font-size: 16px;
  font-family: "Arial", sans-serif;
}


Вот как называются сущности в иерархии:

селектор {
  свойство1: значение1;
  свойство2: значение2;
}


А у тегов, в свою очередь, есть атрибуты:

<img class="avatar" src="keks.png">
<имя-тега атрибут1="значение1" атрибут2="значение2" …>


12 марта   учусь

Основа вёрстки: HTML, CSS


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


2018   учусь

Посетил воркшоп по CJM от Binary District

Прошёл в октябре курс по построению CJM в обучающем центре Binary District. Куратор курса Арслан Разыков из MegaLabs. Обучение было разбито на два дня с 11-00 до 18-00. Эксперты Дарья Романовская и Максим Маратович рассказали теорию и погрузили в процесс интервьюирования и рекрутинга респондентов. Из участников воркшопа были сформированы небольшие рабочие группы по 5-7 человек. Некоторые команды целиком состояли из сотрудников одной компании. У таких команд была возможность решать не выдуманные, а рабочие кейсы. Я же попал в команду Спортмастер. Первый день был посвящён изложению теории и пробному интервью, а второй — рекрутингу, проведению серии интервью, обработке результатов и сборке карты. Респондентов искали тут же на месте. В конце второго дня каждая команда презентовала свою карту. Получил полезный опыт.

PS: новость немного протухла, но решил зафиксировать для истории.

2018   учусь

Сдал 5-ую тему курса «UX Design»

Прохожу удалённое обучение на курсе «UX Design» от Skilbox/AIC. Хочу поделиться своим небольшим достижением — я успешно сдал домашнее задание по 5-той теме — «UX-проектирование. Исследование интерфейсов». Данная тема входит в блок, состоящий из двух тем. На очереди 6-ая тема — Data driven design.

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

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

Полноформатные изображения из слайдера ниже: 01, 02, 03.

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

P.S.: Пока писал этот пост, наткнулся на отзыв дизайнера об обучении в Skilbox на курсе «UX Design». Думаю стоит потрудиться. Деньги отобьются :)

2018   учусь