PHP fwdays conference — Symfony, MongoDB, Yii, Mutation Testing and more, Kyiv, June 1
×Закрыть

Фидбэк по верстке адаптивного сайта

Здравствуйте. Я новичек, сверстал свой первый сайт по макету. Целью было закрепить знания по CSS и HTML. Пожалуйста укажите мне на ошибки и подскажите, можно ли фрилансить с таким уровнем знаний?
Сайт: mihailnaumov.github.io/mars.github.io
Код: github.com/...​hailNaumov/mars.github.io

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

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

i.piccy.info/...​6757/uglymotherfucker.png

Вот, то что насмотрел за минут 10:
1. иконки в png выкинуть, заменить на svg, а то плывет.
2. адаптив плывет, как уже писали ниже.
3. комментарии в коде отсутствуют.
4. стили читать тяжело.
5. нет препроцессоров и шаблонизаторов, которые упростили бы разработку и сопровождение.
6. нет префиксов для браузеров.
7. советую поработать над именованием селекторов и придерживаться одного стиля по ходу всего проекта.
8. клирфиксы уже подустарели.
9. код скрипта исполняется когда захочет, да и переписать бы там все.
10. h2 в футере имеет cursor: point. Тоже касается h1 в header.
11. поработать над логикой тегов: что для чего нужно.
12. номер телефона лучше было бы сделать ссылкой с href tel:.
13. поработать над ирерархией файлов в проекте — каша.
14. попробуйте использовать готовые сетки, но это не панацея.

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

Большое спасибо. Подскажите, а что сейчас используется вместо клирфиксов? И где почитать о правильном использовании логики тегов?

Вместо клирфиксов в том виде, которые Вы используете сейчас применяются flexbox и grid.

По поводу логики тегов: оф. документация (там по каждому тегу трактат написан, хоть и сложно ориентироваться там) и «html coding best practices» в google. Хотя из второго нужно долго выбирать что-то стоящее.

Думаю мне пока стоит больше практиковаться. К более глубокой теории перейду ~ через пол года. Иначе есть шанс увязнуть и так ничему не научиться на практике.

Это все еще верхушка айсберга.

Адаптивності для телефонів фактично нема. Сайт має адаптуватись , як мінімум, під ширину екрану в 320px.
Зробити б анімацію на меню.
Є питання по дизайну , але зараз мова наче про верстку тільки.

Я бы меню прятал по клике вне его, и выделение пунктов меню не вяжется с дизайном сайта, имхо конечно

Адаптивність взагалі не працює.

Коли заходиш з телефона потрібно ще зумити, щоб бачити всю сторінку, меню з боку не зручне, плюс іконка виглядає розпливчасто, занадто багато вільного місця в блоці features, що робить його занадто великим, але без корисної інформації, і не зрозуміле вирівнювання тексту взагалі і тексту відносно картинок, чисто особисте, анімація на слайдері більш збиває ніж для краси
Також деякі кнопки view more мабуть очікувалось, що будуть по середині, а не дещо зміщені вліво

заходив на сайт тільки з телефона при вертикальному вьюпорті, при горизонтальному деякі речі виглядають краще

Спасибо. Текст во features выровнял, остальное завтра.

Подписаться на комментарии