Рекомендованные сообщения

splat.jpg

Техническое задание.
 
Базовые требования
Платформы: Windows, Mac OS X.
 
Браузеры

  • IE8 и выше
  • Chrome последние 2 версии
  • Firefox последнии 2 версии
  • Opera последнии 2 версии (на базе движка Blink)
  • Safari последнии 2 версии

В качестве эталонного браузера использовать Chrome или Firefox.
Это значит что в одном из них вёрстка должна как можно точнее соотвествовать макету, в остальных не должно быть визуальных отличий.
 
Соответствие макету
Вёрстка должна 1:1 соответстввовать дизайну, но допускаются незначительные различия. Данные различия, как правило, возникают из-за шрифтов или при использовании технологии адаптивной разметки. В помощь прийдет инструмет PixelPerfect -- расширение для браузера.
 
Отдельно отмечу что верстка должна быть написана в лучших традисиях graceful degradation. Т.е. всё современные фишки оформления должны быть выполнены средствами CSS. Браузеры которые не поддерживают CSS3 или некторые его свойства должны корректно рендерить страницу без них.
 
Стандарты
HTML5/CSS3. HTML - должен проходить валидацию. CSS - не обязательно.
 
В кажестве исходного кода для CSS использовать препроцессор LESS или SASS.
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 
Сброс стилей
В качестве сброса стилей браузера использовать Normalize.css.
 
Javascript:
За основу взять фреймворк jQuery версии 1.11.х или 2.x.x.
Для поддержки HTML5 тегов в IE можно использовать код:
 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

 
Допускается применение modernizr если потребуется.
 
Ширина сайта
Стандартная ширина сайта - 960px.
 
Grid
За основу взять любой распрастранненый инструмет для построения макета, например 960.gs или Bootstrap Grid System (требуются знания фреймворка)
 
Изменение/наполнение контентом
Блоки могут и будут содержать иной контент, отличный от того что в макете. Контент может занимать как больше так и меньше пространства. При вёрстке следует это учесть что бы в будущем макет не "поехал".
 
Особености макета
1. Шапка
1.1. Меню - Все как видно так и делать. Пунктов меню может быть больше -- это один список который выводится в 2 столбца. Текст пункта меню может быть длинее и распологатся в 2 строки. Обратить внимание на высоту строки в этом блоке, так как пункт в 2 строки будет выглядеть плотнее.
1.2. Учесть, что под ссылкой "Мы на Facebook" появятся в будущем еще несоклько аналогичных ссылок.
1.3. Возможно добавится пару языков.
1.4. Поле поиска
1.4.1. В поле поиска добавить placeholder с текстом "Искать...".
1.4.2. Поле поиска изначально должно быть на 1/3 меньше шириной. Поле прилегает к правому краю.
1.4.3. При клике на поле, средствами CSS оно должно растянутся на ширину, указанную на макете.
 
2. Слайдер в 4 колонки.
Слайдер состоит из 4х колонок в слайде. Прокрутка осуществляется при помощи ползунка под ним.
Требуется поддержка для touch-устройств для прокрутки контента.
 
3. Промо-слайдер
3.1. Табы слайдера -- первый и последний "затухают"с градиентом. Активный - крассный. На макете первый затухающий пункт меню содержит ошибку: градиент должен быть от светло-серого в прочрасный, слева на право (для последнего наоборот)
3.2. Кол-во слайдов может быть больше или меньше, чем на макете.
3.3. С прокруткой каждого слайда так же должны прокручиватся Табы (анимация при этом не обязательна).
3.4. В случае, если размер экрана меньше чем ширина макета, стрелка Предыдущий/Следующий слайд должны быть внутри области слайдера.
3.5. Кнопку управления слайдера должны поддерживать состояние "disabled". В случае если прокрутка далее/назад невозможна, стрелка должна быть не-активной. Визуально достаточно будет применить прозрачность 50% к кнопке.
3.6. Слайдер не влияет на 4 колонки под ним.

4. Контент
4.1. Меню слева. Пукты меню могут быть в несколько строк длиной.
4.2. Центральная колонка
4.2.1. Тут ничего особенного, фотография и статья, набранная контент-менеджером.

5. Футер
5.1. 3 колонки разибы по ширине области. Слева меню может наполнятся. Справа какой-то текст. По-центру виджет от Facebook.
5.2. Оступ снижу дл футера сделать высотой 20px.

Дополнительно
Кнопка "Отправить письмо", справа от макет -- закреплена всегда на одно расстоянии от верха.

WYSIWYG
Хочу обратить внимание на то что контент будет набиратся контент-менеджером, который не имеет соотвествующих знаний и навыков в работе с разметкой, а использует только окно редактора и инструменты которые он содержит. Соотвественно весь контент который визуально отвечает таким критериям (статьи, информационные блоки), должен "уметь" корректно выводить результат набранный контент-менеджером в редакторе. В качестве примера такого редактора можно взять TinyMCE
 
Масштабирование страниц
Поддержка не обязательна. Пользователь сам на себя берет отвественность за результат отображения страницы применяя к ней любые инструменты которые влияют на её изменение.
Если есть желание все таки учесть поддержку масштабируемости, то советую почитать про Эластичные шаблоны, а так же опосля ознакомится с "rem"
 
HTML код

  • Кодировка – utf-8
  • Структурный, не комментируемый код
  • Семантическая разметка на уровне грамотного использования тегов.
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.

LESS/SASS код

  • Структурный, отбивка табами.
  • Комментариями обозначены начало/конец крупных модулей/блоков разметки.
  • Допускается использование вендорных префиксов.
  • Стили для IE вынесены в отдельные CSS файлы, если они потребуются.
  • Для реализации в IE не поддерживаемых CSS свойств использование javascript хаков, или каких либо других интсрументов, запрещено (выше уже упоминалось про graceful degradation)

Перед тем как приступить к работе настоятельно рекомендую ознакомится с темой Типичные ошибки начинающего верстальщика
 
Javascript код

  • Структурный, отбивка табами.
  • Имена переменных осмысленные, на усмотрение разработчика.
  • Снабжен комментариями: описаны назначения
    • методов/классов
    • функций
    • условий.
  • Для объемных задач используется ООП, для простых – обычные функции.
  • Код должен быть без ошибок.
  • При использовании Ajax и не предоставления заказчиком api для взаимодействия с серверной частью, api создается на усмотрение разработчика.

Изображения

  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") и ImageOptim (OSX) или OptiPNG (Windows)
  • Малые изображения и иконки объеденить в спрайты.
    • Для полноцветных RGBA картинок можно использовать инструмент Stitches
    • Для векторных изображений иожно использовать IcoMoon

Организация структуры файлов и папок

  • HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
  • Стили в папке - /css/
  • SASS/LESS в соответствующей папке - /sass/ или /less/
  • Javascript - /js/
  • Изображения оформления - /images/
  • Изображения содержания - /thumbs/ или /pic/
  • Шрифты - /fonts/

Наглядный пример
 
Краткий вариант - только директории:
 

Скрытый текст

.├── project
│   ├── css
│   ├── images
│   │   ├── carousel
│   │   ├── gallery
│   │   ├── icons
│   │   │   └── src
│   │   ├── ie
│   │   ├── loader
│   │   ├── table
│   │   └── title
│   ├── js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   └── typeahead
│   │   └── scripts
│   ├── less
└───└── thumbs

 


 
Полный вариант -- директории и файлов:
 

Скрытый текст

.├── project
│   ├── 10.html
│   ├── 11.html
│   ├── 3.html
│   ├── 4.html
│   ├── 5.html
│   ├── 6_1.html
│   ├── 6_2.html
│   ├── 7_1.html
│   ├── 8.html
│   ├── 9.html
│   ├── css
│   │   ├── project.css
│   │   ├── project.ie8.css
│   │   └── project.min.css
│   ├── images
│   │   ├── carousel
│   │   │   ├── control_left.png
│   │   │   └── control_right.png
│   │   ├── gallery
│   │   │   ├── control_corner_next.png
│   │   │   └── control_corner_prev.png
│   │   ├── icons
│   │   │   ├── Readme.txt
│   │   │   ├── spritesheet.png
│   │   │   ├── src
│   │   │   │   ├── bank_atm.png
│   │   │   │   ├── bank_office.png
│   │   │   │   ├── close.png
│   │   │   │   ├── social_fb.png
│   │   │   │   ├── social_gplus.png
│   │   │   │   ├── social_li.png
│   │   │   │   ├── social_mail.png
│   │   │   │   ├── social_pin.png
│   │   │   │   ├── social_rss.png
│   │   │   │   ├── social_tw.png
│   │   │   │   └── tags.png
│   │   │   ├── stitches.txt
│   │   │   └── stylesheet.less
│   │   ├── ie
│   │   │   └── caption-bg.png
│   │   ├── loader
│   │   │   ├── ajax-loader.gif
│   │   │   └── ie.png
│   │   ├── logo.png
│   │   ├── table
│   │   │   ├── sort-asc.png
│   │   │   └── sort-dsc.png│
│   └── title
│   │   └── credits.png
│   ├── index.html
│   ├── js
│   │   ├── jquery-1.10.2.min.map
│   │   ├── jquery.min.js
│   │   ├── plugins
│   │   │   ├── jcarousel
│   │   │   │   ├── jquery.jcarousel-autoscroll.min.js
│   │   │   │   ├── jquery.jcarousel-control.min.js
│   │   │   │   └── jquery.jcarousel-core.min.js
│   │   │   └── typeahead
│   │   │   ├── countries.json
│   │   │   ├── typeahead.js.zip
│   │   │   └── typeahead.min.js
│   │   └── scripts
│   │   ├── project_navigation.js
│   │   └── project_scroll_gallery.js
│   ├── less
│   │   ├── block.less
│   │   ├── breadcrumbs.less
│   │   ├── buttons.less
│   │   ├── carousel.less
│   │   ├── close.less
│   │   ├── dropdown.less
│   │   ├── forms.less
│   │   ├── project.less
│   │   ├── icon.less
│   │   ├── jquery.jcarousel.less
│   │   ├── jquery.typeahead.less
│   │   ├── layout.less
│   │   ├── loader.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navbar.less
│   │   ├── navs.less
│   │   ├── page.less
│   │   ├── pagination.less
│   │   ├── scaffolding.less
│   │   ├── std.less
│   │   ├── tables.less
│   │   ├── unit.less
│   │   └── variables.less
│   ├── thumbs
│   │   ├── block__banner.jpg
│   │   ├── google-map.jpg
│   │   ├── home-page__gallery_03.jpg
│   │   ├── home-page__gallery_05.jpg
│   │   ├── home-page__gallery_07.jpg
│   │   ├── home-page__gallery_09.jpg
│   │   ├── home-page__gallery_11.jpg
│   │   ├── jcarousel_slide.jpg
│   │   ├── navigation__dropdown__thumb_03.jpg
│   │   ├── news_thumb_03.jpg
│   │   ├── news_thumb_06.jpg
│   │   ├── news_thumb_08.jpg
│   │   ├── std__thumb_01.jpg
│   │   ├── std__thumb_02.jpg
│   │   ├── unit__thumbnail_03.jpg
│   │   ├── unit_promo__thumb_03.jpg
│   │   ├── unit_promo__thumb_05.jpg
│   │   ├── unit_promo__thumb_07.jpg
└───└───└── unit_promo__thumb_09.jpg

 

 

Удачи в обучении :)

 

Автор макета -- Павел Борисенко предоставил данную работу на благо обучения начинающим :)

За основу ТЗ был взят пример со статьи Техническое задание на верстку сайта

design 1 - splat.zip

Поделиться сообщением


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

 

Это значит, что оформляя именно контентную часть нельзя опираться на классы, и необходимо предусмотреть стили для всех тегов (в рамках визуального редактора), которые захочет использовать менеджер?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

@Bassline, совершенно верно. классы в рамках таких данных это достаточно редкая ситуация, когда совсем никак -- но надо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • Кодировка – utf-8
  • Имена классов и идентификаторов – осмысленные, на усмотрение разработчика.
  • Классы служат для привязки оформления, идентификаторы – скриптов.
  • Имена файлов осмысленные, на усмотрение разработчика.
  • Графику следует оптимизацировать в Photoshop (использую инструмент "Save for Web") 

Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы:

где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )

 

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

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора? 

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались? 

Изменено пользователем advokatua

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Человеку дают такое ТЗ и рассказывают как правильно верстать, отчего встают вопросы: где пишут такие тз, и сколько платят за готовую работу с учетом такой телеги пожеланий? )
 

Как было сказанно в первом посте, за основу я взял ТЗ с выше указанного веб-ресурса. Я изменил его формулировку, а само задание составил таким образом что бы оно отвечало не только на вопрос "что делать", но и "как делать".

 

А вот это непонятно. Т.е. если в редакторе человек вставляет h1 заголовок, то он должен быть не дефолтный, Ариалом каким-нибудь, а предустановленный с супер шрифтом, определенным размером и жирностью? Разве это не должно вызвать удивление у редактора?

С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован. Не будем забывать что на "фротне"то у нас весь текст или его часть отображаться как кастомным шрифтом так и иметь кастомное форматирование и/или дизайн отдельных элементов контента.

 

klierik, ты это все это сам придумал специально для новичков, или такие ТЗ (или похожие) тебе реально попадались?

Данное ТЗ носит обучающий характер да и только. Большую часть данного задания, как я уже говорил выше, я взял с выше указанного ресурса. 

Недавно в одной из веток форума один из новичков жаловался что к макетам нет ТЗ от чего возникло желание закрыть данный пробел.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
С чего бы кому-то удивляться? Например в том же WordPress менеджер вбивает статью в WISYWIG, а на "фронте" видит как он отформатирован.
 

Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Удивление в том, что он в ВИСИВИГ выберет шрифт гельветика, а на фронте будет какой-нибудь ПТ Санс, да еще и других размеров. Я все к тому, что не приходилось видеть такого в шаблонах, потому и спросил.
 

а, если смотреть в таком направлении, то ситуация иначе (я не совсем корректно понял о чем ты говорил).

я на практике сталкиваюсь с ситуацией когда весь ресурс, как правило, имеет один шрифт (не важно кастои или дефолтный), который задается, например, в <body>. а конент менеджера помещается в <div> с соответствующим классом, который выступает в роли контейнера как раз для такого типа данных.

но, менеджеру ничего не мешает установить свой шрифт для этого контента в том же редакторе. в таком случае свойство будет указано в аттрибуте style="" и будет иметь приоритет над дефолтными стилями сайта. т.е. тем самым контент может иметь как дефолтный шрифт страницы или же указанный непосредственно в редакторе.

 

Про ТЗ понятно. Я уже было на секунду поверил, что есть заказчик который реально так все расписывает )

я не встречал такого заказчика. Но, к примеру, мне попадалось ТЗ где в PDF был описан каждый элемент страницы а так же его работа при тех или иных действиях пользователя. Пускай техническая часть там была достаточно сухо описана, но зато был очень хорошо описана функциональная часть (хотя даже в таком случае покрывается все-го навсего около 50% всех возможных ньюансов, которые возникают в будущем при разработки).

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Не обязательно, но крайне желательно использовать Grunt для генерирования LESS/SASS в CSS с применением технологии сжатия.
 

 

А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
А не проще использовать программу winless под windows или koala под ubuntu, которые висят в фоне и автоматом генерируют css при каждом сохранении файла less? И не нужно каждый раз лезть в консоль.
 

Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только :)

А вообще консоль -- это друг разработчика.

 

сколько примерно такая работа стоит? 

не понял сути вопроса.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Grunt -- это решение кросплатформенное, которое будет работать под Win/OSX/Nix системами. Более того, его можно конфигурировать не только для LESS, но и JS и прочее. Разработчику, у которого поднят node.js потребуется в дикректории с проектом выполнить "$ npm install" и запусить файл конфигурации, да и только А вообще консоль -- это друг разработчика.
 

 

Теперь я понял. Оказывается к нему есть куча интересных плагинов, в том числе и плагин автоматизации любого процесса. Отличная штука.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Можно ли взять за основу HTML5 Boilerplate ?

 

в 960 grid есть reset.css его можно использовать с Normalize.css?

Изменено пользователем Roger

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Можно ли взять за основу HTML5 Boilerplate ?
 

можно попробовать. я с ним не работал.

 

в 960 grid есть reset.css его можно использовать с Normalize.css?
 

