Jump to content
  • 0

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


Tascan
 Share

Question

Всем привет!

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

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

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

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

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 1
12 hours ago, Tascan said:

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0
8 hours ago, Launder said:

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

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

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

4 hours ago, DivMan said:

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

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

Link to comment
Share on other sites

  • 0
2 hours ago, sigma77 said:

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

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

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

Link to comment
Share on other sites

  • 0
6 hours ago, DivMan said:

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

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

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

Link to comment
Share on other sites

  • 0
48 minutes ago, Tascan said:

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

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

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

Spoiler

2737ae116a37e1b8c5cff970da83d8a0.jpg

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

Link to comment
Share on other sites

  • 0
44 minutes ago, DivMan said:

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

  Hide contents

2737ae116a37e1b8c5cff970da83d8a0.jpg

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

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

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

Link to comment
Share on other sites

  • 0
6 hours ago, DivMan said:

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

https://jsfiddle.net/9emkj8sz/

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

 

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

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

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

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

 

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

 

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

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

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

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

Edited by DivMan
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy