В начале какого-нибудь фитнес-курса обычно объясняют, какой понадобится реквизит: специальная палка, мячи разных размеров, резинка, пенный ролл. На курсе по вёрстке сложнее. Понятно, что нужен компьютер, там нужны программы. Чего тут ещё рассказывать? Поэтому как филолог, который раньше никогда не писал код, я даже подумать не могла, что собственный ноутбук будет мешать мне учиться верстать.

Ноутбук мне подарили ещё в 10 классе за хорошую учёбу. Я закончила школу, два университета, а он всё это время был со мной. Многое вытерпел: бесконечные загрузки всяких файлов из интернета, установки программ и расширений, сутки работы над документами, многочасовые просмотры фильмов и сериалов. Конечно, иногда его чистили, проверяли на вирусы, удаляли лишнее, но время берёт своё. И вот потихоньку он начал притормаживать. То включается долго, то ничего не грузит. Но в сложных программах я не работала, поэтому в целом меня всё устраивало. Пока я не начала изучать вёрстку.

Мне дали ссылку на макет и инструкции. Но почти сразу что-то пошло не так.

Что за машина?

Бывалый старичок-ноутбук Acer Aspire E1 Z5WE1.

  • ОЗУ — 4 Гб
  • Процессор — Intel Pentium 2117U (1.8 ГГц)
  • Графика — Intel HD Graphics 2500
  • Жёсткий диск — 600 ГБ
  • 32-битная Windows 7
Герой и страдалец
Герой и страдалец

Работа с Figma — плюс-минус

Я открыла макет в браузерной версии Figma и сделала копию — теперь можно что-то менять. А раз сразу получилось, то и десктопную версию решила не скачивать.

Макет в браузерной версии Figma
Макет в браузерной версии Figma

Проблема первая

Направляющие layout grids отображались первые несколько дней. Потом они просто исчезли прямо во время работы. Зашла в другую вкладку, вернулась — их нет. Хотя написано, что они остались включёнными. Я попробовала переключать их всякими способами: через меню сверху, слева, комбинацией клавиш — появлялись какие-то помехи.

Баги при отображении направляющих в макете
Баги при отображении направляющих в макете

Пошла гуглить. Увидела, что у людей тоже есть такая проблема, но все советы сводились к тому, чтобы просто попробовать включить направляющие другим методом — сверху, слева, клавишами. Что, собственно, я уже миллион раз делала. Кто-то считал, что это баги новой версии Figma: у кого-то пропадали целые макеты. Ничего полезного, в общем, я не нашла. Кстати, спустя пару месяцев я вернулась к этому макету и снова попробовала включить направляющие, но ничего не изменилось.

Обсуждение проблем с Figma на Хабре
Обсуждение проблем с Figma на Хабре

Проблема вторая

После проблем с веб-версией Фигмы я решила открыть макет в десктопной версии, но при её установке произошёл какой-то сбой. Как выяснилось лёгким движением руки в гугле, программу нельзя установить на 32-битную систему.

Ошибка при установке Figma на ноутбук с 32-битной системой
Ошибка при установке Figma на ноутбук с 32-битной системой

Редактор кода — без нареканий

Я выбрала Visual Studio Code. Здесь всё работало хорошо. Код спокойно писался, правильно открывался и сохранялся. Из расширений меня больше всего интересовали HTML Preview и Live Server. Первое по комбинации клавиш открывало справа окошко предварительного просмотра, второе — результат вёрстки в браузере.

Работа в VS Code
Работа в VS Code

GitHub Desktop — полный провал

На курсе по вёрстке мне объяснили, что недостаточно просто смотреть в макет и писать код в редакторе. Чтобы не потерять проект, видеть, как он менялся, давать доступ к нему коллегам и совместно над ним работать удалённо, нужен Гитхаб.

