Базовый курс для верстальщиков

Курс: «Базовый курс для верстальщиков». Материал от профессионалов веб-разработки. Если вы хотите освоить данную профессию — смело можете начинать с этого материала. Вы узнаете про основы, попрактикуетесь и сможете двигаться дальше. Отзывы хорошие. Данный материал рассчитан на новичков. Материал прислал анонимный пользователь без комментариев. 

Материал может быть удален по запросу правообладателя!

Описание курса:

Кому полезен этот курс:

  • Новичкам. Хочешь научиться самой востребованной интернет профессии? Обязательно приходи к нам.
  • Бэкендерам. Давно уже работаешь с серверной частью проектов, но хочешь научиться менять визуал сайтов? Тебе к нам!
  • Веб-дизайнерам. Давно рисуешь сайты, но хотел бы сам научиться верстать? Посети курс и на практике узнаешь как создаются сайты.
  • Маркетологам. Не хватает основ веб-разработки для продвижения сайтов? Мы поможем восполнить этот пробел.
  • SMMщикам. Работа SMM, как правило, неразрывна с поддержкой сайтов. Самое время изучить основы веб-разработки.
  • Предпринимателям. Сложно представить современный бизнес без сайта. Освой азы, чтобы общаться с разработчиками на одном языке.

Во время обучения мы верстаем сайт, который так или иначе будет связан с темами курса. Будет интересно!

По окончанию курса у Вас будет две сверстанные странички, которые будут храниться в личном профиле GitHub. Первая страничка — это вёрстка по учебному макету, вторая — по самостоятельно выбранному макету для закрепления всего материала.

Программа обучения:

Ознакомиться
  • Стартовая лекция:

— Разбор основ программы Adobe Photoshop;

— Работа с изображениями;

Домашнее задание.

  • Начало работы. Основы HTML:

— Подготовка проекта к верстке;

— Структура html-документа (html, head, body) ;

— Обзор популярных тегов HTML;

— Обзор семантических тегов HTML.

Домашнее задание.

  • Основы HTML:

— Идентификаторы и классы;

— Aтрибуты для input и textarea;

— Отличия между button и a;

— Ссылки для социальных сетей;

— Работа с почтой и скайпом;

— Работа с git.

Домашнее задание.

  • Подключение CSS, работа с текстом:

— Подключение CSS к документу HTML;

— Структура CSS-файлов;

— Способы подключения шрифтов на страницу;

— Форматирование текста при помощи CSS;

— Стили для работы со шрифтами;

— Разные типы записи цвета в CSS документе;

Домашнее задание.

  • Размещение объектов CSS:

— Селекторы, которые стоит знать и применять;

— Типы позиционирования элементов;

— Установка favicon на страницу.

Домашнее задание.

  • Стилизация элементов CSS:

— Стилизация ссылок и кнопок;

— Работа со списками;

— Работа с after и before;  

Домашнее задание.

  • Виды сеток CSS:

— Центрирование объектов в документе;

— Отступы padding и margin;

— Flexbox CSS;

— CSS Grid;

Домашнее задание.

  • Фон и изображения CSS:

— Цвет фона;

— Загрузка изображения через CSS;

— Повтор изображения;

— Создание градиента в CSS;

— Фильтры в CSS.

Домашнее задание.

  • Рамки и обводки CSS:

— Создание рамок CSS;

— Создание радиусов CSS;

— Создание теней;

— Создание внешних рамок CSS;

Домашнее задание.

  • Оживляем сайт с CSS:

— Переходы в CSS;

— Трансформации в CSS;

— Создание анимаций при помощи CSS3

Домашнее задание.

  • Адаптивность CSS:

— Проверка HTML и CSS на валидность;

— Медиа-запросы;

— Основные правила создания адаптивного сайта;

— Отличия резиновой верстки от адаптивной.

Домашнее задание.

  • Векторные изображения:

— Сохранение SVG-изображений в Illustrator;

— Создание SVG через теги;

— Base64;

— Cоздание паттернов SVG.

Домашнее задание.

  • Верстка email-писем:

— Правилам верстки email;

— Создание на примере;

— Сервисы, для выгрузки своего шаблона;

— Кроссбраузерная верстка.

Домашнее задание.

  • Основы jQuery:

— Библиотеки JavaScript;

— Добавление библиотеки jQuery на страницу;

— Основные селекторы;

— Фильтры jQuery;

— Отобразить и спрятать объект с jQuery.

Домашнее задание

  • Основы jQuery:

— Обзор плагина jQuery UI;

— События наведения и смещения указателя мыши;

— Распространенные задачи, решаемые с помощью jQuery.

Домашнее задание.

  • Популярные плагины для работы:

— Слайдеры;

— Галерея изображений.

Домашнее задание.

  • CSS-препроцессоры:

— Подробный обзор SASS;

— Краткий обзор LESS;

— Краткий обзор Stylus;

— Какой препроцессор выбрать для работы?

Домашнее задание.

  • Создание сайта на бесплатном хостинге Github:

— Краткое описание систем контроля версий. Для чего они нужны?

— Регистрация на сайте Github;

— Создание репозитория;

— Наполнение репозитория файлами.

Домашнее задание.

  • CSS-фреймворки:

— Что такое CSS-фреймворки?

— Какие CSS-фреймворки существуют на сегодняшний день?

— Bootstrap: какую версию выбрать?

— Обзор элементов Bootstrap.

Домашнее задание.

  • Актуальные темы:

— Как найти свой первый заказ или устроиться на работу, если ты новичок;

— Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;

— Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами;

— Список актуальных фриланс-бирж.

Если Вы не видите ссылку для скачивания материала — отключите блокиратор рекламы и добавьте наш сайт в список исключений. Если Вы против рекламы на нашем сайте — покупайте контент напрямую у авторов.

Материал предоставлен исключительно для ознакомления!

Опубликовано: Анонимно

Май 7, 2019


FavoriteLoadingДобавить в закладки

Всего комментариев: 5

  • Ответить

    Arkh3m

    Май 7, 2019 в 23:00

    Продвинутый будет?)

    (0)

    • Ответить

      openssource

      Май 8, 2019 в 02:47

      Да, позже.

      (2)

      • Ответить

        _Andre_

        Май 12, 2019 в 01:31

        А когда будет продвинутый???

        (0)

        • Ответить

          openssource

          Май 12, 2019 в 02:10

          Думаю, что скоро.

          (1)

  • Ответить

    zikzak2012

    Август 12, 2019 в 20:18

    перезалейте ;-)

    (0)

Оставить комментарий


* - обязательное поле для заполнения.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Уведомлять меня при ответах на мои комментарии



Нужно продвинуть ваш бизнес/группу/встречу во Вконтакте? Попробуй BotsApp!

Возможности сервиса:

Скачай бесплатно!