Кто поможет оценить верстку начинающего?

Question

[Михаил Ступников]

Добрый день, оцените пожалуйста проект, я только начинающий, и хотелось бы знать можно ли с таким лвлом двигаться дальше? Ссылка codepen.io/nevland/pen/MaKMbj

Answer 1

[hime2]

ЧТо тебе сказать, если на мобилке смотреть, то ужасно, а если так, то вполне не плохо. Надо просто больше верстать и все. Ссылки намеренно битые ? Валидация html не много подводит, js лучше использовать для функционала, как переключение, обработка итд. Анимацию лучше пилить на css, это на будущее.

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

Comments

[svilkov87]

А почему анимацию лучше делать на css?

[Сергей Зеленский]

потому что js больше кушает

[hime2]

Сергей Зеленский: И не только, js предназначен для чего? для функционала, обработки итд, но не для стилизации. Для стилизации есть css, svg(другие, но они в вебе в далеком прошлом) архитектура dom это html5. Можно писать и на js, но тогда надо выбирать правильный фрейм, иначе проседания, потребление ресурсов. Писать на js анимацию, бессмысленно, тут лишь один плюсик, это поддержка. Если у вас не много анимации на страничке, то css, если прям вся страница на анимации, то вам надо брать js фремворк d3? для 3d, панорам three.js итд.

[Сергей Зеленский]

hime2: спасибо за лекцию о Великий

[hime2]

mrdoob.github.io/three.js/examples/canvas_geometry... но видно что все это не идеальное.. Не плохо, порой даже интересные сайты получаются, но ты не будешь ждать 3 сек, пока он загрузится, у меня скорость соединения за 150мб/сек и я вынужден ждать пока загрузится, не на всех мобильных устройствах работает итд.

[hime2]

Сергей Зеленский: я писал ему svilkov87)

[Сергей Зеленский]

hime2: сам так путаюсь часто ))

[hime2]

Сергей Зеленский: я просто с телефона)
Не знаю, как по мне графика на сайтах не должна забирать внимание, а только подчеркивать.
Видели видео в 360?

[hime2]

vrse.com/watch/?id=100

Answer 2

[Игорь]

1 мало шрифтов

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Open Sans.ttf');
}

должно быть

@font-face {
    font-family: 'MyriadProCond';
    src: url('fonts/MyriadProCond.eot');
    src: url('fonts/MyriadProCond.eot') format('embedded-opentype'),
         url('fonts/MyriadProCond.woff2') format('woff2'),
         url('fonts/MyriadProCond.woff') format('woff'),
         url('fonts/MyriadProCond.ttf') format('truetype'),
         url('fonts/MyriadProCond.svg#MyriadProCond') format('svg');
}

2 - font пишите в строчку + нет семейства

.logo {
    font-family: Lobster;
    font-size: 43px;
    line-height: 100px;
    float: left;
}

font: 500 1.375em 'Roboto', sans-serif;

3 - адаптивность для начала применяйте хотя бы в виде % для блоков и em для шрифтов

4 - html5 теги {не увидел}

5 - к базовым добавте еще

img {
	vertical-align: middle;
	border: 0;
}
a,
a:hover,
a:focus {
	text-decoration: none;
}
:focus,
:hover,
:active {
	outline: none;
}
li {
	list-style-type: none;
}
body {
	font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

Comments

[Денис Инешин]

4. Сомнительно.

А уж пункт 5 так вообще вреден! Используйте Normalize.css, а совет из пункта 5 вообще не слушайте!

[Денис Инешин]

Игорь, уберите свой совет 5

[Игорь]

Денис Инешин: >4. Сомнительно. .... что значит сомнительно? для вас сомнительно предложение использовать html5 теги?

> уберите свой совет 5 ..... это мой совет , напишите свой совет и убирайте там все что захотите ;)

[Игорь]

Денис Инешин: normalize.css никто не отменял тем более с моим советом 5

[hime2]

1. много шрифтов тоже плохо, с начала надо указать те что есть, а потом уже грузить 1-2 не стоковых. почитайте про асинхронную загрузку.
2. соглашусь, но об этом я уже написал в 1м пункте.
3. устарели, https://learn.javascript.ru/css-units . % не лучше em.
4. я тоже редко использую их, они почти бессмысленные, использую только 10-25 тегов не больше.
5. ресеты должны быть свои. Я бы добавил больше другие свойства, что бы фиксануть баги.
Разумеется за просто так я не выложу.