Почитала и посмотрела, как работать в Гитхабе, всё поняла и с энтузиазмом пошла скачивать десктопную версию. И вот тут-то ноутбук её не принял. Пришлось перезагружаться, пробовать качать несколько раз, гуглить. И как оказалось, эта программа тоже не любит 32-битную систему. Такой беды я не ждала. В браузере GitHub прекрасно открывался, но его же ещё надо было как-то связать с компьютером. Покупать новый ноутбук в тот момент я не планировала. Как новичок, начала немножко даже паниковать, но тут мне посоветовали установить GitKraken.

Работа с GitKraken
Работа с GitKraken

Этот осьминог меня и выручил. Он выполняет все те же функции, что и GitHub Desktop, и что самое главное — подходит как для 64-, так и для моей 32-битной системы.

Правда пришлось немножко покопаться в интерфейсе, потому что я уже посмотрела, как работать в GitHub Desktop и сходу была не готова работать в какой-то другой программе. Что касается связи с браузерной версией GitHub, то проблем не было: GitKraken всё пушил влёт. Не было проблем и при взаимодействии с VS Code. Изменения в графическом редакторе здесь сразу отображались.

Что ещё подойдёт вместо GitHub Desktop?

Этим вопросом я задалась уже позже. Мне стало интересно, какие ещё есть варианты.

Ну во-первых, пушить изменения на удалённый репозиторий можно с помощью Git.

На мой ноутбук программа установилась нормально. Я пробовала залить изменения через консоль — всё получилось.

Работа с Git
Работа с Git

Во-вторых, есть разные аналоги GitHub Desktop: SmartGit, SourceTree и т. д. Но фишка в том, что большинство из них 32-битной Windows 7 не подходят. Я много чего пробовала установить, даже архивные версии, которые якобы работают и на x86. Может, есть какие-то ещё варианты (если вы знаете — поделитесь, пожалуйста), но ноутбук подружился только с TortoiseGit.

В TortoiseGit не надо разбираться в консольных командах, как в Git. Достаточно просто нажать правой кнопкой мыши на проект и выбрать в контекстном меню команду «Push».

Открывается окно, там проверяем, что изменения пойдут в нужный репозиторий и нажимаем «ок».

Работа с TortoiseGit
Работа с TortoiseGit

Работать можно, но больно

Итак, если вам нужен ноутбук только для самых базовых вещей (работа с документами, просмотр фильмов, общение), то подойдёт и 32-битная система на старом железе. Мне, например, за всё время учёбы особых неудобств ноутбук не доставлял: я училась на филфаке и в сложных программах не работала.

Но если вы хотите осваивать современные программы, верстать, писать код, то со старым ноутбуком придётся помучаться. Мне вёрстка была в новинку, поэтому мало того, что я долго разбиралась в теме, так ещё и убила уйму времени просто на подбор программ, которые потянет мой ноутбук. И кроме прочего, мешали баги в Фигме, которых нет на новом компьютере: позже я его всё-таки купила. Кстати, на нём 64-битная система и Windows 10 — и десктопные GitHub и Figma работают прекрасно.

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

Другие статьи об инструментах, которые сэкономят вам кучу времени:


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как составить хорошее портфолио

Как составить хорошее портфолио

Портфолио — это важный инструмент для любого разработчика, особенно для начинающего. Оно показывает ваши навыки, опыт и квалификацию, привлекает внимание работодателей и повышает шансы на получение оффера мечты.

Читать дальше
Айти
  • 30 июня 2023
Что нужно уметь верстальщику

Что нужно уметь верстальщику

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

Сейчас же грань размылась — теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флексов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2023 году требуют от верстальщика работодатели.

Мы в HTML Academy работаем над тем, чтобы верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.

Читать дальше
Айти
  • 8 июня 2023
Веб-разработка. С чего начать

Веб-разработка. С чего начать

На старте бывает непонятно, какой язык программирования выбрать первым. На самом деле, нет идеального языка, который раз и навсегда определит вашу карьеру. Освоить новый язык программирования — всё равно что выучить ещё один иностранный. Сначала надо определиться, что вам больше подходит: фронтенд или бэкенд.

Читать дальше
Айти
  • 2 июня 2023
Как оформить профиль в LinkedIn

Как оформить профиль в LinkedIn

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

