13

Хочу начать изучение HTML и CSS. В интернете находил много сайтов и книг, глаза разбегаются и не знаю что выбрать. Поэтому, прошу посоветовать, с какой книги или сайта лучше всего стоит начать изучать HTML и CSS.
Также какое ПО следует использовать при изучении HTML и CSS.

2
  • 2
    Хм.. Что-то я неудачно задубликатил... Тут же не js :(
    – Qwertiy
    18 янв 2018 в 20:42
  • 1
    @VladSpirin, вообще-то пока не формат... Надо к одноответному как-то привести.
    – Qwertiy
    4 ноя 2018 в 19:16

10 ответов 10

9

Книга Муссиано "HTML&XHTML.Подробное руководство". Читайте вдумчиво. Книга впоследствии пригодится, как справочник.

Книга Э.Мейер "CSS. Каскданые таблицы стилей. Подробное руководство". Буквально учить можно эту книгу. ))

Сайт htmlbook.ru. - есть справочники, уроки, статьи, готовые решения. Много всего интересного на этом сайте.

ПО. Список достаточно широк. Я предпочитаю писать "руками", так скажем, то есть без приложений автоматической генерации кода... Я работаю в Notepad++. Итого для начинающего считаю лушей связкой ПО - Notepad++ и Mozilla Firefox последней версии.

9
+50

Ссылки

  1. htmlbook.ru
  2. developer.mozilla.org
  3. w3schools.com
  4. metanit.com
  5. html5book.ru

Литература

  1. Дэвид Макфарланд, Новая большая книга CSS
  2. Джон Дакетт, HTML и CSS. Разработка и дизайн веб-сайтов
  3. Фрэйн Бен, HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств
  4. Эрик Мейер, CSS-каскадные таблицы стилей. Подробное руководство

Видеокурсы

  1. Изучение CSS/CSS3 от нуля до гуру! (Гоша Дударь)
  2. Основы CSS/CSS3 (Sorax)
  3. Основы CSS (loftblog)

Интерактивные курсы

  1. htmlacademy.ru
  2. coursera.org
  3. FLEXBOX FROGGY
  4. GRID GARDEN

Редакторы кода

  1. Sublime Text
  2. Brackets
  3. Notepad++
  4. Visual Studio Code
  5. Atom

Онлайн песочницы

  1. JSFiddle
  2. CodePen
  3. CssDesk
  4. Cloud9

Валидатор

  1. validator.w3.org

Задавайте вопросы тут

  1. ru.stackoverflow.com
  2. toster.ru

Дополнительный материал

  1. Путь верстальщика: с нуля до сеньора (habr.com)

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

4
  • PhpStorm тут с какого перепуга?
    – Qwertiy
    4 ноя 2018 в 19:19
  • @VladSpirin, так он вроде как для php. Кстати, разве VS Code - не IDE?
    – Qwertiy
    4 ноя 2018 в 19:22
  • 2
    Исходя из личного опыта начинающему верстальщику устанавливать IDE это ад, там функционала тонна и большая часть из того на начальном этапе не нужно, любого легкого редактора достаточно. Я перепробовал все основные извесные редакторы, мой выбор оcтановился на Visual Studio Code под Linux, хотя Atom тоже хорош, но это дело вкуса. Но если программированием заниматся, а-ля С \ С++ или Python, то лучше конечно IDE
    – user262779
    4 ноя 2018 в 19:48
  • Мое мнение по поводу вашего вопроса про IDE, они тут не нужны, не на начальном этапе, да и для верстки они вообще не нужны. Другое дело что-то массивное где несколько языков, но это не тот случай. Я тоже решил присоединится и написал пару строк начинающим верстальщикам )
    – user262779
    9 ноя 2018 в 18:39
6

Немного вводной информации (из личного и опыта моих коллег, друзей):

Начинающему верстальщику, да и не только начинающему, всегда сложно определится, что читать и с какой именно книги начать лучше всего, так как нас окружает океан всевозможных рекомендаций. YouTube переполнен различными видео-материалами, тысячи блогов с красивыми заголовками и картинками, так и взывают к себе: "Иди сюда, мы тебя всему научим..." ну и так далее...

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

Добавлю свою подборку максимально продуктивных и актуальных книг, учебных ресурсов по HTML, CSS, и дополнительных технологий связанных как-либо с версткой, и в целом веб-дизайном, которая помогла мне начать делать что-то интересное, стремиться развиваться далее в этом направлении, а также найти первую работу в ИТ :)

