Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Видеокурс "Вёрстка сайта с нуля". (Михаил Русаков)
Видеокурс

Видеокурс Видеокурс "Вёрстка сайта с нуля". (Михаил Русаков)

Страница автора - Михаил Русаков
Страница автора

Автор(ы): Михаил Русаков

Это уникальная информация по созданию страниц любой сложности. Пройдя данный курс, Вы сможете не только верстать страницы с любым по сложности дизайном, но и выводить на чистую воду недобросовестных верстальщиков, которых в Рунете около 95% (!!!). Поэтому данную информацию надо знать всем: кто создаёт сам и кто заказывает их на стороне. Также вёрстка страниц - это очень прибыльное дело. Заработок верстальщиков составляет от 100 рублей в час у новичков до 1500 рублей в час уже у профи, которым Вы станете после просмотра курса и практики. Также в Видеокурсе "Вёрстка сайта с нуля" рассказывается о том, как искать заказчиков, где их искать, как им писать в первый раз. Всё это я подробно рассказываю в курсе, а также даю уже готовый вариант первого обращения к заказчику. С таким обращением вероятность того, что заказчик к Вам обратится, близка к 100%. А учитывая, что Вы будете профессионалом, то этот заказчик превратится в постоянного! Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Смотреть видео:

Вёрстка сайта с нуля. (Михаил Русаков)

Содержание:

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

Урок №1. Как проходить курс?

Урок №2. Что такое вёрстка?

Урок №3. Необходимое ПО

Задание №1

  • Установите все необходимые программы.

Раздел №2. HTML

Урок №1. Что же такое HTML?

Урок №2. Создание HTML-страницы

Задание №1

Создайте первую страницу:

  • Напишите основные HTML-теги (doctype, html, head, body).
  • Поставьте кодировку страницы utf-8.
  • Сделайте заголовок страницы.
  • Выведите 2 заголовка 1-го и 3-го уровня.
  • Проверьте валидность и исправьте ошибки (если они появились).

Урок №3. Работа с текстом в HTML

Задание №1

  • Напишите основные HTML-теги (doctype, html, head, body).
  • Поставьте кодировку страницы utf-8.
  • Сделайте заголовок страницы.
  • Выведите 3 абзаца произвольного текста.
  • Сделайте первый абзац полностью жирным.
  • Часть текста из второго абзаца сделайте курсивом.
  • Сделайте третий абзац полностью жирным и курсивом.
  • Проверьте валидность и исправьте ошибки (если они появились).

Примечание: Не надо копировать все html-теги из прошлого урока,

  • всё напишите ещё раз, причём на этот раз постарайтесь никуда не подсматривать.

Урок №4. Работа со списками в HTML

Задание №1

  • Напишите основные HTML-теги (doctype, html, head, body).
  • Поставьте кодировку страницы utf-8.
  • Сделайте заголовок страницы.
  • Выведите нумерованный и ненумерованный список, в каждом по 3 элемента в виде текста.
  • Проверьте валидность и исправьте ошибки (если они появились).

Урок №5. Работа с изображениями в HTML

Задание №1

  • Напишите основные HTML-теги (doctype, html, head, body).
  • Поставьте кодировку страницы utf-8.
  • Сделайте заголовок страницы.
  • Добавьте 3 картинки на страницу, шириной 500,400, 250 пикселей.
  • Задайте у каждой картинки разные значения атрибутов title и alt.
  • Проверьте валидность и исправьте ошибки (если они появились).

Урок №6. Работа с ссылками в HTML

Задание №1

  • Создайте 3 страницы.
  • Добавьте на каждую страницу заголовок 1-го уровня, изображение, немного текста. Сделайте это всё уникальным (разный текст и изображения).
  • Поставьте ссылку с 1-го страницы на 2-ю.
  • Поставьте ссылку с 3-й страницы на 1-ю.
  • Поставьте ссылку со 2-й страницы на 1-ю.
  • Поставьте ссылку со 2-й страницы на 3-ю.
  • Всё проверьте на работоспособность.
  • Проверьте валидность и исправьте все возникшие ошибки.

Урок №7. Работа с таблицами в HTML

Задание №1

Создайте поле игры "Морской бой".

В первой строке должны идти буквы (за исключением 1-й ячейки).

Во второй строке должны идти цифры (за исключением 1-й ячейки).

Во всех остальных ячейках поставьте пробел.

Задание №2

  • Создайте таблицу, состояющую из 3-строк и 3-х столбцов.
  • Сделайте 1-ю строку шириной в 3 столбца.
  • 1-ю ячейку 2-й строки сделайте высотой в 2 строки.
  • Сделайте 3-ю строку шириной в 3 столбца.

Урок №8. Работа с формами в HTML

Задание №1