я использовал 960 последний раз пару лет назад. надо пробовать...

Поделиться сообщением


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

А если использовать !important для стилей элементов внутри div'a с контентом менеджера? По крайней мере для таких критичных как цвет текста, размер и фон?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))

Изменено пользователем kattiperk

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))
Лично с товарищем klierik'ом приедем, были здесь уже такие умники, как говорил старина Verder, который уже к сожалению не появляется на этом форуме: "Найдём и уши отрежем". 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

А если я просто для себя сделаю вёрстку как упражнение, меня побьют?)))

Конечно ты можешь взять макет и использовать его как упражнение. Но если захочешь получить рецензию на свою работу, будь готов(а) критике(что в целом очень даже хорошо).

 

@Игорь Ермаков,

:rofl:  :rofl:  :rofl: 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Совет: оставьте это на хостинге, большинству качать ваш архив не с руки.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Совет: оставьте это на хостинге, большинству качать ваш архив не с руки.

а, да? тогда сейчас мне дадут дяди пароли.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Побейте.

слайдера нет, правая стрелка слайдера ушла слишком далеко, верхняя полоска это не картинка а деталь слайдера. 

блок с классом hd находится внутри блока header, но превышает его размерами..)

Очень хаотичные названия классов.. Например блок с классом header-left - в правой стороне))

Неточностей много, вон валидатор тоже ругается - http://validator.w3.org/check?uri=http%3A%2F%2Fsplat.cc.ua%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

 

а вот за такие куски кода побить надо обязательно)

border: 10px solid #fff;border-bottom: 10px solid #d7d8d9;border-left: 10px solid #d7d8d9;margin-left: 174px;margin-top: -74px;.location {margin-top: -100px;background: #f4f6f7;background-image: url(images/checkin.png);background-position: 28px 23px;background-repeat: no-repeat;width: 168px;padding: 26px 26px 20px;}

сгрупируйте background, margin, border и так далее. А еще слишком много отрицательных margin-ов.

Изменено пользователем CroaToa

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

да, съехала.

я пока не допёрла как связать верхнюю часть слайдера с самим слайдером.

кажется,я такого не сделаю

про hd и что-то там left справа я исправлю, совсем с ума сошла.

с валидатором разберусь, никуда не денусь.

а там с фонами проблема была. чего-то не так было, как мне нужно. ну ладно.

 

про слайдеры у меня мало знаний. я планировала сделать его, но пока не знаю как правильно до конца.

будет оно вообще двигаться у меня и передвигаться та розовая хрень корректно.

 

а так спасибо. нет у меня надзирателя.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: Andrey 123
      Здравствуйте! Меня зовут Андрей и я верстальщик адаптивных сайтов на самых оптимальных условиях для наших клиентов.При покупке моих услуг вы получаете высокоуровневый сервис и оптимальное соотношение между качеством и ценой.
      С удовольствием возьмусь за исправление уже существующего кода. Могу написать на javascript с применением jquery.
      Контакты
      В Skype пишите andrushsa123@gmail.com.
      Надеюсь на дальнейшее сотрудничество!
    • Автор: Andrey 123
      Здравствуйте! Меня зовут Андрей и  я front-end разработчик. Знаю HTML, CSS, JavaScript и Jquery. Я уже сверстал 13 psd макетов и уже имею опыт в этой сфере. Но,  для того чтобы сделать еще больший опыт я предоставляю вёрстку бесплатно. Чтобы заказать пишите снизу. Надеюсь на дальнейшее сотрудничество!
    • Автор: sergiojeyramos
      Доброго времени суток.
      Eсть опыт в адаптивной кроссбраузерной верстке более 3-х лет.
      Присутствуют знания таких языков как:
      html(продвинутый уровень); css(продвинутый уровень);  js(базовый уровень);  jQuery(базовый уровень); php(базовый уровень);  Так же имеются знания фреймворков, систем и препроцессоров:
      bootstrap;  less;  sass  Владею навыками: 
      Wordpress и соответствующей  интеграцией под данную CMS. Joomla Одна из последних работ http://test1.ramos78h.beget.tech/
      По всем вопросам в skype: sergio09931, ВК: id392591806, почта: ramos7691@gmail.com