Вообщем смотри) Представь ты работаешь на Компанию "А" и в неё приходит заказчик и решил сделать сайт. Они с менеджером идут к дизайнеру и там решаются самые страшные для тебя вещи. Вообщем они сделали макет и прислали тебе... И говорят хотим все так как в макете... И тут вопрос к тебе, ты сделаешь как в макете или все же свою ширину контейнера будешь выдумывать ? ( Лично я раз 3-5 пытался сделать так как лучше для сайта и брал ширину за основу сам...... Но тут б*я приходят жалобы, грозные письма что все не так....ширина больше или меньше нужной, выглядит все иначе...... Вообщем геморроя выше крыше.)
Так значит с шириной мы разобрались...... идем дальше....
Так у нас есть слайдер на 100% ширины.......в чем проблема берем bx-slider и ставим свой слайдер на 100%
А так для тебя самое главное решить как ты будешь верстать блоки) к примеру
1)Самый страшный возможно для тебя будет блок это с серым фоном.....с треугольником верх. Вопрос по средствам css или картинкой ? (верно с помощью css бордеров и псевдо классов)
2)Каким образом будешь позиционировать блоки ? float или position . (Тут надо задуматься о будущем, если будешь переделывать в responsive то float, если же нет то можно и позиционировать, не особо страшно.)
3)Подучить html5 и уже использовать html5 Тэги (Вообщем в чем надо разобраться в основном это где тэг article а где тэг aside.... остальные попроще).
4) Минимизация и структура (
а) Котировка UTF-8 без BOM
б) Для связи с JS не использовать стилизующие классы. а использовать id, data- атрибуты или классы с приставкой js-
в)Указать meta name="viewport".............
г)Skype плагин не должен ломать верстку
д)Единый css файл подключаемый в head и желательно минимизированный
e) Единый js файл подключаемый перед /body тоже желательно минимизированный.)
5) Изучай методологии Желательно БЭМ
6) Изучаем автоматизацию Grunt либо Gulp (Gulp лучше)
7) Верстаем с помощью Emmet (Экономим время)
Это довольно все быстро освоить......Увы мне так не кто не подсказал и не написал раньше )
