Brackets Live Preview
Bracket’s Live Preview is a beautiful feature which enables us to see the changes on a browser as soon as we do the changes.
The Shortcut for Live Preview is:
Ctrl + Alt + P -> For Windows
Cmd + Alt + P -> For Mac
Once you enable this option, your changes will be visible in the Browser immediately as soon as you edit the code without even saving the changes.
Brackets Live Preview Highlight
The Shortcut for Live Preview Highlight is:
Ctrl + Shift + C -> For Windows
Cmd + Shift + C -> For Mac
Bracket’s Live Preview Highlight is an extremely useful feature.
Before using this feature, you should make sure that the “Live Preview” is enabled.
This helps to fix any layout issues fast as you can place your cursor on the tag and it shows the layout/outline of that tag.
The “Live Preview Highlight” feature highlights the selected tag from the editor on the browser like below –
For Example, if you place your cursor on the <html> tag, the entire document will be highlighted. Similarly, if you place cursor on <body> tag, the entire content area will be highlighted and so on.
In the Example above, we have placed cursor on <h2> tag and it highlights that particular <h2> tags in the browser.
If you are in the CSS file and place your cursor on the <h2> tag, then it will highlight all the <h2> tags on the browser.
Note/Info:
The Live preview Highlight feature inspired by the Developer Tools feature of browser like Chrome.
Cloud Confusing
Brackets Live Preview Is Not Working? How To Fix It!
Having trouble getting Brackets’ Live Preview tool to work? Brackets is an excellent text editor and the price is right (free!) but live preview can sure be fickle. Here are some things to try if your live preview tool seems broken.
It’s worth noting that there are three main issues here that might need fixing:
- Live Preview Editing (primary browser)
- Live Preview Editing (multi-browser)
- Live Preview Editing and Live Preview Highlighting break independently of one another. That is, you could have editing but no CSS selector highlighting. This is annoying, but generally less of a problem.
Live Preview edition not working? Here are the things you should try to fix it.
Enable Live Preview
You did this right? Simply go to File > Enable Experimental Live Preview.
Enable Multi-browser Live Preview
Go to Debug > Open Preferences File. You will get a .json file, where should look for “livedev.multibrowser” which needs to be set to true, not false. If you are unable to edit this file you should hit F5 to reload the editor or go to Debug > Reload with Extensions.
Doing this well let you use Brackets preview in different browsers.
Open The Right Folder
The first thing try is also the simplest: make sure you have the right project open! On the left bar, where your file tree exists, you are able to pick your open folder. If you are editing a file from folder X but you have folder Y open, live preview will usually not work.
To fix this, just to go the top item (it’ll be a folder name), click it, and choose the folder where your files exists. You should be working with the root level of your project, essentially the “/” level of your website. This will ensure all underlying relative links work. Without the right starting point Live Preview will often freak out and tell you that it can only work with “HTML files” even if you are trying to preview a literal .html file!
Alternatively if you open you project with File > Open Folder you should be good to go.
Kill Your Extensions
Bracket’s extensions system is excellent but they are not all bug-free and they do not all play nicely together. If you are having trouble with any Brackets feature you should always do the following two steps:
- Debug menu > Reload with Extensions
- Debug menu > Reload without Extensions
If step one doesn’t solve your problem, many times step two will.
HTML Syntax Errors
There are number of edge cases where preview or CSS updates can break (like the string “type =”text/css”) but one of the big things to watch out for is an HTML syntax error. You’ll see an error in the HTML debug of Bracket that will make it clear that the editor has encountered something it does not like. The line number will become red and the Live Preview lightning icon on the top right will likely go red as well.
Fix the error and you should be off to the races.
Browser Issues
These are normally Chrome issue, since most people will be using Chrome. Make sure you are using normal, Chrome stable is possible, as opposed to Canary, Chromium or some other variation. These might work, but aren’t as likely to.
Also try reloading Chrome if your preview isn’t working. There is a change that there could be an extension problem or the browser is just prevented from running a local server because of an anti-virus or similar software.
Some people have had luck by disabling background processes. This can be done by going to Settings > Advanced Settings and then unchecking the setting that says: “Continue running background apps when Google Chrome is closed.”
Reinstall Brackets
If all else fails, this is worth a shot. It seems like the equivalent of “turning it off and back on again” but it really does help sometimes.
Live preview для mozilla
Занимаюсь версткой сайтов, и уже почти пол года как я открыл для себя текстовый редактор Breckets.
Это молодой бесплатный редактор от adobe с открытым кодом для веб-разработчиков. он ориентирован на работу с HTML, CSS и JavaScript. Привлек он меня тем что в нем есть встроенный плагин Live preview
Благодаря него вы можете наблюдать за изменениями сайта без перезагрузки страницы, прямо во время верстки. Но в ней есть одна особенность, она работает только с Google Chrome.
Поскольку я предпочитаю работать с браузером Mozilla, для меня это был большой минус. Ну не давно случайно наткнулся на иностранном форуме решение данной проблемы.
Чтобы Live preview работало в mozilla нужно :
В редакторе открыть : Debug/Open Preference File
Для тех у кого на русском : Отладка/Открыть файл настроек
Откроется 2 файла defaultPreferences.json и brackets.json
defaultPreferences.json можно сразу закрыть а в brackets.json добавить строчку
Желательно добавить ее в самый верх документа. Должно получится примерно так
После этого при запуски плагина Live preview страница будет отображаться в Мазиле
Прежде решение я не находил, поэтому решил поделится им на нескольких русскоязычных ресурсах, одним из них стал Pickabu. Может кому то пригодится
Это мой первый пост не судите строго
Первый пост, а уже такой безграмотный.
Даже если судить не строго, а мягко.
Пробовал я эту адобовскую поделку. Что я таки могу вам сказать: Sublime3+Gulp+gulp-connect-reload это идеально. Плюс в галпфайл можно напихать кучу плагинов, расписать таски на все случаи жизни. Ну и да, livereload)))
Да ребята умеем только обсуждать тех кто старается ,а сами нечего не можем.Только прыгаем по сайтам и льём друг другу на голову. Сам сделай что-то прежде чем говорить ненужное.
О ! Мил человек как у тебя с Брэкетсом дела. Юзаешь его еще? У меня вопрос по нему — откликнись пожалуйста!
Вообще нужно юзать сборщик проектов — gulp Или webpack.
если на компе установлена простая Mozilla и Firefox Developer edition то live preview будет открывать страничку в браузере который уже запущен.
Если запущены оба, то страница будет открыта в обеих
Тогда уж Brackets. А вообще лучше юзать PHP Shtorm
Feel the difference
Кто-нибудь может сделать деплой?
Интересно, как выглядит фуллстэк-разработчик
Опять баг в CSS
upd. CSS-скрипт → CSS
Фулстек-извращенец
Фронтендеры каждые 2 года:
Бесплатно помогаю пикабушникам учить программирование, часть 24: «Мы составили план обучения фронтенду»
Пикабушника @pt1zza, которая любезно согласилась помогать мне в обучении программированию, составила план обучения по фронтенду. Посмотреть его можно здесь: https://telegra.ph/Roadmap-nachinayushchego-frontend-razrabotchika-11-28
Также мы сделали отдельный telegram-чат, в котором бесплатно помогаем изучить фронтенд-разработку.
Бэкенд или фронтенд?
На back-end пойдешь — сервером заниматься будешь.
На front-end пойдешь — интерфейс придумывать будешь.
На fullstack пойдешь — все сразу делать будешь.
Куда сам пойдешь, а куда друга отправишь?
Еще один рассказ про "войти в айти после 30". Продолжение
Предыстория ( Еще один рассказ про "войти в айти после 30". Предыстория ) закончилась на том, что я продал авто и встал на тернистый путь веб-разработчика. Теперь вкратце о том, как это было)
Какой ключевой навык должен быть у каждого в этой отрасли? Естественно — вёрстка. Понимание, из чего состоит страница и как управлять её внешним видом — это как дышать. Даже при разработке бэка, хотя при этом не обязательно быть супер-верстальщиком.
Я долгое время перебирал ютуб, искал контент, подходящий для начинающего и желательно содержащий весь цикл вёрстки, от создания index.html до написания последнего стиля в мобильной версии футера.
Проблема была в том, что материала крайне много, но большая часть либо устаревшая, либо сделана на пофиг, либо содержит какие-то обрывочные куски информации, не дающие полную картину происходящего на экране.
Но вот, спустя некоторое время, был найден айтишный канал с прошлогодним курсом по вёрстке. Там было всё, от настройки редактора и нарезки макета до его завершения. Скриптовую часть правда писали на jquery да и там брали готовые решения, без особых пояснений, но это было не главное, так как на старте важно понять и научиться писать разметку и стили. Мне очень зашёл формат подачи материала, поэтому данный видеокурс стал моим основным средством обучения на ближайший месяц.
Да, именно на месяц, хотя можно было и сильно быстрее, но я учился только по вечерам и не каждый день.
Закончив курс, я решил получить какую-нибудь практику на фрилансе. и обломался) Там нужен был опыт и примеры работ, хотя суммы оплаты копеечные. Тогда я поставил себе цель сверстать три макета для портфолио и повторить попытку.
Один макет я нашёл в сети, два других скачал там же на фриланс-бирже, взяв из реальных задач)
JavaScript я тогда не знал совсем, но меня выручил Bootstrap. Всякие модальные окна и выпадающие меню на нём можно делать и без знания кода.
Вёрстка макетов заняла ещё недели две-три. В это же время я передал все дела на работе и окончательно уволился.
И вот, середина сентября 2019г.
Я, такой радостный, зарегался на 6-7 фриланс биржах, разместил там свои «проекты» и начал усиленно оставлять отклики на все заказы, которые подходили под мой уровень знаний или не сильно превышали его.
Только вот хрен)) Никто не давал мне работу.
Каждое утро у меня начиналось с того, что я открывал все биржи, оставлял отклики и садился за учёбу. Также в обед и вечером.
Результат был нулевой.
Недели через полторы-две я начал впадать в уныние и думать, что всё, надо искать нормальную работу, но вдруг случилось чудо) Мне ответил один из заказчиков и я получил символический заказ по правке вёрстки на сайте. Цена работы была — 700 рублей. Я сделал это за один вечер, на следующее утро этот же заказчик предложил мне поправить кое что в скриптах. Я согласился, хотя и боялся, что не справлюсь.
В общем, на моё счастье, сайт верстал тоже джун, который везде использовал бутстрап, либо говнокодил на jquery. Я не сразу, но нашёл нужный участок кода, внёс необходимые правки и счастливый сдал работу, за которую, в общей сложности, получил вроде бы 1200р.
Это были копейки, но сам факт, что я способен что-то делать невероятно поднял мой боевой дух и я продолжил штурмовать биржи.
Потом был ещё один заказ на вёрстку полноценного лендинга, потом ещё один такой же.
Я на каждой выполняемой задаче старался чему-то учиться. Пытался сам писать скрипты модальных окон и мобильных меню, пробовал делать табы и аккордеоны. В общем все эти мелочи, которые вроде умеет бутстрап, но хотелось бы научиться самому, так как кастомизация своего кода и своей вёрстки намного проще, чем готовой библиотеки.
Но в плане дохода всё было очень грустно. Я получал заказ не чаще одного раза в неделю, зарабатывал на нём в среднем 3000-4000, 25 процентов из которых съедала комиссия биржи и комиссия за вывод денег оттуда.
Первые месяца полтора после моего старта в айти, мы с женой жили на её зарплату и остатки моей. Следующий месяц кое как только на её ЗП и микроскопический доход с фриланса.
Потом мне пришлось устроится на подработку. Я нашёл вакансию мерчендайзера в местном гипермаркете. Зарплата 13-15к, гибкий график, неполный рабочий день.
Теперь мои будни выглядели так — с утра поиск заказов и учёба, после обеда поход на работу в гипермаркет, выкладка всякого товара в течение 2-4 часов и обратно домой за комп.
Короче, было тяжело и хреново. Но, проходя через всё это дерьмо, я получал практический опыт в вёрстке и джаваскрипте.
Учёба была моим основным времяпрепровождением. Чтение учебника по js и говнокод в песочнице. Чуть-чуть пхп, так как заказчики обычно хотели чтоб формы с сайта отправляли им куда-то письма. Я скачал для этого какой-то готовый скрипт, но толком не понимал как оно всё работает.
Пытался изучить что-то из трёх китов фронтенда — Реакт, Ангуляр, Вью. Но на тот момент познания в js были очень слабыми, так что это было плохой идеей.
Вью мне не понравился в целом, Ангуляр я просто не осилил, а вот Реакт внезапно зашёл. Я какое-то время копался в доках, что-то пытался писать в своих песочницах, а потом даже запилил два небольших заказа на фрилансе. По сути это были интерактивные квизы вопрос-ответ. Заказчику было пофиг, а я немного попрактиковался)) Но на этом всё. В основном везде нужны были Senior React Developer, но я под эти критерии не подходил никак. Так что реакт отошёл на второй план.
Между делом, я мониторил hh.ru и авито, периодически оставляя отклики на вакансии и пытаясь устроиться на постоянную работу. Безуспешно.
Как-то так прошли первые 6-8 месяцев вхождения в айти.
А потом какой-то китаец поел говна летучей мыши и началась пандемия)
Как ни странно, для меня это сыграло положительную роль, так как все ушли на удалёнку, начали переносить продажи в онлайн и всячески приводить в порядок свои сайты.
Один клиент с фриланса перешёл со мной на прямое сотрудничество, минуя биржу, и я начал пилить ему собственный многостраничный сайт, с кучей джаваскрипта и анимаций. Это был офигенный опыт, хотя и через огромный стресс, потому что я всё время боялся облажаться и не вытянуть какую-либо задачу)
Помимо этого я делал какие-то одностраничники и, через знакомых, на меня вышел ещё один клиент с сайтом на WordPress. Им часто нужны были доработки, вёрстка новых страниц и всякие мелкие правки.
Примерно через месяц после начала карантина я уволился с подработки, так как работы по вёрстке стало реально много и я не успевал. Но, к сожалению, длилось это всего 3-4 месяца, а потом пошло на спад и вернулось к 1-2 небольшим заказам в неделю.
Вот тогда я снова решил устроится на работу. Но блин, даже с небольшим портфолио и некоторым опытом в боевых проектах, мне везде отказывали или игнорили. Но в этот раз я решил пойти до конца и всё таки устроился. Программистом-стажёром 1С)))
Стандартная история — компания-франчайзи набирает нулевых стажёров и учит их работе с 1С. Кто-то потом уходит в кодеры, кто-то в консультанты, кто-то увольняется. В моей группе изначально было 7 человек. Четверо отвалились на этапе обучения, ещё один через пару месяцев. Двое, один из которых я, прошли обучение и испытательный срок.
Я пытался изучать бухучёт и всякие конфигурации 1С, но шло не очень, если честно.
Помогло удачное стечение обстоятельств. В компании, где я работал существовали и отделы по веб-разработке, но не в моём убогом городке, к сожалению.
Как-то раз в один из таких отделов, потребовался дополнительный сотрудник на некоторое время, пока свой штат не справлялся.
Я на собеседовании говорил, что занимался сайтами, поэтому мой руководитель предложила мне попробовать. Отказываться было глупо. и понеслось. Вёрстка, пхп, битрикс, вордпресс, базы данных. Обучение, обучение, обучение.
Мне недоставало опыта в разработке, но я ко всему подходил ответственно и старался делать задачи максимально качественно, по мере своих возможностей, поэтому веб-отделы других городов стали часто прибегать к моей помощи. По сути я вообще стал всё время работать на них, хотя числился 1С-ником.
Так прошло ещё примерно полгода и мне предложили на фуллтайм перейти в отдел веб-разработки в другом филиале, работая удалённо из своего города.
Там я работаю и по сей день. С момента старта моего обучения вёрстке до текущего момента прошло примерно 1 год и 9-10 месяцев. Уровень дохода сейчас +- как обещает реклама айти курсов))
В последний месяц я снова подсел на реакт. Пилю на нём пет проект, параллельно изучая серверный js. Планирую, в обозримом будущем, полностью уйти в продвинутый фронтенд и бэк на js. Что из этого выйдет — жизнь покажет.
Всем удачи во всех начинаниях!
Когда за фронт взялся бэкендер
Учимся верстке. Домашка — the end
Ниже хорошая иллюстрация к вопросу почему я настаиваю на том, что я никого не учу и учить не собираюсь.
На хабре на днях был опубликован отчет хабравчанина как он на месяц организовал полноценный курс с обучением программированию на js. Если есть желание — почитайте, там есть ссылки даже на гитхаб с упражнениями.
Человек целый месяц готовил теорию, домашку, примеры и вел полноценные видеоуроки. В среднем он тратил минимум сутки в неделю на один видеоурок с подготовкой\домашкой\проверкой и тд. Из 49 учеников только 4 дошли до конца месяца.
Выводы, которые он делает в конце, довольно интересные, но я хочу написать ровно про один момент. Я его процитирую:
Тот кто хочет, справляется и сам. Хотя помощь и не помешает.
Того кто не хочет учиться, помощь извне не спасет.
Только вы сами себе — главный мотиватор или демотиватор.
Учиться трудно. Я пишу это с самого первого поста. Зачастую вообще ничего не понятно очень долго. Поэтому я рекомендую сперва пройти курсы на openedu, так как там комфортная для новичков среда и удобная пошаговая подача материала. Этот курс не даст полноценного представления, но после его прохождения курсы от той же html academy уже заходят гораздо легче.
Если не считать того, что на трекерах и складчике есть все курсы от html academy, существуют энтузиасты, которые записывают и выкладывают на youtube целые обучающие курсы.
Ищущий да обрящет, как говорится.
Я повторюсь с основными рекомендациями как дойти до стадии когда вы можете быть интересными работодателю, пожелаю вам настойчивости в обучении и помашу ручкой. Что бы я не написала потом — это будет повторением уже сказанного. А принцип DRY — наше все (да и свободное время я лучше потрачу на самообразование).
Помните, что на худой конец, платные курсы с рассрочкой оплаты таки существуют и за ваши деньги готовы вас учить.
Итак, в вашем портфолио на гитхабе должны быть примеры адаптивной верстки и js. Не один жалкий кусочек верстки, а несколько сайтов! Пусть ни один из них не будет реально работающим сайтом, но хотя бы сверстанные по макетам (можно найти в интернете) сайты с 2-3 страницами. Сделайте хотя бы один сайт с css-фреймворком (например, bootstrap)
Сделайте примеры, которые покажут что вы реально знаете JS: работа с API, DOM и тд . Отлично если осилите базовый курс по какому-либо фреймворку (не начинайте пока не разберетесь с js) и сделаете сайтик для портфолио.
Не тратьте время на jquery.
Освойтесь с git, научитесь автоматизировать разработку (сборщики, препроцессоры), научитесь работать с консолью.
Будьте любопытны. Читайте как можно больше. Почаще гуглите все непонятное. Со временем вы станете даже понимать то, что читаете.
Английский нужен. Самый большой объем информации — на английском. На английском stackoverflow шанс найти ответ в разы больше чем на русском.
Рекомендую искать работу там, где будет команда разработчиков — работая с более опытными вы будете прогрессировать быстро. Также рекомендую целиться на проекты с фреймворками. Работа с cms — тупиковая ветвь развития.
Еще немного полезностей напоследок:
Обязательно освойтесь со спецификациями:
У html есть официальная документация, к которой вы всегда можете аппелировать в спорах не тему «это правильно/неправильно». Почитайте статьи какие есть спецификации, как с ними работать.
Начинайте пользоваться спецификациями на регулярной основе. Например: в упражнениях openedu встречаете новый тег. Идете в спецификацию и читаете что про него там пишут.
** Мне всегда было удобнее работать с текущим стандартом языка за счет удобной навигации в боковом меню (раздел 4 описывает теги).
PS Мой опыт только подтверждает выводы, которые сделали многие люди до меня.
На второй созвон к согласованному со всеми времени, пришел только один человек из трех ))
Учимся верстке. Домашка — 2
Ну, ок, признайся мне, мой дорогой подписчик, поборол ли ты лень, сколько недель ты смог пройти на openedu, сильна ли еще твоя мотивация?
Статистика html academy по количеству студентов в начале курса к количеству сдавших проекты на защиту выжимает скупую слезу. В своих курсах (по крайней мере раньше) они озвучивали какой процент учащихся доводит обучение до конца.
Первый курс HTML&CSS преодолевают многие, там что-то около 70% (очень примерные цифры). Второй курс с адаптивной версткой заканчивают, наверно, что-то около 50%. JS заканчивают около 20%.
Из трех курируемых мною человек домашку на первую неделю не сделал никто. Есть даже кто не смог начать. Я понимаю как трудно встроить обучение в привычный режим дня. А еще я понимаю, что только внутрення мотивация поможет найти это время и силы. Без них у меня никогда не получалось учиться чему-то новому)) Тебе, дорогой, подписчик, желаю сильной мотивации!
Подытожим, с чем вы познакомились:
— основная структура html страницы
— как подключать стили (и скрипты, что пока не так важно)
— сделали упражнения на разметку: разметка текста, изображения, ссылки,
— установили на компьютер редактор (я работаю в vscode, бесплатный, его функционал расширяется за счет плагинов; есть более комфортный — webstorm, он из коробки умеет все, но — платный)
— возможно почитали и даже поняли что такое git
1. Если вы не читали про git, самое время начать. Чем раньше начнем к нему привыкать, тем менее болезненным процесс будет потом.
Повторю ссылку на htmlacademy
Если не заходит от html academy, то ищите в youtube «гит для новичков». Смотрите столько видео сколько влезет, чтобы получить общее представление о гите и зачем он нужен.
Если уже понятно что и зачем, вот тут побольше практики с гитом от Владилена Минина.
2. Делаете 3 и 4 неделю на openedu
3. Работа в редакторе
Заодно потренироваться переводить с английского. Если не получается на английском, ищите объяснения на youtube (emmet для новичков, например). В vscode emmet встроен по умолчанию, ничего дополнительно ставить не надо.
3.2 Отработайте упражнения на верстку и стили в редакторе, который поставили. Таким образом не сформируется привязанности к встроенному редактору в браузере и возникнет адекватное восприятие своего кода в IDE (редактор). Посмотрите как в браузерах отображается то, что вы написали и застилизовали в редакторе. Начните с простых упражнений — вернитесь к неделе 2 и из каждого набора упражнений повторите что-то в редакторе. Помните, что на openedu есть часть скрытых стилей, возможно, не всегда скопированные стили из интерактивных упражнений в вашем редакторе покажут вам ту же картинку, что и в «песочнице»
Как я учила фронтенд – плюсы и минусы разных методов
В 27 лет я решила уйти из маркетинга и стать верстальщиком, а потом и фронтенд-разработчиком. О том как это происходит – в прошлом посте, в этом – о моих способах обучения, чтобы эффективно и нескучно. Итак, мой рейтинг:
1. Боевой опыт на работе в команде
На мой вкус, эффективнее работы на реальных проектах нет ничего. Адекватные коллеги не дадут идти совсем в говнокод или не в ту степь, кроме того, без коллег бывают случаи, когда один на один сидишь с задачкой 3 дня, когда она запросто решается известной библиотекой за 15 минут, но тебе просто неоткуда о ней узнать, а в коллективе обычно можно как минимум спросить «в какую сторону гуглить». Здесь главное соблюсти грань между «не сидеть 2 дня» и не «спрашивать, не погуглив», но обычно собственная адекватность или уровень терпения коллег помогают найти баланс. Звучит неплохо, но новичку при поиске работы обычно приходится соглашаться не на самые лучшие условия, и это не только про зп.
+ обучение в рабочее время, не надо выкраивать дополнительное
+ расширение портфолио с согласия заказчика
+ если повезёт, то можно быстро вырасти в этой компании или перейти в другую на новых условиях
– денег дают мало
– подрабатывать где-то ещё времени нет
– без опыта не берут
В любом случае – как на картинке будет не сразу 🙂 на несложные проекты по верстке обычно довольно большая конкуренция на биржах. Совсем новичкам не советую фриланс вообще, а после 3-6 месяцев работы в офисе, почему бы и не да. Это те же боевые проекты, возможно даже с небольшой обратной связью – заказчик уж постарается протестировать то, что вы написали, перед тем как заплатит. Однако старших коллег рядом нет, спросить зачастую не у кого. Кстати, когда совсем не у кого спросить и не помогает ни Гугл, ни StackOverflow, есть чаты в телеграмме по вёрстке и по разработке, спросить можно там — могут ответить, но могут и посамоутверждаться, тут как повезет. Отдельная специфика фриланса для разработчиков с небольшим опытом – его сложно найти, пока круг знакомств в сфере совсем маленький. Многие ребята идут на биржи, но быстро в них разочаровываются – некоторые такие сайты ещё года полтора назад дружно сделали отклики на задачи платными, да и на отклики новичков заказчики мало обращают внимания. Последних тоже можно понять – у них есть проект, например, на вёрстку одной странички, и они скорее доверят ее Антону с 400-ми положительных отзывов и рейтингом 8000, чем MegaMonstr1997, зарегистрировавшемуся 16 минут назад и, как ни странно, ещё не получившему 400 положительных отзывов. Мой опыт с биржами – нашла ту, где первые 25 откликов бесплатны, писала заказчикам подробные сопроводительные «Посмотрела сайт, с задачей справлюсь, портфолио вот, еще заметила, что у вас немного на мобилке едет верстка, бесплатно поправлю», где-то на 12-15 отклике случился первый заказ. Естественно, «бесплатно поправлю» – это про работы на 5-15 минут. А иногда первым фрилансом становятся сайтики для друзей, знакомых или для мамы. В последнем случае вы вряд ли будете брать с мамы деньги, имейте совесть, но наверняка получите столько тёплых слов и благодарностей, сколько не получите ни от одного заказчика :З
+ расширение портфолио с согласия заказчика
+ денег все ещё дают
– нет опытных коллег рядом (здесь и далее)
– денег ещё меньше
– фриланс сложно найти
3. Курсы с ментором на 2-3 месяца
Я и училась, и сама сейчас работаю наставником на таких курсах, и это хороший способ изучения. Плюс составленная изначально программа даёт системность, тогда как ментор не даёт расслабиться. Будьте готовы, что курсы изначально будут троллить вас обещаниями «Зарплата 120 тысяч через три месяца!», «Изучим одновременно Html, Css, React, Php, Java c нуля за полгода!», «Фулл-стек за 12 занятий»)) Это почти всегда неправда. Однако хорошие курсы разложат по полочкам, не дадут облегчить себе задачу при выполнении практики и написать откровенной лажи
+ действительно дают знания
– сложно выбрать хорошие курсы
– сложно выбрать толкового ментора, обычно кот в мешке
– требует времени, некоторые мои студенты даже брали отпуска, чтобы закончить курсы и защитить диплом
– курсы заинтересованы, чтобы вы покупали и дальше, поэтому зачастую многие важные темы «будут рассмотрены только на втором уровне»
– работодателю обычно пофиг на курсы и сертификаты с них
– дорого (в среднем от 20 тыс до 60 тыс) – если вы студент
– дёшево (в среднем 3-7 тыс) – если вы ментор и хотите подзаработать
4. Бесплатные видосы с Ютуба и где найдете
Неожиданно, что выше книг-статей и прочего? А вот так. Для меня видео-уроки стали просто открытием. В зависимости от силы мотивации в конкретный день я выбирала соответствующий по длительности видос по вёрстке с симпатичным результатом в конце. Например, поисковый запрос на Ютубе мог выглядеть как «Верстка лендинга html», далее смотрю, сколько длится видео и что получается в конце. Мое любимое – 2-2,5 часа и небольшой лендосик по путешествиям или вкусняхам. Но был и один курс на 10+ занятий с более серьезным проектом в конце. Суть просмотра – останавливать видео каждые 30 секунд и повторять за автором, делать ту же страничку / приложение. Звучит просто, но уже на 15-ой минуте у тебя начинает отваливаться то, что у ведущего прекрасно работает. Начинаешь искать, выясняется, что забыл пару css свойств, которые автор быстро напечатал на 3-ей минуте. И вот этот поиск – самое ценное, в процессе поиска учишься отладке через DevTools браузера, через консоль и тд.
+ хороший обучающий эффект
+ быстрый результат в виде знаний и сверстанного шаблона
– можно попасть на недалёкого автора и научиться делать неправильно
4. Книги с упражнениями
В некоторых книгах с первой до последней главы читателю предлагается писать с нуля одно приложение, постепенно улучшая его. В других давался ряд не очень связанных друг с другом заданий. Мне способ не очень зашёл, я начала свое включение во фронтенд с книги по JS, потом практически не возвращалась к книгам кроме формата «Почитать в самолёте по дороге в отпуск».
+ недорого по сравнению с курсами
– очень быстро устаревают
– без практики прочитанное усваивается очень слабо
– совсем не похоже на тусу по уровню веселья
Статей «Советы по отладке JS», «CSS-трюки: режимы наложения цветов», «10 хитростей JavaScript о которых вы не знали» – великое множество, однако если пока для человека весь JavaScript — одна большая хитрость, толку от них будет немного. Зато уже в процессе изучения и работы во фронтенде, одна прочитанная с утра по пути в офис статья может дать не только понимание того, что нового появилось в мире разработке, но и +100 к чсв, а также возможность лёгкого выпендрежа перед коллегами (или начальством, если повезёт).
+ больше шансов быть всегда в теме происходящего в мире разработки
– дают вишенки на торте, но не сами навыки
6. Игры типа рпг на минималках
В отличие от книг звучит и выглядит весело. За все игрухи не скажу, но мне попалась та, которая стоила 4 доллара в месяц и имела сотни заданий вида «Есть твой персонаж, есть песчаные яки — от них надо уклоняться, но стрелять по ним нельзя, есть скелеты — их бить мечом, есть орки — если слабый, то защищаться щитом и бить мечом, если сильный, то создавать своих клонов, сначала надо всех орков рассортивать по силе». Далее игрок преобразует то, что понял из «ТЗ» в код на JS с описанными методами «защищаться щитом», «рубить мечом», «создавать клонов», обычно в циклов, условий, сортировки. На мой взгляд, такие игры могут быть полезны только для совсем новичков, которым надо попробовать написать первые циклы и условия, для всех остальных толку будет немного. Еще – вы фиг докажете начальству, что таким образом учите JS 🙂
Способы, которые я сама не пробовала – например, поиск частного ментора, я не описываю.
Войти в IT в 27 лет
Расскажу про свой опыт смены работы с не-айтишной на айтишную, про проседание по зп в 4 раза, про собесы, про правдивость обещаний знакомых программистов типа «да ты уже через полгода будешь 150 зарабатывать» и в целом про свои поиски
Волею судеб у меня 2 высших в сфере экономики, а знакомство с программированием ограничивалось Бейсиком на курсах в 7 классе и парой шаблонных сайтиков, которые я делала для поиска клиентов по фотографии (подрабатывала в универе) и по SEO оптимизации.
Я работала в маркетинговом агенстве в центре Москвы, была более чем довольна как доходом, так и гибким графиком, и еще более гибким отношением начальства, позволяющего прийти в офис к 12 и уйти в 16, если работы не было. Впрочем, тот мой шеф был отдельным кадром — однажды я задала ему достаточно тупой и очевидный вопрос, на что он ответил «Я нашел причину проблемы за 2 минуты, ты тоже сможешь решить ее сама — у тебя час, на кону твоя премия». Однако через пару лет работы я достаточно разочаровалось в SEO и захотела чего-то более конкретного в плане сферы деятельности.
На тот момент я искренне верила в то, что моих знаний тегов h1 и span более чем достаточно для понимания верстки (про флексы-гриды, мобильную верстку и анимации я даже не задумывалась), поэтому резко решила освоить JavaScript и стать фронтенд-разработчиком. Зарплаты на HeadHunter радовали, книжка по JS лежала у меня на столе. 3 месяца неспешного изучения, подколки коллег, видевших темную тему редактора кода у меня на мониторе, «Опять Пентагон взламываешь?» и я отправилась на первые собеседования. Для портфолио я сверстала несколько сайтиков по видео-урокам.
До тех собесов у меня почти не было неудачного опыта собеседования — чаще звали, чем нет. Тут же я приходила и за первые 5 (серьезно, пять) минут разговора с техническим специалистом я сама понимала, что дальше можно было просто встать и уходить. Очень быстро стало понятно, что о фронтенде речи быть не может, взяли бы верстальщиком — на тот момент я не могла ответить на вопросы о том, как выровнять элемент по вертикали, как сделать модалку на Бутстрапе и т.д. Что поразило больше всего — технические директора тратили свое время и объясняли. Вплоть до «А давайте вместе посмотрим, залезем в документацию к Бутстрапу, так, хорошо, вот она модалка. «. Надо сказать, что эти объяснения отпечатались у меня в голове, мне кажется, навсегда.
Наконец, меня взяли верстальщиком в маленькую контору на несколько человек. На зп в 4 раза меньше текущей на тот момент. Но взяли! Я радостно начала ездить к 10 утра на окраину Москвы (реально окраину, там было только шоссе и грустная тропинка вдоль него), огребать за опоздания на 3-4 минуты, самой покупать чай и кофе и делать шаблонные сайты. Моего энтузиазма хватило до того момента, когда я, стоя на пустом этаже бизнес-центра перед автоматом с едой, думала о том, могу ли я себе позволить вафли или нет. После этого я отправилась просить повышения к начальству и получила ответ «Если вы сможете повысить продажи, то мы поднимем вам зп». Как моя работа связана с продажами, я не поняла и открыла резюме. Получила втык от руководства. Усилила активность по поиска новой работы.
Несмотря на все странности первой компании, за 2,5 месяца в ней мне удалось понять намного больше, чем за все время самостоятельного изучения верстки. Боевой опыт — есть боевой опыт. Научилась и мобильной верстке, и кастомизации готовых библиотечек, и отправить формочку на php. После чего меня без проблем взяли в агентство, и это были почти полтора года идеальной работы. Очень повезло с командой — стоило попросить кого-то о помощи, и коллега мог просидеть с тобой и полчаса, и час, и два, пока проблема не решалась. Опять же самый разноплановый опыт — много клиентов, много проектов, много технологий. Этому клиенту нужны доработки сайта на Vue, здесь — верстка с анимацией с нуля, эти ребята требуют PixelPerfect, тем нужно разобраться с Docker для сборки проекта, параллельно подрядчики намутили конфликтов в гите и ждут, пока я их решу. Все начиналось с задачек по верстке, потом иногда попадался и JavaScript, и полноценный фронтенд. Но 80-90% — верстка.
Стресс — бывало, но опыт — бесценный. Но у меня ключевым фактором оказалась еще и отличная команда, благодаря которой опыт набирался, а стресс был небольшим. Как говорил мой бывший «Ты хоть по одному из своих бывших так скучала как по той работе?». Как я узнала позже, это весьма распространенная схема «Пойти новичку работать в агентство, набраться опыта и потом уйти на сторону клиента — на меньшую загрузку и большие деньги». И такой момент настал и у меня.
В конце февраля 2020 (вы чувствуете, чем пахнет?) я начала деятельность по смене работы. Хотелось меньше загрузки и больше погружения в глубину технологий (когда ежедневная загрузка на 90-110%, нет ни времени, ни мотивации углубляться, надо быстрей-быстрей), ну и больше денег тоже хотелось — ни секрет, что в агентствах не самые высокие зарплаты. Одним из главных критериев было «Фронтенд, а не только верстка».
Ровно за 3 недели до начала общего карантина в марте 2020 я уволилась. Тогда еще мало кто верил в карантин. Но случилось то что случилось, и в середине марта мне позвонили кадры с новой работы и попросили срочно приехать и оформиться в штат, так как с послезавтра они переходят на удаленку.
Устроилась фронтенд-разработчиком. Почти 4 месяца на новой работе, и я ни разу не видела ни одного из своих коллег-программистов, все удаленно. В целом, никому бы не посоветовала включаться в новую работу по удаленке. Ситуаций, в которых чувствуешь себя тупой, в разы больше, чем при офисной работе. Мелкие административные дела типа подписать документ или написать электронное заявление на отпуск становятся часовыми квестами. Однако лучше так, чем если бы я не успела найти новую работу перед карантином вообще. А так — работаем, по зп удалось выйти на тот уровень, который был до ухода в IT. Но 150 пока нет, и тем более их не было через полгода после смены профессии, не ведитесь на такие обещания 🙂
Brackets live preview как настроить
Привет читатель. Продолжаем изучать редактор Brackets. И сегодня я расскажу о такой обалденно-удобной функции как live preview. У многих сразу мелькнула ассоциация с трансляциями в инстаграме, но на самом деле лайв превью переводится как интерактивный просмотр.
Что такое live preview?
Интерактивный просмотр. Ну а если по человечески, то просмотр изменений на сайте в реальном времени.
Это почти как раньше (что то поменял, сохранил, обновил страницу), но намного проще — что-то добвил/удалил/изменил и сразу увидел все изменения без сохранений там всяких, обновлений…в общем очень удобная вещь, как для профи, так и для новичков и чайников.
Как включить итнреактивный просотр?
В прошлых уроках мы уже мельком затрагивали live preview. Находится он в правом верхнем сайдбаре (первый значек), на молнию еще похоже.
Для запуска достаточно просто кликнуть по значку. Во время первого запуска откроется окно с предупреждением что интерактивный просмотр находится на стадии тестирования, а это значит что — айм сорри если вдруг что-то не работает мы предупреждали..
Еще там будет сказано что работает функция на данный момент только с html, css и частично javascript файлами. Для верстки этого будет вполне достаточно а вот допиливать и натягивать на движок придется уже по старинке. Ах, да не забудьте скачать google chrome. Другие браузеры не поддерживаются.
Для демонстрации я скачал первый попавшийся более-менее чистый шаблон (html5up dimension) и запустил live находясь в файле index.html (это важно, ведь какой может быть лайв из css файла??).
Для удобства я разелил экран пополам (обычно просто использую второй монитор).
Итак, перед нами открылась страница и ничего особенного на ней нету (точно такая же как и при обычном открытии из проводника), разве что адрес указан не относительный.
Возвращаемся к коду и начнем менять заголовок h1. Заметили как после клика на заголовок на странице он выделился цветом а потом осталась только обводка? При замене слова все изменения будут видны в минимальной задержкой сразу в браузере. Работать можно не только из редактора т.е. можно кликнуть в нужном месте страницы и автоматически выделится кусок нужного кода в редакторе.
Настройка live preview
Настроек редактор имеет мало, вернее одна. Убирать подсветку при клике по элементу как в коде так на странице. Отключается и включается она комбинацией клавиш ctrl+shift+c или «Вид» — «Подсвечивать в Live Preview«.
Почему не работает live preview?
Причин на самом деле не так уж и много, и разберем мы их от начала до конца.
Итак, первая причина не запуска интерактивного просмотра это не нажатая клавиша молнии о которой мы говорили выше в этой статье.
Вторая причина может крыться в отсутствии браузера хром о котором мы так же сегодня упоминали.
Если проблема не решена то смотрим что бы браузер хром был установлен браузером по умолчанию.
Четвертая причина, вы просто открыли файл html файл в редакторе и меняете css. Так тоже не пойдет. Открываем всё дерево проекта.
Пятая причина — интерактивный просмотр не работает с php файлами, или каими либо другими кроме html, css и частично js.
Всё равно не работает? Шестым пунктом проверьте не включено ли ничего лишнего наподобие «инструментов разработчика» в браузере (ctrl+shift+i или f12)
Никак? В редакторе жмем F5 — перезагрузить с расширениями и пробуем заново.
Это все известные мне причины неработающего live preview. Как правило обычно проблема кроется в первых трех пунктах.
Live preview для mozilla
Занимаюсь версткой сайтов, и уже почти пол года как я открыл для себя текстовый редактор Breckets.
Это молодой бесплатный редактор от adobe с открытым кодом для веб-разработчиков. он ориентирован на работу с HTML, CSS и JavaScript. Привлек он меня тем что в нем есть встроенный плагин Live preview
Благодаря него вы можете наблюдать за изменениями сайта без перезагрузки страницы, прямо во время верстки. Но в ней есть одна особенность, она работает только с Google Chrome.
Поскольку я предпочитаю работать с браузером Mozilla, для меня это был большой минус. Ну не давно случайно наткнулся на иностранном форуме решение данной проблемы.
Чтобы Live preview работало в mozilla нужно :
В редакторе открыть : Debug/Open Preference File
Для тех у кого на русском : Отладка/Открыть файл настроек
Откроется 2 файла defaultPreferences.json и brackets.json
defaultPreferences.json можно сразу закрыть а в brackets.json добавить строчку
Желательно добавить ее в самый верх документа. Должно получится примерно так
«fonts.fontFamily»: «‘SourceCodePro-Medium’, ＭＳ ゴシック, ‘MS Gothic’, monospace»,
После этого при запуски плагина Live preview страница будет отображаться в Мазиле
Прежде решение я не находил, поэтому решил поделится им на нескольких русскоязычных ресурсах, одним из них стал Pickabu. Может кому то пригодится
Это мой первый пост не судите строго
Дубликаты не найдены
Во время работы конечно использую Firefox Developer edition и его инструментарий , но в нем нет инструмента который мог бы заменить live preview
Первый пост, а уже такой безграмотный.
Даже если судить не строго, а мягко.
Благодаря него вы можете
Благодаря неМУ вы можете
Ну не давно случайно наткнулся на иностранном форуме решение данной проблемы.
НО НЕДАВНО случайно наткнулся на иностранном форуме НА решение данной проблемы.
После этого при запуски плагина
После этого при запускЕ плагина
поэтому решил поделится им
поэтому решил поделитЬся им
На такой маленький текст многовато будет.)))
И это я ещё по запятые не говорил. )))
О ! Мил человек как у тебя с Брэкетсом дела. Юзаешь его еще? У меня вопрос по нему — откликнись пожалуйста!
Пробовал я эту адобовскую поделку. Что я таки могу вам сказать: Sublime3+Gulp+gulp-connect-reload это идеально. Плюс в галпфайл можно напихать кучу плагинов, расписать таски на все случаи жизни. Ну и да, livereload)))
Sublime3+Gulp+gulp-connect-reload может запилишь мануал поподробнее? Что к чему и как устнавливать и юзать.
Началь учить хтмл\цсс и сейчас между сублиме и брэкетсом мечусь — что выбрать.
Да ребята умеем только обсуждать тех кто старается ,а сами нечего не можем.Только прыгаем по сайтам и льём друг другу на голову. Сам сделай что-то прежде чем говорить ненужное.
Вообще нужно юзать сборщик проектов — gulp Или webpack.
если на компе установлена простая Mozilla и Firefox Developer edition то live preview будет открывать страничку в браузере который уже запущен.
Если запущены оба, то страница будет открыта в обеих
Тогда уж Brackets. А вообще лучше юзать PHP Shtorm
Не а сад, а фреймворк
Учимся верстке. Домашка — the end
Ниже хорошая иллюстрация к вопросу почему я настаиваю на том, что я никого не учу и учить не собираюсь.
На хабре на днях был опубликован отчет хабравчанина как он на месяц организовал полноценный курс с обучением программированию на js. Если есть желание — почитайте, там есть ссылки даже на гитхаб с упражнениями.
Человек целый месяц готовил теорию, домашку, примеры и вел полноценные видеоуроки. В среднем он тратил минимум сутки в неделю на один видеоурок с подготовкой\домашкой\проверкой и тд. Из 49 учеников только 4 дошли до конца месяца.
Выводы, которые он делает в конце, довольно интересные, но я хочу написать ровно про один момент. Я его процитирую:
За месяц группа поредела на две трети. Я сел анализировать, почему так. И быстро заметил, что студенты поделились на две категории: те, у кого все получалось почти самостоятельно. И те, у кого “скобки не ставились”.
Меня это тоже удивило. Только в своей группе изучения питон мы предложили изучать python по курсам степик. Каково же было мое удивление, когда я увидел, что группа, с которой я проходил курс в рамках степиковского класса (мог видеть их результаты), разделилась на две части: одни почти сразу забросили, другие сами без всяких подсказок прошли весь курс. Ни первым, ни вторым менторство особо не было нужно: кто хотел, прекрасно справлялся сам.
Тот кто хочет, справляется и сам. Хотя помощь и не помешает.
Того кто не хочет учиться, помощь извне не спасет.
Только вы сами себе — главный мотиватор или демотиватор.
Учиться трудно. Я пишу это с самого первого поста. Зачастую вообще ничего не понятно очень долго. Поэтому я рекомендую сперва пройти курсы на openedu, так как там комфортная для новичков среда и удобная пошаговая подача материала. Этот курс не даст полноценного представления, но после его прохождения курсы от той же html academy уже заходят гораздо легче.
Если не считать того, что на трекерах и складчике есть все курсы от html academy, существуют энтузиасты, которые записывают и выкладывают на youtube целые обучающие курсы.
Ищущий да обрящет, как говорится.
Я повторюсь с основными рекомендациями как дойти до стадии когда вы можете быть интересными работодателю, пожелаю вам настойчивости в обучении и помашу ручкой. Что бы я не написала потом — это будет повторением уже сказанного. А принцип DRY — наше все (да и свободное время я лучше потрачу на самообразование).
Помните, что на худой конец, платные курсы с рассрочкой оплаты таки существуют и за ваши деньги готовы вас учить.
Итак, в вашем портфолио на гитхабе должны быть примеры адаптивной верстки и js. Не один жалкий кусочек верстки, а несколько сайтов! Пусть ни один из них не будет реально работающим сайтом, но хотя бы сверстанные по макетам (можно найти в интернете) сайты с 2-3 страницами. Сделайте хотя бы один сайт с css-фреймворком (например, bootstrap)
Сделайте примеры, которые покажут что вы реально знаете JS: работа с API, DOM и тд . Отлично если осилите базовый курс по какому-либо фреймворку (не начинайте пока не разберетесь с js) и сделаете сайтик для портфолио.
Не тратьте время на jquery.
Освойтесь с git, научитесь автоматизировать разработку (сборщики, препроцессоры), научитесь работать с консолью.
Будьте любопытны. Читайте как можно больше. Почаще гуглите все непонятное. Со временем вы станете даже понимать то, что читаете.
Английский нужен. Самый большой объем информации — на английском. На английском stackoverflow шанс найти ответ в разы больше чем на русском.
Рекомендую искать работу там, где будет команда разработчиков — работая с более опытными вы будете прогрессировать быстро. Также рекомендую целиться на проекты с фреймворками. Работа с cms — тупиковая ветвь развития.
Еще немного полезностей напоследок:
Обязательно освойтесь со спецификациями:
У html есть официальная документация, к которой вы всегда можете аппелировать в спорах не тему «это правильно/неправильно». Почитайте статьи какие есть спецификации, как с ними работать.
Начинайте пользоваться спецификациями на регулярной основе. Например: в упражнениях openedu встречаете новый тег. Идете в спецификацию и читаете что про него там пишут.
** Мне всегда было удобнее работать с текущим стандартом языка за счет удобной навигации в боковом меню (раздел 4 описывает теги).
PS Мой опыт только подтверждает выводы, которые сделали многие люди до меня.
На второй созвон к согласованному со всеми времени, пришел только один человек из трех ))
Главное – вовремя это понять
Сапожник без сапог
Реклама одной из довольно известных онлайн школ программирования
Как я учила фронтенд – плюсы и минусы разных методов
В 27 лет я решила уйти из маркетинга и стать верстальщиком, а потом и фронтенд-разработчиком. О том как это происходит – в прошлом посте, в этом – о моих способах обучения, чтобы эффективно и нескучно. Итак, мой рейтинг:
1. Боевой опыт на работе в команде
На мой вкус, эффективнее работы на реальных проектах нет ничего. Адекватные коллеги не дадут идти совсем в говнокод или не в ту степь, кроме того, без коллег бывают случаи, когда один на один сидишь с задачкой 3 дня, когда она запросто решается известной библиотекой за 15 минут, но тебе просто неоткуда о ней узнать, а в коллективе обычно можно как минимум спросить «в какую сторону гуглить». Здесь главное соблюсти грань между «не сидеть 2 дня» и не «спрашивать, не погуглив», но обычно собственная адекватность или уровень терпения коллег помогают найти баланс. Звучит неплохо, но новичку при поиске работы обычно приходится соглашаться не на самые лучшие условия, и это не только про зп.
+ обучение в рабочее время, не надо выкраивать дополнительное
+ расширение портфолио с согласия заказчика
+ если повезёт, то можно быстро вырасти в этой компании или перейти в другую на новых условиях
– денег дают мало
– подрабатывать где-то ещё времени нет
– без опыта не берут
В любом случае – как на картинке будет не сразу �� на несложные проекты по верстке обычно довольно большая конкуренция на биржах. Совсем новичкам не советую фриланс вообще, а после 3-6 месяцев работы в офисе, почему бы и не да. Это те же боевые проекты, возможно даже с небольшой обратной связью – заказчик уж постарается протестировать то, что вы написали, перед тем как заплатит. Однако старших коллег рядом нет, спросить зачастую не у кого. Кстати, когда совсем не у кого спросить и не помогает ни Гугл, ни StackOverflow, есть чаты в телеграмме по вёрстке и по разработке, спросить можно там — могут ответить, но могут и посамоутверждаться, тут как повезет. Отдельная специфика фриланса для разработчиков с небольшим опытом – его сложно найти, пока круг знакомств в сфере совсем маленький. Многие ребята идут на биржи, но быстро в них разочаровываются – некоторые такие сайты ещё года полтора назад дружно сделали отклики на задачи платными, да и на отклики новичков заказчики мало обращают внимания. Последних тоже можно понять – у них есть проект, например, на вёрстку одной странички, и они скорее доверят ее Антону с 400-ми положительных отзывов и рейтингом 8000, чем MegaMonstr1997, зарегистрировавшемуся 16 минут назад и, как ни странно, ещё не получившему 400 положительных отзывов. Мой опыт с биржами – нашла ту, где первые 25 откликов бесплатны, писала заказчикам подробные сопроводительные «Посмотрела сайт, с задачей справлюсь, портфолио вот, еще заметила, что у вас немного на мобилке едет верстка, бесплатно поправлю», где-то на 12-15 отклике случился первый заказ. Естественно, «бесплатно поправлю» – это про работы на 5-15 минут. А иногда первым фрилансом становятся сайтики для друзей, знакомых или для мамы. В последнем случае вы вряд ли будете брать с мамы деньги, имейте совесть, но наверняка получите столько тёплых слов и благодарностей, сколько не получите ни от одного заказчика :З
+ расширение портфолио с согласия заказчика
+ денег все ещё дают
– нет опытных коллег рядом (здесь и далее)
– денег ещё меньше
– фриланс сложно найти
3. Курсы с ментором на 2-3 месяца
Я и училась, и сама сейчас работаю наставником на таких курсах, и это хороший способ изучения. Плюс составленная изначально программа даёт системность, тогда как ментор не даёт расслабиться. Будьте готовы, что курсы изначально будут троллить вас обещаниями «Зарплата 120 тысяч через три месяца!», «Изучим одновременно Html, Css, React, Php, Java c нуля за полгода!», «Фулл-стек за 12 занятий»)) Это почти всегда неправда. Однако хорошие курсы разложат по полочкам, не дадут облегчить себе задачу при выполнении практики и написать откровенной лажи
+ действительно дают знания
– сложно выбрать хорошие курсы
– сложно выбрать толкового ментора, обычно кот в мешке
– требует времени, некоторые мои студенты даже брали отпуска, чтобы закончить курсы и защитить диплом
– курсы заинтересованы, чтобы вы покупали и дальше, поэтому зачастую многие важные темы «будут рассмотрены только на втором уровне»
– работодателю обычно пофиг на курсы и сертификаты с них
– дорого (в среднем от 20 тыс до 60 тыс) – если вы студент
– дёшево (в среднем 3-7 тыс) – если вы ментор и хотите подзаработать
4. Бесплатные видосы с Ютуба и где найдете
Неожиданно, что выше книг-статей и прочего? А вот так. Для меня видео-уроки стали просто открытием. В зависимости от силы мотивации в конкретный день я выбирала соответствующий по длительности видос по вёрстке с симпатичным результатом в конце. Например, поисковый запрос на Ютубе мог выглядеть как «Верстка лендинга html», далее смотрю, сколько длится видео и что получается в конце. Мое любимое – 2-2,5 часа и небольшой лендосик по путешествиям или вкусняхам. Но был и один курс на 10+ занятий с более серьезным проектом в конце. Суть просмотра – останавливать видео каждые 30 секунд и повторять за автором, делать ту же страничку / приложение. Звучит просто, но уже на 15-ой минуте у тебя начинает отваливаться то, что у ведущего прекрасно работает. Начинаешь искать, выясняется, что забыл пару css свойств, которые автор быстро напечатал на 3-ей минуте. И вот этот поиск – самое ценное, в процессе поиска учишься отладке через DevTools браузера, через консоль и тд.
+ хороший обучающий эффект
+ быстрый результат в виде знаний и сверстанного шаблона
– можно попасть на недалёкого автора и научиться делать неправильно
4. Книги с упражнениями
В некоторых книгах с первой до последней главы читателю предлагается писать с нуля одно приложение, постепенно улучшая его. В других давался ряд не очень связанных друг с другом заданий. Мне способ не очень зашёл, я начала свое включение во фронтенд с книги по JS, потом практически не возвращалась к книгам кроме формата «Почитать в самолёте по дороге в отпуск».
+ недорого по сравнению с курсами
– очень быстро устаревают
– без практики прочитанное усваивается очень слабо
– совсем не похоже на тусу по уровню веселья
Статей «Советы по отладке JS», «CSS-трюки: режимы наложения цветов», «10 хитростей JavaScript о которых вы не знали» – великое множество, однако если пока для человека весь JavaScript — одна большая хитрость, толку от них будет немного. Зато уже в процессе изучения и работы во фронтенде, одна прочитанная с утра по пути в офис статья может дать не только понимание того, что нового появилось в мире разработке, но и +100 к чсв, а также возможность лёгкого выпендрежа перед коллегами (или начальством, если повезёт).
+ больше шансов быть всегда в теме происходящего в мире разработки
– дают вишенки на торте, но не сами навыки
6. Игры типа рпг на минималках
В отличие от книг звучит и выглядит весело. За все игрухи не скажу, но мне попалась та, которая стоила 4 доллара в месяц и имела сотни заданий вида «Есть твой персонаж, есть песчаные яки — от них надо уклоняться, но стрелять по ним нельзя, есть скелеты — их бить мечом, есть орки — если слабый, то защищаться щитом и бить мечом, если сильный, то создавать своих клонов, сначала надо всех орков рассортивать по силе». Далее игрок преобразует то, что понял из «ТЗ» в код на JS с описанными методами «защищаться щитом», «рубить мечом», «создавать клонов», обычно в циклов, условий, сортировки. На мой взгляд, такие игры могут быть полезны только для совсем новичков, которым надо попробовать написать первые циклы и условия, для всех остальных толку будет немного. Еще – вы фиг докажете начальству, что таким образом учите JS ��
Способы, которые я сама не пробовала – например, поиск частного ментора, я не описываю.
Как-то так
Смотрю курс по TypeScript. Лектор: «да, мы можем надеяться, что другой разработчик прочитает доки и использует функцию правильно, но в программировании нет места надежде».
В ПРОГРАММИРОВАНИИ НЕТ МЕСТА НАДЕЖДЕ
P.s курс англоязычный и там это даже сильнее прозвучало: There’s no hope in coding!
Войти в IT в 27 лет
Расскажу про свой опыт смены работы с не-айтишной на айтишную, про проседание по зп в 4 раза, про собесы, про правдивость обещаний знакомых программистов типа «да ты уже через полгода будешь 150 зарабатывать» и в целом про свои поиски
Волею судеб у меня 2 высших в сфере экономики, а знакомство с программированием ограничивалось Бейсиком на курсах в 7 классе и парой шаблонных сайтиков, которые я делала для поиска клиентов по фотографии (подрабатывала в универе) и по SEO оптимизации.
Я работала в маркетинговом агенстве в центре Москвы, была более чем довольна как доходом, так и гибким графиком, и еще более гибким отношением начальства, позволяющего прийти в офис к 12 и уйти в 16, если работы не было. Впрочем, тот мой шеф был отдельным кадром — однажды я задала ему достаточно тупой и очевидный вопрос, на что он ответил «Я нашел причину проблемы за 2 минуты, ты тоже сможешь решить ее сама — у тебя час, на кону твоя премия». Однако через пару лет работы я достаточно разочаровалось в SEO и захотела чего-то более конкретного в плане сферы деятельности.
На тот момент я искренне верила в то, что моих знаний тегов h1 и span более чем достаточно для понимания верстки (про флексы-гриды, мобильную верстку и анимации я даже не задумывалась), поэтому резко решила освоить JavaScript и стать фронтенд-разработчиком. Зарплаты на HeadHunter радовали, книжка по JS лежала у меня на столе. 3 месяца неспешного изучения, подколки коллег, видевших темную тему редактора кода у меня на мониторе, «Опять Пентагон взламываешь?» и я отправилась на первые собеседования. Для портфолио я сверстала несколько сайтиков по видео-урокам.
До тех собесов у меня почти не было неудачного опыта собеседования — чаще звали, чем нет. Тут же я приходила и за первые 5 (серьезно, пять) минут разговора с техническим специалистом я сама понимала, что дальше можно было просто встать и уходить. Очень быстро стало понятно, что о фронтенде речи быть не может, взяли бы верстальщиком — на тот момент я не могла ответить на вопросы о том, как выровнять элемент по вертикали, как сделать модалку на Бутстрапе и т.д. Что поразило больше всего — технические директора тратили свое время и объясняли. Вплоть до «А давайте вместе посмотрим, залезем в документацию к Бутстрапу, так, хорошо, вот она модалка. «. Надо сказать, что эти объяснения отпечатались у меня в голове, мне кажется, навсегда.
Наконец, меня взяли верстальщиком в маленькую контору на несколько человек. На зп в 4 раза меньше текущей на тот момент. Но взяли! Я радостно начала ездить к 10 утра на окраину Москвы (реально окраину, там было только шоссе и грустная тропинка вдоль него), огребать за опоздания на 3-4 минуты, самой покупать чай и кофе и делать шаблонные сайты. Моего энтузиазма хватило до того момента, когда я, стоя на пустом этаже бизнес-центра перед автоматом с едой, думала о том, могу ли я себе позволить вафли или нет. После этого я отправилась просить повышения к начальству и получила ответ «Если вы сможете повысить продажи, то мы поднимем вам зп». Как моя работа связана с продажами, я не поняла и открыла резюме. Получила втык от руководства. Усилила активность по поиска новой работы.
Несмотря на все странности первой компании, за 2,5 месяца в ней мне удалось понять намного больше, чем за все время самостоятельного изучения верстки. Боевой опыт — есть боевой опыт. Научилась и мобильной верстке, и кастомизации готовых библиотечек, и отправить формочку на php. После чего меня без проблем взяли в агентство, и это были почти полтора года идеальной работы. Очень повезло с командой — стоило попросить кого-то о помощи, и коллега мог просидеть с тобой и полчаса, и час, и два, пока проблема не решалась. Опять же самый разноплановый опыт — много клиентов, много проектов, много технологий. Этому клиенту нужны доработки сайта на Vue, здесь — верстка с анимацией с нуля, эти ребята требуют PixelPerfect, тем нужно разобраться с Docker для сборки проекта, параллельно подрядчики намутили конфликтов в гите и ждут, пока я их решу. Все начиналось с задачек по верстке, потом иногда попадался и JavaScript, и полноценный фронтенд. Но 80-90% — верстка.
Стресс — бывало, но опыт — бесценный. Но у меня ключевым фактором оказалась еще и отличная команда, благодаря которой опыт набирался, а стресс был небольшим. Как говорил мой бывший «Ты хоть по одному из своих бывших так скучала как по той работе?». Как я узнала позже, это весьма распространенная схема «Пойти новичку работать в агентство, набраться опыта и потом уйти на сторону клиента — на меньшую загрузку и большие деньги». И такой момент настал и у меня.
В конце февраля 2020 (вы чувствуете, чем пахнет?) я начала деятельность по смене работы. Хотелось меньше загрузки и больше погружения в глубину технологий (когда ежедневная загрузка на 90-110%, нет ни времени, ни мотивации углубляться, надо быстрей-быстрей), ну и больше денег тоже хотелось — ни секрет, что в агентствах не самые высокие зарплаты. Одним из главных критериев было «Фронтенд, а не только верстка».
Ровно за 3 недели до начала общего карантина в марте 2020 я уволилась. Тогда еще мало кто верил в карантин. Но случилось то что случилось, и в середине марта мне позвонили кадры с новой работы и попросили срочно приехать и оформиться в штат, так как с послезавтра они переходят на удаленку.
Устроилась фронтенд-разработчиком. Почти 4 месяца на новой работе, и я ни разу не видела ни одного из своих коллег-программистов, все удаленно. В целом, никому бы не посоветовала включаться в новую работу по удаленке. Ситуаций, в которых чувствуешь себя тупой, в разы больше, чем при офисной работе. Мелкие административные дела типа подписать документ или написать электронное заявление на отпуск становятся часовыми квестами. Однако лучше так, чем если бы я не успела найти новую работу перед карантином вообще. А так — работаем, по зп удалось выйти на тот уровень, который был до ухода в IT. Но 150 пока нет, и тем более их не было через полгода после смены профессии, не ведитесь на такие обещания ��
В Brackets не работает Live Preview, нужно обновлять страницу браузера, что изменения вступили в силу
В Brackets не работает Live Preview, кто то сталкивался с этим? как это решить? вношу изменения в коде, а они не отображаются автоматически. Только если обновить страницу браузера.
5 ответов 5
если я правильно понял, Live Preview в Brackets работает только если HTML файл был создан в редакторе.
Для того чтобы всё работало, в боковой панели нужно открыть директорию с сайтом/проектом.
В моём случае, проблема решилась временным назначением браузера Chrome по-умолчанию. После вернул Opera обратно. Дальше редактор уже находил браузер Chrome нормально.
До этого, редактор Brackets, так и ругался, что не мог найти Chrome в системе Windows.
PS: Вопрос хоть и старый, но находится в топе Google, по-этому написал здесь
Live Preview работает только с Google Chrome. Перестает работать если в браузере вызваны инструменты разработчика по Ctrl-Shift-I или F12 . Чтобы Live Preview снова заработал нужно просто опять в Brackets при выбранном HTML файле нажать Ctrl-Alt-P либо же кликнуть мышкой по значку молнии на боковой панели в правом верхнем углу редактора.