Jump to content
  • 0

Подскажите что делать начинающему верстальщику

myels

Asked by myels,

 Share

Question

myels Explorer

myels

Posted
Posted

Здравствуйте, уважаемые коллеги!

 

Начал заниматься версткой недавно (месяца 3 наверное). За это время немного освоил html/css, однако когда дело подходит к практике, например сверстать простейший макет, я тут же вхожу в ступор и не могу применить теоретические знания на практике. В общем что бы вы посоветовали мне? Как начать верстать хотя бы простейшие макеты?

 

Спасибо, всем кто ответит на данное сообщение!

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Vicos Explorer

Vicos

Posted
Posted

Посоветовал бы начать освоение сразу с css framework'a bootstrap3 (или 2), видеоуроков на YouTube найдёшь, да и статей полно.

Самое сложное в вёрстке это система блоков(как для меня), в bootstrap - http://bootstrap-3.ru/index.php превосходно реализована, всё остальное освоится легко, практика да и только. Какие свойства и что можно делать с помощью css так же придёт со временем.

И придёться "под подушку" FireBug или другую веб-консоль ложить.

Link to comment
Share on other sites
  • 0
Светлана Г. Explorer

Светлана Г.

Posted
Posted

Если Вам нужно что-то сверстать и Вы не знаете как - найдите сайт с аналогичной структурой, разбирайте эту верстку с помощью F12.. Конечно, опыт приходит с практикой. У меня было также - брала макет и не знала, с чего начать :). Любое решение можно найти в Сети.

Link to comment
Share on other sites
  • 0
Galaxy Explorer

Galaxy

Posted
Posted

Сайт с аналогичной структурой может быть очень криво сверстан, http://htmlbook.ru/layout Вот типовые макеты, разберите их по пробуй реализовать какой нибудь дизайн. И еще совет - меньше теории и больше практики.

Link to comment
Share on other sites
  • 0
Sergik+ Explorer

Sergik+

Posted
Posted

Сайт с аналогичной структурой может быть очень криво сверстан, http://htmlbook.ru/layout Вот типовые макеты, разберите их по пробуй реализовать какой нибудь дизайн. И еще совет - меньше теории и больше практики.

Нечего без теории вообще делать, а тут хватает практикантов с float:auto.

  • Like 1
Link to comment
Share on other sites
  • 0
Galaxy Explorer

Galaxy

Posted
Posted

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

  • Like 1
Link to comment
Share on other sites
  • 0
swandev Explorer

swandev

Posted
Posted

Смотрите как сверстаны другие сайты, для этого откройте инструменты разработчика в браузере.

Смотрите как сделаны разные элементы, какие css свойства прописаны, можно их удалять/изменять и смотреть как они влияют на верстку.

Link to comment
Share on other sites
  • 0
ows.nightwolf Explorer

ows.nightwolf

Posted
Posted

А я бы посоветовл не гнаться за поездом а не спеша читать литературу. Прочитали про какое-то свойство - тут же его опробовали, даже если свойство кажется очевидным. Например тот же float. Прочитали какие бывают и как работают - открыли jsbin.com или аналогичный инструмент, сделали простенькую разметку (обертка, вложеный див который будет float, еще пару строчных и блочных элемнтов чтоб увидеть как они будут взаимодействовать с вашим float'ом) и изучайте. Придумывайте себе ситуации в стиле "а если я захочу чтоб было так-то" и находие им решения. Для float это может быть "а что если я захочу чтоб какой-то элемент не обтекал мой float?" погуглите (или вспомните прочитанное), найдете что для этого есть свойство clear. Таким образом вы поймете принципы и механику работы css, научитесь находить хоть какие-то решения задач (пусть даже на первое время не оптимальные), а дальше уже, когда все основные свойства будут выучены и поняты, читайте статьи, форумы и т.п. и все больше углубляйтесь в нюансы. Резюмируя: я считаю что самое главное - знать и понимать принципы, а на бездумном запоминании приемов работы далеко не уедешь.

 

P.S. А в чем заключается ваше "тут же вхожу в ступор и не могу применить теоретические знания на практике"?

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
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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

  I accept