Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения width и height как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины:

<style>
  img {
    height: 250px; 
    width: 250px; 
  } 
</style>
<img src="coolPic500x500.jpg" alt = "Самая прекрасная картина" /> 

Установите width и height тега img на половину их исходных значений. В этом случае исходная height и исходная width составляют 200 пикселей.

Вы можете вставлять ссылки в другие текстовые элементы.

 <Р>
    Вот вам ссылка:
    <a target="_blank" href="http://freecodecamp.org"> на freecodecamp.org </a> для вас.
  </p> 

<p> Here's a ... for you to follow. </p>

<a> ... </a>

<a href="http://freecodecamp.org"> ... </a>

<a href=" ... ">ссылка на freecodecamp.org</a>

Вот ссылка на freecodecamp.org для вас.

Создайте новый тег p и перенесите в него уже существующий тег a. Важно: не создавайте новый тег a. Новый параграф должен содержать текст View more cat photos, где cat photos - это ваша старая ссылка.

Вместо использования текста em или px для размера вы можете использовать единицы просмотра для гибкой типографии. Единицы просмотра, такие как проценты, являются относительными единицами, но они основаны на разных позициях. Единицы Viewport относятся к размеру видового экрана (ширина или высота) устройства, а проценты относятся к размеру элемента родительского контейнера. Четыре различных видовых экрана:

• vw: 10vw будет составлять 10% от ширины vw: 10vw просмотра.
• vh: 3vh будет 3% высоты просмотра.
• vmin: 70vmin будет на 70% меньше размера vmin: 70vmin просмотра (высота и ширина).
• vmax: 100vmax будет на 100% больше размера vmax: 100vmax просмотра (высота и ширина).

Установите width тега h2 на 80% ширины окна просмотра и width абзаца как на 75% меньшего размера окна просмотра.

Самый простой способ сделать ваши изображения «сетчаткой» (и оптимизировать их для дисплеев retina) - это определить их значения width и height как только половину исходного файла. Вот пример изображения, использующего только половину исходной высоты и ширины:

<style>
  img {
    height: 250px; 
    width: 250px; 
  } 
</style>
<img src="coolPic500x500.jpg" alt = "Самая прекрасная картина" /> 

Установите width и height тега img на половину их исходных значений. В этом случае исходная height и исходная width составляют 200 пикселей.