1. Новые складчины: Показать еще

    21.01.2021: Нейрографика. Алгоритм счастья и качество жизни (Павел Пискарев)

    21.01.2021: [Targetorium] Специалист по рекламе в Facebook & Instagram. «Стандарт» (Павел Антонов-Влад Ясько)

    21.01.2021: [Галия] Генетика кроя (Галия Злачевская)

    21.01.2021: [Умный инвестор] Настоящий трейдинг. Тариф Базовый+VSA (Артем Звездин)

    21.01.2021: [Центр Практика] Библиотека мастер-классов 2020 (Елена Волкова, Александра Кибзий)

  2. Нужен организатор: Показать еще

    21.01.2021: Повышенная значимость (Анжелика Артемьева)

    19.01.2021: Немецкий язык с А2 до В1 за 3 месяца (Женя Шестухина)

    18.01.2021: Организатор марафонов, 1 поток. Тариф В кругу своих (Наталья Грецкая)

    17.01.2021: [Авторская складчина] Авторская вилочная система заработка без потерь!

    17.01.2021: Цифровой релиз Blueprint. Стратегии музыкального маркетинга на 2021 (Benjamin Groff)

  3. Сбор взносов Показать еще

    21.01.2021: Фриланс: рискнуть и остаться (Анна Бонецкая)

    21.01.2021: Особая флористика. Свадебные букеты. Самостоятельно (Ольга Снегова)

    21.01.2021: [Golden Charm] 4 стихии колоды Таро. Тариф Bronze

    21.01.2021: Авторский гайд для знакомства с мужчинами в США (Diana Norrid)

    21.01.2021: Univer 7. Тариф - Бизнес (Максим Добрый)

Новые складчины Нужен организатор Сборы взносов
Доступно

[WebForMySelf] Практика верстки под мобильные устройства

Тема в разделе "Курсы по программированию", создана пользователем Malefisenta, 25 мар 2014.

Хештеги:
Цена:
4800 руб
Взнос:
261 руб
Организатор:
Malefisenta

Список участников складчины:

