Прошу оценить качество вёрстки

[Nirealto]

Здравствуйте, я начинающий верстальщик, решил перейти от теоретического обучения к практическому, сверстал макет из вот этой темы, попытался использовать HTML5 и CSS3, получилось вот так:

• Сайт на хостинге
• Все файлы сайта

Прошёл проверку на валидность, как HTML так и CSS, тестировал, в основном, хромом, на скорую руку просмотрел в последних версиях Opera, Opera Next, FF, IE8+, так что особо на кроссбраузерность не претендую, прошу критиковать по всей строгости, но конструктивно, заранее спасибо.

[maryshka]

Перебор с тегом <section> ведь дивы никто не отменял, вот посмотрите разницу между <div> и <section> http://noteskeeper.ru/54/

Для хедера и футера не нужно дописывать классы, стили в css присваиваются как и любому другому тегу (header{...}, footer{...})

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

Добавления класса main бессмысленно, картинку можно было добавить и во враппере, а задавать размер макета PSD в этом случае не нужно, эти отступы по бокам просто фон.

Извините, но то как вы выровняли текст футера, это ужасно, никогда так не делайте, а для выравнивания текста есть text-align.

 

[advokatua]

На вид может показаться ок, но внутри далеко не ок. Плохо.

Особенно тут:

1. background: url(../img/content-bg.png) no-repeat;
2. width: 700px;
3. min-height: 754px;
4. font-size: 11px;
5. float: right;

Edited January 8, 2014 by advokatua

[cris7iano]

тут тоже нужно править

 

http://prntscr.com/2i9rec

 

 

————————————————————————————————————————————

<p class="sidebar-name">Lorem ipsum sed amet</p>ну название блока никак не должно быть в P

.sidebar-name {    color: #FFFFFF;    font-weight: bold;    left: 30px;——удалить    position: relative;;——удалить    top: 17px;;——удалить    padding: 15px 0 0 30px;———————-Добавить}

————————————————————————————————————————————————————

 

 

 

как бы я верстал этот блок

 

http://prntscr.com/2i9lvx

<article class="post">  <h1><span>Veroeros</span> sed dolor </h1>  <figure class="post-img">     <img src="img/pic1.jpg" alt="">  </figure>  <div class="entry-text">    <p>      Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#"> dolor et suscipit semper.</a>      Lorem amet sed consequat.   </p>   <p>     Sed fermentum dui in bibendum tempus, est orci iaculis dolor vel gravida varius,     dui est <a href="#"> tincidunt augue vel</a> facilisis     mauris turpis ac mauris. Etiam elementum odio ac erat convallis sit     <a href="#"> amet porttitor libero</a> sed vestibulum.   </p> </div></article>

Еще много работы! Дерзай! удачи! ;)

 

 

 

Для хедера и футера не нужно дописывать классы, стили в css присваиваются как и любому другому тегу (header{...}, footer{...})

не согласен, если бы вы работали с cms'ками то  заметили, что cms'ка добавляет классы или айди тому же футеру или хедеру, к примеру wordpress добавляет айдишники к хедеру и футеру (header id="header" )

Edited January 11, 2014 by cris7iano

[maryshka]

тут тоже нужно править

 

http://prntscr.com/2i9rec

 

 

————————————————————————————————————————————

<p class="sidebar-name">Lorem ipsum sed amet</p>ну название блока никак не должно быть в P

.sidebar-name {    color: #FFFFFF;    font-weight: bold;    left: 30px;——удалить    position: relative;;——удалить    top: 17px;;——удалить    padding: 15px 0 0 30px;———————-Добавить}

————————————————————————————————————————————————————

 

 

 

как бы я верстал этот блок

 

http://prntscr.com/2i9lvx

<article class="post">  <h1><span>Veroeros</span> sed dolor </h1>  <figure class="post-img">     <img src="img/pic1.jpg" alt="">  </figure>  <div class="entry-text">    <p>      Fusce nec eros augue hendrerit erat. Nam dapibus lorem ipsum <a href="#"> dolor et suscipit semper.</a>      Lorem amet sed consequat.   </p>   <p>     Sed fermentum dui in bibendum tempus, est orci iaculis dolor vel gravida varius,     dui est <a href="#"> tincidunt augue vel</a> facilisis     mauris turpis ac mauris. Etiam elementum odio ac erat convallis sit     <a href="#"> amet porttitor libero</a> sed vestibulum.   </p> </div></article>

Еще много работы! Дерзай! удачи! ;)

 

 

 

Для хедера и футера не нужно дописывать классы, стили в css присваиваются как и любому другому тегу (header{...}, footer{...})

не согласен, если бы вы работали с cms'ками то  заметили, что cms'ка добавляет классы или айди тому же футеру или хедеру, к примеру wordpress добавляет айдишники к хедеру и футеру (header id="header" )

Спасибо, учту я cms работаю меньше месяца, по этому не знаю о таких нюансах!

[Zverushka]

На вид может показаться ок, но внутри далеко не ок. Плохо. Особенно тут: background: url(../img/content-bg.png) no-repeat; width: 700px; min-height: 754px; font-size: 11px; float: right;

 

Можно по пунктам расписать, почему это плохо?

[advokatua]

По ссылке нужно было кликнуть, и внимательно посмотреть )

1. background: url(../img/content-bg.png) no-repeat;

Edited January 12, 2014 by advokatua

[Nirealto]

Большое спасибо за отзывы, узнал много нового и полезного, наконец-то появилась возможность вернутся к вёрстке, скоро переверстаю макет с учётом замечаний.

[scion]

похоже в этом разделе нужно продублировать фиксацию темы http://htmlforum.ru/index.php?showtopic=47375

Edited January 17, 2014 by scion