• Правильный frontend?

    Создайте приблизительно такую структуру проекта:
    project/
    project/src/
    project/src/scss/
    project/src/js/
    project/src/images/

    Создайте package.json командой npm init, заполните всю информацию, название проекта, автор, зависимости и т.д. Установите gulp, создайте git репозиторий и файл gitignore в котором будут папки node_modules/ app/ и т.д. Создайте gulpfile.js, добавьте его в индекс(в репозиторий) и сделайте первый коммит. Затем напишите пару задач в gulpfile.js и установите пару модулей. Все ваши исходники будут собираться в папку app/, а в ней уже будут app/css, app/js, app/images и т.д.
    В итоге ваш проект можно будет легко поднять просто клонировав репозиторий и сделав npm install, а затем запустив gulp.
    Ответ написан
    8 комментариев
  • Правильный frontend?

    webdisigner
    @webdisigner
    Сначала поработай с нативным css,html,js - 1 годик так точно
    Потом поработай с bootstrap, сначала научись переопределять стили, потом изменять стили в исходном файле bootstrap.css. После этого научись пользоваться файлами bootstrap.js ну и конечно тут не обойтись без фундаментальных знаний Jquery - 15-30 дней и ты уже в теме
    Потом установи sass, и поработай с ним через командную строку
    Потом попробуй расширить sass, например установи susy, breakpoint-sass
    Опять поработай с командной строкой - 14-30 дней
    Потом установи интерпритатор sass, например compass
    Разузнай все тут, поработай с командной строкой, установи config для compass`a
    7-10 дней на это все, многое узнаешь.. - 2 дня макс.
    ->
    Потом чтобы это все говно сжать у себя в мозгу как раз придумали gulp
    Вот с этих пор, ты познаешь истинное удовольствие с gulp`ом
    Тут то и понадобятся навыки работы с консолькой
    Понимание глобального и локального нахождения плагинов и не только
    Установишь node.js, выберешь себе консольку по-красивее и по-краше, прочитаешь туториалы, просмотрешь видосы и ты уже спец по gulp - 12-15 дней макс

    материал:
    1) sass - sass-lang.com
    2) sass-playground: www.sassmeister.com (поддерживает susy,breakpoint-sass)
    3) susy - susy.oddbird.net (любые сетки, полный контроль)
    4) bootstrap - dedushka.org (неплохие уроки по css), www.w3schools.com/bootstrap/default.asp (неплохие уроки по css и js бутстрапа)
    5) gulp - https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=P... (неплохие уроки по gulp)

    Ты все еще хочешь стать фронтенщиком? :)
    Ответ написан
    5 комментариев
  • Какими плагинами для работы с html, css, js пользуетесь Вы в Sublime Text 3?

    evnuh
    @evnuh
    Поиск Гугл помог мне, впусти и ты его в свой дом
    для FTP / SFTP всего один плагин (платный), да и то с ущербной навигацией по удалённым папкам (через command palette): wbond.net/sublime_packages/sftp

    Что делают плагины и так понятно из их названия.
    Больше всего кайфую от установленной темы: https://github.com/equinusocio/material-theme
    Вот скрин с плагинами:f86c6dc6ac5b41e8b7d9737ea7e28fc9.png

    Ещё очень много понастроил через build-systems руками, но это уже от ваших задач и потребностей.

    Люблю минимализм :)
    Ответ написан
    1 комментарий
  • Правильные ли ресурсы выбраны для изучения HTML/CSS, JS, PHP?

    VortomS
    @VortomS
    I want to find myself
    Итак, если вкратце:
    • Разобраться в принципе HTML/HTML5 и CSS/CSS3, вести справочник по тегам/свойствам. С различными нюансами будете разбираться по мере необходимости;
    • Разобраться с основами JS;
    • Желательно изучить серверный язык (в Вашем случае PHP);
    • Заниматься уже продвинутым JS, потом JQuery
    • Разобраться с AJAX
    • Препроцессоры CSS/Javascript (sass, less, coffeescript, typescript)
    • CSS/JS Фреймворки (Bootstrap, AngularJS, Backbone)
    • Сборщик проектов (Gulp, Grunt)


    И самое главное практика, практика, практика: 90% материала мы усваиваем именно когда делаем, и лишь 40% когда наблюдаем.
    Codeacademy - считаю тратой времени (ИМХО).
    Попробуйте интерактивные курсы лучше HTMLAcademy
    Ответ написан
    1 комментарий
  • Какие плагины Gulp вы используете для front-end?

    Serj-One
    @Serj-One
    i'm sexy and i know it
    Кусок моего галпфайла. Что-то снабдил комментами.
    var connect      = require('browser-sync'); // livereload
    var sass         = require('gulp-sass'); // Кому что, я использую SCSS
    var csscomb      = require('gulp-csscomb'); // Обязательно!
    var cssmin       = require('gulp-cssmin');
    var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
    var concat       = require('gulp-concat');
    var uglify       = require('gulp-uglify');
    var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
    var autoprefixer = require('gulp-autoprefixer');
    var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
    var spritesmith  = require('gulp.spritesmith'); // Спрайты
    var notify       = require('gulp-notify'); // Уведомления
    var merge        = require('merge-stream'); // Деление таска на разные потоки

    Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.
    Ответ написан
    8 комментариев
  • Какие технологии использовать для быстрой верстки?

    HollowJ
    @HollowJ
    PHP разработчик
    Emmet - ускоряет формирование html.
    SASS, LESS, Stylus - CSS препроцессоры (также есть постпроцессоры).
    Gulp, Grunt, Webpack - помогают собирать проекты. По сути менеджеры задач по компиляции sass, less, coffee и т.д. и сборки этого всего в пару файлов.
    Для ускорения верстки также порекомендовал бы использовать CSS фреймворки типа Bootstrap, Foundation. Но не злоупотреблять стилями по-умолчанию =)
    Ответ написан
    Комментировать
  • Что нужно знать front-end разработчику и JavaScript разработчику для прохождения стажировки и устройства на должность junior- a?

    @an23
    Что касается JavaScript:
    - базовый JavaScript, понимание наследования на прототипах
    - умение работать с DOM используя нативный JavaScript и библиотеки вроде jQuery
    - логическое мышление, кроме синтаксиса языка нужно уметь решать стандартные и не очень стандартные задачи с использованием JavaScript
    - наличие хотя бы одного (пусть даже некоммерческого) проекта в котором вы можете похвастаться своим использованием JavaScript
    - плюсом часто бывает умение писать собственный плагины на jQuery

    Когда вы достаточно с этим познакомитесь я думаю вы сможете решить что именно вам учить дальше Angular или AJAX :)
    Ответ написан
    Комментировать
  • Как заливать CSS файлы на GitHub?

    @vladflip
    me
    регистрация на гитхаб -> скачивание клиента git
    -> изучение гит по их официальной книге
    -> profit
    Ответ написан
    1 комментарий
  • Можно ли соваться на Одеск с таким уровнем работы(фронтэнд)?

    mr_T
    @mr_T
    Web-разработчик
    Сам верстаю много, так что попробую дать советы, но это чисто мое мнение, поэтому постарайтесь реагировать на это соответствующе :)

    Сначала по вопросам непосредственно в этом посте:
    1) Заказчик может такое принять, а может и не принять - тут зависит от того, насколько он дотошен, вот и все . В любом случае нужно понимать, что редко бывает так, что заказчик что-то понимает в том, что вы делаете, поэтому его "хотелки" скорее всего будут относится к его субъективному восприятию внешнего вида сайта. Но так же нужно понимать еще и то, что внимание к мелочам дает хороший результат на это восприятие в том числе :)
    2) Лично я делаю так, чтобы в шаблоне просто можно было написать что-то вроде
    <? foreach ($slide in $slides): ?>

    <? endforeach; ?>
    и не париться о том, что произойдет дальше (в разумных пределах, конечно - чаще всего слайды должны быть определенных размеров, но об этом нужно говорить).

    Теперь по вашему коду:
    1) Попробуй использовать sass/less с автопрефиксами, компассами и пр. - очень будет удобно писать стили.
    2) Лично я крайне редко пользуюсь сторонними слайдерами, поскольку они часто используют кучу невнятных классов, дивов, врапперов, иннер-врапперов, аутер-врапперов, контейнеров и т.д., хотя чаще всего достаточно несколько строк в js, задача которых просто давать нужные классы нужным слайдам, и анимации в css - в итоге так даже быстрее, чем настраивать под себя какой-нибудь сторонний jquery слайдер. А если один раз сделать заготовку на будущее, то вообще все за пару минут можно сделать.
    3) Вместо спрайтов во многих случаях лучше использовать шрифтовые иконки (например, с icomoon.io). Например, для значков соц-сетей. Из приятных бонусов - шрифты можно красить в любой цвет и анимировать, а так же они векторные, что позволяет не париться по поводу дисплеев с высокой четкостью. Можно еще svg, но с ними немного сложнее, зато гибко.
    4) Обычно на подобных сайтах лепят фиксированное меню, которое сужается при прокрутке ниже (что, кстати, опять-таки решается css transition'ами и парой строк в js для задания класса типа small).
    5) #link-services feature лучше сделать не section, а article или figure - так будет правильнее семантически. А section'ами лучше сделать #link-services, #link-portfolio и т.п. Почитай на любом ресурсе о семантическом значении html5 тегов, там много интересного можешь найти :)
    6) Я бы как-то выделил элементы формы при фокусе, сделал их поконтрастнее, а то на некоторых экранах текст может сливаться с фоном инпута.
    7) p.section-description лучше сделать без класса вообще, а в css задать общий стиль для всех абзацев, изменяя его в конкретных случаях при необходимости.
    8) Раз уж сайт такой весь из себя анимированный, то что ж вы не сделали анимацию ссылок :) ? Хотя бы на работах в портфолио обязательно нужно это сделать, причем недостаточно просто картинок, нужны как минимум еще заголовки, которые могут, например, всплывать по наведению. Очень красиво получаются в таких моментах анимации transform: scale(...) вместе с opacity.
    9) header и footer не всегда по одному в одном документе, эти элементы могу вкладываться так же и в article или section. Как следствие лучше дать своим body > header и body > footer внятные классы или айдишники, иллюстрирующие их принадлежность ко всей странице, а не к отдельным блокам.
    10) .feature > aside я могу быть не прав, но мне кажется, что это семантически неверно. Aside должен показывать какую-то часть документа, которая помогает ориентироваться в контенте на сайте (например, фильтры, боковое меню). В твоем случае это просто иконка, так что тут лучше обойтись просто div'ом.
    11) По js: у вас какой-то странный блок сверху, где задаются глобальные переменные. Вы там используете jQuery, при этом не помещая код в $(document).ready. Весь код jQuery, связанный с селекторами (как минимум) всегда должен быть внутри ready. Да и какие-то странные конструкции там вроде var buttonAll = $('.works-button')[0], которые потом используются снова как $(buttonAll). Лучше в buttonAll записать строки с селекторами тогда уж, а не использовать jQuery 2 раза для одного и того же. Да и конструкции вроде $('.works-button')[0,1,2,3] довольно опасны. Тут лучше дать каждой кнопке какой-нибудь атрибут типа data-category (или вообще в href писать #category-name), и написать один обработчик для всех этих кнопок, который просто фильтрует работы по значению этого атрибута. Так будет проще в будущем что-то поменять, при этом совершенно не затрагивая код js.

    В общем, как-то так.
    Ответ написан
    4 комментария
  • Какой двигатель выбрать для Landing Page?

    68747470733a2f2f7261772e6769746875622e63
    Используй fullPage.js
    Вот пример реализации лендинга на этой js плагине example Apple

    Сам по себе плагин популярный, вот несколько примеров сделанных на этом движке:
    dasselundwagner.com
    onlinedepartment.nl
    rocketbank.ru
    Последний пример как раз лендинг.
    Ответ написан
    1 комментарий
  • Совет в изучении ООП JavaScript?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Как быстро врубиться в ООП в JS:

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

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

    Наследование - просто объявляете тип со своим прототипом. В силу некоторых особенностей от некоторых типов не так то легко отнаследоваться без кастылей (например от массива).

    Для упрощения работы в ES2015 новый синтаксис для объявления объектов своих типов.

    Принципы ООП такие же как и везде, единственное что для инкапсуляции стоит еще про модули почитать так как в JS (как и в некоторых других языках) нет модификаторов доступа.
    Ответ написан
    Комментировать
  • Как учить Node.js?

    @Nwton
    Для начала посмотри весь скринкаст: YouTube
    Далее советую выполнить три простых вещи:
    1) установить node js на vds
    2) развернуть http сервер
    3) прикрутить к нему socket io

    Тогда тебе станет понятно, что из себя представляет нода и в каком направлении двигаться. Все это можно сделать за два дня. Затем переходи на литературу и углубляйся.
    Ответ написан
    2 комментария
  • Где можно почитать подробное руководство по html5 css3 ?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Такого нет. Есть разрозненные книги, и сайты.

    Например, по CSS вопрос уже задавали CSS3. Где я могу найти наиболее полное руководство?
    По HTML есть масса книг, но увы, большинство — просто дрянь. Тут я просто пас (как по мне, так читал бы лучше спецификацию).

    Потом вас заинтересует JS, UX, паттерны, типографика, колористика и прочиее, и прочее, как тут Что почитать о дизайне для разработчика? (вам стоит начать с этого списка). И более узкопрофильный интерес как тут Где вы смотрите интересные штучки-дрючки на jquery/css3?
    Ответ написан
    Комментировать
  • Какие есть инструменты для сборки веб-проекта?

    lexxpavlov
    @lexxpavlov
    Программист, преподаватель
    Для автоматизации рутинных процедур (склейка css/js/картинок, сжатие картинок, т.п.) можно попробовать Grunt (сложнее, но больше готовых тасков) или Gulp (попроще, поменьше готовых тасков, но простые можно легко найти готовые).
    Для совместной работы используйте git, в качестве клиента под win могу порекомендовать SourceTree.
    Заведите себе сервер, на который будете выкладывать результат вашей работы, желательно vpn, чтобы туда можно было ставить свои программы. (Рекомендую попробовать самый дешёвый сервер у DigitalOcean.) И осваивайте сразу современные методики разработки и деплоя (размещения).
    Ответ написан
    1 комментарий
  • Как научится верстать из PSD макетов в html+css?

    lexxpavlov
    @lexxpavlov
    Программист, преподаватель
    Посмотрите вот эти две статьи с хабра:
    Как сверстать веб-страницу. Часть 1
    Как сверстать веб-страницу. Часть 2 — Bootstrap
    И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
    Очень хорошие статьи, пошагово расскажут, что делать с макетом.
    UPD. Ещё одна статья от того же автора:
    Как сверстать тему для WordPress
    Ответ написан
    Комментировать
  • С чего начать изучение SCSS/SASS?

    Hando
    @Hando
    Верстак
    Лучше всего конечно официальная документация, если вы знаете английский. Если нет, придется собирать информацию по крупицам и самому ее систематизировать.
    Помимо Sass, еще необходимо изучить и Compass. Немного статей, по которым учился я: Первая, Вторая(на этом сайте много статей, поищите как следует), третья.
    Ответ написан