С чего начать верстку сайта? Для совсем новичков | Блог веб-разработчика MaxGraph

С чего начать верстку сайта? Для совсем новичков

Привет! Решил написать небольшую статью для совсем новичков в верстке. С чего вообще начать, на какие темы обращать внимание и так далее. Поехали!)

С чего собственно начать верстку сайта? Правильно, с изучения основ :) Я разделю данную статью на четыре уровня подготовки, чтобы было удобнее.

Первый уровень — начинающий

Собственно, здесь изучаем лишь основы, самые основы. Что такое теги, как начать верстать страницу, и т.д. Писать что-то свое, по крайней мере на первом уровне, не имеет смысла, а вот посоветовать ссылки — запросто:)

Изучение самых-самых основ

Справочник всех тегов в HTML

По большому счету, из всех тегов на первом уровне вам нужны лишь: html, head, body, meta, title, заголовки h1-h6, p, a, strong, b, ul, ol, li, button, div, img, table, span и внутренние табличные теги. Остальное — на среднем уровне :)

 

Ну и конечно, стоит выбрать себе хороший и удобный Вам редактор кода :)

Ну и по сути — это все, что нужно на первом уровне. Верстка страниц типа такой: пример страницы + дополнять ее картинками, таблицами и т.д.

Второй уровень — средний

Наверное, этот уровень самый обширный. Здесь добавляется еще огромная куча тегов и CSS.

Сперва, нужно научиться базе работы с Фотошопом или Avocode.

Вкратце, зачем нужны остальные теги:

  1. Теги структуры HTML5 нужны для верной разметки сайта. Эта разметка поможет людям без мышки или же людям, которые вообще не видят экрана по тем или иным причинам. Углубляться в доступность на данном этапе не надо, но в семантику HTML5 — обязательно.
  2. Теги form, input и т.д. — теги для создания форм. Без них, естественно, нельзя создать форму, из которой можно отправить какие-то данные.
  3. Прочие теги — тут уже по ситуации, но некоторые из списка выше — вообще не используются) все на практике будет.

+ тут же нужно сразу изучать и атрибуты тегов. Их немало и все очень важны.

Ну и CSS — тут желательно вникать сразу во все.

Справочник CSS

Важные темы:

  1. Float — несмотря на устаревание данной технологии — хотя бы обзорно ее стоит рассмотреть, понять как это все работает, как использовать clearfix и т.д.
  2. Flexbox — основная технология для верстки сайтов сейчас.
  3. Position — очень сложная тема для новичков, но по факту — все очень просто)
  4. Display — разобраться для чего какое значение display.
  5. Margin и Padding — разобраться, когда что используется.

Остальные темы, которые стоит глянуть на данном этапе — это в основном украшения. Фон, цвета, бордеры, тени и так далее. Рекомендую взять какой-нибудь макет и просто верстать. Смотреть, чтобы ничего не распалось и не распадалось.

 

Еще ОЧЕНЬ важная вещь в данном этапе — изучить и понять, как работает dev tools. С ее помощью можно избавить себя от кучи проблем и багов. Это важно.

Третий уровень — продвинутый

Здесь стоит уже знать ВЕСЬ CSS. Функции, псевдоэлементы, псевдоклассы и так далее. Конечно, в процессе практики на втором уровне вы часть изучите из-за необходимости, но в целом — это все сюда.

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

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

Я бы советовал погрузиться в самые-самые азы работы с PHP, на уровне создания обработчика для отправки форм.

 

Ну и конечно практика. Верстайте + смотрите уже готовые верстки (есть такие длинные видео) — очень удобно.

Четвертый уровень — конечный

Хотя, это я, наверное, лукавлю. Не конечный, но близкий к таковому :)

Что нужно здесь:

  1. Изучить работу сборщиков типа gulp и webpack.
  2. Изучить препроцессоры, хотя бы один.
  3. Изучить git
  4. Изучить доступность. Применять подходы в доступной верстке. Скоро на эту тему будут статьи у меня :)
  5. Уметь написать кастомные анимации на CSS или JS. Без них опять же — никуда.

Больше ничего не идет в голову, если что-то есть у Вас — пишите в комментарии :)

 

 

Вот такой вот списочек в целом. Возможно что-то упустил, бывает. Но примерно всем этим (и чуть больше) владею сейчас я, и по сути, могу сверстать любой сайт. Как именно это изучать — вам решать, но самому, без наставника — довольно тяжело :)

 

Но я верю, у Вас получится. Если правда есть желание научиться — научитесь :)

Метки: , , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *