Вёрстка сайта с нуля 2.0 - Михаил Русаков

Складчина: Вёрстка сайта с нуля 2.0 - Михаил Русаков

Вёрстка сайтас нуля 2.0
Автор: Михаил Русаков
Внимание возможен доп сбор в размере минималки

Спойлер: Об авторе

Что такое вёрстка и для чего она нужна?

Теперь, когда Вы убедились в моей компетенции как преподавателя в области сайтостроения, давайте я объясню простым языком: «Что такое вёрстка и для чего она нужна?».

Любой сайт состоит из набора Web-страниц. На странице мы видим текст, ссылки, формы, изображения, различные тени, закругления блоков и п рочие графические элементы. При этом Web-страница является интерактивной: текст мы можем выделить, форму мы можем заполнить, изображения можем сохранить к себе на компьютер. Но ещё до создания Web-страницы её внешний вид рисовал дизайнер, по сути, это была раньше просто картинка, самая обычная картинка, на которой была нарисована вся страница сайта. Безусловно, она не была интерактивной, Вы ведь не можете открыть фотографию с текстом и скопировать его? Так вот процесс преобразования изображения страницы в Web-страницу и называется вёрсткой.

Без вёрстки не обходится абсолютно ни один сайт. Сама вёрстка делается с помощью HTML и CSS. И HTML, и CSS – это основа любого сайта. Фактически, зная только HTML, CSS и умея их применять на практике (а другими словами, верстать сайты), Вы уже можете создавать бесчисленное множество различных сайтов.

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

Спойлер: Подробное описание

Как изучить HTML и CSS и научиться верстать с их помощью сайты?

Вариантов тут несколько:


1. Институт

Самый плохой вариант: на 100% устаревшая программа, куча лишних предметов. Единственный плюс – это корочка о высшем образовании, которая поможет при трудоустройстве.


2. Оффлайн-курсы

Способ уже получше, но всё-таки далёкий от идеала. Во-первых, идёт территориальная и временная привязки, плюс высокая цена (аренда большого зала стоит очень дорого, зарплата преподавателю). Нет возможности «пересмотреть» или «перечитать», если что-то пропустили.


3. Книги

Этот способ имеет множество плюсов, и крупный минус, на мой взгляд, тут только один – не всем легко воспринимать материал. В своё время я изучал язык Java (не путать с JavaScript) – один из самых сложных языков программирования, на мой взгляд. К тому моменту я уже знал отлично Turbo Pascal и неплохо ActionScript (тогда Flash ещё был весьма актуален). И читая книгу, я не мог вникнуть в язык Java. Причём, я читал сначала одну, потом другую, потом нашёл в Интернете набор каких-то статей для начинающих, и всё равно не было полного осмысления материала. Не мог я понять, что это и зачем нужно, а без этого понимания невозможно создавать мало-мальски сложные проекты. И так ещё долго могло бы продолжаться, если бы я не познакомился со следующим вариантом обучения.


4. Видеокурсы

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

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

Ещё хуже обстоят дела с вёрсткой. Справочную информацию по HTML и CSS можно получить, предположим, даже Вы получите актуальную информацию, но как научиться применять HTML и CSS на практике?

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

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

Спойлер: Программа курса

Раздел №1. Введение

Спойлер

Раздел состоит из 3-х видеоуроков:

1. Как проходить курс?
2. Что такое вёрстка и каковы её задачи?
3. Как выглядит Web-страница изнутри?

Просмотрев этот раздел, Вы узнаете, как наиболее эффективно проходить курс, узнаете более подробно про вёрстку, а также про её критерии качества. Так же Вы познакомитесь с исходным кодом Web-страницы, и сможете уже понять, из каких частей она состоит и как они между собой взаимосвязаны.

Раздел №2. Изучаем HTML

Спойлер

Раздел состоит из 15-ти уроков:

1. Установка редактора
2. Создание первой Web-страницы
3. Добавление заголовков
4. Теги для текста
5. Добавление списков/li>
6. Добавление изображений
7. Добавление ссылок
8. Организация контента на странице
9. Элемент iframe
10. Таблицы
11. Формы
12. Добавление видео
13. Добавление аудио
14. Добавление favicon
15. Мнемоники в HTML

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

Раздел №3. Изучаем CSS

Спойлер

Если HTML отвечает за разметку Web-страницы, то CSS отвечает уже за внешний вид. И в данном разделе, состоящем из 14 уроков, Вы его отлично изучите:

1. Основы CSS
2. Как подключить CSS
3. Подключение шрифтов
4. Внешний вид текста
5. Единицы измерения
6. Селекторы
7. Внешний вид списков
8. Внешний вид блоков
9. Задание фона
10. Градиент
11. Обтекание блоков
12. Позиционирование блоков
13. Анимация
14. Трансформации

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

Раздел №4. Вёрстка страниц

Спойлер

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

Эта страница, с одной стороны, несложная, с другой стороны, имеет множество классических примеров вёрстки, с которыми я Вас как раз и познакомлю. Вы увидите, как с нуля верстается полноценная Web-страница от начала и до конца. Сам раздел состоит из 6-ти уроков:

1. Как правильно верстать страницу?
2. Подготовительные работы
3. Верхнее меню
4. Форма загрузки файла
5. Галерея
6. Подвал и подведение итогов

После просмотра этих уроков у Вас уже будет полное понимание того, как верстаются Web-страницы, и Вы уже сможете легко верстать несложные сайты.

Раздел №5. Пример сложной верстки

Спойлер

Разумеется, после примера достаточной простой вёрстки, нужно, чтобы Вы увидели, как верстается сложная Web-страница. И весь процесс вёрстки сложной страницы Вы увидите в этом разделе.

Дизайн страницы, будет как в примере справа.

1. Подготовительные работы
2. Логотип и верхняя часть сайта
3. Верхнее меню и форма поиска
4. Заголовок и галерея
5. Навигация и нижний баннер
6. Нижнее меню, логотип и баннер
7. Подвал
8. Подведение итогов

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

Раздел №6. Адаптивная вёрстка

Спойлер

Поскольку с каждым годом доля мобильного трафика растёт, встаёт вопрос об адаптации сайтов под мобильные устройства. Именно этому Вы и научитесь в этом разделе из 7-ми уроков:

1. Что такое адаптивная вёрстка?
2. Медиа-запросы
3. Адаптация верхней части
4. Адаптация центральной части
5. Адаптация навигации по страницам
6. Адаптация нижней части
7. Заключение

Помимо всей необходимой теории по адаптивной вёрстке сайтов, Вы увидите пример адаптации сложной вёрстки (из предыдущего раздела) под самые различные мобильные устройства. После прохождения данного раздела Вы сможете адаптировать любые Web-страницы под любые устройства.

Продажник: