Учим основы HTML и CSS
Веб-разработка

Учим основы HTML и CSS: полезные материалы, курсы, площадки

Дамы и господа, здравствуйте, пришло время осваивать нелегкий путь фрилансера — разработку сайтов на заказ. Кто-то возразит: «Берешь любую CMS и делаешь за пару дней сайт». Ага, конечно, если было бы так просто, то не пришлось бы дописывать 186 строк кода в файл functions.php. Не HTML, конечно, использовал, но WordPress устроен так, что посредством PHP вам придется выводить HTML, соответственно, нужно знать и то, и другое.

доработка WP

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

CSS
Здесь отображается больше строк, но есть пробелы и строки для формирования дочерней темы, которые к каскадным стилям не относятся.

Не сказать, что особо много, но если не знаете, как правильно все прописать, то потратите огромное количество времени на прогулки по Google и пробы пера. А это простейший с виду WordPress. В общем, если для себя, то вам хватит простой установки темы на выбор, их очень много, а избежать проблем поможет крылатая фраза: «И так сойдет!».

Но если делаете сайт для заказчика, то придется исполнять требования, в противном случае останетесь без денег. И любой уважающий себя верстальщик должен знать основы HTML и CSS, на этой базе будут строиться все остальные знания. А где вы можете их узнать, сейчас расскажу.

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

Самообучение

Конечно же, без самообучения не обойтись, придется искать информацию, пробовать что-то делать. Поверьте, даже профессионал постоянно учится, в принципе постоянное саморазвитие отличает профессионала от посредственностей. Желаете научиться чему-нибудь новому? Вперед! Это легко, только с виду задача кажется тяжелой.

В первую очередь есть множество площадок в сети, на которых можно изучить основы HTML, CSS, а также множество языков программирования.

Итак, веб-ресурсы, которые в полной мере помогут освоить основы разметки страниц и каскадные стили:

  1. http://htmlbook.ru/. Полный сборник всех тегов и стилей, а также подробных объяснений с их участием. Очень полезная площадка.

  2. https://webref.ru/. Отличная площадка с набором уроков по многим языкам программирования. Есть информация как для новичков, так и для матерых специалистов.

  3. https://puzzleweb.ru/. Сайт сделан под новичков, есть самоучители по многим направлениям программирования.

  4. https://professorweb.ru/. Довольно много полезной информации по многим языкам программирования. Если желаете профессионально создавать сайты на заказ, то можно многому научиться, но оформление немного глаза режет, так что дизайну там обучаться бы не стал :).

  5. https://msiter.ru/. Также много самоучителей. Можете посетить и ознакомиться с информацией.

Как видите, предложил неплохое количество сайтов для самообучения на выбор, если не знаете с чего начать тернистый путь в разработчики сайтов, скажу сразу: вот с этих площадок. Для начала освойте азы HTML5, CSS. Потом можно переходить к обучению PHP, JavaScript. После изучить jQuery и Ajax. С этой базой вы будете уже неплохим специалистом (уровня junior, но не пугайтесь, реальный опыт набьете уже на прикладных задачах). Идем далее.

Учебники

Теперь перейдем к учебникам. На выбор предложу несколько книг, по которым учился сам. В первую очередь рекомендую эту книгу: https://www.litres.ru/8511974/

Эрик Фримен, Элизабет Фримен: Изучаем HTML, XHTML и CSS. Отличный самоучитель для новичков, все разложено по полочкам, минимальное количество непонятных моментов. В общем, для старта самое то.

Теперь усложняем задачу и переходим к следующему уровню: https://www.litres.ru/19224133/

Владимир Дронов, Николай Прохоренок: HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера (4-е издание). Отличный учебник для тех, кто встает на тернистый путь разработчика сайтов. Современные технологии там вполне понятно разъясняются.

Следом зацепите этот учебник, он тоже очень не плох, но только после того, как справились с предыдущим: https://www.litres.ru/8920342/

Робин Никсон: Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. Отличный учебник, который окажется неплохим введением в более сложную сферу веб-программирования.

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

Интерактивные площадки

И еще понравилась одна площадка, которая подает материал в виде интерактивного курса. Мне очень понравилось!

Собственно, переходите сюда: https://htmlacademy.ru/courses. Регистрируйтесь и начинайте спокойно изучать. Здесь есть уроки по HTML, CSS, языкам программирования и даже про препроцессорам, например, Less.

Подается информация в игровом варианте. Соответственно, постепенно выполняя задачи, вы развиваете свои навыки.

Основы HTML и CSS в HTMLacademy

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

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

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

Курсы HTML и CSS

Теперь пришло поговорить о довольно удобном способе обучения — курсах. Рассказывать буду только о тех, с которыми познакомился лично. Давайте посмотрим, какие курсы стоит пройти начинающему созидателю на ниве веб-ресурсов, чтобы изучить основы HTML и CSS.

Основы HTML и CSS от Нетологии

Отличный курс для новичков, где подробно разжевываются основы. Пройти можно здесь: https://netology.ru/programs/html-css-base.

Обучение основам HTML и CSS в Нетологии

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

  1. Вводное занятие. На нем объяснят, чего ждать от курса, а также потенциальные сферы приложения полученных навыков.

  2. Научат тегам для разметки страницы, а также атрибутам.

  3. Научат пользоваться списками и таблицами.

  4. Объяснят селекторы и свойства в CSS.

  5. Расскажут, как оформлять текстовые блоки с помощью каскадных стилей.

  6. Поведают о клиент-серверном взаимодействии.

Процесс обучения в Нетлогии

Не сказать, что много, но полезную базу получите, причем абсолютно бесплатно. К тому же, материалы курса вы сможете посмотреть в личном кабинете, так что не бойтесь, если пропустили занятие. Кстати, после прохождения вам предоставят сертификат Нетологии.

HTML/CSS. Интерактивный курс от GeekBrains

Отличный курс, но, к сожалению, не бесплатный: https://geekbrains.ru/courses/246.

Обучение HTML и CSS в GeekBrains

Цену драконовской не назовешь, но все-таки, за всего 8 занятий многовато. Впрочем, за время учебы вы научитесь:

  • верстать статические сайты;

  • освоите блочную верстку;

  • познакомитесь с кроссбраузерностью;

  • немного научитесь Photoshop;

  • познакомитесь с препроцессорами LESS;

  • немного узнаете о Bootstrap.

Конечно, курс рассчитан на новичков, но в процессе придется самостоятельно осваивать много навыков, так что книжками, что рекомендовал выше, рекомендую все-таки запастись.

Ученье — свет

Как видите, площадок для изучения основ HTML и CSS, а также способов быстрее освоить навыки, великое множество. Это база, которая позволит вам эффективно работать в дальнейшем и осваивать новые навыки. Так что дерзайте, инструмент дал, далее дело за вами.

Добавить комментарий

Ваш e-mail не будет опубликован.