Мария Албегова
Контент-маркетолог

Верстальщик – это еще не фронтенд-разработчик, но начинать вход в эту профессию точно нужно с верстки. Да и просто верстать сайты и приложения – вполне достойная и оплачиваемая работа. Статья посвящается всем, кто решил пойти этой дорогой – говорим о том, с чего начать и как изучить html и css самостоятельно с нуля.

Разбираемся с терминами

Елена Кузнецова
Елена Кузнецова
контент-маркетолог

Много раз за время работы в digital я замечала, что люди, которые непосредственно не работают в веб-разработке, путаются в определениях. Они не отличают язык разметки, стилей и в целом с трудом могут сказать, что значит «верстка сайта». На деле это три сущности. Всякий раз, когда пользователь заходит на веб-площадку, его браузер подгружает написанный верстальщиком HTML-файл с данными об этом контенте – структуру документа, шрифты, цвета, изображения, ссылки, таблицы – все эти элементы тщательно прописаны заранее, чтобы юзер мог комфортно просматривать контент с различных устройств.

Верстка – это процесс создания страницы, описание ее внешнего вида и расположения контента.

HTML (HyperText Markup Language) – это стандартизированный язык разметки для создания веб-страниц и их структурирования. Когда браузер загружает HTML-документ, он интерпретирует код и отображает содержимое страницы согласно его структуре и разметке. Работа HTML-верстальщика – из макета от дизайнера сделать графически верную страничку. Это всё относится к фронтенду – внешнему интерфейсу сайта, как раз с ним взаимодействует пользователь, когда приходит на площадку. Еще одна фронтенд технология – это язык JavaScript. Он помогает внедрять интерактивные элементы. Но непосредственно в верстку он не входит, поэтому здесь мы подробно о JS говорить не будем.

тренажер
Разметка веб-страницы, источник.

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

CSS (Cascading Style Sheets) – это язык стилей. Его используют для описания внешнего вида и форматирования веб-страниц. Им можно задать значения для цветов объектов, фона, указать шрифты, их размер и начертание. 

окно верстки
Работа CSS-стилей в тренажере, источник.

Стили позволяют создавать эстетичные, удобные и адаптированные под разные гаджеты сайты. 

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

С чего начать самостоятельное обучение

Давайте закрепим: объекты на веб-странице размещаются с помощью HTML (язык разметки). А вот CSS-язык отвечает за то, как эти объекты выглядят, как они оформлены. Теперь давайте поговорим про обучение.

Установите Visual Studio Code – это бесплатный и относительно легкий в использовании редактор кода, который предлагает широкий набор функций и плагинов для удобного и простого процесса обучения. У VSCode есть подсветка синтаксиса – она очень поможет новичку быстрее ориентироваться в коде, обнаруживать ошибки и избегать опечаток. 

Основные понятия и план изучения HTML

  • Теги – из них состоит HTML-документ. Они указывают браузеру, как интерпретировать и отображать содержимое. Например, <p> прописывается для обозначения абзацев, <h1> для верхнеуровневых заголовком, <br> для добавления контента с новой строки.
  • Элементы состоят из открывающего <p> и закрывающего тегов </p>. Внутри находится непосредственно содержимое – текст, ссылка на картинку и т.д.
пример
  • Атрибуты – предоставляют сведения о теге. Функции у них разные – они придают дополнительный функционал или меняют поведение элемента. Указываются в открывающем теге. 
оформление ссылки
href – это атрибут, а “https://www.example.com” –  это его значение.
План изучения:
  • На старте было бы полезно выучить основные теги (хороший материал лежит в Журнале HtmlAcademy)  и атрибуты (у них есть статья и про это). 
  • Когда вы уже хорошо ориентируетесь в основных понятиях и можете заверстать небольшие фрагменты самостоятельно, пора приступать к изучению стилей. 
  • Затем много практики (лучше на реальных задачах из онлайн-задачников и тренажерах).
  • Потом устройство на работу, богатство и слава. 

Основные понятия и план изучения CSS

  • Селекторы – это шаблоны, которые помогают привязать свойства стилей к элементам в документе. Они определяют, к каким HTML-элементам будут применены стилевые обозначения. 
селекторы
  • Свойства – они определяют различные стили, которые применяются к выбранным элементам. Каждое из них имеет собственное значение. Именно оно придает особенности отображения объектам: цвет текста, размер шрифта, отступы, фоновое изображение и многое другое.
  • Значения – они представляют собой конкретные указания, которые определяют, как будет выглядеть объект на веб-странице.
свойства и хначения
font-family и  font-size – это свойства, а ‘Times New Roman’, Times, serif; 200%; и Helvetica, sans-serif; 100%; – это значения. 
План изучения:
  • Про селекторы можно почитать хорошую статью для новичков в Журнале html academy. На этом же этапе следует освоить синтаксис и псевдо-классы. 
  • Базовые свойства – background, color, font-size, font-family, text-align, display, width, max-width, margin, padding. Их применяем к шрифтам, картинкам и другим объектам.
  • Базовое позиционирование (position, float). 
  • Flexbox – это способ настройки расположения объектов. 
  • Грид-раскладка (Grid Layout) – двумерная система сеток.
  • Медиа-запросы для создания адаптивной верстки.
  • И дальше всякие продвинутые штуки – препроцессоры, постпроцессоры, кастомные свойства. 
Figma: что это за программа и как ей пользоваться. Пошаговая инструкция Читайте также Figma: что это за программа и как ей пользоваться. Пошаговая инструкция

