Оцените, пожалуйста, верстку

[aleksey.mrlss]

Здравствуйте! Меня зовут Алексей, я начинающий верстальщик. Это мой первый полностью сверстанный макет, и поэтому я хочу услышать по нему максимум критики и помощи. Первое, что не сходится с шаблоном, это кнопка. У нее еще должен быть 1px серый borderпо всему контуру, но я так и не смог сделать его, во всем остальном кнопка по максимуму сходится с шаблоном (в моей реальности ). В основном пытался сделать код читабельным, более менее правильным и красивым. В общем, самое главное это услышать от вас, правильный ли подход к оформлению элементов на странице у меня или нет, и почему. Выкладываю ссылку на макет и на сайт.

Макет: http: //www.pictureshack.ru/images/42038_Goodware-PSD-Template.jpg (копируйте адрес, так чет переводит на главную сайта)

Сайт: http://goodware.besaba.com/Goodware/

Edited November 2, 2014 by aleksey.mrlss

[pangurban]

1. Наоборот, article в section

2. Элемент 'p' для параграфов!

3. На начальном этапе лучше не загоняйся бэм неймингом, а придумывай подходящие имена классам. Если бэм тебе понадобится с опытом ты это поймешь.

4. Зачем фон в хедере 1200x500? Делаешь 30x30 и репит. То же самое про фон слайдера и футера

5. Валидатор

 

На первый взгляд грубых ошибок не заметил. Бери шаблоны посложнее.

Попробуй написать свой reset css

 

Странности какие творятся)

Edited November 2, 2014 by pangurban

[aleksey.mrlss]

Огромное спасибо за отзыв, некоторые моменты хчоу уточнить:

1. Эти article и section сбивают с толку как я понял, все правильно, только с точностью да наоборот? думал что так...ну спасибо

2. Это именно про блок в футере tweets? там у меня в <p></p> вся инфа лежит, а выделена ссылкой и спаном. Нужно сделать все отдельно? <p>, <a>, <p>?

3. Где то слышал о каком то БЭМ , но писал имена классов не основываясь на нем, просто мне так удобней что-ли. Рекомендуете каждый класс не привязывать на родителя а именовать его под свою отдельную задачу?

4. Посмотрел на фон хедера, так и не смог выделить повторяющийся объект, вот и решил запилить всю картинку. Приму к сведению. По поводу футера, так там простой цвет, с фона там репитится только верхний треугольник, вырезанный по размеру одного треугольника. Про слайдер то же самое, не смог выделить одинакового фрагмента

5. Про валидатор мой косяк, забыл

 

Про reset css. Я так понял, совет написать свой reset расчитан на то, чтоб глубже вникнуть в правила css?

И по поводу <br>, я так понял, надо было просто каждое составляющее комментария с твиттера оформить как отдельный элемент. Так более правильно и логично, и тогда никакие переносы не понадобятся?

 

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

 

Жду еще критики, очень дельные советы, спасибо!

 

P.S. И еще, подскажите пожалуйста, как средствами css мне сделать для кнопки еще один внешний бордер. Дело в том, что у самой кнопки есть бордер+через псевдокласс я добавил еще один внешний бордер, а вот добавить бордер внешнему, который через псевдокласс добавлен незнаю как. Если родителю кнопки задать ширину и высоту, Background и бордер, все выглядет неплохо, но при увеличении/уменьшении масштаба родитель едет, при этом ломая верстку.

Надеюсь объяснил проблему доходчиво.

Edited November 3, 2014 by aleksey.mrlss

[pangurban]

1. Если не понимаешь, то почитай, посмотри примеры, от былды любой может нагородить.

2. Тут по разному можно делать. Лично я люблю когда все семантически верно. Поэтому и говорю обратить внимание на то,что  у "p" есть семантический смысл, и если какой-то блок не является параграфом, то выбираем другой элемент.

3. С таким подходом, по моему, не развивается фантазия на именование классов.

4. Так

 

Свой ресет чтобы понимать дефолтные стили элементов.

Edited November 3, 2014 by pangurban

[aleksey.mrlss]

А по поводу кнопки, ничего подсказать не можете?

 

 

P.S. И еще, подскажите пожалуйста, как средствами css мне сделать для кнопки еще один внешний бордер. Дело в том, что у самой кнопки есть бордер+через псевдокласс я добавил еще один внешний бордер, а вот добавить бордер внешнему, который через псевдокласс добавлен незнаю как. Если родителю кнопки задать ширину и высоту, Background и бордер, все выглядет неплохо, но при увеличении/уменьшении масштаба родитель едет, при этом ломая верстку.

Надеюсь объяснил проблему доходчиво.

[zenw]

А по поводу кнопки, ничего подсказать не можете?

 

Сделайте через box-shadow, можно, например, на :after кнопки повесить тень, вот так:

.button:after {   box-shadow: 0 0 0 1px red;}

[aleksey.mrlss]

к сожалению на after у меня уже весит внешний бордер, вот в это и проблема. у этого элемента в общей сложности 3 бордера