Jump to content

Blogs

Реклама

HTMLforum.io — крупнейшее сообщество по HTML вёрстке в СНГ. Целевая аудитория Front-end специалисты, возраст 18-34 лет из России, Украины, Республики Беларусь и стран СНГ. Почему с нами выгодно? Целевая аудитория в одном месте для Вашей рекламной кампании по обучению (онлайн-курсов, мастер-класов, семинаров, тренингов), предоставлению услуг (дизайн, шаблоны, хостинг, создание и продвижение сайтов) и поиску персонала. Виды рекламы Требования к размещающим баннерам

klierik

klierik

Вёрстка сайта под ключ

Наши услуги Пишем для Вас адаптивную и кроссбраузерную вёрстку сайтов любой сложности, из вашего PSD-макета или Sketch-дизайна Доработаем существующую вёрстку и будем поддерживать Ваш проект Напишем и будем поддерживать тему для интернет-магазина на базе Magento 1/2 CMS Этапы разработки и менеджмент Подготовительный этап Изучение Ваших макетов и оценка объёма работ согласно ТЗ (если отсутствует мы поможем его сформировать) Создание этапов разраб

klierik

klierik

Обсуждение работ — аудит Вашей вёрстки онлайн

Делаю аудит вашей работы: указываю на ошибки, даю практический рекомендации и делюсь решениями проверенные опытом. Обращаю Ваше внимание на неочевидные потенциальные проблемы, делюсь своим многолетним опытом, раскладываю по полочкам как работает вёрстка и как её грамотно писать. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (если выкладыв

klierik

klierik

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

Magento2 — прячем автоматически системные уведомления через заданное время

Привет, друзья. Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2. Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Mage

klierik

klierik

Установка Magento2 CMS с помощью Vagrant (VirtualBox/VmWare Fusion)

Привет, друзья. Дебютная статья Блога — Как установить Magento Community Edition 2.0 на локальный компьютер используя Vagrant? О чём статья и кому она будет интересна под спойлером.   1. Среда установки. 1.1 Технические характеристики В качестве "железа" использовался MacBook Pro (Retina, 15-inch, Mid 2015) ОС: macOS Sierra v10.12.2 Процессор: 2.5 GHz Intel Core i7 Память: 16 GB 1600 MHz DDR3 Для виртуальной машины будет выд

klierik

klierik

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

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

    • А как вы пишете, если не понимаете, что проиходит?  Подобные вещи лучше в песочницах кода размещать. 
    • Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.   Код HTML: <!DOCTYPE html> <html lang="ru">   <head>     <meta charset="utf-8">     <title>Иконы</title>     <link rel="stylesheet" href="style.css">   </head>   <body>             <div class="open-button">           <button onclick="openForm()">Открыть форму</button>     </div>     <div class="form-popup" id="IconForm">           <form class="form-container">                <h1>Параметры иконы</h1>             <label for="bordercolor"><b>Цвет границы</b></label>             <select id='select_bc' size='1'>                 <option value='#000'>Чёрный</option>                 <option value='#00f'>Синий</option>                 <option value='#f00'>Красный</option>                 <option value='#0f0'>Зелёный</option>             </select>             <p></p>             <label for="background"><b>Цвет фигуры</b></label>             <select id='select_bg' size='1'>                 <option value='#fff'>Белый</option>                 <option value='#bbf'>Синий</option>                 <option value='#fbb'>Красный</option>                 <option value='#bfb'>Зелёный</option>             </select>             <p></p>             <label for="fontcolor"><b>Цвет текста</b></label>             <select id='select_fc' size='1'>                 <option value='#000'>Чёрный</option>                 <option value='#00f'>Синий</option>                 <option value='#f00'>Красный</option>                 <option value='#0f0'>Зелёный</option>             </select>             <p></p>             <label for="text"><b>Содержание фигуры</b></label>             <textarea id="text_in" cols="20" rows="3"></textarea>             <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>             <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>           </form>     </div>     <div id="Draw"></div>          <script type="text/javascript" src="script.js"></script>   </body> </html> CSS: {box-sizing: border-box;} /* Кнопка, используемая для открытия формы */ .open-button {   background-color: #555;   color: white;   padding: 16px 20px;   border: none;   cursor: pointer;   opacity: 0.8;   position: fixed;   width: 280px; } /* Всплывающая форма-скрыта по умолчанию */ .form-popup {   display: none;   position: fixed;   border: 3px solid #f1f1f1;   z-index: 9; } /* Добавить стили для контейнера формы */ .form-container {   max-width: 300px;   padding: 10px;   background-color: white; } /* Поля ввода полной ширины */ .form-container input[type=text], .form-container input[type=password] {   width: 100%;   padding: 15px;   margin: 5px 0 22px 0;   border: none;   background: #f1f1f1; } /* Когда входы получают фокус, сделайте что-нибудь */ .form-container input[type=text]:focus, .form-container input[type=password]:focus {   background-color: #ddd;   outline: none; } /* Стиль для кнопок */ .form-container .btn {   background-color: green;   color: white;   padding: 16px 20px;   border: none;   cursor: pointer;   width: 100%;   margin-bottom:10px;   opacity: 0.85; } /* Красный цвет фона для кнопки "Отмена" */ .form-container .cancel {   background-color: red; } /* Добавить некоторые эффекты наведения на кнопки */ .form-container .btn:hover, .open-button:hover {   opacity: 1; }   JS: function openForm() {   document.getElementById("IconForm").style.display = "block"; } function closeForm() {   document.getElementById("IconForm").style.display = "none";   return false; } function drawIcon(bc, bg, fc, text) {   var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';   svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';   svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";      svg += text + "</text></svg>";   alert(svg);   document.getElementById('Dragon').innerHTML += svg;   return true; } function acceptArgs() {   var bc = document.getElementById("select_bc");   bc = bc.options[bc.selectedIndex].value;   var bg = document.getElementById("select_bg");   bg = bg.options[bg.selectedIndex].value;   var fc = document.getElementById("select_fc");   fc = fc.options[fc.selectedIndex].value;   var text = document.getElementById("text_in").value;   closeForm();   drawIcon(bc, bg, fc, text);    }
    • Друзья, остался последний день действия акции BLACKFRIDAY, которая включает скидку 50% на все VPS сервера с периодом заказа от 1 до 12 месяцев😀Промо-код BLACKFRIDAY2711Действует на тарифы VPS SSD (https://serfstack.com/services/vps-server) и антикризисные VPS SAS (https://serfstack.com/services/vps-server/sas).Спешите!
  • Popular Contributors

    Nobody has received reputation this week.

  • Current Donation Goals

×
×
  • Create New...