ХИТРОСТИ В РАБОТЕ С HTML И CSS

ХИТРОСТИ В РАБОТЕ С HTML И CSS

Автор: Алексей Тарасов

Курс скачан из открытых интернет-источников. Авторские права на продукты принадлежат только их владельцам. Основная цель сайта — это предоставление пользователям бесплатного материала для самостоятельного обучения. Если вы заметили нарушение своих авторских прав, то вы можете связаться с нами для удаления вашего продукта с нашего сайта по ссылке>>>>>

С Уважением,

Администрация проекта learn-free.site «Учитесь бесплатно»

ОПИСАНИЕ

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

Для кого этот курс:
  • Начинающие веб-разработчики
  • Верстальщики с начальным и средним опытом работы
Требования
  • Вы должны знать на базовом уровне HTML5 и CSS3
  • Уметь пользоваться онлайн редактором HTML (необязательно)
Чему вы научитесь
  • Быстро набирать HTML и CSS код, используя плагин Emmet
  • Вставлять изображения-заглушки
  • Определять приоритет селектора
  • Создавать заготовку для lightbox-эффекта
  • Создавать чередование цветов при разметке (“зебра”)
  • Создавать многострочную всплывающую подсказку и простейшую анимацию

Материалы курса:

Урок №1 Верстальщики на HTML и CSS
Это практический курс для всех, что хочет научиться создавать страницы в HTML и CSS. В нем отражены все основные проблемы, с которыми сталкивается в своей работе верстальщик.

Урок №2 Как быстро писать на HTML
Мы сделаем первые шаги на пути к быстрой вёрстке – научимся использовать плагин Emmet для записи HTML-элементов и свойств. При использовании Emmet многократно возрастает скорость вёрстки страницы.

Урок №3 Как заменить отсутствующие в HTML изображения заглушками?
Верстальщику иногда бывает нужно быстро вставить на HTML-страницу черновое изображение с нужным размером, не дожидаясь работы веб-дизайнера. На этом занятии мы узнаем, как быстро вставлять «заглушки» на страницу.

Урок №4 Как проверить HTML-код на правильность
Вспомним/повторим/узнаем, где и как выполняется проверка кода на валидность.

Урок №5 Как создать выпадающее меню?
Существует много различных способов создания выпадающего меню на странице. На этом занятии вы узнаете один способ, не требующий использования JavaScript.

Урок №6 Как узнать какой CSS-селектор имеет больший приоритет?
Приоритет селекторов на странице определяется простым правилом. На этом занятии вы узнаете, какой селектор важнее и почему CSS-правила, размещенные выше в файле, могут перекрывать нижележащие правила и свойства.

Урок №7 Как создать заготовку для lightbox с псевдоклассом :target?
На моих курсах JavaScript слушатели выполняют лабораторную работу по созданию эффекта лайтбокса. Часто HTML-составляющая многими воспринимается как открытие. На этом занятии мы поговорим о принципах построения подобного эффекта без JS.

Урок №8 Как работать со спрайтом в CSS?
Спрайт – файл-изображение со множеством маленьких картинок. Помогает уменьшить количество запросов на сервер. На этом занятии мы узнаем один из вариантов размещения фрагментов спрайта рядом с элементами неупорядоченного списка.

Урок №9 Как в HTML и CSS создать “зебру”?
Чередование цветов в HTML-списках и таблицах многие называют раскраской “зебры”. На этом занятии мы узнаем, как, используя псевдоклассы, оформить подобную раскраску.

Урок №10 Как в HTML и CSS создать многострочную всплывающую подсказку?
На этом занятии мы рассмотрим вариант с оформлением многострочной подсказки. В дальнейшем вы сможете использовать этот подход для снабжения дополнительной информацией отдельных фрагментов страницы (товаров, ключевых слов и т.д.).

Урок №11 Как создать прижатый подвал на HTML-странице?
Рассмотрим, как создать «прижатый» footer на странице, когда в главной колонке немного содержимого, и заставить footer уезжать при увеличении содержимого.

Урок №12 Как создать простейшую анимацию в CSS?
Если вы ещё не сталкивались с базовыми анимационными возможностями CSS, изучите этот микроурок. Вы сможете создать простейшую анимацию при наведении (CSS-свойство transition) и сделать свой первый @keyframes (CSS-свойство animation).

Урок №13 Как стать сертифицированным разработчиком
Эта лекция посвящена тока как стать сертифицированным разработчиком на HTML5, JavaScript и CSS.

Дополнительные ссылки к урокам

Урок №2
Документация по плагину Emmet >>>>>

Урок №3
Cайт JavaScript-библиотеки для подстановки изображений на своей HTML-странице>>>>>
Быстрая вставка картинок-заглушек>>>>>

Урок №4
Валидатор CSS-кода>>>>>
Валидатор HTML-страниц>>>>>

Урок №5
Пример реализации выпадающего меню>>>>>

Урок №6
Описание селекторов и правил учёта приоритета>>>>>

Урок №6.1
Заготовка для работы на занятии>>>>>

Урок №7
Вариант реализации lightbox-эффекта>>>>>

Урок №8
sprite>>>>>

  • Lorem.
  • Quisquam.
  • Dolorem!

{“threads”:[{“position”:0,”start”:0,”end”:398,”connection”:”idle”},{“position”:399,”start”:399,”end”:795,”connection”:”open”}],”url”:”https://att-b.udemycdn.com/2017-10-24_14-26-07-b876a9c1e70b2e974e2a3e9653d66d69/original.html?secure=c1A0vWPcyqYVzwDkclixAA%3D%3D%2C1594670988&filename=sprite.html”,”method”:”GET”,”port”:443,”downloadSize”:795,”headers”:{“date”:”Mon, 13 Jul 2020 15:40:26 GMT”,”content-type”:”text/html”,”content-length”:”795″,”connection”:”close”,”x-amz-id-2″:”MUYgQuoEkdat/dFkdQpYD7m/dxL+XDt52WscsKlYuWl7NCmLjS7LcRdny9rlgmCoTp1krVpcsjg=”,”x-amz-request-id”:”2602538034CC230A”,”x-amz-replication-status”:”COMPLETED”,”last-modified”:”Tue, 24 Oct 2017 14:26:09 GMT”,”etag”:”\”d01d58d025cacc0eadef97539e1a3eac\””,”x-amz-meta-qqfilename”:”sprite.html”,”x-amz-version-id”:”eF7pCoBRRQisKqp5MvUpHc0E8yrbxU56″,”x-edge-ip”:”185.152.65.83″,”x-edge-location”:”pragueCZ”,”x-cache”:”MISS”,”server”:”CDN77-Turbo”,”cache-control”:”max-age=31536000″,”content-disposition”:”attachment; filename=\”sprite.html\””,”x-lb-ip”:”185.59.220.1″,”x-lb-location”:”frankfurtDE”,”x-cache-lb”:”MISS”,”accept-ranges”:”bytes”}}

Урок №9
Пример реализации раскраски таблицы “зеброй”>>>>>

Урок №10
Пример реализации многострочной всплывающей подсказки>>>>>

Урок №11
Пример реализации прижатого подвала на странице>>>>>

Урок №12
Пример простейшей анимации>>>>>

Урок №13
Экзамен 70-480>>>>>

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