Ну как же все таки научиться проф.верстать(вопрос внутри)?

Question

[gleendo]

Исходники(макет psd и начальная верстка): https://cloud.mail.ru/public/f0083aa7b4bc/222.rar
Ссылка на codepen(без sass) :codepen.io/evg_/pen/RNdEVO

В общем начал пробовать верстать макет. Кое как почти как должно быть, разметил сетку. Начал верстать отдельные блоки. Начал с верхнего меню. И все блин, проблема на проблеме. Так у меня с каждым макетом, никогда все более менее нормально не идет и так ни один макет за 4 месяца не сверстал.
Любые компоненты сверстать могу(отдельно), но вот полный макет никак не получается всегда проблемы и всегда найдется то на что не могу найти решение. Теорию зачитал все что мог, но нужно практиковаться и я все пытаюсь, но никак не выходит.

Помогите пожалуйста, советом, что да как, как лучше практиковаться, как практиковались вы и т.д. Как научиться все таки нормально верстать макеты, желательно любые).
Есть ли где нибудь текстовые туторы, где бы по шагам верстались макеты, (адаптив, sass/susy и т.д)?

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

PS. В общем скажите хоть что нибудь адекватное, а то у меня уже руки опускаются и бывают мысли все бросить нафиг, но бросать то не хочется.

Comments

[Сергей delphinpro]

открываете инспектор и видите, что блок тупо не помещается в отведенное место :)
SSMaker.ru/fab7edaa

[gleendo]

Сергей: Я это видел. Но он должен помещаться. Этому блоку указано @include span(2 last);

[Сергей delphinpro]

con_: Значит у вас неверные формулы в сетке ;)

[Сергей delphinpro]

Посмотрите как делают сетки другие. тот же botstrap или 960gs

[gleendo]

Сергей: Сетка susy. С формулами там все в порядке. Остальные же блоки не вылетают в этом макете.

[Сергей delphinpro]

con_: Да, вы правы. С сеткой все в порядке. Это я поспешил с выводами :)
Но вы добавили к блоку search правый и левый бордер, и их ширина (2px в сумме) никак не влезает в сетку .

[gleendo]

Сергей: Ну почему все так. Для всего же добавлен border-box. Добавил отдельно для search, блок корзины влез, но урезался блок search на 2px.

[gleendo]

Сергей: Да и для блока выше корзины все то же самое, но с ним все в порядке.

[Сергей delphinpro]

con_: я не вижу вас там border-box для всех элементов.
ну и для меню добавьте, чтобы они равными были

[Сергей delphinpro]

блок выше корзины не плавающий. он статик. в другом потоке.

[gleendo]

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

[Сергей delphinpro]

Я не знаком с сеткой susy, поэтому приведу пример на бутстрапе, как я бы сверстал шапку
jsfiddle.net/DelphinPRO/1yrff133

[Сергей delphinpro]

О промежутках: опять же, повторюсь, что не знаком с вашей сеткой. но в любой профессиональной сетке есть блоки без промежутков. Посмотрите документацию.

[gleendo]

Сергей: Нужно сделать header как отдельный контейнер, и там сделать сетку без промежутков, но как это сделать я не могу найти.
Все же большое спасибо за помощь.

[Игорь Касперский]

ну как? За год продвинулись в опыте?

Answer 1

[uam]

Все в порядке, я начинал по видеоурокам, а дальше сам. Почти так же как и вы недоверстывал макеты до конца. Многое не выходилo, не понимал зачем нужен позитион релатив и многое другое. Но в процессе когда я достаточн хорошо усвоил то, что знал, начал постепенно повышать свой уровень. Сначала я доверстал старые макеты, потом начал верстать более сложные макеты. Нечего такого в этом нет, процесс обучения тернист и даже с сиэсэс с первого захода разобраться сложно, если до этого не имели дело с программированием. Не особо зацикливайтесь на этом, я вот например уделял этому по 3-4 часа в день и не особо парился когда не получалось, а просто вставал из за компа и ходил с друзьями побухать ну или в сауну. Советую делать так же. Удачи в обучении дружище

Answer 2

[Дмитрий Евграфович]

А ведь еще неделю назад этот человек собирался создать собственный css фреймворк.

Comments

[gleendo]

Все ради практики. Фреймворк(точнее почти только сетку) собирался делать, что научиться ее строит и понимать. Теперь все понял.

Answer 3

[Александр Талалаев]

Вроде бы ничего сложного.
Я советую :
1. На первом этапе забыть про все глючные и левые бразуеры, верстать только под последние хром и лису(хотя и тут бывают приключения).
2. Использовать только самые последние технологии
3. Что-то едет, глючит, сразу гугл(на самом деле ходить по ссылка только со стаковерфлоу) и описание глючных свойств и читать.
4. С практикой все придет
PS не стоит боятся position:absolute, нередко нужна

Comments

[gleendo]

