search

MastersAcademy / frontend-course-2021

Репозиторій з курсу «Advanced Front-end» проекту Masters Academy
MIT License
5 stars 29 forks source link

8 css variables #233

Closed AndriiMorozov88 closed 2 years ago

AndriiMorozov88 commented 2 years ago

https://andriimorozov88.github.io/frontend-course-2021/homeworks/Andrii.Morozov_AndriiMorozov88/8-css-variables/index_variables.html

TArch64 commented 2 years ago

Градієнт білий залишився. На дизайні не такий image

TArch64 commented 2 years ago

Весь контент зміщений вліво image

TArch64 commented 2 years ago

Весь контент, окрім імеджів, зліва. Поправ це. Ну і зроби імеджі більшили бо вони якісь дуже маленькі

Є монітори більші ніж твої і коли ти верстаєш то ти маєш бути впевненим щоб на них все також нормально показується

image

TArch64 commented 2 years ago

Зберігай у png форматі тільки імеджі з прозорим фоном, а все інше в jpg бо перший замітно важчий ніж другий

image

TArch64 commented 2 years ago

Видали закінчення 1x з імеджів. Вони лежать в папці з такою назвою і в назві файлу писати то не потрібно

TArch64 commented 2 years ago

Ці svg тобі точно потрібні?

image

TArch64 commented 2 years ago

На мобайлі та таблеті сайт поломаний image image

TArch64 commented 2 years ago

@AndriiMorozov88 Анімації на сайті мають певне призначення. Вони мають привертати увагу до чогось чи показувати стан чогось. Також що дуже важливо вони не мають дратувати. Анімації крутящогося місяця чи кнопок що переливаються не несуть за собою ніякого сенсу і в деяких випадках роблять читання тексту не дуже зручним. До того ж всі ці анімації навантажуть браузер бо на їх роботу потрібні ресурси системи

TArch64 commented 2 years ago

Якби я побачив на якомусь сайті такі анімації то б я вийшов з нього

TArch64 commented 2 years ago

полоска під лінками хедера норм, але там уже є анімація скейлу на ховер. Я б обрав з них двух щось одне

TArch64 commented 2 years ago

Анімацій не повинно бути дуже багато

TArch64 commented 2 years ago

По візуалу кнопка скролу вверх взагалі не підходить до іншого інтерфейсу. Використай якусь іншу. До того ж розташування її також не дуже вдале. Зазвичай ця кнопка справа внизу. Коли ходиш по різних сайтах то не просто дивись в їх контент а цікався тим як і що вони роблять. Багато речей повторюються і їх не потрібно придумувати самому

image

TArch64 commented 2 years ago

В консолі є тест консоль логи, такого не має буть на проді image

TArch64 commented 2 years ago

Сайтові погано на таблеті

image

TArch64 commented 2 years ago

@AndriiMorozov88 Ти вмієш користувати дев тулзами щоб дивитися як сайт виглядає на ріхних девайсах?

TArch64 commented 2 years ago

На мобайлі також все погано image

TArch64 commented 2 years ago

імеджі зʼявляються на сторінці без ніякої анімації

https://user-images.githubusercontent.com/29049264/147390719-04b1cceb-e34d-42d3-bc9e-50b86bd647ce.mov

TArch64 commented 2 years ago

Цей блок поїхав вліво

image

TArch64 commented 2 years ago

Зроби ці імеджі більшими, щоб не було таких дірок між ними

image

TArch64 commented 2 years ago

На кінці змінюється ширина бордера з 2px до 1px і це виглядає якось не дуже гарно. Краще залишай 2

Також я б зробив анімацію швидше бо вона якось дуже помало тягнеться

image

TArch64 commented 2 years ago

В темній темі back to top кнопку погано видно і вона якась дуже маленька

image

TArch64 commented 2 years ago

На мобайлі хедер не красіво виглядає

image

TArch64 commented 2 years ago

На мобайлі краще приймати обмеження ширини і просто робити падінги зліва та зправа в контентові. Тоді у всіх буде контент на всю ширину. І взагалі краще робити на всіх девайсах падінг в контейнера щоб не було випадків коли контент впритул до країв сторінки

image

TArch64 commented 2 years ago

Я б збільший висоту рядка бо рядки тексту злипаються один до одного

image

TArch64 commented 2 years ago

Іконки поїхали

image

TArch64 commented 2 years ago

Якийсь футер не дуже красівий вийлов. Потрібно відступи між лінками і можна розташувати їх в 2 чи 3 колонки

image

TArch64 commented 2 years ago

Проблема з горизонтальним скролом в тому що в тебе в хедері не вистачає місця для контенту от він і вилазить. Наприклад ти можеш це пофіксити зробив ши бургер менюшки чи лінки на окремий рядок + скролл в рядкові

TArch64 commented 2 years ago

Пофікси контент на таблеті. Там є секція, яка по ширині більше ніж тег body і додай відступи між елементами щоб не були впритик

image

TArch64 commented 2 years ago

У футері бургер зазвичай не роблять. Хедер зазвичай завжди видний на сторінці і він не має займати дуже багато місця іншого контенту тому там ховають навігацію в хедер, а от у футері таких проблем немає і там краще зробити без бургера лінки в 2-3 колонки

image

TArch64 commented 2 years ago

Видали на тегові <body> маржін бо він робить відступ в контентові і не дуже красіво виходить image

TArch64 commented 2 years ago

Щоб пофіксити "стрибання" лінії під лінками навігації при ховері потрібно додати will-change на before псевдо елемент. Без нього браузер не може правильно віданімувати зміну ширини лінії

https://user-images.githubusercontent.com/29049264/148833728-ca1829fe-5384-4c2d-9674-209476ec2537.mov

TArch64 commented 2 years ago

Бургер менюшка не працює коректно. Вона зазвичай появляється поверх контенту з. Пошукай в інтернеті як вона вигядає

image

TArch64 commented 2 years ago

Поламалися відступи в хедері

image

TArch64 commented 2 years ago

Футер не дуже красівий

  1. Дуже великі відступи
  2. лінки перенеслися як попало і без відступів

image

Наприклад можна якось так image

TArch64 commented 2 years ago

На також мають бути однакові відступи зліва та зправа контенту

image