Подскажите лучшие курсы для верстки.

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Fantastic, 24 сен 2015.

  1. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Прошу отвечать только тех, кто уже хорошо разбирается в верстке! Я уже прошел Игорь Борисов (Специалист) 14 года 1 уровень и [Lynda.com] HTML5 Структура, Синтаксис, и Семантика - 2015. (Еще буду проходить Lynda.com - CSS Core Concepts и CSS Макеты страниц) Запомнил конечно не все (особенно было сложновато про правильную семантику в линде) но основное запомнил (думаю все равно в других курсах будет повторение и не надо заново смотреть) Вот хотелось что бы вы подсказали как дальше учить, допустим это, потом это и т.д. Для того что бы после этих курсов можно было уже брать платные заказы на верстку!

    Дополнение: 1.Из линды не понял про микроформаты (но я так понимаю просто как подучу английский, на сайте микроформатов буду смотреть какие брать, а учить их не надо)

    2. Я так понимаю что это не самая лучшая верстка, ну может конечно ошибаюсь: (это из специалиста и если я прав, то конечно хотелось бы курсы где и верстка правильная рассматривается)

    3. Английский пока очень плохо знаю, так что с переводом только смогу пока учить.

    4. И я так понимаю можно уже и js подключать, без него же уже не куда в верстке, так что не отказался бы, если и по нему курсы подскажете.

    P.S. Заранее спасибо за ответ :Smile:
    --- Добавлено, 24 сен 2015 ---
    Еще забыл, вот так сделал без под смотра в готовый код, как для начала норм или нет? (насчет цветов не заморачивался пока, это и так легко сделать)
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Выкладывайте свою практику сюда https://jsfiddle.net/ или на аналоги, чтоб всё можно было посмотреть вживую.
    И не забывайте про метатеги с кодировкой и вьюпортом, они должны быть всегда (кодировка сейчас только во втором коде, а вьюпорта вообще нет).
     
    Fantastic нравится это.
  3. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Я собрал лучшие курсы здесь https://wmasteru.ru/forums/Вёрстка-html-css.8/
    Если не понятно посмотрите еще раз, попробуйте повторить один-три раза. Если и после этого не понятно, пишите. Это не сложно, можем все помочь.
     
    Fantastic нравится это.
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Ваш код не верен знаете чем)
    Тем, что по семантике идет
    title
    h1
    h2
    p
    ul
    h3
    h4
    и т.д.
     
    Fantastic нравится это.
  5. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Dotrox, Сорри, у меня что то не получилось нормально туда выложить. (наверно регистрация нужна) Буду пробовать тогда на аналоги или регистрироваться.

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

    Насчет второго, я менял только css, хотел сделать с помощью float, но меню было внизу и я не знал почему не получалось поднять его и поместить слева, вот поднял его в html, а про H не подумал. Но раз сильных нареканий насчет css нет, то я так понимаю для начала норм?
     
  6. Dotrox

    Dotrox Команда форума

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

    Вот это зачем:
    Код:
    p{
          margin-left:300px;
        }
     
  7. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Ну там на картинке где показывается результат, надо что бы текст был левее чем заголовок, как еще сделать не знаю.
     
    Последнее редактирование: 25 сен 2015
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    https://jsfiddle.net/tfj6jcxz/
    Я так понимаю, речь идёт о левой колонке, а не о заголовке?
    Никогда так не делайте! Тег абзаца нужен исключительно для оформления текста (разбивки на абзацы). И с любым другим тегом тоже так не делайте. Каркас страницы не должен держаться на контенте.
    У вас есть nav и main - вот их и нужно между собой согласовать, независимо от того, что будет внутри и какие там будут стили.

    Должно быть так (я не пытался всё исправить, убрал только основные ошибки):
    https://jsfiddle.net/tfj6jcxz/4/

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

    И ещё, тег head может быть только один на страницу и его содержимое не выводится, а там где второй head должен быть header. А для часто используемых тегов нельзя задавать стили глобально (если это не для всех тегов этого типа на странице), то есть, вместо просто span должно быть header > span.
     
    Fantastic нравится это.
  9. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Dotrox, Во, спасибо за объяснения. Но вы все равно текст не подвинули, может не так объяснил. Там по картинке, сам текст статьи правее заголовка, то есть под буквой Д заголовка, текста нет. про headear вместо head, это я да, что то тупанл.
     
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.054
    Симпатии:
    779
    Нужно просто добавить паддинг слева для блока main.
     
    Fantastic нравится это.
  11. stsa20014

    stsa20014

    Регистрация:
    12 окт 2015
    Сообщения:
    4
    Симпатии:
    0
    меньше используте маргины они очень косят вёрстку
     
  12. Fantastic

    Fantastic

    Регистрация:
    18 сен 2015
    Сообщения:
    22
    Симпатии:
    6
    Спасибо за подсказку, я уже к чуть более сложной верстке перешел в этой теме
    http://wmasteru.org/threads/Оцените-первую-верстку.19295/ если вы хорошо разбираетесь и здесь может что можете подсказать?
     
  13. Stiker7777

    Stiker7777

    Регистрация:
    3 янв 2016
    Сообщения:
    3
    Симпатии:
    0
    Можно курс специалист дальше продолжать изучать, он не ограничивается первым уровнем.
     
  14. chirs

    chirs

    Регистрация:
    14 фев 2016
    Сообщения:
    1
    Симпатии:
    0
  15. mujik99

    mujik99

    Регистрация:
    21 апр 2016
    Сообщения:
    18
    Симпатии:
    1
    Есть неплохие мобильные приложения по изучению верстки и не только , от sololearn. Загуглите.
     
  16. Vladmirovoy

    Vladmirovoy

    Регистрация:
    8 май 2016
    Сообщения:
    6
    Симпатии:
    0
    https://htmlacademy.ru - здесь удобно можно учится верстке сайтов причем бесплатно. Я уже давно там сижу и обучаюсь немного. Мне пока нравится.
     
  17. JSolovey

    JSolovey

    Регистрация:
    31 май 2016
    Сообщения:
    1
    Симпатии:
    0
    Лучше всего взять какой то шаблон и попытатся его сверстать. Попутно гуглить все возникшие вопросы.
    http://htmlbook.ru/ - тут найдешь много полезной инфы
     
  18. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
  19. rsbrdr

    rsbrdr

    Регистрация:
    13 авг 2016
    Сообщения:
    2
    Симпатии:
    0
  20. decast

    decast

    Регистрация:
    29 авг 2016
    Сообщения:
    7
    Симпатии:
    0
    Пожалуй лучшее в верстке https://htmlacademy.ru/program
    Можно заплатить немного денег по моему 300 р. в месяц и получить доступ ко всем курсам.
    А курсы там реально проработанные!
    --- Добавлено, 2 сен 2016 ---
    А если хотите и язык подучить то https://www.codecademy.com/learn/web
    Язык на фрилансе в любом случае потребуется, так что тоже полезно будет!