Сайт дня (как попасть): Хочешь дешево купить iPhone?
Один из предыдущих постов на Shakin.ru назывался Как перестать работать на дядю.
Я решил продолжить эту актуальную тему. Я составил список лучших ресурсов для изучения html и css, чтобы помочь желающим в изучении этих вопросов. Помню, когда сам начинал вебмастером, мне очень не хватало подобной подборки качественных и полезных ресурсов.
Сначала немного определений:
Html (от английского "HyperText Markup Language" - язык разметки гипертекста) - это стандартный язык разметки веб-страниц.
Css (от английского "Cascading Style Sheets" - каскадные таблицы стилей) - это технология описания внешнего вида веб-страницы.
Без знания html и css вести свой сайт будет очень проблематично - даже счетчик статистики или тот же баннер поставить не получится. Не бегать же за помощью к специалистам или создавать тему за темой на форумах? Нужно просто взять и выучить.
По своему опыту могу сказать, что html и css можно выучить за 1 месяц. Конечно, я не говорю о профессиональных высотах - вы до них сами доберетесь при желании.
На мой взгляд, лучший способ выучить html, css, да и другие тематики, включая продвижение сайтов - это завести свой сайт и на нем практиковаться. Кстати, можете посмотреть первый созданный мною сайт по картам для игры Counter-Strike, созданием которых я тогда увлекался. Вот карты и их скрины, созданные стариком Глобатором в те времена, когда он еще не знал, что такое топ-10, тИЦ и PR, и беззаботно резвился на солнышке создавал трехмерные карты 🙂 . Я создал этот сайт за месяц, изучая html и css на практике.
Для того, чтобы выучить html и css, совсем необязательно быть техническим специалистом. К примеру, я вообще гуманитарий и по математике у меня в основном было "2" 🙂 . Так что выучить html и css под силу любому желающему. Перечисленные мною ресурсы подойдут также и для того, чтобы в любой момент вы могли с их помощью выяснить какой-либо интересующий вас момент по html и css.
Сайты для изучения html и css
Начну подборку полезных ресурсов для изучения html и css с сайта, по которому я сам занимался. Это Дикие уроки html, которые написала Валентина Ахметзянова ака Дикарка. Она настолько весело и интересно описала все необходимые моменты, что изучение html и css с помощью ее уроков превращается в увлекательное занятие. Кстати, можете почитать интервью Дикарки для блога Shakin.ru. Диких уроков вполне достаточно, чтобы выучить html и css на необходимом для работы вебмастером уровне.
Htmlbook.ru - один из самых полезных сайтов по html и css. Этот ресурс создан в 2002 году. Для новичков будет полезен раздел Шаг за шагом, в котором хорошо структурированы многое важные моменты.
🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь seoshaolin.com. Для читателей блога я делаю хорошую скидку. По прокомоду "блог" тариф Про стоит не 50, а 40 тыс. рублей. Тариф Лайт не 25, а 20 тыс. рублей. Тариф Команда не 75, а 60 тыс. рублей. Пишите мне в Telegram @mikeshakin.Sdelaysite.com - блог Андрея Морковина, профессионального вебмастера, на котором вы можете найти много полезных материалов. Основная тема блога Андрея - верстка. В частности, рекомендую серию из 14 видеоуроков по верстке.
Dimox.name - отличный блог Димокса, на котором можно найти массу материалов по продвинутому использованию css, верстке, а также по другим темам.
Ruseller.com - css учебник и уроки по html и многим другим тематикам, полезным для вебмастера.
Html.manual.ru - хороший онлайн справочник по html. В левой колонке можно быстро перейти на интересующий вас пункт меню.
Спецификация по html - спецификация по html на русском.
Htmlcoder.visions.ru - полезные статьи по html. Причем это не просто скучные статьи, а действительно интересные материалы с профессиональными советами. На этом сайте также есть раздел со статьями по css.
Ru.html.net - онлайн учебник html и css с практическими советами и рекомендациями. Как и на предыдущем ресурсе, на этом сайте есть раздел с материалами по css.
Css.manual.ru - справочник-руководство по css. В статьях приводятся наглядные примеры с картинками.
Colorpilot.ru - как написано в названии этого сайта, это учебные странички. Которые, на мой взгляд, будут очень полезны новичкам.
Dimasweb.narod.ru - когда я зашел на этот сайт, то сразу вспомнил, что когда-то он мне очень помог разобраться в некоторых нюансах html и css. Там несколько необычная навигация, но к ней можно быстро привыкнуть.
Wcode.ru/html - краткие, но полезные уроки html. Ничего лишнего.
Xhtml.ru - секреты и советы по xhtml, а также по другим веб-технологиям.
Форумы и разделы форумов по html и css
Форумы - прекрасная возможность для новичков задавать вопросы и общаться со специалистами. Помню, когда я не мог вставить счетчик mail.ru на свой сайт или из-за лишней кавычки неделю не мог выяснить, почему мой сайт криво отображается - то я получал ответы на свой вопросы именно на форумах. Я благодарен тем добрым людям, которые мне тогда помогли, и продолжают помогать другим новичкам.
Forum.htmlbook.ru - форум, целиком посвященный html и css.
Html.by - полезный форум для вебмастера по html, css и многим другим тематикам.
Раздел веб-строительство на серче - можно найти ответы не только на вопросы по html, но и на смежные темы.
Англоязычные ресурсы по html и css
Если уровень знания английского позволяет вам читать и понимать английский, то это дает вам огромные возможности. Рунет - это капля в 2 с небольшим процента в океане мирового Интернета. Представляете, сколько там всего интересного? С помощью знания английского можно делать регулярные вылазки за пределы капли с целью самообразования и поиска полезных материалов 😉 .
Раздел html и css на nettuts.com - очень рекомендую вам посетить этот ресурс. В образовательном плане я считаю этот сайт самым полезным для вебмастера. Там масса подробных статей и видеоуроков по всем вопросам вебмастеринга.
W3schools.com/css - подробный справочник по css на английском. Также есть справочник по html.
Рубрика html и css уроков на webdesign.org - если вы хотите быть на волне технологии и быть в курсе всего самого нового в html и css, то этот сайт - для вас. Во как написал, даже самому понравилось 🙂 ! Уроки обновляются с завидной регулярностью.
Когда-то Глобатор добавлял туда свои уроки по Фотошопу, переведенные на английский. Мне нравилось делать экспорт своего контента в англоязычный интернет. Тогда я понял, как можно эффективно продвигаться в зарубежном интернете, если переводить свой уникальный контент на английский и распространять его в англоязычном интернете. Сейчас поищем. О, нашел! Вот мои уроки! Один даже заслужил Editor's Peak в категории Photoshop Tutorials в августе 2006 года! Я узнал об этом только сейчас... *Слезы счастья покатились по его небритой щеке* 😉 ...
Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами 🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .
Раздел html уроков на good-tutorials.com - очень, очень много полезных уроков по html с постоянными обновлениями. Также есть раздел css уроков.
Html раздел форума Digitalpoint - моего любимого англоязычного форума, на котором много действительно полезной информации. Естественно, как же без css раздела 🙂 !
Htmlcodetutorial.com/help - полезный англоязычный форум по html и css. На нем есть разделы по программированию, SEO и т.д.
Htmldog.com - оригинальный ресурс с уроками разного уровня сложности.
Желаю вам успешного освоения html и css!
Постовой (обмен постовыми): Твиттер, как источник трафика на блог. Советы и рекомендации
Crawling ..Ничего, пройдет и по нашей улице инкассатор
Десерт на сегодня - видеоролик и классных роботах, созданных по примеру животных:
Подпишитесь на рассылку блога с полезными материалами по SEO
Спасибо за подборку Михаил. Думаю что многим из тех, кто начинает осваивать сие безобразие - будет полезно. По молодости сам много часов провел на ХТМЛ-Буках
вот спасибо!
недавно озадачился версткой и цсс и тоже людей спрашивал. но вот ряд ваших ссылок оказалось мне не известными и полезными!
Забил панель закладками, спасибо за обзор! А книгу можешь порекомендовать по html и css хорошую такую, аналоговую?
Пожалуй, попробую укротить "дикие уроки" 🙂 Спасибо, Михаил за материал
Классная подборка. Было бы интересно прочитать такую же информативную подборку по php
да, подборки хороши! несмотря на то, что уже довольно неплохо ориентируюсь в хтмл и цсс все равно часто заглядываю на w3schools.org - оч. полезный ресурс, особенно их фигка с "Try It Yourself" - прочитал урок, зашел, поигрался с кодом, посмотрел эффект.
Скажите, Глобатор, не будете ли вы публиковать подборки по дополнениям к хтмл и цсс, например к javascript, php, может flash и actionscript? вы, наверняка, как активынй пользователь вордпресса уже изучили немного и РНР, так как шаблоны в нем активно используют этот язык веб-программирования...
Интересная подборка, спасибо.
Было бы круто еслиб такую же подборку только по php.
спасибо за подборку! вот сейчас решил более проффесионально занятся версткой, дополнительные материалы будут не лишними, до этого пользовался лишь htmlbook.ru
p.s да, подборка по php была бы тоже не лишней
Спасибо за подборку, ссылку дал верстальщику - пусть ознакомился...)) А то, мучает меня...))
Хорошая подборка!
Но, мне кажется, не хватает https://www.ruseller.com
Очень много интересных уроков по сайтостроению!
Спасибо, как раз недавно начал изучать, вроде как прочитал, но в голове пока каша, поэтому надо будет ещё разок пробежаться)
Отличный пост, для начинающих самое то.
Страничку в закладки однозначно.
Автору спасибо, за публикацию постоянно интересных и полезных материалов по продвижению и раскрутке сайтов.
proglammer, в меру своих познаний что-нибудь сделаю.
Максим, спасибо, как я не вспомнил! Добавил в пост.
Миша, ты как-то забыл о самом важном сайте по HTML. Это спецификация. В рунете много сайтов с русским переводом, например тут: https://www.citforum.ru/internet/html40/cover.html 🙂
Не знаю, как раньше было, видимо далеко не так как сейчас, но я заметил, что если оставить лишнюю ковычку или случайно ее стереть, то на сайте вместо траницы будет отображена ошибка с номером строчки, с ошибкой. Удобно. Пару раз выручало. А в идеале, конечно, учиться просто необходимо!
Михаилу спасибо за информацию, позновательно.
Отличная подборка. Спасибо.
Поддерживаю мнение о необходимости подобной статьи о php.
Ещё лично мне было бы очень интересно посмотреть коллекцию материалов по веб-дизайну и верстке, о том как создать приятный и эффектный дизайн, рекомендации по цветовой гамме, оформлению, организации навигации и т.д. Ведь тоже очевидно есть какие-то общие правила и рекомендации.
Блог отличный, один из немногих блогов, где я перечитываю архив. Некоторые статьи распечатаны и читаются в аналоговом виде там, где нет компьютера. Спасибо Вам.
Спасибо, Михаил, за полезные ресурсы. И поздравляю, кол-во подписчиков уже перешагнуло отметку в 6К!
спасибо за подборку, интересно было просмотреть сервисы, я по этому поводу читал только на англоязычных сайтах)
планируешь ли вести англоязычный блог?
MAX, спасибо, добавил в пост.
ua-blogger, спасибо!
SeoProfy, пока не планирую.
Эх... моего блога не хватает для полной коллекции((:
Спасибо огромаднейшее, Михаил!
Сам только недавно занялся сайтостроением. Вожусь со своим первым сайтом и то, что вы делаете, это просто неоценимая помощь.
Побежал на "дикие уроки".
Хороший пост, поможет новичкам. Постараюсь пробежаться по этим сайтам, может чего нового подхвачу 🙂
Сам начинал из статьи на сайте postroika.ru - очень доступным языком написано и можно освоить буквально за пару часов...
Отличная статья. Прочитать бы её пару-тройку лет назад 🙂
Хотелось бы по PHP такую качественную подборку.
Отлично просто, спасибо за ссылки.
Уважаемый Шакин а неподскажете ресурсов где можно изучать html вёрстку?
а за этот пост большое спасибо как раз хочу выучить css
Yeah! Отличная статья. В закладки однозначно. Тёзка, спасибо за подборку ссылок. Уже двое суток безвылазно сижу на этой странице xDDD
Искал курс по PHP (бесплатный) , нашел достаточно неплохие видео-уроки здесь https://jolly-wind.ru/videolessons.
Вот хочу Вас познакомить с новым проектом.
https://yoprofi.com/
Сервис еще не стартовал. Но уже скоро откроется. Подписывайтесь на новости. Рекомендуйте своим друзьям