[Игорь]

hime2: Разумеется за просто так я не выложу. - вот ведь жадина )

за 1 и 3 пункт спасибо интересно изучу

[Денис Инешин]

4. Не обязательны, по этому и сомнительный совет.
5. Ваш совет вообще никак не сочетается с normalize.css. Reset и normalize вообще разные вещи, и ресет это древнее и устаревшее г-но. В вашем совете вы зачем то сбрасывает свойства, которые не должны быть сброшены. Используете * селектор, что самое по себе ад. А уж то что вы сбросили форматирование списков, так это вообще не имеет разумного объяснения. Так что, убирайте совет 5, это ваша вкусовщина, знать о которой никому кроме вас не нужно.

[hime2]

Да в мире web нет какой-то определенной тенденции. Я вот делаю так:
cms определяет версию браузера, сверяется со списком, если браузера нет, то редирект на страницу "обновите браузер", но я оставляю возможность не тратить время на обновление, а просто перейти на легкую версию. Почти тоже самое и с js, включите его/обновите/воспользуйтесь легкой версией.

А так у меня 2 версии сайта, 1я адаптивная, 2я легкая, которая работает везде, но красота такая.. просто и со вкусом. ни каких теней, svg и все то, что не будет работать в ie7 к примеру. Так что только ccs2.1, js в зависимости от класса, (работает js или нет, если не работает то все делает сервер "жопа такая, что я просто думаю отказаться от этого")

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

Потом кэширование, разбивание сайта на несколько площадок, разбитие на статику и динамику.
Сейчас моя cms дергает почти любю cms по скорость, стабильности, удобству, относительно безопасности (не могу заявить что это не пробивая крепость, 3,5 из 5 смело могу дать, а то и 4) А самое главное, что функционал не уступает тому же битрексу, а то и превосходит, легко масштабируется ну и опять же, я ее никому не дам.

Она хоть и закончена, но она все равно пишется, начали писать ее 2 года назад, год назад на фрейм лаверн5,1 перешли(переписали), сейчас думаю переписать на палкон(но это лишь в планах). Сейчас пилится безопасность

[Игорь]

Денис Инешин: уважаемый идите нах#р, скорее всего что я не учел это то что бездумно 5 пункт использовать не стоит а нужно понимать что делает каждая строка

[Денис Инешин]

Игорь: ну ну, я вас оскорблял что ли? Какие ваши аргументы например за сброс подчеркивания у ссылок, или за border-box для всех подряд? Ваш совет приведет исключительно к нестандартному поведению всех элементов, что вредно. Это конечно не так жестко как например написать div {position: absolute;} но близко к этому. Страшно представить что будет, когда ваш проект придется доделывать какому-то другому разработчику. Подобное нестандартное поведение все усложнит до небес.

[hime2]

Денис Инешин: Это мне? 5 надо, если хотите стабильности и знать что будет, либо прописывать свойства (это в любом случаи) Я вот к примеру не использую точные единицы, поэтому хочешь, не хочешь, но иногда надо обнулять и переписывать (можно к js обратится). До того я не обнулял, сейчас я вынужден все сбрасываю. Reset и normalize, разумеется что разные вещи. 1й сбрасывает все, 2й нормализует (но это подходит для общих и распространенных случаев). Вот только 2й это результат 1го, т.е без 1го не было бы 2го. Все относительно чего-то. Я могу поспорить, будь у вас по крупнее проект, вам бы пришлось переписывать normalize или во все писать свой. Я к Reset не прибегаю, что-то сбрасываю, переписываю и разумеется normalize у меня свой.

[Денис Инешин]

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

[hime2]

Денис Инешин: Ну не знаю, главное что бы вам было удобно. Каким normalize пользуйтесь ?

[Денис Инешин]

hime2: https://necolas.github.io/normalize.css/ и главное чтобы было удобно не мне, а команде. В потенциале и мне тоже. Например если я вернусь к проекту через полгода, то мне придется вспоминать зачем я понаделал таких делов, вместо того, чтобы просто и спокойно прикрутить новый модуль, точно зная чего ждать.