Не получаются сайты на практике

[Tascan]

Всем привет!

Может кто помочь с таким вопросом. Прочитал я можно сказать теорию по HTML и CSS (помню В общем-то большинство тегов и свойств CSS, разобрался в основных особенностях). Плюс заходя на сайт уже примерно могу понять его структуру.

С этого момента я решил приняться за практику.

Но возникла такая проблема: скачиваю я, например, макет из интернета (будь то psd макет или готовый набор файлов). В случае с набором файлов, я пытаюсь просто переписать html, а следом и css код. Так сказать скопировать его, чтобы понять как этот сайт сделан. И в принципе понимаю все теги и все свойства. Так же понимаю, для чего они там присутствуют.

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

Может у кого-нибудь была такая же проблема на начальном этапе изучения. Подскажите, что в таком случае делать?

[sigma77]

12 hours ago, Tascan said:

Может у кого-нибудь была такая же проблема на начальном этапе изучения. Подскажите, что в таком случае делать?

Научись верстать вначале отдельные элементы - навигация, форма, список, блок с текстом и т.п. Выше тебе уже посоветовали пару ссылок с материалами. Добавлю еще "Большая книга CSS" также построена по типу от простого к сложному, от частного к общему, и не плохо структурирует материал. Все сталкивались с подобным. Это вполне нормально и проходит с опытом и практикой.

[Launder]

Проблема ступора, когда общая логика понятна, но не вполне понятно в какой ситуации какую логику применить. К тому же, описание этой логики на формальном языке даёт дополнительное препятствие, поскольку какие-то реальные задумки требуется адекватно формализовать, а связи между задачами, и адекватными им средствами языка, нет. В результате более-менее всё понятно, а что писать? Что необходимо? Что это даст? Адекватно ли это? Возможно ли то? И так далее... Хочется каких-то ориентиров.

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

[DivMan]

Умеешь делать простую сетку с 3 калонками, с шапкой и подвалом? 

[Tascan]

8 hours ago, Launder said:

Проблема ступора, когда общая логика понятна, но не вполне понятно в какой ситуации какую логику применить. К тому же, описание этой логики на формальном языке даёт дополнительное препятствие, поскольку какие-то реальные задумки требуется адекватно формализовать, а связи между задачами, и адекватными им средствами языка, нет. В результате более-менее всё понятно, а что писать? Что необходимо? Что это даст? Адекватно ли это? Возможно ли то? И так далее... Хочется каких-то ориентиров.

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

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

4 hours ago, DivMan said:

Умеешь делать простую сетку с 3 калонками, с шапкой и подвалом? 

На htmlbook есть похожий макет с 3 колонками, В общем суть его строения понял. Но опять же, если вдруг на практике придётся делать похожий макет, пока у меня это не получится.

[Tascan]

2 hours ago, sigma77 said:

Научись верстать вначале отдельные элементы - навигация, форма, список, блок с текстом и т.п. Выше тебе уже посоветовали пару ссылок с материалами. Добавлю еще "Большая книга CSS" также построена по типу от простого к сложному, от частного к общему, и не плохо структурирует материал. Все сталкивались с подобным. Это вполне нормально и проходит с опытом и практикой.

Спасибо, обязательно прочитаю книгу)

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

[DivMan]

Возьми любой макет, объведи отдельные блоки и покажи здесь.

[Tascan]

6 hours ago, DivMan said:

Возьми любой макет, объведи отдельные блоки и покажи здесь.

Если не сложно, можно уточнить: просто взять psd макет, обвести в нём блоки и так же psd сюда скинуть. Или просто по грубому, скриншот макета сделать и уже в программе, по типу paint, выделить.

Просто я пока в этом не очень силён. Не знаю, как лучше делать.

[DivMan]

48 minutes ago, Tascan said:

Если не сложно, можно уточнить: просто взять psd макет, обвести в нём блоки и так же psd сюда скинуть. Или просто по грубому, скриншот макета сделать и уже в программе, по типу paint, выделить.

Просто я пока в этом не очень силён. Не знаю, как лучше делать.

Например вот так

Spoiler

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

[Tascan]

44 minutes ago, DivMan said:

Например вот так

  Hide contents

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

Если я так понял, то это необходимо для точного и правильного позиционирования блоков с велосипедами на странице.

Внешнему блоку присваивается position: relative, а вот внутренним уже position: absoulte. И как я понял, тогда будет меньше проблем с их отображением в разных браузерах. И также поможет правильно разместить их относительно друг друга.

[DivMan]

В данном случае position здесь вообще не нужен. 

https://jsfiddle.net/9emkj8sz/

Edited March 4, 2017 by DivMan

[Tascan]

6 hours ago, DivMan said:

В данном случае position здесь вообще не нужен. 

https://jsfiddle.net/9emkj8sz/

Круто получилось. Спасибо за информацию)

А можно поподробнее о классе clearfix. Как я понял, он рисует нижнюю линию. Но как совмещаются эти три свойства в нём я не понял.

[DivMan]

никакую линию он не рисует. линию рисует свойство border;

clearfix это просто название класса, его можно назвать, как угодно.

Когда ты флоатишь элементы, то они прижимаются и всё остальное место остаётся пустым и это пустое место будет занимать другой элемент.

И что бы это место не занималось, применяется класс clearfix, в котором есть свойство clear со значением both.

Оно говорит, что бы следующий элемент начинался только с новой строки, то есть под элементом.

 

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

если в моём примере убрать clearfix, то чёрная рамка сожмётся. (блок схлопнется)

и если потом добавить

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

 

то этим ты говоришь этому блоку, что бы он увидел все вложенные в него зафлоатные элементы и обернул их.

 

Почитай ещё про clear http://htmlbook.ru/CSS/clear

И по гугли что такое clearfix

Никогда не делай каркас сайта с помощью position. (пока вообще забудь это свойство )

в основном оно применяется для декоративных элементов, но не как не для сеток. 

Edited March 4, 2017 by DivMan

[Tascan]

Спасибо большое за инфу. Почитаю поподробнее про clearfix.

Получается вместо position всё делается с помощью float. Нужно поэкспериментировать с float и clearfix побольше.

[DivMan]

да