Задача - Клониране на онлайн магазин

Товa е моето решение на заданието от OKrise Design за клониране на онлайн магазин с HTML и CSS. Искам да подчертая, че не съм използвал AI за генериране на код. Всичко е създадено с чист HTML и CSS. Заради целта на заданието да се направи изцяло клонинг на дизайна с чист HTML и CSS , използвах px за font-size и images, jpg, png за снимките и svg за иконите, но за по-добър респонсив дизайн бих използвал rem за font-size и margins/paddings, както и % за широчина и снимки. Също бих използвал CDN за иконите, а за снимките webP формат за по-добра производителност. Добавил съм допълнително position: sticky на nav, за по-добър UX и създадох навигационните точки изцяло с HTML и CSS.

Инструменти, които използвах:

HTML5

• Семантична структура за по-добра четимост и достъпност.

• Lazy loading на някои снимки, които са извън viewporta за подобряване на производителността.

• Accsesibility атрибути. (arial-label, alt)

• Font Inter от Google Fonts

• CSS3

  • Flexbox и Grid за създаване на адаптивност.
  • Media Queries за адаптиране на дизайна към различни размери на екрана.

Неща, които ме затрудниха повече:

• Да докарам Footer-a да има различно разположение при Desktop версията. Затова намерих решение да сложа социалните икони на две места във футъра и в зависимост от това дали е мобилно или десктоп, скриваме едната секция със соц. икони с display:none, а другата се показва.

- Изработено от Ilian Georgiev с HTML и CSS.