Давай попробуем отобразить длительность с помощью flex. Сделай блок с классом container flex-контейнером. Среди всех flex элементов надо распределить свободное пространство. Первому надо отдать только 1 единицу, второму в два раза больше, третьему 6...

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

С помощью flexbox легко делать боковую навигацию. Достаточно сделать блок с классом nav flex-контейнером и распределить в нем элементы колонкой. Еще стоит добавить ширину, скажем 150px. Элементу body укажи margin 0px....

Давай немного украсим нашу навигацию. Задай задний фон блоку .nav цвет заднего фона #E5E8EF. Добавь блоку .nav блоку вертикальный padding 10px, горизонтальный - 15px. Высота блока навигации должна быть во всю страницу, давай укажем 100vh....

Каждой ссылке с классом nav-item добавь снизу поля 15px и padding 5px. Цвет заднего фона должен быть #bac2d5, а цвет теста - #232324. Также стоит убрать нижнее подчеркивание у ссылки (используй свойство text-decoration)....

В документе уже есть grid-контейнер с одним единственным элементом. Но этот элемент растянуть на весь экран. Сделай так, что бы элемент располагался посередине grid контейнера, а не растягивался. Используй одно свойства и для вертикального расположения, и для горизонтального....

Элемент с классом grid-container должен стать grid контейнером. Все элементы внутри него должны расположится в три колонки и четыре строчки. Укажи и колонки, и строчки автоматической ширины и высоты. Используй конструкцию repeat()....

С помощью Grid можно легко создать структуру страницы. Этим и займемся. Начнем с того, что элемент .page-layout станет grid-контейнером. У нашей страницы должно быть две колонки: 50px и auto, одна из которых будет для навигации, вторая для контента страницы....

Поработаем над размещением элементов. Блок .grid-container надо сделать grid контейнером. Grid должен состоять из трех колонок. Первая шириной 20vw, название линий - ‘start’ и ‘col-1-end’. Вторая с автоматической шириной, название линий - ‘col-2-start’ и ‘col-2-end’....

Элемент .grid-item должен начинаться со второй линии (‘line2’) и должен проходить через две строчки. Также он должен начинаться с вертикальной линии ‘col-2-start’ и заканчиваться на линии ‘col-2-end’ Эта задача — часть курса по Full-Stack JavaScript....