Создайте форму регистрации со следующими полями:

  • Имя (текстовое поле).
  • Логин (текстовое поле).
  • E-mail (текстовое поле).
  • Пол (радио-кпопки).
  • О себе (текстовая область).
  • Согласие с правилами (checkbox).
  • Аватар (поле с выбором файла).
  • Откуда пришли (select со следующими значениями: Google, Яндекс, Другое).
  • Кнопка "Регистрация".

Урок №9. Работа с блоками

Задание №1

  • Добавьте заголовок 1-го уровня.
  • Добавьте изображение.
  • Добьваьте немного произвольного текста.
  • Выделите всё это в отдельный блок div.

Урок №10. Спецсимволы

Задание №1

  • Вывести на страницу HTML-код: <р>Моя <Ь>Страница</Ь></р>

Раздел №3. Первая вёрстка

Урок №1. Знакомство с шаблоном

Задание №1

  • Ознакомьтесь с Вашим шаблоном для вёрстки.

Продумайте структуру.

Урок №2. Создание структуры HTML-кода

Задание №1

  • Напишите структуру HTML-кода.

Урок №3. Реализация структуры HTML-кода

Задание №1

  • Реализуйте структуру HTML-кода.

Урок №4. Кроссбраузерность

Задание №1

  • Добейтесь адекватного отображения во всех необходимых браузерах.

Урок №5. Адаптация под разные разрешения экрана

Задание №1

  • Добейтесь того, чтобы страница хорошо отображалась на ширине 1024 пикселя и больше.

Урок №6. Проверка валидности

Задание №1

  • Проверьте валидность, и если есть ошибки, то исправьте

Раздел №4. CSS

Урок №1. Что такое CSS?

Урок №2. Синтаксис CSS

Урок №3. Подключение стилей к странице

Задание №1

  • Подключите любой стиль (можете взять из урока) через тег <link>.
  • Подключите стиль через атрибут style.

Примечание: Это 2 основных способа, которые надо выучить наизусть, поэтому постарайтесь это всё написать, не подглядывая в урок.

Урок №4. Селектор по элементу

Задание №1

  • Добавить 3 ссылки на страницу.
  • Все ссылки через селектор элемента сделать красными.

Урок №5. Контекстный селектор

Задание №1

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

Урок №6. Селектор CLASS

Задание №1

  • Сделать задачу из прошлого урока, но с помощью селектора CLASS.

Урок №7. Селектор по ID

Задание №1

  • Добавить блок, в котором будут находиться: заголовок 1-го уровня и текст.
  • Через селектор ID сделать у этого блока фон зелёного цвета.

Урок №8. Селектор по параметру

Задание №1

  • Добавить таблицу из 2-х строк и 2-х ячеек.
  • Сделать в двух произвольных ячейках выравнивание содержимого по центру.
  • С помощью селектора параметров сделать фон ячеек, содержимое которых выравнено по центру, красного цвета.

Урок №9. Псевдоэлементы

Задание №1

  • Добавить абзац, в котором разместить текст и ссылку.
  • Сделать ссылку при наведении мыши чёрного цвета.
  • Изменять фон цвета у абзаца на зелёный при наведении мыши на абзац.

Урок №10. Принцип наследования

Раздел №5. Основной набор CSS-свойств

Урок №1. Задание вида текста

Задание №1

  • Добавить абзац с произвольным текстом.
  • Поставить шрифт Arial и Times New Roman.
  • Сделать через CSS текст жирным, курсивным.
  • Поставить отступ абзаца в 15 пикселей.
  • Добавить ссылку на страницу.
  • Убрать подчёркивание ссылки (которое присутствует по умолчанию).
  • Сделать размер ссылки в 1.5 раза больше базового.

Урок №2. Задание цвета

Задание №1

  • Добавить ссылку на страницу.
  • Сделать ссылку красным цветом через 1б-ти ричную систе

Урок №3. Задание рамки

Задание №1

  • Добавить контейнер и внутрь него заголовок 1-го уровня.
  • Сделать пунктирную рамку у контейнера цветом #есесес толщиной в 2 пикселя.
  • Сделать сплошную рамку у заголовока 1-го уровня цветом #0а0а0а толщиной в 1 пиксель.

Урок №4. Задание фона

Задание №1

  • Задайте сплошной фон любого цвета на странице.

Задание №2.

  • Сделайте фон страницы с текстурой (приложена к диску).

Задание №3.

  • Добавьте 2 контейнера на страницу.
  • Через любой из типов селекторов сделайте один контейнер с красным фоном, а другой с фоном в виде текстуры.

Урок №5. Задание отступов и полей

Задание №1

  • Добавьте блок, внутри которого ещё один блок.
  • Внутри внутреннего блока добавьте абзац (тег <р>) текста.
  • Уберите отступы у тега <р>.
  • Добавьте поля со всех сторон у внешнего блока.
  • Добавьте поля у внутренного блока слева и справа по 20 пикселей, а сверху и снизу 10 по пикселей.