Нетворкинг — это приобретение полезных знакомств в профессиональной сфере. Чем больше у вас таких знакомств, тем больше шансов на успех в карьере.

LinkedIn — это социальная сеть, нацеленная на приобретение профессиональных контактов. Здесь пользователь составляет свой профессиональный профиль, ищет новую работу или интересные партнёрства, налаживает нетворкинг и просто общается.

В LinkedIn зарегистрированы больше 875 миллионов человек и 58 миллионов компаний. Каждую минуту на этой площадке трудоустраивается 8 человек. Предложения для работы есть для каждого специалиста: фронтенд-, бэкенд- или фуллстек-разработчика.

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

Читать дальше
Айти
  • 15 февраля 2023
Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR

Как попасть в компанию мечты, если там закрыты все вакансии. Советует HR

Если вы мечтаете работать в определённой компании, но не нашли вакансий на сайтах по поиску работы — ещё не всё потеряно. Проверьте объявления на других площадках. Если и там ничего нет, воспользуйтесь «обходными путями»: начните со стажировки или познакомьтесь с рекрутёром.

Читать дальше
Айти
  • 14 февраля 2023
Что почитать начинающему разработчику

Что почитать начинающему разработчику

Книга — источник знаний. Можно погрузиться в новый язык программирования, изучить фреймворк, получить ответ на интересующий вопрос и много другое. Мы собрали подборку книг, которая поможет понять, как попасть в мир IT, развиваться в карьере и чего ждать от профессии.

Читать дальше
Айти
  • 9 февраля 2023
Работа в удовольствие: как электронщик ушёл в айти и не жалеет об этом

Работа в удовольствие: как электронщик ушёл в айти и не жалеет об этом

Как работать в удовольствие

История Алексея Груднова.

Мне было 23 года, когда я окончил университет и устроился на работу не по специальности в местную компанию. Там было направление, связанное с радиосвязью и научным исследованием, поэтому студента с образованием электронщика взяли как программиста в среде Matlab. Проработал год и понял, что это не моё. Специальность, полученная в вузе, совершенно не нравилась. Мне всегда нравилось программирование и я решил целенаправленно взяться за обучение.

Обучение

На Академию наткнулся случайно, просматривая очередной ролик на ютубе. Там упоминали фронтенд, как направление и рекламу курсов. Сначала отнёсся скептически, потому что уже тогда в интернете было миллион курсов, а отношение в принципе к этому явлению было негативное.

Но по воле случая зашёл на сайт Академии. Прошёл пару бесплатных тренажёров и меня увлекло. Понял, что обучаться самостоятельно будет нереально — всё будет отвлекать, запала и мотивации на самообучение хватит на месяц-два. Поэтому решил, что самым верным способом обучиться будет купить полноценную профессию в рассрочку, чтобы ежемесячный платёж постоянно мотивировал обучаться дальше.

Параллельно с обучением работал 5/2 с девяти до шести и обучался в магистратуре. Свободного времени практически не оставалось, но делал этот выбор осознанно.

Так и попал во фронтенд. Прошёл профессию «Фронтенд-разработчик», затем решил купить отдельно курс по React.js, потому что целью было как можно быстрее устроиться на работу. Работу JavaScript-разработчиком не найти, а чисто верстальщиком быть не хотел, поэтому курс по React, что называется, мастхэв. Написал менеджеру из Академии, что «‎Акселератор» и стажировка пусть подождут два месяца, а я пойду учить React.

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

После курса по React оповестил менеджера из Академии, что могу теперь вернуться к стажировке, а пока сам начал искать вакансии.

Трудоустройство

С момента, как я попал в Академию, прошло девять месяцев. На месяц выпал из обучения, потому что писал диплом для магистратуры. Затем начал изучать рынок вакансий.

В моём городе нормальных вакансий во фронтенде не было от слова совсем, поэтому искал вакансии только с удалёнкой.

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

Тщательно выбирал вакансии, поскольку не хотел устроиться куда попало. В качестве платформы: hh.ru и «Центр карьеры» от Академии. Как показала практика, самые крутые вакансии для новичков были в «Центре карьеры».