Литература (HTML):

  • “Изучаем HTML5. Библиотека специалиста”. Б. Лоусон, Р. Шарп, Питер, 2012, 303 стр.
  • "HTML5: Рецепты программирования". К. Шмитт, К. Симпсон, 2012
  • "HTML5. Карманный справочник". 5-ое издание, Д.Роббинс, 2015
  • "HTML5: Разработка приложений для мобильных устройств". Э.Вейл, 2015

Литература (CSS):

  • "Секреты CSS. Идеальные решения ежедневных задач". Лия Веру, Питер, 2016
  • "Новая большая книга CSS". Д.Макфарланд, Питер, 2016
  • "HTML5 и CSS3 для чайников ". К.Минник, Эд Титтел, Диалектика, 2016, 400 стр.

Ресурсы для обучения и справочники:

WebReference
MDN Web Docs
W3C. HTML 5
W3C. Cascading Style Sheets home page
SASS. Documentation
Bootstrap. Documentation
Книги и учебные материалы по SVG


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

  • "Большая книга веб-дизайна". Т. Фельке-Моррис, ЭКСМО, 2017
  • "Bootstrap в примерах", С. Морето, ДМК Пресс, 2017, 314 стр.

Хочу также добавить, как говорят практически все, кто каким-либо образом связан с ИТ:
учите английский язык, так как технологии развиваются очень быстро и книги на русский язык переводят существенно позже, некоторые технологии перестают быть актуальными к моменту перевода. Старайтесь пользоваться ресурсами-первоисточниками, или же ресурсами максимально приближенными к ним (примеры привел выше).

5

Согласен с iwowa. Отличный сайт для изучения: http://htmlbook.ru/. Насчет ПО: лучше на мой взгяд notepad++.

4

Можно изучать на википедии, на htmlbook, постройка, html.net, для меня этот был лучшим - s3schools.

ПО: пользуюсь Adobe Dreamweaver cs5.

4

Я, конечно, опоздал на 7 лет, но учил эти языки я благодаря htmlbook и Head First HTML with CSS & XHTML. И да: не советую учить эти языки по отдельности.

Лично я, очень хорошо воспринимаю все визуально и на слух. Мне было влом читать техническую литературу, поэтому я изучал эти языки по мере возникновения проблемы. Как именно? Начал с того, что смотрел обучающие уроки (Вводные уроки) в YouTube на русском. Повторяешь все действия в уроках и вуаля - ты написал свою первую "веб-страницу".

После того, как ты почуствуешь, что немного начал понимать в этих языках - начинай писать страницы без помощи уроков, создавая челендж себе самому. Если есть проблема - гугли. Форумы и YouTube-видео всегда помогут тебе. Как сказал один мне юзер StackOverflow: "почти все ответы на твои проблемы ты найдешь в интернете".

Кстати, еще один неплохой сайт-справочник - w3schools (на английском).

Рекомендую после неплохой базы в CSS переходить на препроцессоры. Лично я использую SCSS. Очень хорошая книга для изучения - Dan Cederholm - Sass for Web Designers.

1
  • Не опоздали, +1 добавил, спс за личный опыт, новым пользователям будет полезно
    – user262779
    9 ноя 2018 в 13:46
3

Насчет программ - Notepad++, конечно, всему голова, но также можете попробовать MS Expression Web. Плюсов несколько - как подсказка по коду и автозавершение, так и просмотр сразу того, что намутил.

2

Лучший учебник на сайте postroika.ru. Я по нему научился и все замечательно! Очень советую! Зайдите на сайт и в меню выберите "HTML". Его можно скачать. Короче крутой учебник!

2

Довольно неплохо описано: тут и тут.

По софту на данном этапе подойдет Notepad++ или SublimeText или Atom (по вкусу). Так же можно сразу с WebStorm, он более комплексный.

-2

Никакие книги по HTML и CSS читать не надо. Я как-то одну прочитал и понял, что только зря потратил время, ничего там путного нету только одна "вода". Все можно найти в интернете в виде статей (часто на форумах в ответах) в более краткой форме, главное знать что вас интересует.

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

Для верстки под Windows хорошо использовать notepad++, легкий в обращение и главное есть подсветка кода.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.