Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

klierik

Макет -- Splat (с ТЗ)

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

Эта тема подбила меня взяться за Грант, и сразу вопрос есть у кого Gruntfile.js заточенный под верстку, а то в js слабоват не могу грамотно сам написать, а так посмотрю пойму.

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


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

Эта тема подбила меня взяться за Грант, и сразу вопрос есть у кого Gruntfile.js заточенный под верстку, а то в js слабоват не могу грамотно сам написать, а так посмотрю пойму.

тут http://htmlforum.ru/index.php?showtopic=48987&hl= был предложен вполне достойный вариант

а тут: http://htmlforum.ru/index.php?showtopic=47141#entry322241 выложен набросок и небольшой мануал.

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


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

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

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


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

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

 

Пожалуйста  ^_^ Этот gruntfile - солянка из bootstrap'а, подсмотренного и своих соображений. Там еще должен быть imagemin, но не смог победить глюк: на png зависает навсегда. Пришлось исключить, а картинки тупо копируются куда нужно.

 

Если что, отвечу на вопросы. Если есть предложения как сделать лучше, с удовольствием послушаю.

 

 

 

Для новичков, кто еще не знаком с git, вот руководство:

http://hexvolt.blogspot.ru/2014/01/git-1.html

http://habrahabr.ru/post/106912/

 

Мне очень помогло.

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


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

 

roman_kr_ru, видео совсем уж простое, но все равно спасибо.

klierik, вот достойный вариант интересно было посмотреть, большой Gruntfile.js который мне помог и возможно в будущем еще поможет, спасибо вам и автору.

 

Пожалуйста  ^_^ Этот gruntfile - солянка из bootstrap'а, подсмотренного и своих соображений. Там еще должен быть imagemin, но не смог победить глюк: на png зависает навсегда. Пришлось исключить, а картинки тупо копируются куда нужно.

 

Если что, отвечу на вопросы. Если есть предложения как сделать лучше, с удовольствием послушаю.

 

 

 

Для новичков, кто еще не знаком с git, вот руководство:

http://hexvolt.blogspot.ru/2014/01/git-1.html

http://habrahabr.ru/post/106912/

 

Мне очень помогло.

 

imagemin проблема с ним была,  watch отказывался отслеживать изменения в папке img, 2 дня боролся с этим, на сто раз проверил все, уже плюнул и запускал руками imagemin и о чудо сегодня все заработало само. 

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


Ссылка на сообщение
Поделиться на других сайтах
Смысл темы? За 5000 рублей свестраю.
 

обращаю внимание гуру на маленькую деталь - это название раздела форума где гуру сейчас написало.

 

  1. htmlforum.ru
  2.  
  3.  Основной форум
  4.  
  5.  Для начинающих
  6.  
  7.  Макеты для вёрстки

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


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

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

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


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

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

 

Да я многое у тебя взял. Сам только учусь правильно верстать. На ползунок и слайд я много времени убил

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


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

 

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

Гарно. Только ховер на ссылках внизу должен убирать подчеркивание. А также шрифт вроде был похожим на Arial. С засечками мало кто использует на сайтах.

А так можно мне карусель украсть себе, где ползунок ползёт?))

 

Ааа! И конвертик как у меня выезжает.

 

Да я многое у тебя взял. Сам только учусь правильно верстать. На ползунок и слайд я много времени убил

 

Шрифт исправил и ховеры.

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


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

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

 

1. "Плавают" размеры блоков и размеры шрифтов.

2. Непонял зачем дублируется класс "logo-container" в шапке, если шапка лишь один раз

3. для селектора

.slider-content ul {}

не уж то не нашлось своего класса?

4. слайдер выполнен удачно

5. комментарии в так же закоментированные блоки в сорсе -- избыточно

6. у этих элементов:

<img class="boss-photo" src="css/img/content/boss-photo.jpg" ><p class="first-paragraph">Когда вкладываешь всю душу в то, что создаешь, получаешь поистине бесценный результат. Когда веришь, что нет ничего невозможного, и самые смелые желания обретают форму, понимаешь, твой путь пройден не зря. Мы искренне верим — каждый способен изменить мир к лучшему. Создавая продукты под маркой SPLAT, мы знаем, что всё тепло, вложенное в них, сделает ваш день ярче, счастливее и добрее.</p><p class="content-paragraph">Помогать людям быть здоровыми, красивыми и успешными — наша миссия.</p> <p class="content-paragraph"></p><p class="boss-info">Евгений Демин,</p><p class="boss-info">Генеральный директор SPLAT</p></div>

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

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


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

 

Прошу закидать объективными помидорами :)

 

http://bestfuns.url.ph/Task1/

 

1. "Плавают" размеры блоков и размеры шрифтов.

2. Непонял зачем дублируется класс "logo-container" в шапке, если шапка лишь один раз

3. для селектора

.slider-content ul {}

не уж то не нашлось своего класса?

4. слайдер выполнен удачно

5. комментарии в так же закоментированные блоки в сорсе -- избыточно

6. у этих элементов:

<img class="boss-photo" src="css/img/content/boss-photo.jpg" ><p class="first-paragraph">Когда вкладываешь всю душу в то, что создаешь, получаешь поистине бесценный результат. Когда веришь, что нет ничего невозможного, и самые смелые желания обретают форму, понимаешь, твой путь пройден не зря. Мы искренне верим — каждый способен изменить мир к лучшему. Создавая продукты под маркой SPLAT, мы знаем, что всё тепло, вложенное в них, сделает ваш день ярче, счастливее и добрее.</p><p class="content-paragraph">Помогать людям быть здоровыми, красивыми и успешными — наша миссия.</p> <p class="content-paragraph"></p><p class="boss-info">Евгений Демин,</p><p class="boss-info">Генеральный директор SPLAT</p></div>

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

 

Что вы имеете в виду под "Плавают" размеры блоков и размеры шрифтов?

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


Ссылка на сообщение
Поделиться на других сайтах
Что вы имеете в виду под "Плавают" размеры блоков и размеры шрифтов?

наложи поверх разметки дизайн и увидешь: http://take.ms/s8UO5

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


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

У меня к Вам такой вопрос- возможно обойтись без less, bootstrap , т.е. верстать только с помощью html, css, jquery или обязательно хороший верстальщик должен знать всё это, я конечно ознакомилась с этими технологиями , несложно , просто я всегда верстала только на чистом  html, css, всё получалось , может макеты  были не очень сложные. Заранее спасибо.

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


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

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

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


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

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

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

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


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

 

Верстальщик должен пользоваться хоть каким-нибудь препроцессором. Должен не потому что кому-то должен, а потому что это очень удобно и сильно облегчает работу.

А по поводу бутстрапа - это дело вкуса и личных предпочтений

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

 

Профи на то и есть профи чтобы максимально себе упростить работу, в чем скилл работы без препроцессора ?

Меня сейчас попроси без emmet, автокомплита и sass чо нибудь сбацать я наверное раз 5 это сделаю медленнее.

Пользуйтесь инструментами на здоровье их не глупые люди для вас придумали, нравится jQuery вместо js значит

вам так удобнее, если вам bootstrap облегчает жизнь или stylus то это ведь хорошо.

Сейчас вот понял что на нативном js вряд ли когда нибудь буду писать, самая частая ошибка это синтаксис в js,

ну реально спьяну и на коленке можно было такой яп придумать, cofee-script mast have.

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


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

У меня к Вам такой вопрос- возможно обойтись без less, bootstrap , т.е. верстать только с помощью html, css, jquery или обязательно хороший верстальщик должен знать всё это, я конечно ознакомилась с этими технологиями , несложно , просто я всегда верстала только на чистом  html, css, всё получалось , может макеты  были не очень сложные. Заранее спасибо.

 

Данное ТЗ составлено специально с повышенным уровнем сложности, так как остальные макеты на форуме в основном для чистого HTML.

Я описывал ТЗ таким образом, что бы желающий склепал не просто очередной макет, а получил максимум новых знаний.

 

Каждый выполняет задание так как хочет и опирается на то что он хочет получить от потраченного своего жизненного времени! ;)

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


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

 

Я когда начинал верстать, тоже не сразу стал пользоваться препроцессорами. Потому что не видел в них толка, а не видел потому, что css не превышал 100-200 строк.

И то, что для новичка тренировка навыков, то для более опытного человека уже рутина, с которой и позволяет справиться препроцессор.

Плюс, конечно же, еще в организации файловой структуры посредством @import'a

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


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

Как правило при создании, например, больших проектов (длительность разработки от 2 до 6-9 месяцев) будет учитываться всё, а так же время выполнения работы.

Препроцессоры позволяют существенно его экономить (при правильном использовании).

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


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

 

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

 

Я когда начинал верстать, тоже не сразу стал пользоваться препроцессорами. Потому что не видел в них толка, а не видел потому, что css не превышал 100-200 строк.

И то, что для новичка тренировка навыков, то для более опытного человека уже рутина, с которой и позволяет справиться препроцессор.

Плюс, конечно же, еще в организации файловой структуры посредством @import'a

 