1. Malefisenta
2. 1111_МАРИЯ 3. Serjdiz 4. Young mo 5. dmdesign 6. leo904 7. Gelena 8. Автолюбитель 9. jack-908 10. andreyzz 11. Haosknight
Записаться
Оцените эту складчину: /5,
  1. Malefisenta
    Malefisenta Организатор складчин

    [WebForMySelf] Практика верстки под мобильные устройства

    ПРАКТИКА ВЕРСТКИ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

    [​IMG]

    Описание разделов курса
    ​
    Раздел 1. Верстка макета APPIX
    Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса мы с вами
    из исходника дизайна в формате PSD с нуля сверстаем данный макет

    При верстке макета APPIX мы рассмотрим практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.
    1. Как максимально эффективно исследовать PSD-макет сайта.
    2. Как определить подходящую разметку страницы.
    3. Как эффективно использовать медиа-запросы.
    4. Как адаптивно работать с изображениями.
    5. Как вместить широкое меню в узкий экран смартфона.
    6. Как эффективно использовать позиционирование для адаптивных сайтов.
    7. Узнаете тонкости поведения плавающих блоков и свойства float.
    8. Как использовать свойство float для адаптивных сайтов.
    9. Как определить и вырезать необходимые изображения.
    10. Как описать, казалось бы, табличную структуру блоками.
    11. Как выравнивать элементы для адаптивной верстки.
    12. Как эффективно задавать отступы для адаптивных сайтов.
    13. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
    14. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
    15. Как, используя firebug, найти нужные стили и изменить их.
    16. Как эффективно использовать псевдо-классы.
    17. Как скруглить углы для изображений, используя CSS 3.
    18. Как избежать схлопывания границ блока.

    Раздел 2. Верстка макета CREATIVE+:
    Во втором блоке курса мы будем работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру.

    В рамках данного блока курса мы сделаем адаптивную верстку макета CREATIVE+. Верстку будем делать адаптивную и в тоже время резиновую. Это позволит нам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.
    1. Как максимально эффективно исследовать PSD макет сайта.
    2. Как определить подходящую разметку страницы.
    3. Как эффективно использовать медиа запросы.
    4. Как адаптивно работать с изображениями.
    5. Как назначать широкие фоновые изображения для адаптивных сайтов.
    6. Как вместить широкое меню в узкий экран смартфона.
    7. Как эффективно использовать позиционирование для адаптивных сайтов.
    8. Узнаете тонкости поведения плавающих блоков и свойства float.
    9. Как использовать свойство float для адаптивных сайтов.
    10. Как определить и вырезать необходимые изображения.
    11. Как выравнивать элементы для адаптивной верстки.
    12. Как эффективно задавать отступы для адаптивных сайтов.
    13. Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем.
    14. Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете.
    15. Как, используя firebug, найти нужные стили и изменить их.

    Раздел 3. Блок полезных уроков:
    Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, мы их рассмотрим отдельно в данном блоке курса.

    В третьей части курса мы улучшим и дополним созданные нами верстки. Рассмотрим дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
    1. Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать.
    2. Как установить галерею изображений и сделать ее адаптивной.
    3. Как установить видео и сделать его адаптивным.
    4. Как адаптивно работать с формами и почему это важно.
    5. Как адаптировать громоздкое меню под маленькие экраны.


    БОНУСЫ
    ​
    Бонус 1. Премиум-курс по CSS 3
    CSS3 — новейший стандарт веб-разработок, значительно расширяющий функциональные возможности языков веб-программирования и позволяющий реализовать оригинальные визуальные решения для ваших интернет-проектов.

    С помощью CSS3 вы сможете создавать такие привлекательные эффекты, как полупрозрачные фоны, градиенты и тени. Сможете использовать оригинальные шрифты, обычно не применяющиеся в Сети, а также внедрять на сайтах анимацию без использования Flash и JavaScript.

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

    2. Уникальные шрифты. Правило font-face позволяет создать ссылку на файл шрифта на сервере и использовать его для отображения текста на странице. Это позволяет не ограничиваться шрифтами, доступными на компьютере пользователей, и значительно упрощает красивое оформление текста.

    3. Переходы. Переходы CSS3 представляют собой простейший тип анимации, меняющий стиль элемента. Например, это может быть плавное изменение цвета кнопки в момент, когда над ней оказывается указатель мыши. Причем для этого не требуется ни Flash, ни JavaScript.

    4. Мощные селекторы. Спецификации CSS3 включают множество новых селекторов, в основном относящихся к псевдо-классам и атрибутам. Они позволяют обращаться к определенным фрагментам HTML-кода, не добавляя идентификаторы или классы, что упрощает код и защищает его от ошибок.

    5. Трансформации полей. Еще одна категория визуальных эффектов, ставших возможными с появлением CSS3. С ее помощью можно управлять положением и формой блока в двумерном и трехмерном пространствах — это поворот, масштабирование, наклон блока и т.д.

    Все это и многое другое вы узнаете и сможете применять на своих веб-сайтах, пройдя курс по CSS 3.


    Бонус 2. Уроки по работе в программе Dreamweaver
    Web-страницы можно создавать в любом текстовом редакторе. Даже обычного блокнота будет достаточно для создания web-страницы.

    Но есть программы, которые созданы специально, чтобы облегчить жизнь разработчику. Это программы, которые ускоряют и автоматизируют процесс создания web-страниц.

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

    Бонус 3. Сборник полезных инструментов веб-разработчика
    Если к первой группе можно отнести специализированные для web редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.

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

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


     
    Другие складчины раздела
    Последнее редактирование модератором: 7 июл 2019
    Malefisenta, 25 мар 2014
    2. Похожие складчины
    1. Zander
      Запись Продвинутая верстка и адаптация сайтов под мобильные устройства в Zero Block (Максим Ширко)
      Zander, 11 дек 2019, в разделе: Курсы по администрированию
    2. cosmos
      Доступно [WebForMySelf] Веб-дизайн + верстка (Денис Булыга, Даниил Волосатов)
      cosmos, 9 сен 2019, в разделе: Курсы по программированию
    3. Николай1122
      Доступно Фреймворк Bootstrap 4. Руководство по адаптивной верстке [WebForMySelf]
      Николай1122, 11 мар 2019, в разделе: Курсы по программированию
    Загрузка...
  2. adsl3008
    adsl3008 Складчик
    Ребят, вышел офигенный курс, от друга "WebForMySelf" вступайте!
     
    adsl3008, 27 июн 2019
Участники складчины [WebForMySelf] Практика верстки под мобильные устройства смогут написать отзыв
Наверх