с чего начать изучать фронтенд
Как научиться фронтенд-разработке, найти первую работу и не набить шишек
Фронтенд, возможное, лучшее и самое приветливое направление, чтобы войти в ИТ. Но с ним не все так просто — во фронтенде легко начать и трудно стать мастером. В нем не будет мук выбора языка программирования, но будет борьба с его недостатками. В этой сфере есть очень много инструментов, изучение каждого из которых тянет на освоение отдельной профессии.
О том, как правильно учиться, как не набить шишек и двигаться по карьере, мы расспросили у Олега Шикова, декана факультета веб-разработки в GeekBrains и у Дарьи Дьячковой, начинающей веб-разработчицы.
В 2015 году Дарья Дьячкова поступила в НИУ ВШЭ на факультет Мировой экономики и мировой политики потому что в школе больше всего любила языки — учила английский и немецкий, постоянно выигрывала олимпиады. Ей нравилась эта сфера, но не до блеска в глазах, поэтому Дарья продолжала искать будущую профессию. В 2018 году она пришла на день карьеры в одно из HR-агентств, после которого сменила направление в неожиданном направлении.
«Я прошла длинный психологический тест, где мне посчитали тип личности-склад ума и прочее. Не в обиду психологам, но я к таким тестам отношусь скептически. После теста мне сказали, «эх, программист пропадает» и предложили послушать выступление про переход в мир ИТ. Я пожала плечами, пошла — и зажглась».
Дома она начала гуглить, смотреть обзоры профессий. Раньше Дарья мастерила веб-странички на Tilda и Wix, вела свой блог-обзор международных новостей, поэтому подумала о фронтенде в первую очередь. Тем не менее она просмотрела все вводные вебинары профессий и языков программирования, попробовала написать маленький кусочек кода на нескольких языках программирования и выбрала JS, как самый близкий по духу.
Что делают фронтендеры
«Если вы открываете любую страницу в браузере, все, что вы видите перед собой на странице — это делают фронтендеры. Но на самом деле их работа намного сложнее одного внешнего вида», — рассказывает Олег Шиков, декан факультета веб-разработки в GeekBrains.
Олег писал код с детства. Первые эксперименты были на языке С, а в 2011 году он перешел на Javascript. Многое из того, что есть в технологии сейчас, тогда только зарождалось. HTML и CSS не имели больших возможностей, а в индустрии преобладал Flash. Профессия в целом была намного проще — всего лишь HTML-верстка и несложное оформление. Достаточно было писать теги и красиво их оформлять на CSS. Пользователи нажимали кнопку, и страница полностью обновлялась. Уходил запрос на сервер, сервер отдавал новую верстку. Но такой подход не позволял делать отзывчивый интерфейс.
«Задача фронтендера в наши дни — строить логику сайтов на стороне браузера», — говорит Олег, «Эта логика разрабатывается на языке программирования JavaScript. Современные сайты могут полностью работать на стороне клиента, делая запросы серверу лишь изредка, например, чтобы сохранить данные пользователя или загрузить необходимую информацию. То есть сейчас мы запрашиваем не полностью обновленную страницу, а только необходимую информацию, и грамотно ее отрисовываем в браузере. Благодаря такому поведению, сайты становятся отзывчивее и экономят часть трафика пользователя».
Учить фронтенд — это учить JavaScript?
Определившись с направлением, Дарья поступила на факультет веб-разработки в GeekBrains. В представлении многих обучение фронтенду слилось с изучением языка Javascript, но, как считает Олег Шиков — это не совсем верно.
«Первое с чего надо начать — это конечно HTML. Он предельно прост, с ним очень легко справиться, очень легко написать свой первый сайт. Конечно, он не будет отзывчивым, но он будет работать, и его уже можно будет выложить в интернет. Далее необходимо добавить этому сайту красивый внешний вид, чтобы это было не просто полотно текста, а удобная и красивая страница с визуальными элементами. В этом поможет CSS – каскадные таблицы стилей. Пары недель хватит, чтобы освоить и HTML, и CSS. А сразу после надо приступать к JavaScript, потому что он — основа основ для того, чтобы делать отзывчивый интерфейс».
Но когда к технологии приходит популярность, следом за ней идет море критики. Многие опытные разработчики один за другим вскрывают в своих докладах, выступлениях и статьях проблемы и языка и предлагают альтернативы. Новичка эти обсуждения могут только сбить с пути. Как считает Олег, начинать изучение фронтенда с других языков только потому, что их больше хвалят профессионалы, будет ошибкой.
«Несколько лет назад все дружно ругали PHP, сейчас все дружно ругают JavaScript, это такой мейнстрим. Конечно, JavaScript не без проблем, с этим никто не спорит. Но например, TypeScript (другой популярный язык от Microsoft, являющийся расширением возможностей JS) не выполняется в браузере сам — он переводится (компилируется) в JavaScript. Если мы что-то напишем на TypeScript, то все равно получим JavaScript, который уже выполнится в браузере. Чтобы грамотно отлаживать код необходимо знать JavaScript и уметь работать с браузером».
Но Дарья находит время, чтобы учить вещи, которые и не входят в программу.
«Я привыкла много учить и разбираться до конца, я из тех людей, кто читает все дополнительные материалы к статьям и делает доп.задания, потому что им просто интересно. Нахожу время осваивать, например, Nuxt.js, Typescript, Vue.js, Webpack и Stylus».
Что такое React, Vue и Angular и как их выбирать
Помимо Javascript и других языков от фронтендеров требуют знание различных инструментов для работы. На чистом JavaScript довольно сложно разрабатывать интерактивные отзывчивые интерфейсы веб-страниц без использования сторонних библиотек.
Библиотека — это тоже JavaScript код, уже написанный другими разработчиками. Он предоставляет удобный набор решений, чтобы выполнять заготовленные действия, которые регулярно требуются в работе. В вебе есть большое разнообразие таких библиотек, которые упрощают написание отзывчивых интерфейсов для веб-сайтов. В их числе самые известные — это React, Vue и Angular.
«Выбор между ними — сложный вопрос. Можно выучить все три. Это не сверхсложная задача, потому что когда поймешь, как работать с одним, каждый последующий будет учить проще. Но по моим наблюдениям, они используются немного в разных сферах. Angular — один из самых старых. Он чаще используется в корпоративном сегменте, на больших проектах, с поддержкой легаси кода, который был написан несколько лет назад. React используется повсеместно. Он первый в списке, когда пишут новые интерфейсы и веб-сервисы. Про Vue можно сказать, что он простой, молодой, крутой и мейнстримный.
Я бы советовал попробовать написать простую логику на всех трех фреймворках — условно говоря todo лист — на основании своих ощущений понять, какой нравится больше, и учить его. Либо посмотреть вакансии в своем городе, и выбирать, например, React, потому что большинство вакансий на фронтенд-разработчиков требуют знания именно React. Но переучиваться потом будет не сложно».
Дарья пишет приключенческие романы и разрабатывает на Nuxt.js справочник по вселенной своей книги. Еще она делает проекты и лендинги для своих друзей, поэтому выучила адаптивную верстку, медиа-запросы и прочее. «Я начала React.js, придумала проект на будущее, который хочу воплотить на React Native. Пока планирую архитектуру, рисую блок-схемами, и читаю про технологии, которые можно использовать».
Как проходит учеба
«Когда началось обучение, преподаватели все отлично объясняли – для меня важно выстроить полученные знания в систему. Домашние задания помогали закрепить навык, бонусом давали наводку где и что ещё поучить. Много читала и осваивала сама, смотрела руководства и мини уроки на YouTube. На GeekBrains всегда можно написать преподавателю или наставнику курса или своей группе в чат. Все помогут, объяснят. Если нашел интересную статью – тоже есть с кем поделиться и обсудить.
Думаю, ощущения, когда видишь свой первый Hello world, не забудет никто. Да и в целом, ощущения, когда сделал по макету красивый UI, а он ещё и работает – это драйв».
Учеба длится полтора года. Олег Шиков считает, что просто учить синтаксис — это скучно, поэтому учеба сразу строится вокруг проектов. «Мы даем базовые вещи, синтаксис, и сразу пытаемся применить их на практике, пишем простые веб-страницы. После этого мы даем PHP, тем самым обучая студентов бекенд (серверной) разработке. Некоторым начинающим разработчикам кажется, что достаточно выучить HTML с JavaScript, и этого хватит, чтобы стать востребованным на рынке. На деле не совсем так. Нужно знать архитектуру, алгоритмы, паттерны и фреймворки — и не просто знать. Необходима еще практика, надо написать свой продукт, поучаствовать в коллективной разработке».
В начале обучения студенты пишут код по отдельности, проверяя его с преподавателем, а к середине обучения начинают разрабатывать продукт вместе со своими одногруппниками, благодаря чему получают опыт командной разработки.
Помимо учебы Дарья любит заниматься на платформе Kodiri.com, где проходят международные соревнования по JS. «Там можно тренироваться и одному, решать задания на время, точность и красоту кода. Я познакомилась с основателем платформы Рикардо — он классный парень. Теперь пишу для них задачки. К каждому заданию я прикладываю эталонное решение и тесты (так я, кстати, начала писать юнит тесты). Мне забавно соревноваться с другими игроками, когда вероятность, что хотя бы одно из пяти заданий будет твоего авторства ≈0.94. Да, я посчитала, мне было любопытно, почему я так часто их встречаю. Свои честно решаю и в ответы не смотрю. Захватывает элемент геймификации, я уже получила высшие погоны (Императорское Величество), теперь осталось подвинуть Юраша как лучшего игрока месяца. Этого элемента игры и духа соревнования в обучении мне недоставало, в целом, думаю, стоит добавлять подобные возможности в образовательные платформы. Несколько дней задачек Kodiri на скорость, и я во сне напишу arr.map(e =>».
Поиски первой работы
На каком этапе начинать поиски работы — очень спорный вопрос в индустрии. Одни убеждены, что только годы обучения и проработки теории на практике в безопасных условиях дают человеку право просить деньги за разработку. Другие наоборот — что учиться надо работая на настоящей работе. По словам преподавателя многие студенты идут по второму пути.
«Я знаю студентов, которые получали первые заказы или устраивались в фирмы на третей четверти. Они продолжали обучение, совмещая его уже с работой. Все зависит от человека и его способности учиться. Начинающему разработчику проще устроиться в маленькую компанию, чем в большую. В компаниях вроде Mail.ru или «Яндекс» строгий отбор. Далеко не каждый опытный разработчик сможет туда устроиться. Но попытать счастья, конечно, может каждый».
Когда у Дарьи за плечами было полгода обучения и резюме-портфолио в форме сайта, она прошла несколько собеседований, но навыков устроиться фронтенд разработчиком ей не хватило.
«На первом собеседовании было страшно. Я откликнулась на вакансию фронтенд разработчик Vue. Готовилась тщательно, повторила весь материал JS и Vue, и все что выучила за полгода GeekUniversity, разобрала tricky questions и всякие мелочи, где JS ведёт себя непредсказуемо. Собеседование проходило по Skype. Небольшая компания, сразу техническое интервью, минуя HR. Я бодро отвечала на вопросы, мы говорили целый час… а потом оказалось, что они всё-таки искали фулстек разработчика. Бывает».
На Хабр Карьере вы можете посмотреть свежие вакансии для фронтендеров и подписаться на рассылку новых.
«Джуниор-разработчикам задают простые вопросы, чтобы убедиться, что они знают основы», считает Олег, — «Я бы спросил про адаптивную и семантическую верстку, про то, как работать с чистым JavaScript. Сейчас тренд на фреймворки и библиотеки, те же React, Vue и Angular, а «ванильный» JavaScript без дополнительных библиотек — его не все знают. Я бы хотел убедиться, что разработчик знает, как с ним работать, а не сразу кинулся в лагерь условного React.
В любом случае вам придется потратить какое-то время, чтобы откликаться на разные вакансии, проходить разные собеседования. Проходить их — это тоже определенный опыт и навык. Отказы — это нормальная ситуация, бояться вообще не нужно»
«Спустя ещё два собеседования мне порекомендовали продолжить обучение и попробовать снова позже. Нужны были и общие знания — протоколы, архитектурные решения и прочее. Я и сама понимала, устраиваться было рано. Поэтому нашла классную смежную работу с ИТ — устроилась инженером технической поддержки в Букмейт. В обязанностях отвечать читателям на вопросы по работе приложения и сайта, что-то мелкое советовать как чинить, на проблемы покрупнее оформлять баги в JIRA и Confluence. Плюс, теперь отлично представляю, как обычные пользователи юзают UI/UX нашего приложения. Подсказка, «это не баг, это фича». Или когда разработчики хотели как лучше, а пользователи не поняли, как это и зачем.
Хороший шанс посмотреть на обе стороны — как пользователи юзают приложение, и как разработчики его развивают и чинят».
Как развиваться в профессии
— Я бы советовал развиваться в фулстек-разработчика, знать и бекенд, и фронтенд. Если же говорить только про фронтенд, то — хоть и необходимо хорошо знать JavaScript — без фреймворков никуда. Их надо учить.
На TypeScript стоит посмотреть, хоть его и не требуют во всех вакансиях. На самом деле он интересный, и JavaScript-разработчику выучить его очень просто. По факту это тот же самый язык с дополнительными фичами, которые позволяют писать более надежные системы. TypeScript добавляет в язык явную систему типов, которая позволяет сказать, что эта переменная будет числовая, а эта переменная — строковая.
В чистом JavaScript такого нет, там переменная может иметь любой тип, и это иногда приводит к ошибкам. Вы ожидаете число в переменной, а получаете, например, строку или объект, и у вас из-за этого ломается логика работы программы. TypeScript помогает избежать такой ошибки.
Сейчас многие смотрят в сторону PWA. Дело в том, что, как я уже говорил, рынок смартфонов огромный. Большинство пользователей, которые заходят к вам на сайт, с большой вероятностью делают это с телефона.
PWA (Progressive Web Applications) — это сайты, которые имеют дополнительные возможности, позволяющие удобно работать с ними в том числе со смартфона. Например, на андроиде PWA-сайт можно добавить себе на на стартовый экран и запускать, просто нажимая иконку. Есть возможности, которые позволяют улучшить сайт так, что он будет работать, даже когда на смартфоне нет интернета. То есть, это практически нативное приложение. Недавно Google выпустил обновление Google Play, благодаря которому вы можете добавить свой PWA-сайт в магазин, и пользователи смогут его скачивать и обновлять как обычное нативное приложение, которое почти неотличимо от обычного, написанного, например, на Java. А на самом деле оно написано на JavaScript и сверстано с помощью HTML.
Зарплаты
Медиана зарплаты фронтендера-стажёра находится на уровне 35 тысяч рублей. Специалист младшего уровня может рассчитывать на 50 тыс., миддл — уже на 97 тыс. Синьор и лид получают в среднем 170-190 тысяч рублей.
По данным калькулятора зарплат Хабр Карьеры средняя зарплата фронтенд-разработчика составляет чуть менее 110 000 рублей (диаграмма кликабельна).
Что почитать и посмотреть для самостоятельного изучения
Книги непосредственно про JS и HTML/CSS:
Книги по программированию:
Начало пути Frontend-разработчика
Дисклеймер: данный пост сделан мной, чтобы рассылать его друзьям, которым нужна помощь с началом изучения Frontend- разработки. Если он поможет и тебе, заглянувшему сюда от нечего делать — буду очень рад. Ну а если не поможет — чего ты ожидал от поста с таким дисклеймером? В любом случае, любые вопросы, фидбек, и критика приветствуются.
После того, как все предупреждены, приступим к делу
Что такое Frontend?
Frontend/фронтенд/разработка клиентской части приложений/разработка интерфейсов/верстка with benefits — одно из самых презираемых «труъ программистами» направлений разработки. Причина тому — достаточно низкий порог входа (можно не обладая мощной базой довольно быстро начать делать коммерческие проекты) (быстро — это месяца три изучения, а не неделя, закатай губу обратно) и полное незнания большинства фронтендерами таких понятий как «управления памятью» и «строгая типизация».
Суть занятия фронтендера заключается в том, что ты с помощью кода на html/css/js (с вариациями, о которых я расскажу чуть позднее) рисуешь те страницы сайтов, которые видит пользователь, и прописываешь логику взаимодействия с этим контентом: при нажатии на кнопку делаем вот это, после заполнения формы отправляем её на сервер и т. д. Как правило для этой деятельности НЕ НУЖНО обладать выдающимися дизайнерскими навыками, потому что чаще всего, когда нужно сверстать сайт, тебе дают нарисованный в figma (графический редактор, заточенный под веб-дизайн) макет сайта и говорят «сделай вот так же, но чтоб это было сайтом и работало». Иногда придётся самому додумывать, как это должно выглядеть на устройствах той или иной ширины, потому что твой любимый коллега дизайнер сделал макет только под десктоп. Ещё реже у тебя просто есть ТЗ в духе «здесь нужно фильтр для таблички сделать чтоб вот по этим параметрам можно было выбирать, дизайна не будет дедлайн вчера». Тут уж либо тебе это нравится, либо выбора не было, либо сам дурак, что согласился. В целом нечастая ситуация.
Что необходимо знать для старта?
Все, что тебе понадобится — это школьная математика хотя бы с калькулятором и английский язык хотя бы с переводчиком. Без умения делить, умножать и складывать сложно будет высчитывать, какой отступ или размер должен быть у того или иного элемента, а без знания английского со временем ты просто не сможешь найти в интернетах этих ваших решение какой-то проблемы в процессе работы, не дернув старшего товарища.
Кроме этого, желательно иметь немного воображения, чтобы визуализировать в голове схемы расстановки компонентов, ну и некоторое количество алгоритмического мышления/знания программирования на недостижимом уровне «хоть сколько-то». Если этого нет — придет в процессе. Если не придëт — а нужно ли тебе это IT?
Немножко философии и экономики.
Возможно ты уже слышал что-то про Тильду и всякие движки для сайтов типа «Joomla», «WordPress», «Drupal», «1C Bitrix», которые также известны как CMS. Вкратце: это вещи, которые позволяют очень быстро и очень недорого, даже почти не зная программирование, создать на коленке свой интернет-магазин, форум или что-то подобное.
Так вот, с вероятностью близкой к 100% ты не сможешь писать подобные вещи дешевле, чем это делают разработчики, использующие данные системы, не умирая с голоду. Значит ли это, что тебе стоит перейти на подобные технологии?
Тебе решать. Для меня лично ответ «Нет».
Скорее всего, я не смогу отхватить хорошую часть рынка и составить конкуренцию людям, которые могут интернет-магазин сделать за 10к. Я за лендинг обычно больше беру. И путь, который я буду описывать ниже, он не совсем для тех, кто хочет быстро научиться и сидеть клепать лендосы/простые штуки за недорого. Есть много гораздо более интересных вещей (маркетплейсы, CRM, LMS и т. д.), которые очень и очень сложно сделать быстрыми и качественно работающими, используя готовые решения. И лично я топлю за то, чтобы вы — те, кто читает этот текст — тоже учились с заделом на то, чтобы создавать сложные и интересные вещи. За это неплохо платят (статистику найдете сами), и это весело.
Стек технологий, с которыми вы столкнетесь: языки разметки, оформления, программирования, фреймворки и другое.
ВНИМАНИЕ! Бóльшую часть технологий, описанных ниже, НЕ НУЖНО учить и использовать сразу. Понимание, что они нужны и необходимость их использовать придëт с крупными проектами. Если придет раньше — супер, дерзайте. Просто не пугайтесь такого обширного списка.
1) HTML (HyperText Markup Language) (не язык программирования). Это база. Язык разметки содержимого любой веб-страницы
2) CSS (Cascade Style Sheets). Данная технология позволяет задавать стили для того, что ты написал на HTML. Существуют препроцессоры, которые позволяют писать его проще и приятнее (например, с простым использованием переменных и примесей, какими-то математическими вычислениями и т.д.): Less, SASS, SCSS и другие. Сам CSS является must know технологией фронтендера, без него вообще никуда, а препроцессоры — это просто чертовски удобно. Попробуйте обязательно
3) JavaScript. Один из самых популярных и самых ненавидимых языков программирования. Медленный, неприятный, тупой, нелогичный и. все это по большей степени неправда. Во-первых, со времён создания первых мемов про JS прошло чертовски много времени, и этот язык реально изменился в лучшую сторону. Во-вторых, за счëт, емнип, гугловского движка V8, который научился его быстро компилировать, он просто летает. Самое «узкое место» в производительности клиентской части сайтов сейчас — это изменение содержимого страницы (операции с DOM, об этом чуть позже).
Также многие не любят этот язык из-за хреново сделанного ООП, но есть проблема. Это не объектно-ориентированный язык. Это прототипо-ориентированный язык. Неважно. В начале вам это не нужно, когда будет нужно — разберетесь.
5) React, Vue, Svelte, Angular — фреймворки и библиотеки для того, чтобы создавать такую штуку как SPA (одностраничные приложения). Если по-русски: сайт не перезагружается целиком чтобы перейти в другой раздел иди отобразить обновившийся контент — обновляется и изменяется только та часть, которую нужно перерисовать (отрендерить).
Эти вещи позволяют значительно ускорить быстродействие приложения за счёт того, что под капотом они сами вычисляют, как и что эффективнее перерисовать + нет бесячей перезагрузки страницы, пользователям это понравится, гарантирую.
Из того, что перечислено выше, можете выбрать любую понравившуюся технологию (посмотрите видосы, как выглядит код, как на них пишут, чтобы понять, что приятнее). Мой любимец — Vue, React тоже хорош, про Svelte ничего не знаю, а ангуляр мертв. (На самом деле нет, но брать его для обучения — очень и очень сомнительная идея).
6) JSX и TSX. Улучшения синтаксиса JS и TS, позволяющие удобно писать простую логику и разметку вместе. Полезные вещи, рекомендую. Отдельно их учить не придется, сами все поймете в процессе освоения одного из фреймворков, перечисленных выше.
7) Nuxt.js/Next.js. Библиотеки для простого создания сайтов с использованием Vue/React. Нужны, чтобы поисковики их лучше понимали, и чтобы у пользователей первая загрузка происходила быстрее. Полезные вещи.
8) Vuex/Redux. Библиотеки, которые позволяют не перекидываться данными между компонентами вашего SPA, а централизованно и хранить и изменять. Сейчас вы скорее всего не понимаете, зачем это нужно, но в процессе изучения Vue и React обязательно поймёте.
9) Jest/Mocha (моча, ахахах). Фреймворки для тестирования. Очень важная штука на больших проектах.
10) UI-фреймворки (Bootstrap, Vuetify, Material Design и т. д.). Позволяют очень быстро создавать симпатичные кнопочки, формы и прочие элементы интерфейсов, не тратя время на написание хреновой горы CSS-кода. Также ПРЯМ РЕАЛЬНО ЗНАЧИТЕЛЬНО упрощают создание адаптивных (подстраивающихся под размер экрана) кроссбраузерных (даже в IE будет норм отображаться) сайтов.
Маслята. Теперь это вы
С чего начать?
0) Установи VSCode или WebStorm, не мучайся с плохими IDE.
1) Изучи HTML и CSS на достаточном уровне для вëрстки какого-нибудь простого одностраничника без взаимодействия с пользователем. Могу порекомендовать вот этот курс на степике. Есть ещё курс Веб-разработчик 10.0 от Glo Academy, рекомендую там посмотреть как минимум видео 1, 4-13.
Обязательно пойми, что такое флексбоксы, основы блочной модели и позиционирования. Это крайне важно.
2) Сверстай одностраничник. Это может быть твоя визитка, сайт для продажи ссаных тряпок, и прочие интересные вещи — макеты подобных сайтов легко найти в сети Internet. Добавь какую-нибудь простейшую форму обратной связи (не обязательно рабочую), анимируй наведение на кнопки и сделай так, чтобы при нажатии на одну из них, например, на секунду на сайте появлялась какая-то надпись.
3) Изучи основы адаптивной вëрстки. Почитай про @media запросы. Переверстай свой сайт с новыми знаниями (Видео с курса)
4) Попробуй сделать то же самое с использованием Bootstrap.
5) Научись пользоваться гитом. В дальнейшем создавай репозиторий под каждый твой учебный проект, ибо без опыта это будет единственным весомым аргументом для работодателя «почему на стажировку нужно взять именно тебя». Небольшой видеокурс (1 час)
6) Пришло время вплотную заняться JavaScript. В этом тебе очень поможет сайт https://learn.javascript.ru/ Это в принципе один из самых лучших учебников по программированию на русском языке, который я знаю, и, если ты потратишь время на то, чтобы прочитать и отработать там весь материал по JS — это будет очень здорово. В качестве практики можно участвовать в интенсивах от тех же Glo Academy, где они верстают «Соцсети», «Онлайн плееры» и прочие нереализуемые за несколько часов вещи, которые звучат круто. Забей на кликбейтные заголовки — это даст тебе неплохое понимание применения JS.
7) Подучи сложные CSS- селекторы. >, псевдоклассы и :not(nth-last-child(3)) должны стать для тебя кристально понятны. (ссылка) Проверь, знаешь ли ты, что значит fit-content, calc(), min(), max(), clamp() и другие подобные вещи. Также будет очень неплохо, если ты решишь изучить БЭМ (Блок-Элемент-Модификатор, технология Яндекса, позволяющаяся не запутываться в именовании классов для больших проектов)Попробуй понять gridы.
8) Научись отправлять запросы на сервер с помощью fetch/axios, если ещё не научился этому в 6 пункте. База. Важно.
9) Примерно тут ты уже можешь верстать годные лендинги и даже чет посложнее. Если повезет — кто-нибудь из знакомых может подкинуть заказ. Но не останавливайся — время расти дальше.
10) Пройди курс по React + Redux от Юрия Бура (Вот ссылка). Даже если потом ты перейдешь на другую технологию. Даже если ты на 100% в этом уверен. Пройди. Он реально хорош, преподаватель все очень приятно и подробно объясняет. По итогу курса ты должен будешь уже уметь создавать пригодные для коммерческого использования SPA и поймешь, как и зачем использовать менеджеры состояний типа Redux/Vuex. Перейти на другой фреймворк после данного курса — как нефиг делать. Если финансы позволяют — рекомендую взять его на Udemy и поддержать автора, благо, он довольно дешевый.
11) После прохождения курса и практики в виде нескольких проектов с применением этих штук (которые ты конечно же не забыл залить на гитхаб, да?) можешь попробовать найти работу джуном. Шанс на успех не самый низкий.