hexlet-basics / exercises-html

learn html

hexlet-basics

Setup

Requirements

• docker
• docker compose V2
• ruby >= 3.0.0
• make

Steps

Add to /etc/hosts: 127.0.0.1 code-basics.test

Clone project

Some lsp servers are fully workable only when the root dir is the same inside and outside the container. That is why we set WORKDIR to /opt/projects/hexlet-basics. So, if it is possible, clone this project to that directory.

Prepare pulling image locally

1. Open ./app/lib/docker_exercise_api.rb
2. Find def self.download(lang_name) line
3. Comment or remove ok = system("docker pull #{image_name(lang_name)}") line
4. Add new line ok = true below

Run

make project-setup
make compose # run server
# open code-basics.test

make app-test # run tests

# load language
# make app-language-load L=php

make app-db-prepare # sometimes, when fixtures were changed

To manage loaded languages and set other settings, you need to sign in (login: [email protected], password: password)

Production

Kube access

# make k8s-macos-setup or make k8s-ubuntu-setup
export DIGITALOCEAN_ACCESS_TOKEN=<your token>
make local-cluster-setup

Deploy

• Create new tag via command:

  make next-tag

• Wait notification about ready tag in Slack channel #sideprojects-code-auto or wait Github Actions

• Change version in k8s/hb-app-chart/values.yaml and then:

  make -C k8s helm-upgrade-app

Troubleshooting

I couldn't commit my changes

• try to reinitialize your fork repository Read more
• try to add RUN git config --global --add safe.directory ${PROJECT_ROOT} line after WORKDIR ${PROJECT_ROOT} in Dockerfile Read more

---

This repository is created and maintained by the team and the community of Hexlet, an educational project. Read more about Hexlet.

See most active contributors on hexlet-friends.

exercises-html's Issues

Пробел из ниоткуда между тегами span (курс html)

В уроке 24 было предложено поэкспериментировать с тэгом span.
В результате код:
<span>12</span><span>34</span>
отрендерился в консоли как
1234
Но после переноса 2-го тега на новую строку:

    <span>12</span>
    <span>34</span>

Результатом стало:
12 34

Исправьте пожалуйста

Расписание-2020-Q3 / HTML для начинающих / Текст в HTML 11/41

https://docs.google.com/spreadsheets/d/1oM2O8DtjC0HodB3j7hcIResaWBw8P18tXkOl1ymelvE/htmlview?pru=AAABdIhB2BQ*rRz4iKFZPWu6msdGEEzRoQ#gid=1641310155
https://ru.code-basics.com/languages/html/modules/hypertext/lessons/table