Урок №6. Плавающие блоки

Задание №1

  • Добавьте ненумерованный список с ссылками (Главная, 0 нас, Контакты).
  • Сделайте его вертикальным (а не горизонтальным как по умолчанию).
  • Поместите данный список в блок.
  • Выравняйте блок по центру экрана.

Примечание: Задача очень хорошая, поскольку взята из практики. Очень часто верхнее меню делается с помощью списков, элементы которых сделаны "плавающими".

Урок №7. Выравнивание

Задание №1

  • Добавьте блок, внутри которого сделайте таблицу (2 на 2).
  • В каждую ячейку добавьте ссылку.
  • Выравняйте содержимое ячеек по центру.
  • У любых двух ячеек сделайте выравнивание по низу, а у других двух по верху.

Примечание: Как и раньше, можете использовать абсолютно любые типы селекторов.

Урок №8. Некоторые псевдоэлементы

Задание №1

  • Добавить 2 ссылки и один абзац текста на страницу.
  • Сделать цвет посещённых и непосещённых ссылок зелёным цветом.
  • Убрать подчёркивание у ссылок.
  • При наведении курсора мыши на ссылку делать их красным цветом и размеров в 2 раза больше базового.
  • У абзаца сделать первую букву размеров в 3 раза больше базового и жирным начертанием.

Раздел №6. Блочная вёрстка

Урок №1. Знакомство с шаблоном

Задание №1

  • Ознакомьтесь с Вашим шаблоном для вёрстки.
  • Продумайте структуру.

Урок №2. Подготовка к вёрстке

Задание №1

  • Создайте все необходимые файлы и папки.
  • Напишите основные HTML-теги.
  • Подключите файл стилей.

Урок №3. Шапка и фон

Задание №1

  • Сделайте градиент.
  • Добавьте шапку сайта и верхнее

Урок №4. Центральная часть сайта

Задание №1

  • Сделайте центральную часть сайта (от шапки до подвала).

Урок №5. Подвал

Задание №1

Сделайте нижнее меню.

  • Выведите копирайты.

Урок №6. Кроссбраузерность

Задание №1

  • Добейтесь адекватного отображения во всех необходимых браузерах.

Урок №7. Адаптация под разные разрешения экрана

Задание №1

  • Добейтесь того, чтобы страница хорошо отображалась на ширине 1024 пикселя и больше.

Урок №8. Проверка валидности

Задание №1

  • Проверьте валидность, и если есть ошибки, то исправьте их.

Раздел №7. Вёрстка реального сайта

Урок №1.Знакомство с шаблоном

Задание №1

Ознакомьтесь с шаблоном.

Мысленно обдумайте, как будете верстать эту страницу (какие блоки, какие таблицы, где они будут находиться и так далее).

Урок №2. Нарезаем шаблон

Задание №1

  • Вырезать все картинки, которые Вам потребуются.

Примечание: 99.9% того, что Вы вырежите не всё, и это совершенно нормально. Впоследствие Вы будете нарезать ещё, но чем больше картинок Вы сделаете уже сейчас, тем больше времени сэкономите потом.

Урок №3. Голова документа

Задание №1

  • Создайте необходимые файлы и папки.
  • Напишите основные HTML-теги.
  • Подключите файл стилей.

Урок №4. Добавление логотипа и контактов

Задание №1

  • Выведите логотип сайта.
  • Выведите набор ссылок сверху.
  • Выведите форму поиска.

Урок №5. Верхнее меню

Задание №1

  • Выведите верхнее меню.

Урок №6. Шапка сайта

Урок №7. Меню и форма поиска

Урок №8. Таблица с товарами

Задание №1

  • Сделайте фон центральной части страницы как в дизайне.
  • Выведите центральную часть страницы.

Урок №9. Нумерация страниц

Задание №1

  • Сделайте блок с нумерацией страниц.

Урок №10. Подвал

Задание №1

  • Выведите подвал (все блоки, ссылки и копирайты).

Урок №11. Кроссбраузерность

Задание №1

  • Посмотрите на свой сайт в основных браузерах.
  • Определитесь, в каких браузерах возникают проб
  • Подумайте, как эти проблемы можно решить.

Урок №12. Адаптация под IE8, IE7 и IE6

Задание №1

  • Адаптируйте свою страницу под все основные браузеры так, чтобы она везде смотрелась адекватно.

Урок №13. Проверка сайта под разными разрешениями

Задание №1

  • Адаптируйте свою страницу под ширину экрана в 1024 пикселя.

Урок №14. Проверка валидности

Задание №1

  • Проверьте валидность.

Примечание: Если будут какие-нибудь ошибки, то исправьте их, и обязательно ещё раз проверьте, всё ли хорошо во всех браузерах при ширине 1024 пикселя и больше.

Раздел №8. Заключение

  • Подводим итоги
  • Собственно заключение...

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


Защитный код
Обновить