Я тоже 100 строк бывает на чистом css делаю.

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


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

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

    • Автор: Nerwoid
      Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо 😉
       
      Вот: макет:
      Мой сайт
       
    • Автор: egor_martynov
      Ребят, помогите сверстать эту карточку, никак не получается поместить иконку и текст в центр и сделать бирюзовый прямоугольник фоном) Буду очень благодарен.
      Картинки и итоговый результат прикрепил внизу



    • Автор: vera17
      Доброе время суток! Я верстальщик,который таки наверстает Вам упущенное.
      Моё портфолио https://verino.github.io 
      Пишу валидный,ручной,логически-продуманный,читабельный код. Делаю на совесть, которая не даёт мне спать по ночам
      спокойно. Заинтересована в результате, так как работы планирую размещать в портфолио. Срочные пректы не беру, что
      бы не страдало качество, не портились нервы и не седели волосы. Ценю взаимную честность и ответственность.
      Знания и навыки:
      HTML5,CSS3,SCSS,Gulp,Git,jQuery,Bower,Bootstrap3,Adaptive вручную или на  cетке Bootstrap,БЭМ.
      Внедрение js-плагинов, подключение нестандартных шрифтов, сss3-анимации, прелоадер, сжатие, минификация и.т.д.
      Cроки: Адекватные. От 3-x дней.
      Порядок работы: Оценка psd,тз с Вашей стороны будет большим плюсом, список работ, сроки и оплата, если всё
      устраивает работаем. Работаю по предоплате.Возможна поэтапная сдача. Все свои косяки исправляю бесплатно.Ваши
      хотелки: небольшие(30%), одним пакетом в конце-бесплатно, все остальные Ваши изменения, ранее не оговариваемые -
      дополнительная оплата.
      Время работы: с 10:00-20:00
      Расценки:от 35$ (2100р., 950грн.)
      Статический лендинг-экран - 10$ (300грн., 600р.), т.е 5 экранов-50$ (1500грн., 3000р.).
      Адаптивный лэндинг-экран- от 20$ (600грн.,1200р.), т.е 5 экранов-(3000грн, 6000р.).
      Главная страница: статика от 20$ (600грн.,1200р.), от 25$ адаптив от (700грн,1500р.).
      Внутренняя страница: статика от 5$ (150грн,300р.),адаптив от 10$ (300грн., 600р.).
      Цены пересчитываются по актуальному курсы, обговариваются.
      Оплата: WebMoney, Карта ПриватБанка.
      Контакты: 
      Skype:  v.b.171017
      Email: v.b.171017@gmail.com
      VK: https://vk.com/id164016461 
      Оставляю за собой право отказаться от проведения работ до начала сотрудничества в связи с нехваткой времени или
      любой другой непредвиденной ситуацией. Об этом естественно сообщаю заранее.
  • Спрашивают сейчас

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

    • Разметка выглядит как минимум странно!          В любом случае надо сделать вашу разметку лучше!              и после этого уже ожидать хороших примеров.  ... Далее по:  <!DOCTYPE html> - #html5 - ок  <html lang="en"> - почему? в документе объявлена латиница а записи в этом доке сделаны кирилицей ! - #html5 -  <script type="text/javascript"></script> - type="text/javascript" это лишнее, достаточно <script> </script> - #html5 -  <section class="wrapper"> - <section>? где заголовок <h2-6>? - #html5 -  <ul class="sidebar-menu"> <?php include_once 'menu.php'; ?> </ul> </li> </ul> - оочень странная конструкция, для шаблона!  <section class="my-page"> - ещё <section>? где заголовок <h2-6>? - #html5 - + не о чем не говорящее имя класса! "my-page"(  <img width="100%" ...> - почему стилевые правила в разметке? тем более <img width="100%" ...> не приветствуется в  - #html5 -  ... далее имеются повторяющиеся моменты указанные выше, также своевременность открытия/закрытия тэгов...  <div class="menu"><div class="footer">«Играй в SAMP» Powered by Mihail Rusich ©2016 </div></menu> - нижний колонтитул просто эпик! что это за конструкция?  <divclass="menu"> <divclass="footer"></div> </menu> . итог: приведите в порядок - валидируйте вашу разметку!  Удачи) ....
    • Если вы знаете каким образом увидеть афиши прошедших мероприятий, пожалуйста, смотрите и парсите, но мне кажется сайт не выдает мероприятия из прошлого. Вы можете парсить начиная с сегодняшнего числа и копить эту информацию, на вашем сайте доступ к прошедшим мероприятиям может быть реализован. т.е. вы хотите, чтобы я вам сделал парсер?
      В чем проблемы возникли?
      Для работы с xml документами можно использовать http://simplehtmldom.sourceforge.net/
      Так же весь парсер можно разбить на функции, одна будет например парсить список мероприятий, другая данные по конкретному мероприятию....
        require_once('simple_html_dom.php'); function parser_get_list($p = 1) {     $url = 'https://www.culture.ru/afisha/chelyabinsk?page='.$p.'&limit=24';     $html = file_get_html($url);     if(is_object($html))     {         $items = $html->find('.container_inner .entity-cards_item');         if(is_array($items) && count($items) > 0)         {             foreach($items as $key=>$val)             {                 $url = $val->find('a',0)->href;                 parser_get_page($url);             }             parser_get_list($p+1);         }         else         {             $items = $html->find('.empty-data-message');             if(is_array($items) && count($items) > 0)             {                 //список мероприятий кончился             }             else             {                 //нет ни афиши ни информации о том что их нет - какая-то ошибка возможно                 //можно сделать обработку для них             }         }     } } function parser_get_page($url) {     //проверяем есть ли данная запись у нас, если нет     //аналогично функции parser_get_list, ищем нужные нам данные и записывать их куда-то }  
    • Спасибо большое, но я еще многое чего не понимаю. Да, хочу адаптивно сверстать.
  • Лучшие авторы

    Никто не получал репутацию за неделю

  • Текущие цели пожертвований