Tascan

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

Recommended Posts

Всем привет!

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
8 hours ago, Launder said:

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

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

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

4 hours ago, DivMan said:

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

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

Share this post


Link to post
Share on other sites
12 hours ago, Tascan said:

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

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

Share this post


Link to post
Share on other sites
2 hours ago, sigma77 said:

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

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

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

Share this post


Link to post
Share on other sites
6 hours ago, DivMan said:

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

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

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

Share this post


Link to post
Share on other sites
48 minutes ago, Tascan said:

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

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

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

Spoiler

2737ae116a37e1b8c5cff970da83d8a0.jpg

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

Share this post


Link to post
Share on other sites
44 minutes ago, DivMan said:

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

  Hide contents

2737ae116a37e1b8c5cff970da83d8a0.jpg

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

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

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

Share this post


Link to post
Share on other sites
6 hours ago, DivMan said:

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

https://jsfiddle.net/9emkj8sz/

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

 

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

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

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

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

 

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

 

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

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

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

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

Edited by DivMan

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,367
    Total Members
    3,128
    Most Online
    EugeneWebdev
    Newest Member
    EugeneWebdev
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Когда есть с кем, и есть куда, хожу на настольный теннис. Когда два раза в неделю, а когда и два раза в месяц. Сейчас в универе, где мы играли, отпуска, а другие места или ужасные (плиточный пол, например), или рано закрываются. Самая проблема — это найти себе напарника своего уровня, готового регулярно заниматься. Энтузиазм почему-то есть только у тех, кто ещё только учится ракетку держать, а я держать уже могу, мне надо играть учиться.
    • Увеличилась. Не 1000 долларов, конечно, и в рублях, но семье есть, что покушать. Меня держит то, что я больше ничего не умею. Продавцом в супермаркете я не выдержу, с людьми взаимодействовать вообще не люблю, у меня для этого менеджер, с которым я тоже не люблю взаимодействовать. По образованию мне положено работать на заводе, но нас в универе не учили ничему, что помогло бы сразу пойти и работать, дали только некоторые теоретические азы, которые я давно забыл. А для качественной работы, я считаю, нужно иметь не азы, а понимание сути происходящего. Лично я вообще не научился понимать, зачем в цепи, скажем, резистор стоит, или где его нужно поставить и зачем. Особенно, когда нам начинали рассказывать, и у каждого резистора по 2-3 назначения, эдак поставишь его куда-нибудь, а он аукнется смещением постоянного напряжения где-то в другом конце схемы.
      Новые фреймворки, можно сказать, не учу, хотя надо бы, без них я работу сменить не смогу, если приспичит, но у меня не остаётся моральных сил после работы ещё что-то учить. Я даже на велосипеде ездить перестал.
      В программировании у меня, к сожалению, тоже азы с некоторой специализацией в вёрстке. Я не знаю многих тонкостей, и никогда, например, не углублялся в такие темы, где понадобились бы Reflection в PHP. Или, например, я люблю использовать SQL-запросы вместо ORM, потому что польза ORM для меня не пересиливает их многословность и косноязычность. Я, конечно, понимаю, что если следовать принятым стандартам, то потом легче дорабатывать код, но я пришёл в разработку из домашних проектиков, и так и не научился наслаивать абстракции ради стандартов. А, скажем, вебпак только позавчера стал поковыривать, чтобы понимать, что в нём вообще происходит, а то он сейчас везде. Настолько некрупные проекты у меня всегда были, что мне хватало отдельных JS-файликов.

      И вообще, когда я с условного Delphi переходил на веб, то меня привлекало то, что не нужно ничего компилировать, не нужно ничего ставить, можно лишь запустить блокнот, а браузер уже есть на любом компьютере. Теперь этого ничего уже нет, постоянно то npm, то composer, сборка vue, сборка scss, когда без vue. У питонщиков и ноды, так вообще, веб-сервер является частью проекта, и чтобы что-то исправить, надо его перезапускать, а не как в PHP, просто файлик подправить. Веб перестал быть простым.
    • Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; width: 100px; height: 40rem; } И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px. Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit? И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?
  • Popular Contributors