Спустя месяц поиска наткнулся на вакансию от Thmoon.ru. Это небольшая команда, занимающаяся аутсорсом на полной удалёнке. Было два собеседования: первое с руководителем в формате общения, второе — лайвкодинг с решением трёх небольших задачек. С собеседованием справился хорошо и мне сделали оффер. На следующий день написал заявление на увольнение с основного места работы.

Настоящее время

Уже около года работаю у ребят из Thmoon. За это время сильно прокачался как разработчик, поработал в разных командах на крупных проектах. Скажу честно, первый месяц был довольно сложным в плане вхождения в процессы коммерческой разработки. Главное в этот момент не опускать руки и продолжать учиться.

Мой стек: TypeScript, React, Redux Toolkit. Также успел поработать с бекендом (Node.js), веб-сокетами. Очень доволен работой и командой. Аутсорс позволяет изучать кучу технологий, поработать на нескольких проектах, набраться опыта. Считаю, что на начальном этапе для разработчика это главное.

Очень доволен тем, что выбрал именно Академию и курсы, как способ обучаться. Это было одно из самых верных решений в жизни, которое позволило найти любимую работу и сферу деятельности. Своим друзьям, которые тоже хотят обучаться фронтенду, непременно рекомендую именно Академию, как площадку для старта.

Больше статей про выпускников

Читать дальше
Айти
  • 3 февраля 2023
Хочу работать в IT, но…

Хочу работать в IT, но…

Изучать что-то новое всегда — волнительное и завораживающее событие. Но некоторые останавливаются, даже не начав. Почему так происходит? По разным причинам, но бывают случаи, что из-за мыслей «ещё рано», «уже поздно», «нет технического образования», «не знаю английский». Мы покажем на примерах, что возраст, наличие образования и знание английского — не проблема для смены профессии.

Читать дальше
Айти
  • 19 января 2023
Как стать фулстек-разработчиком

Как стать фулстек-разработчиком

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

Фулстек-разработчик сочетает несколько направлений и может заменить собой пару более узких специалистов. Главная его особенность — это универсальность. Именно поэтому спрос на таких специалистов всегда есть и постоянно растёт. Многим компаниям выгоднее нанять одного универсального разработчика, чем содержать штат программистов.

Топовых фулстек-разработчиков очень мало, они востребованы и имеют возможность выбирать из ряда предложений то, что им интересно. Джуны с небольшим опытом в сфере фулстек-разработки могут рассчитывать на зарплату от 30 до 100 000 ₽ в месяц. Опытный разработчик получает в среднем вдвое больше — 120—200 000 ₽.

💡 Что должен уметь топовый фулстек-разработчик:

  • Понимать полный цикл процесса разработки.

  • Уверенно знать современный JavaScript (ECMAScript), применять TypeScript.

  • Строить архитектуру клиентских и серверных приложений.

  • Применять ООП и паттерны проектирования на практике.

  • Проектировать и разрабатывать REST API.

  • Проводить автоматизированное тестирование фронтенда и бэкенда.

  • Работать с базами данных.

Зарплаты фулстек-направления

Исследования компании Хабр Карьеры за 2022 год говорят, что средняя зарплата разработчиков в России составляет 140 000 ₽. Сумма немного различается по регионам. В Москве зарплата подросла за год и составляет 180 000 ₽, в Санкт-Петербурге осталась на уровне начала года — 150 000.

Зарплата фулстек-разработчика в среднем составляет 200 000 ₽ в Москве, 160 000 ₽ в Санкт-Петербурге и 130 000 ₽ в регионах.

Этот анализ зарплат составлен по вакансиям сайта hh.ru.

Также специальность фулстек ценится за границей, зарплаты в Европе и в Америке очень достойные. В Нью-Йорке опытный фулстек зарабатывает 3000—3500 $. В Германии работодатели указывают в вакансиях зарплату 2500—4000 $.

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

Читать дальше
Айти
  • 20 декабря 2022