• С чего начать изучать Front-end?

    ZakkMalin
    @ZakkMalin
    Designer
    С чего начать учить Front-End

    0. Git
    1. Английский язык - вся свежая информация на нём
    2. Введение в программирование и алгоритмизацию, плюс базы данных
    3. Язык Си (C89*) - первый нормальный высокоуровневый язык (*его можно компилировать на компиляторе для С++)
    4. HTML
    5. CSS
    6. Vanilla JS
    7. JQuery
    8. SCSS
    9. HTTP/1.1—HTTP/2

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

    Почему учить теорию?
    - Потому-что, всё что можно было сделать без изучения теории, уже давным давно сделано кемто. Достаточно только погуглить, и вы с 100% вероятностью это найдёте

    Если вы не будете знать теорию, и при этом иметь плохой скилл поиска в поисковых системах, то вы постоянно будете писать велосипеды 99.99% cвоего времени.

    Раньше, я думал что теория не важна, что лучше сразу приступать к практике, потом я понял что это была ошибка. Так можно делать, забивать на неё, но только не в IT, а скажем в кузнечном деле, или в подметании дворов. IT это хайтек, это высокие технологии, без теории никак. Но, это не значит, что не должно быть упражнений.

    Также важно понимать движок или платформу изнутри. Это самая частая ошибка веб-разработчиков: программировать не зная строения движка. С таким подходом можно наделать кучу ошибок, и в лучшем случае, что приложение будет только крашиться, самая маленькая беда которая может случится, бывают и похуже результаты, связанные с утечкой данных, из-за пренебрежения знаний получаемых только в процессе изучения движка под который пишешь.

    Мир IT сложен, и я не слышал, что бы в него брали "по блату", имея ввиду программирование, а не бухгалтерию...

    Без хорошей теории ничего путного на практике вы не сможете создать.

    Но есть люди, которые злоупотребляют теориями, и ничего не делают на практике, это тоже плохо.

    Фокус в том, что зная теорию, вы сможете практику набрать потом самостоятельно из Google :)
    C теорией бывают проблемы, её найти достаточно хорошую нелегко. В то время как с поиском практики проблем не возникает, разве что надо иметь имбецильность, что бы не найти себе задачу.

    Предположим, что вам попадётся крутой преподаватель, который сразу приступает к практике с вами, и показывает вам как написать программу или скрипт. Вы с ним пишите код, решаете задачу. Получается крутая программа, может быть даже дорогая или сразу очень известная. Но, потом, вы не сможете создать другую программу без него, с таким подходом (пропустив всю теорию). Максимум что вы сможете сделать, при таком обучении, это повторить первую программу. И то, далеко не с первого раза по памяти, а с сотого, или двухсотого...

    Программист не пишет "для души", он 100% времени на работе работает на кого-то. И зачастую, среди тех над ним, кто знает много теории.

    Следующий параграф посвящается троллям пишущим на недоязыке PHP:

    Касательно обязательного изучения языка Си. Его должен знать любой айтишник, и даже если вы девочка пишущая на VBA в Excel, то без знаний С89 вы — гуанокодер. И не надо ассоциировать этот язык с низким или каким то мифичным "средним" уровнем. Среднего уровня не бывает. Язык Си не низкого уровня, потому что первый признак высокоуровневого языка, это когда человек пишет код нацеленный на решение задачи, а не командами которые понимает процессор. Объясню. Ложное представление о том, что это язык низкого уровня сложилось давно, когда не существовало хороших компиляторов для него. До 1994 года было всего 3 компилятора более менее адекватных: Microsoft, Borland, и Intel. Но, они были мягко говоря плохими, потому что имели искусственный интеллект для оптимизации машинных кодов. Под который, обязательно требовались правки на языках ассемблера. Девяносто четвёртый год стал переломным, благодаря тому, что в Linux ядро посыпалось очень много коммитов, оно стало быть OpenSource. Разработчиков компиляторов до этого времени было от силы 10 000 человек. Но после того, как все желающие смогли отправлять свои баг-репорты, их количество очень резким скачком выросло с десяти тысяч до нескольких миллионов человек! В очень короткий срок — до 2 лет (учитывая масштабы проделанной работы, и количество затраченного времени, это ничтожно малое время). Удалось пофиксить баги ИИ компиляторов до того уровня - когда знания языков ассемблера перестали требоваться, чтобы перевести программу написанную на языке Си в машинные коды. После этого самого масштабного события в мира IT, языки ассемблера можно не учить, почти в ста процентах случаев.

    Изучение Си
    Cи стоит изучать по первому изданию книжки K&R, и желательно в английской версии. Хотя, можно и в русской, но это исключение. И не смотрите что в первом издании капсом много написано кода. Не повторяйте так - это ошибка русских быдло-переводчиков. Второе и последующие издания с lowercase в коде, но они посвящены стандартам, а не столько языку. По этому их не читайте.

    И как можно раньше, выучите Git. В процессе обучения, вы будете писать много кода. Его надо гдето хранить, он пригодится вам в работе. Если у вас получится понять что такое гит даже на нулевом этапе, то непременно сделайте это! Как можно быстрее. Вам надо научиться в надёжном месте хранить свои наработки, с понятными пушами. Вы потом оттуда будете копипастить свой код.

    Писать скрипты без знаний теории как работает платформа под которую пишешь можно, также можно делать жигули по итальянским чертежам, но что из этого получилось, все мы прекрасно уже знаем. Именно поэтому рынок IT в СНГ не развит. Потому что на всё забивают, и сразу приступают что-то делать. Если вы скажете что рынок развился, то посмотрите хотябы на какуюто крошечную страну вроде Израиля, и на их рынок IT, прежде чем нести такую ахинею.

    Before getting started with ... , be sure to read the following as ... .


    Но, если вы не хотите теорий, а сразу практику, то задайтесь вопросом, что делает Фронтендщик. Одной из его обычных задач является сборка проекта. Например, компоновка элементов интерфейса в один спрайт (не актуально для HTTP/2). Или например он "занимается" расстановкой префиксов -webkit-, -moz-, -ms- и др. вот с них и начните, если верстальщица до этого не додумалась.

    Фронт-эндщик знает что находится «под капотом» на сервере, бэкенд его не пугает:
    5d262910d2702244335395.png

    Фронтэндщик понимает протоколы обмена данными, заголовки. и т.д. и т.п. Фронтэднщик очень много должен знать, это тяжелая профессия. И более того, он обязан быть постоянно в тонусе и не пить пиво, чтобы следить за всем новым. Фронтэндщик лучший друг бэкэндщика, хорошего найти сложно, и тем более стать им самостоятельно.

    Фронтендщик - это интерфейс, между фронтом и беком. Острая потребность в его профессии отпадает, используя JavaScript на обоих сторонах сервиса.

    Пыхари должны остаться без хлеба, ДжаваСкриптеры их хорошо поджимают разнообразием фреймворков.
    Ответ написан
    1 комментарий
  • Каким путем выучить современную верстку с 0?

    Garfields
    @Garfields
    Советую обратить внимание на курсы, которые я указал ниже.
    Обучение
    • Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
    ru.learnlayout.com
    htmlacademy.ru/program
    w3schools.com
    flexbox.ninja
    Карта развития веб-разработчика

    Видеокурсы HTMLAcademy
    • htmlacademy «Базовый HTML и CSS»
    coursehunters.net/course/bazovyy-html-i-css-18-2017
    • htmlacademy «Продвинутый HTML и CSS»
    coursehunters.net/course/prodvinutyy-html-i-css-po...
    • htmlacademy «Профессиональный HTML и CSS Уровень 1»
    coursehunters.net/course/professionalnyy-html-i-cs...
    • htmlacademy «Профессиональный HTML и CSS Уровень 2»
    coursehunters.net/course/professionalnyy-html-i-cs...

    Справочники
    htmlbook.ru
    webref.ru
    developer.mozilla.org/ru/

    Выполнение заданий
    flukeout.github.io (изучение селекторов в CSS)
    flexboxfroggy.com/#ru (изучение flexbox в CSS)
    flexboxdefense.com (изучение flexbox в CSS)
    dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
    cssgridgarden.com/#ru (изучение gridbox в CSS)

    Задачи для практики:
    htmlbook.ru/practical

    Макеты для практики:
    drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
    freebiesbug.com/psd-freebies/website-template/
    symu.co/freebies/templates-4/
    dcrazed.net/free-photoshop-psd-website-templates/
    Ответ написан
    5 комментариев
  • Каким путем выучить современную верстку с 0?

    AngryCrow
    @AngryCrow
    Верстак
    Ну и практический способ: выбираешь любой psd-исходник (тренировочный), желательно такой, где ты знаешь реализацию не всех элементов, и верстаешь. Когда доходишь до подобных блоков, начинаешь гуглить, обращаться к документации, и когда понимаешь механизм работы - уже можешь применять это в других проектах.
    Ответ написан
    Комментировать
  • Каким путем выучить современную верстку с 0?

    @AlexeyPikalov
    Я лично начал учить с реальных объектов. А именно. Нарисовал дизайн не большого лендинга на фотошопе, и начал верстать, потихоньку помаленьку, собирать знания, так быстрее происходит процесс обучения, но не сказал бы, что правильный потому что на начальных этапах код кривой и верстка на костылях, но мы же учимся )
    Ответ написан
    Комментировать
  • Как правильно изучать верстку c переходом на front-end?

    Aspirin77
    @Aspirin77
    HTML5&CSS3, в любом случае самое первое, что стоит изучить. Html Book - неплохой вариант, для новичка, но всё же в идеале оф. сайт консорциума с документацией www.w3.org
    Думаю, для хорошего верстальщика и front-end developer'a важно понимать "кухню".

    Есть не плохая книга, мне лично очень нравится, Джон Дакетт "HTML и CSS". Книга не из дешевых, но лично мне очень помогла в изучение основ.

    Далее, опять таки на мой взгляд, хотя бы на уровне синтаксиса - изучить JavaScript. Пока не говорю, про библиотеку JQuery. Но она по сути, важна. Книга - Бер Биро, Иегуда Кац "Подробное руководство по продвинутому JavaScript".

    В плане опыта, тут уж наверное понятно, верстать и еще раз верстать, по мере решения определенных задач растет скилл, так сказать. Умение искать ответ в Google тоже немаловажный навык.

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

    Свой код после верстки, можно проверить на валидаторе оф. сайта консорциума. Просто нужно вставить ссылку туда на свой сайт и он анализирует.

    На YouTube, есть видеоуроки по многим направлениям. Из самых крутых на мой взгляд, Sorax

    В целом терпение и желание именно заниматься версткой и front-end. Удачи )
    Ответ написан
    Комментировать
  • Разница между usability и UX / UI?

    Nekto_Habr
    @Nekto_Habr
    Чат дизайнеров: https://t.me/figma_life
    Вангую 12 ответов к этому вопросу.

    юзабилити = удобство использования, вообще уровень пригодности к использованию.

    юкс = ощущения человека от использования, его восприятие и отношение к продукту

    юй = то, что даёт доступ к продукту, его функциям и его полезности.

    ну это если в широких смыслах толковать.
    Ответ написан
    Комментировать
  • Как практиковать css?

    sergski
    @sergski
    web-developer
    Начните, например, здесь (кроме Bootstrap и Sass, это следующая ступень). Разбирайте все примеры, пока ясно не поймете, как это работает, перепробуйте все свойства и значения. Все примеры вы должны написать в редакторе сами и посмотреть результат работы в браузере. Просто читать крайне малопродуктивно -- пишите больше кода. Не спешите. Не переходите к следующему уроку пока однозначно не поймете текущий урок. Занимайтесь последовательно, каждый день полным погружением какое-то комфортное и разумное время. Лучше каждый день по 2 часа, чем раз в неделю 10. Изучайте инспектором код сайтов. Верстать макет бессмысленно, пока ясно не поймете что и зачем существует в html и css. Пишите код и думайте, пробуйте. Спрашивайте уже с примерами вашего кода. Заведите себе аккаунт, например в Codepen. Большой путь начинается с маленьких шагов.
    Ответ написан
    Комментировать