Спасибо за ответ.
1) Кроме хрома ничем не пользуюсь.
2) Для верстки стараюсь пользоваться только новыми технологиями sass//compass/susy и т.д
3) Иногда не то что едит, бывает, что просто что то не могу сверстать в контексте всего макета. Хотя бы тоже меню из выложенного макета.(полностью все меню. А лого,search, навигацию, корзинуи т.д все отдельно могу.) Проблемы одна на другой блин.
4) Я так и думаю, но 4 месяца моей блин супер удачной практики, как то не оч. все продвигается.

[Александр Талалаев]

con_: так у всех проблемы, ты что. Работа верстальщика достаточно нервная + миллион подводных камней. Но все же я бы не сдавался, заведи себе еще файлик(и) с готовыми решениями сниппетами, ну и побольше туси на stackoverflow.com, в том числе и сам отвечай на вопросы(даже если не знаешь, но удалось наггулить ответ), тоже практика.
А так серьезно, в верстке на первом месте практика, верстать, верстать и верстать. А там уже начнешь понимать какие инструменты тебе нужны, что хочется. что не хочется. Поэтому сразу всякие фишки не стоит использовать, кроме самых простых вроде SASS(точнее SCSS, так как можно пистаь на чистом CSS не парясь, а потом если что улучшаться постепенно, на первых этапах самое оно).
А новый проекты начинай не с пустого листа, а как минимум с https://html5boilerplate.com/, а лучше с bootstrap, для многих проектов они очень сильно облегчают жизнь А там уже и рука набьется

Answer 4

[Виталий]

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

Заходите на themeforest.net ( или какой другой сайт с шаблонами ... открываете шаблон .... смотрите на него, можете сриншот страницы сделать.
Режете в PS и верстаете, что то не понятно - смотрите как сделано на уже готовом шаблоне.

Да и зачем вам сразу уроки по адаптив, sass/susy и т.д , если обычный шаблон сверстать пока не можете. Все делать нужно поэтапно и размеренно. Что то не ясно - потратьте время, чтобы разобраться самому почему и как.

Answer 5

[sergey]

Совет дам такой: побольше практики, но не просто тупого кода, а ищи грамотный, смотри на youtube там очень много каналов по верстке (sorax, looftblog, master-css, webdesign master, magisters, psd to html и т.д.) Смотри, повторяй каждый день и результат будет. Макеты выбирай попроще, наловчишься, тогда уже бери сложнее. Вообще зайди и зарегистрируйся на https://htmlacademy.ru, получай ежемесячно 3 классных макета на проверку знаний и верстай себе. И еще пока не знаешь базиса зачем тебе sass? Твоя структура файлов должна сейчас выглядеть так: папки css и img и индексный файл index.html, со временем подключишь папку js, когда выучишь javascript. И лишь тогда компиляция, препроцессоры и менеджеры сборок.

Comments

[gleendo]

А какая разница, использовать sass или нет.? Практически всю теорию по html/css знаю. (sorax, loftblog, uwebdesign...посмотрел все видео, попробовал все что рассказывали.)SASS мне просто нравится, чуть меньше кода, да и компас со susy, крутая штука.
Да и что именно в верстке вам не понравилось?*

[sergey]

Разница есть, для того что бы использовать sass. нужно хорошо знать css и css3. Что не понравилось: так вложенность в списке: лишки в теге a например.

[sergey]

вот старая статья, но актуальная и ныне habrahabr.ru/post/150306

[gleendo]

Sergey Martynuk: Спасибо, почитаю.

Answer 6

[Андрей Б.]

У вас структура не правильная. Сделайте так awesomescreenshot.com/05b4rc4c4b

<header class="header"></header>
<div class="container">
	<section class="content"></section>
	<aside class="sidebar"></aside>
</div>
<footer class="footer"></footer>

Answer 7

[codingal]

Раз уж вы выложили несколько замечаний по коду (не глядя на сам шаблон):

• Используйте семантические тэги, как уже писал Андрей Б., не тулите сплошные divы, у вас нет ни одного h заголовка
  
• Не заворачивайте блочные элементы в строчные - li в a, это не запрещается спецификацией html5, но лучше так не делать
  
• Используйте сокращенные значения например для margin
  

Answer 8

[Роман]

Я бы для начала рекомендовал сверстать простой шаблон, фиксированный, с использованием чистого ЦСС. Повторить два-три раза, но уже с более сложными шаблонами. После этого делать резину/адаптив. И только после того как ручки поймут что, да как, использовать препроцессоры.
Я обычно ползуюсь валидатором в конце, но для начала прогоняйте свой код и проверяйте каждые н-минут/часов.
Вот так не делайте, нельзя заворачивать элемент списка в ссылку:

<ul class="main-menu">
					<a href="#"><li>MEN</li></a>
</ul>

Ровно как писать капсом слова - не слишком эффективно (вдруг гипотетичный контент менеджер не умеет зажимать Капс или шифт), здесь лучше через цсс задать капс словам.