Веб-разработка для новичков. День 3

Василика Климова

Вёрстка и
какая она бывает

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 3

Семантическая верстка

Подход использования тегов согласно их назначению

<em>, <strong> - смысловое выделение текста
<i>, <b> - просто оформление текста

Семантическая верстка. Плюсы

Подходы к веб разработке

Изящная деградация

Представление урезанной функциональности для пользователей старых браузеров
Возможен полный отказ от поддержки старых браузеров

Изящная деградация

Плюсы Минусы

Прогрессивное улучшение

Предоставление базового функционала для всех типов пользователей

Прогрессивное улучшение

Плюсы Минусы

Сначала мобильные

Проектирование сайта начиная с мобильной версии
Затем разработка и дополнение для широких экранов

Когда использовать подход?

Если есть достаточный процент пользователей с мобильных устройств

Хостинг

Git Pages

Version Control System

Git

Install Git

Команды

GIT. Скачиваем проект

git clone git@myproject.git
cd myproject - переход в папку проекта

GIT. Настройка

git config --global user.name "MyName"
git config --global user.email myemail@example.com

GIT. Записываем изменения

git add . - добавляем все файлы
git сommit -am 'My first commit' - делаем слепок проекта
git push - отправляем изменения на Github

CSS

Свойства CSS

color
background
font-size
text-align
...

Каскадная таблица стилей

      p {
        color: #000;
        background: #fff;
      }
    

Отличия margin от padding

Селекторы CSS

#id
.class
div
div > a - все элементы <a>, у которых родитель <div>
a:hover - наведение на элемент <a>
...

Схематичный макет сайта

Практическая часть

Универсальные атрибуты

id
class
title
style
...

Практическая часть

Полезные ссылки

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github