При проверке ломается.
Сообщение в консоли:
/usr/lib/node_modules/chai/lib/chai/assertion.js:141
throw new AssertionError(msg, {
^
AssertionError: expected [ Array(3) ] to have a length of 2 but got 3
at /exercises-html/modules/20-hypertext/50-table/test.js:9:23
at test (/exercises-html/src/tests.js:14:5)
at Object. (/exercises-html/modules/20-hypertext/50-table/test.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
showDiff: true,
actual: 3,
expected: 2
}

Решение:

Первая ячейка	Вторая ячейка
Первая ячейка	Вторая ячейка
Первая ячейка	Вторая ячейка
Первая ячейка	Вторая ячейка

41 Укрок, ошибка проверки наличия Aside

Добрый день!

На 41 уроке не работает проверка, не находит тэг Aside.

Код

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
        </ul>
    </nav>
</header>

<aside>
    sdf
</aside>

<main>

    <section class="more">
          <h2>Читайте также</h2>

          <article class="article-block">
              <h3>Услуга 3</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article class="article-block">
              <h3>Услуга 4</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>
    </section>
</main>

Ошибка

/usr/lib/node_modules/@github/query-selector/dist/index.umd.js:93
throw new QueryError("Element not found: <".concat(klass.name, "> ").concat(selectors));
^

QueryError: Element not found: aside
at query (/usr/lib/node_modules/@github/query-selector/dist/index.umd.js:93:11)
at /exercises-html/modules/70-semantics/70-aside/test.js:26:17
at test (/exercises-html/src/tests.js:14:5)
at Object. (/exercises-html/modules/70-semantics/70-aside/test.js:3:1)
at Module._compile (internal/modules/cjs/loader.js:1201:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
at Module.load (internal/modules/cjs/loader.js:1050:32)
at Function.Module._load (internal/modules/cjs/loader.js:938:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
framesToPop: 1
}

Лишняя кавычка в коде (объяснение теории) в 18 уроке

"Съехавшее" форматирование в уроке 23 HTML: Viewport

В 23 уроке связанном с Viewport не "съехавшее" форматирование, возможно связано с тем, что у вас сначала идёт заголовок 3 уровня, а потом второго. В уроках, с 1 по 32 заголовки идут от старшего к младшему и начинаются всегда с заголовка второго уровня. В английской версии такая же ситуация.

Проверьте, пожалуйста.

С 35 урока не переходит на 36

НЕ переходит с 35 урока на 36

Ошибка <ol> в 27 уроке HTML: Чекбокс

Добрый день. Обучаясь обнаружил ошибку в 27 уроке:

Ошибка

в 27 уроке HTML: Чекбокс

Для создания связи label с input тоже существует два способа:

--   |     |
  |
1. Связь по id. Для этого необходимо задать уникальный id для input и связать label с чекбоксом с помощью атрибута for.
  |
  |     |

<form>
  | <input id="html" type="checkbox">
  | <label for="html">Хочу изучать HTML</label>
  | </form>
  | 

  |     |
  |
1. Вложить input внутрь тега label. При этом указание уникального id не требуется.
  |

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

Урок HTML: Отправка формы.

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

Поправьте, если я ошибаюсь!

HTML для начинающих на сайте ru.code-basics.com. Ошибка в принятии задания урока №36.

Некорректно принимается задание.
Задание звучит следующим образом: "Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок".
Но если мы просто создадим маркированный список из двух элементов БЕЗ ссылок внутри, то задание всё равно будет принято.

Задание №2 HTML: Теги. Неверная информация.

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

Случайно сломал первый урок по формам в курсе HTML

Случайно выяснил, что если в решение первого урока по формам (урок №25), в решение вставить кусок кода приведённый ниже, а потом нажать на кнопку на получившейся форме, то с содержимым div с id="basics-lesson-container" произойдёт ровно то, что написано на кнопке С:

Бесовской код

<form action="/people">
  <button>Низвергнуть до атомов</button>
</form>

Typo

В уроке https://code-basics.com/languages/html/lessons/attributes globa вместо global

Исправить конфиг докер композ, использовать override

Эталон https://github.com/hexlet-basics/exercises-ruby

Не работает задание в уроке "Теги"

Не работает задание в уроке "Теги".
Ввожу в редактор: <p>Съешь еще этих мягких французских булочек, да выпей же чаю</p>, после нажимаю кнопку "Проверить". В итоге: "Тесты не прошли"

Проблема с тестом в уроке 12 по HTML

При проверке правильный вариант считается неверным, так как тест считает, что ячеек больше, чем нужно. Но тест проходится, если я убираю или комментирую вторую ячейку второй строки (12 строка кода). Скорее всего, в тесте нужно изменить аргумент в функции expect(tds).to.have.length(2); на 3 (8 строка кода в тесте).

На скриншотах показано решение задачи, ошибка при таком решении и сравнение с решением учителя

ошибка в 17.

Не открывается картинка в редакторе, вероятно по этой причине не пройти дальше.

Подсказска с ссылкой мешает поставить курсор между парными тегами

Здравствуйте!
Можно подсказку показывать ниже или правее / левее тега, на который наведен курсор?

Каждый раз, когда хочу поставить курсор между тегами, чтобы напечатать содержимое, например между <p></p> , подвигаю курсор и всплывает подсказка прям поверх этих тегов.
Очень неудобно. Приходится ставить курсор перед символом "<" и двигать его вправо с помощью клавиатуры.