Jump to content
  • Sign Up
  • entries
    8
  • comments
    0
  • views
    25,069

About this blog

Авторские статьи для обучения на тему современной Вёрстки (блог обновляеться по мере написания статей).
В статьях детально и последовательно рассказывается как создавать большие проекты, время разработки которых от 100-500 часов и больше. Тут можно подчерпнуть для себя как грамотно организовывать файловую систему и структуру кода, как создавать билдеры (с упором на высокую клиентскую оптимизацию), как анализировать макеты, создавать гибкую структуру блоков и лэйаутов, самодокументируемый, читабельный код и организированный код.

Entries in this blog

 

2.0 Типовые элементы — Вёрстка. Руководство верстальщика

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

klierik

klierik

 

1.6 Форматирование стилей. Руководство верстальщика

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

klierik

klierik

 

1.5 Организия ресурсов проекта и подключение Bootstrap. Руководство верстальщика

1.1 Конфигурирование темы проекта Ветка конфигуратора: $ git checkout 1.5-theme-config В данной статье речь идёт о создании структури стилей с гибкой конфигурацией, которая позволит выборочно импортировать модули фреймворка Bootstrap и применять к ним значения конфигурации проекта. 1.2 Организация структуры Ранее мы уже обсуждали организацию структуры проекта, но вскольз. Давайте размерём как организовать и подключить стили и скрипты. 1.2.1 Структура стилей Рассмо

klierik

klierik

 

1.4 Создание сборщика проекта. Руководство верстальщика

1.1 Основные требования к сборщику Сборщик проекта — это система, которая выполняет типовые задания автоматически, тем самым экономит время разработки проекта. Написанный нами сборщик (или билдер от англ. builder) должен стабильно работать в рамках проекта на протяжении всего его существования. Определимся со списком задач, которыми должден владеть сборщик: Иметь единый конфигурационный файл, в котором описываются настройки проекта и пакетов, которые участвуют в обработке ресурс

klierik

klierik

 

1.3 Среда разработки проекта. Руководство верстальщика

1 Технические требования к среде разработки Дорогой читатель, проект, который реализуется в рамках данного обучения, имеет определённые требования к среде разработки. Нам потребуется использовать препроцессоры, инструменты оптимизации и проверки кода. По мере того, как вес веб-страницы в реалиях соверменного мира растёт, в выиграше остаются те, у которых вес и скорость загрузки страниц меньше, чем у конкурентов. Мы создадим инструмент, который позволит "не лету" обрабатывать и оптимизи

klierik

klierik

 

1.2 Работа с учебным репозитарием. Руководство верстальщика

По мере выполнения тех или иных задач я делал коммиты в репо, специально созданный для обучения. Для навигации по выполненой работе я использовал ветки в Git. Для тех кто не знаком с Git я рекомендую начать от сюда: 1.5 Введение - Установка Git .1 Введение - О контроле версий Git: советы новичкам — часть 1 Git: советы новичкам — часть 2 Git: советы новичкам — часть 3 Вы можете выполнять задания по мере прохождения обучения и сверять выполнную Вами ра

klierik

klierik

 

1.1 Анализ макета. Руководство верстальщика

Вступление Первое с чем сталкивается верстальщик — макет. Для начала следует проанализировать layout, блоки и элементы макета, что бы оценить время, которое потребуется на его реализацию. Техническое задание Требуется сверстать макет дизайна сайта. В качестве основы использовать Bootstrap последней актуальной версии. Вёрстка должна поддерживать Responsive Web Design и корректно отображается в браузерах, версии которые поддерживает фреймворк. Сетку проекта так же следует испол

klierik

klierik

 

0. Предисловие. Руководство верстальщика

Для кого Данная серия статей нацелена на html разработчиков, которые владеют азами html разметки, умеют пользоваться CSS а так же владеют JS на базовом уровне. Конкретнее говоря аудитория, которой будет интересен данный материал, — это начинающие специалисты в сфере вёрстки, которые создают не сложные странички, используя язык гипертекстовой разметки (html) и каскадные таблицы стилей (CSS) с применением простых скриптов JavaScript (чаще всего jQuery). Разработчикам предлагается материа

klierik

klierik

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software development. На данный момент в команду требуются PHP developers (Junior & Senior) Requirements: — 3+ year of commercial experience; — Strong knowledge PHP 7+ — Framework knowledge — Conversational English — CSS, Json, HTML5 Будет плюсом: Shopify implementation expertise. Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Подскажите пожалуйста, как позиционировать элемент на всю видимую область окна браузера? Есть слайдер, в котором крутятся картинки, и есть скрипт, благодаря которому картинка увеличивается, но не могу понять относительно какого элемента он позиционируется. <div class="sl_slider"> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> </div> .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; } .popup_bg { background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100%; } .popup_img { position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; } В классе popub выводится и позиционируется изображение, но как можно прописать его позиционирование на видимую обасть браузера? Решил  position: fixed;  у классов .popub_bg и .popub_img и margin выровнять как нужно. Может кому пригодится. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...