Как и где научиться HTML и CSS с нуля самостоятельно

Самое важное – познать основы и много практиковаться. Дальше расскажем про 11 ресурсов, на которых получится найти информацию и заточить умения. 

HTML Academy

Здесь можно начать обучение бесплатно и в целом освоить верстку на базовом уровне.

  • Удобные, понятные и подробные тренажеры. 
  • 8 частей бесплатно – это как раз для начинающего верстальщика.
  • Нужно сверстать то, что дано в задании – полное погружение в профессию с самого начала изучения. 

Я проходила курсы Академии и мне очень понравилось – удобно, понятно и просто. Если бы я решила пойти дальше и выучиться на верстальщицу, то осталась бы здесь. Присмотритесь к этим курсам внимательно – вдруг вам тоже подойдет. 

тренажер
Интерфейс тренажера.

YouTube канал Вадима Макеева

Как сказал мой знакомый сеньор-разработчик: «лекции Макеева – топ, чтобы сформировать профессиональные принципы». Вадим – один из самых известных спикеров по разработке в целом и по фронтенду в частности в России. Он делал курсы в упомянутую выше HTML Academy, был веб-евангелистом в компании «Opera Software», работал в Яндексе.

ютуб

MDN Web Docs

А это по мнению того же разработчика – ТОП документация. MDN Web Docs – ресурс для веб-разработчиков, с огромной базой учебных текстов и руководств по веб-технологиям. Это полезно и для тех, кто задается вопросом, с чего можно начать и как учить HTML, CSS, и для скилловых разработчиков. Всю документацию и материалы можно смотреть бесплатно – это доступно для всех пользователей.

Внутри примеры кода, руководства и статьи, которые помогают разработчикам лучше понять технологии, узнать о передовых методах разработки, и улучшить свои навыки.  MDN Web Docs активно поддерживается сообществом веб-разработчиков, так что это надежный и актуальный источник знаний.

путь обучения

HTMLbook

Здесь найдется огромное количество информации про верстку – теги, селекторы, примеры кода, сложные случаи. 

Внутри есть: 

  • самоучители,
  • популярные задачи,
  • инструкции о том, как решить проблему.

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

справочник
Люди отлично запоминают яркие образы – красочные изображения, креативные видео. А значит, вы можете донести торговое предложение до аудитории. Мы поможем вам с настройкой и размещением медийной рекламы: будем управлять ставками, анализировать метрики, повышать эффективность.
Оставить заявку
Подробнее…

HTMLBase

Тоже справочник про технологии, который сам себя называет самым современным. Здесь найдется много теории для новичков, практика и видеокурсы (только они платные, остальной контент бесплатный). С этим сервисом получается комплексное обучение на удобной платформе. 

задачи

HTML5book

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

Нам здесь наиболее полезны следующее разделы: 

  • Уроки.
  • HTML-справочник. 
  • CSS-справочник.

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

уроки

HTML5CSS.ru

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

тренажер
Пример оформления простейшего списка в редакторе. 

Code.mu

Еще один учебник по верстке, в которой можно найти всё для формирования базы в этом направлении. Теория миксуется с заданиями на практику. Информации немного, потому что она довольно кратко подана – буквально по одной страничке на каждый топик. 

учебник
Как создать сайт Тильда с нуля: подробная пошаговая инструкция Читайте также Как создать сайт Тильда с нуля: подробная пошаговая инструкция

CSSDiner

Это интерактивная обучающая игра для изучения основных понятий CSS-стилей. Она состоит из 32 уровней, в процессе прохождения которых игрок запомнит все виды селекторов и отточит навыки верстки. Юзеру предстоит подготовить стол к трапезе по определенным правилам. Уровни постепенно усложняются. 

игра

Flexbox Froggy

Это тоже игра для изучения и понимания основ Flexbox, одного из модулей CSS. Его используют для создания адаптивных и гибких макетов веб-страниц. Задача – помочь лягушкам занять свои места на водяных лилиях, правильно используя свойства Flexbox. Каждый уровень предлагает разные сценарии выравнивания, распределения и управления элементами.

игровое поле

Flexbox Defense

Еще одна обучающая игра про Flexbox. Здесь игроку предстоит защищать свой замок, располагая различные типы башен на карте. Каждая из них представляет собой HTML-элемент с примененными стилями Flexbox. Цель – правильно использовать свойства Flexbox, чтобы управлять позиционированием и выравниванием башен и отражать нападения. 

игра

Советы, как быстро выучить верстку

  • Практиковаться. Верстайте всякий раз, когда освоили что-то новое. 
  • Решайте задачи из специальных онлайн-задачников. 
  • Не бойтесь сложных заданий – старайтесь найти хорошие решения, совещайтесь, просите совета у более опытных коллег. 

Что делать, когда уже знаешь HTML и CSS?

  • Разберитесь с JavaScript – это один из основных языков программирования. С его помощью можно добавить интерактивность и динамические элементы на сайт.
  • Начните работать с дизайном – изучите инструменты для создания макетов типа Figma. Прокачивайтесь в UI и UX-дизайне. 
  • Создавайте свои первые пет-проекты. Разрабатывайте простые веб-страницы, а затем переходите к более сложным проектам, чтобы укрепить свои навыки и опыт.

Подводим итоги

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

Оставить заявку
Оставить заявку
Получите консультацию и персональное предложение по развитию вашего бизнеса.
У меня есть промокод
Заявка отправлена!
Мы свяжемся с вами в ближайшее время.
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
0 Комментарий
Межтекстовые Отзывы
Посмотреть все комментарии