Было дано задание сделать оформление, я его сделал, оцените мое решение, как бы вы по этому заданию сделали?

Question

[Юра Сторчака]

первое фото задание
второе фото как в html я сделал
третье фото как в CSS3 оформил

Оцените пожалуйста мое решение , и подскажите как бы вы оформили это задание в CSS3 более простым способом

Answer 1

[Андрей Федоров]

<span>Joy of T<span>E</span>X</span>

span span {
   vertical-align: sub;
}

Answer 2

[Алексей Скляров]

Все можно сделать куда проще: https://jsfiddle.net/4zg0aLky/

Comments

[Юра Сторчака]

спасибо , подзабыл за возможности span) я пошел более длинным путем

Answer 3

[Alexander Litvinenko]

Назови дивы более семантически

и для .div сделай
justify-content: center
и везде вместо margin flex, это нонсенс использовать наполивину то, наполовину то

Класы назови более семантично, напиши везде единицы измерения
Используй составные селекторы для повторяющихся свойств

А по оформлению, визуально, собствено норм.

Comments

[Юра Сторчака]

Спасибо за комментарии , я пока только учусь , пробую сам делать по заданию из интернета , которое нашел )

[Alexander Litvinenko]

yrchi_k, ну могу помочь, у меня есть несколько заданий отложеных для нашего тренинг центра, при условии что распостранять толкьо не будете.

[Юра Сторчака]

если только для треннинга , тогда не нужно. Посоветуйте сервисы где искать задания для практики HTML+CSS3+Flexbox
я хочу их делать своими решениями и знаниями , и потом буду выкладывать и спрашивать все ли правильно или уместно оформлена и другие альтернативные варианты решения спрашивать у разработчиков

[Alexander Litvinenko]

yrchi_k, и насоветуют вам... полной чушы, точно вам говорю
Могу обозначить что флекс вам однозначно нужно изучить
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Для вашегно пути https://css-tricks.com/ подойдет идеально.
Смотрите какуюто штуку там, пытаетесь реализовать, а далее смотрите как ее реализовали там.