А с нуля сейчас пишут только в учебных целях при обучении в универах
нужна какая-то ссылка на спецификацию,
<div class="person">
<img class="person__photo" src="">
<div class="person__name">Имя фамилия</div>
<div class="person__position">Должность</div>
</div>.person {
display: grid;
grid-template-columns: 5rem 1fr;
align-items: center;
gap: 0.25rem 1rem;
}
.person__photo {
grid-row: span 2;
align-self: center;
width: 5rem;
height: 5rem;
border-radius: 50%;
}
.person__name {
align-self: end;
}
.person__position {
align-self: start;
}
Хотя никому они нафиг не нужны в чистом виде. Ну тупо сверстать, без скриптовой обвязки.
Фронтэндер - программист, и сверстает и запрогает вам любую фигню на странице, логику, интерактив, какие-то мега-анимации и т.д. Как правило, разбирается в javascript-фреймворках (vue/react/etc.)