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 в Brackets
Brackets — это свободно распространяемый редактор кода, который предлагает множество удобных инструментов для веб-разработки. Одним из таких инструментов является функция Live Preview, которая позволяет непосредственно в самом редакторе видеть изменения, происходящие в веб-странице. В этой подробной инструкции мы расскажем, как настроить Live Preview в Brackets.
Для начала убедитесь, что у вас установлен Brackets на вашем компьютере. Затем откройте редактор и создайте новый проект или откройте существующий. Для настройки Live Preview, вам понадобится подключить расширение Brackets LiveReload. Это расширение обеспечивает автоматическую перезагрузку веб-страницы при внесении изменений в код.
Чтобы установить расширение, откройте меню «Файл» в Brackets и выберите опцию «Управление расширениями». В открывшемся окне найдите расширение «Brackets LiveReload» и нажмите кнопку «Установить». После установки расширения, перезапустите Brackets, чтобы изменения вступили в силу.
После перезапуска Brackets, откройте веб-страницу, которую вы хотите отредактировать. Нажмите правой кнопкой мыши на окне редактора и выберите «Enable Live Preview». Появится панель инструментов Live Preview, в которой вы можете выбрать браузер, в котором будет отображаться ваша веб-страница.
Теперь вы можете начать редактировать код в Brackets, и при каждом сохранении изменений, веб-страница будет автоматически обновляться в выбранном браузере. Таким образом, вы можете мгновенно видеть результаты ваших изменений. Также в панели инструментов Live Preview есть дополнительные функции, такие как «Перезагрузка страницы» и «Открыть в браузере».
Установка IDE Brackets
Brackets — это бесплатная интегрированная среда разработки (IDE), разработанная Adobe. Она предназначена для работы с веб-технологиями, такими как HTML, CSS и JavaScript.
В этом разделе описаны шаги, необходимые для установки Brackets на вашу операционную систему.
Шаг 1: Скачать Brackets
Перейдите на официальный сайт Brackets по адресу brackets.io и нажмите на кнопку «Download». Выберите версию Brackets для вашей операционной системы (Windows, macOS или Linux).
Шаг 2: Запустите установщик
После завершения загрузки откройте установочный файл Brackets (обычно это файл с расширением .exe для Windows или .dmg для macOS). Начнется процесс установки.
Шаг 3: Процесс установки
Следуйте инструкциям на экране во время установки Brackets. Выберите язык установки, путь установки (если это необходимо) и нажмите кнопку «Установить». Подождите, пока процесс установки завершится.
Шаг 4: Запуск Brackets
После завершения установки вы можете найти ярлык Brackets на рабочем столе или в меню «Пуск» (для Windows), в папке «Приложения» (для macOS) или в меню приложений (для Linux). Щелкните по ярлыку, чтобы запустить Brackets.
Поздравляю! Теперь у вас установлена среда разработки Brackets на вашем компьютере. Вы можете начать работать с Brackets и создавать проекты веб-разработки.
Загрузка Brackets с официального сайта
Brackets — это мощный текстовый редактор для разработки веб-приложений, разработанный Adobe. Чтобы начать использовать этот редактор, вам необходимо скачать его с официального сайта.
Шаги по загрузке Brackets с официального сайта следующие:
- Откройте веб-браузер и перейдите на официальный сайт Brackets.
- На главной странице сайта найдите кнопку «Загрузить Brackets» или подобную ей.
- Нажмите на кнопку «Загрузить Brackets» для перехода на страницу загрузки.
- На странице загрузки выберите вашу операционную систему из предложенных вариантов (Windows, macOS, Linux).
- После выбора операционной системы, начнется загрузка файла установки Brackets на ваш компьютер.
- Когда загрузка завершится, найдите скачанный файл установки Brackets на вашем компьютере и откройте его.
- Следуйте инструкциям установщика для установки Brackets на ваш компьютер.
- После завершения установки, вы сможете найти Brackets в списке программ вашей операционной системы или на рабочем столе.
Поздравляю! Теперь у вас установлен Brackets с официального сайта и вы готовы начать работать с этим мощным текстовым редактором для разработки веб-приложений.
Установка Brackets на компьютер
Для начала работы с Brackets необходимо его установить на ваш компьютер. Для этого следуйте инструкциям, приведенным ниже:
- Перейдите на официальный сайт Brackets по адресу brackets.io.
- Нажмите на кнопку «Download», расположенную на главной странице.
- Выберите версию Brackets, соответствующую вашей операционной системе (Windows, macOS или Linux).
- Нажмите на ссылку для скачивания выбранной версии Brackets.
- После завершения загрузки откройте установочный файл Brackets.
- Следуйте инструкциям на экране, чтобы выполнить установку Brackets на ваш компьютер.
После завершения установки Brackets будет доступен для запуска на вашем компьютере. Теперь вы готовы приступить к использованию Brackets для разработки и настройки live preview.
Создание нового проекта
Перед тем как начать использовать live preview в Brackets, необходимо создать новый проект в редакторе. Для этого выполните следующие шаги:
- Откройте Brackets и выберите пункт меню «Файл» (File).
- В выпадающем списке выберите пункт «Новый проект» (New Project).
- Укажите имя проекта и путь к папке, где будет располагаться проект.
- Нажмите кнопку «Создать» (Create).
После выполнения этих действий вам будет доступна рабочая область проекта, где вы сможете создавать и редактировать файлы своего проекта.
Обратите внимание, что все файлы и папки, относящиеся к вашему проекту, должны находиться в рабочей области проекта, чтобы live preview корректно отображал изменения в режиме реального времени.
Кроме того, вы можете использовать функцию импорта уже существующего проекта в Brackets. Для этого выберите пункт меню «Файл» (File) и в выпадающем списке выберите пункт «Импорт проекта» (Import Project). Затем укажите путь к папке вашего проекта и нажмите кнопку «Импортировать» (Import).
Открытие Brackets
Для начала работы с Brackets необходимо выполнить следующие действия:
- Загрузите Brackets со официального сайта веб-редактора.
- Установите программу, запустив загруженный установочный файл.
- После успешной установки откройте Brackets, найдите его в меню «Пуск» (в Windows) или в папке «Приложения» (на Mac OS).
- Выберите пункт «Открыть файл» или «Открыть папку» для начала работы с конкретным проектом.
При открытии файла или папки в Brackets, главное окно редактора отобразит структуру файлов и папок проекта в левой панели «Проводник». Все редактируемые файлы будут отображены в правой панели «Редактор».
Теперь вы можете начать работу с кодом, редактировать и создавать новые файлы, использовать функционал Brackets для удобства и эффективности разработки веб-приложений.
Создание нового проекта в Brackets
Для создания нового проекта в Brackets следуйте этим простым шагам:
- Откройте Brackets и выберите «Файл» в верхнем меню.
- В выпадающем меню выберите «Новый проект» или используйте горячую клавишу Ctrl+Shift+N.
- В появившемся диалоговом окне введите название проекта в поле «Имя проекта».
- Выберите папку, в которой хотите сохранить проект, нажав на кнопку «Обзор».
- После выбора папки нажмите «Создать».
После выполнения этих шагов вам будет представлена пустая область работы, готовая для создания и редактирования вашего проекта.
Вы также можете добавить существующие файлы и папки в свой проект, просто перетащив их в область работы Brackets или выбрав «Файл» -> «Добавить файлы» или «Добавить папку» в верхнем меню.
Также стоит отметить, что Brackets поддерживает работу с различными типами файлов, такими как HTML, CSS, JavaScript и другими веб-языками. Вы можете создавать и редактировать эти файлы в своем проекте для создания полнофункционального веб-сайта или приложения.
Настройка live preview
Live preview в Brackets позволяет видеть изменения в веб-странице в реальном времени. Для его настройки выполните следующие шаги:
Откройте Brackets. Запустите приложение, если оно еще не запущено.
Откройте нужный проект. В меню «File» выберите «Open Folder» и выберите папку с проектом, в котором вы хотите настроить live preview.
Выберите файл для просмотра. В окне «Project Files» найдите нужный файл HTML или CSS и выберите его для просмотра.
Включите live preview. В верхнем меню Brackets найдите значок глаза (Live Preview) и нажмите на него. Откроется новое окно с просмотром вашей веб-страницы.
Смотрите изменения в реальном времени. Теперь, при внесении изменений в выбранный файл HTML или CSS, вы будете видеть их эффекты непосредственно в окне просмотра live preview.
Теперь вы можете легко и быстро настраивать live preview в Brackets, чтобы видеть результаты своей работы в реальном времени.
Открытие Live Preview
Чтобы открыть Live Preview в Brackets, следуйте этим простым шагам:
- Запустите Brackets на вашем компьютере.
- Откройте желаемый проект или создайте новый файл HTML.
- Нажмите на кнопку «Показать Live Preview» в верхней панели инструментов (или используйте комбинацию клавиш Ctrl + Shift + L).
- После этого откроется веб-страница с Live Preview, где вы сможете видеть результаты своей работы в реальном времени.
Вы также можете предварительно настроить параметры Live Preview, чтобы включить автоматическое обновление при изменении кода или указать определенный браузер для отображения Live Preview.
Открытие Live Preview в Brackets — это удобный способ проверять и тестировать свой веб-код без необходимости постоянно сохранять файл и обновлять веб-страницу в браузере.
Настройка live preview в Brackets
Brackets — это бесплатный редактор кода, разработанный Adobe для веб-разработчиков. Он предоставляет множество полезных функций, в том числе и live preview, которая позволяет видеть изменения, вносимые в код, в режиме реального времени. Это очень удобно, так как позволяет сразу видеть, как будет выглядеть веб-страница после применения изменений.
Однако, по умолчанию live preview в Brackets не включен. Чтобы настроить его, нужно выполнить некоторые шаги. Во-первых, необходимо установить расширение, которое добавит функцию live preview в Brackets. В настоящее время доступно несколько расширений, но одним из самых популярных и удобных является расширение Brackets Live Preview.
Шаги для установки расширения Brackets Live Preview просты. Сначала откройте редактор Brackets и перейдите в раздел меню «File». Затем выберите «Extension Manager» и нажмите на кнопку «Install». В появившемся окне найдите расширение Brackets Live Preview, выберите его и нажмите на кнопку «Install». После установки расширения, перезапустите редактор Brackets.
Примечание: Перед установкой расширения Brackets Live Preview, убедитесь, что у вас установлен браузер Google Chrome или Mozilla Firefox, так как это два единственных браузера, которые поддерживает данное расширение.
Основные преимущества live preview в Brackets
Одним из основных преимуществ live preview в Brackets является возможность мгновенно видеть результаты внесенных изменений в коде HTML и CSS. При работе с данным редактором, пользователь может одновременно просматривать и редактировать код, а на втором окне сразу видеть, как изменения влияют на реальный вид сайта.
Еще одним преимуществом live preview является удобство и быстрота взаимодействия с кодом. В Brackets нет необходимости каждый раз сохранять файл и обновлять страницу в браузере, чтобы увидеть результаты изменений. Все это происходит автоматически и мгновенно, что позволяет экономить время программисту и ускорять процесс разработки.
Кроме того, благодаря live preview в Brackets можно сразу видеть, как изменения кода влияют на различные разрешения экранов. Это особенно полезно при разработке адаптивных сайтов, когда важно сразу видеть, как макет адаптируется под различные устройства и экраны, без необходимости каждый раз менять размер окна браузера.
Еще одно преимущество live preview в Brackets заключается в возможности быстрого и удобного доступа к элементам сайта посредством инспектора. При наведении курсора на элемент кода, пользователь сразу видит, как этот элемент выглядит на странице. Это делает отладку и редактирование кода еще более удобными и эффективными.
Также стоит отметить, что live preview в Brackets позволяет работать с несколькими файлами одновременно. Пользователь может открывать вкладки с различными файлами и одновременно просматривать live preview для каждого из них. Это позволяет сравнивать результаты изменений в разных частях проекта и быстро переключаться между файлами.
Установка и настройка Brackets
Brackets — это редактор кода, разработанный для веб-разработчиков. Он обладает множеством полезных функций и инструментов, которые помогут вам создавать и редактировать код быстрее и проще.
Чтобы установить Brackets, вам нужно перейти на официальный сайт редактора и скачать установочный файл. Далее, следуйте инструкциям установщика, чтобы завершить установку на вашем компьютере.
После установки Brackets, вам потребуется настроить некоторые параметры, чтобы получить наилучший опыт использования. Одной из важных настроек является настройка Live Preview.
Для активации Live Preview в Brackets, вам нужно открыть файл HTML-кода, который вы хотите просмотреть в реальном времени. Затем, щелкните правой кнопкой мыши на файле в обозревателе файлов и выберите пункт «Live Preview». Это откроет вашу страницу веб-браузера и автоматически обновит ее при внесении изменений в код.
Если вы хотите изменить настройки Live Preview, вы можете перейти в меню «Edit» (Правка), выбрать пункт «Preferences» (Настройки) и выбрать вкладку «Live Preview». Здесь вы можете изменить параметры, такие как порт, альтернативный URL, и другие.
Подключение проекта к Brackets
Для начала работы с Brackets необходимо подключить свой проект к среде разработки.
1. Откройте Brackets и выберите File (Файл) в верхней панели.
2. В выпадающем меню выберите Open Folder (Открыть папку).
3. В появившемся окне выберите папку проекта и нажмите кнопку Open (Открыть).
4. После того, как папка проекта откроется в Brackets, вы увидите список файлов и папок проекта в левой панели.
5. Выберите файл HTML, CSS или PHP, который вы хотите редактировать, и откройте его для просмотра и редактирования.
6. Теперь вы можете начать работу над своим проектом, внося изменения в файлы и видеть результаты в режиме реального времени с помощью функции Live Preview в Brackets.
Открытие live preview в Brackets
Brackets — это мощный текстовый редактор, который предлагает множество полезных функций для разработчиков веб-сайтов. Один из таких инструментов — это live preview, который позволяет в реальном времени просматривать веб-страницы во время их разработки.
Чтобы открыть live preview в Brackets, сначала необходимо установить плагин Brackets Live Preview. Вы можете найти этот плагин в панели управления плагинами Brackets. Просто найдите его в списке доступных плагинов и нажмите кнопку «Install», чтобы установить его.
После установки плагина, чтобы открыть live preview, вы должны нажать комбинацию клавиш Ctrl+Alt+P. Это откроет встроенный веб-сервер и запустит live preview в вашем браузере по умолчанию.
Live preview в Brackets отображает изменения, внесенные в ваш код, в реальном времени. Это позволяет вам быстро увидеть, как выглядит ваша веб-страница при каждом изменении кода. Вы также можете использовать функции отладки и проверки кода, чтобы убедиться, что ваш сайт работает должным образом.
Если вам нужно настроить live preview в Brackets, вы можете изменить его настройки в меню «Preferences». Здесь вы можете выбрать другой браузер по умолчанию, изменить порт, на котором работает веб-сервер, и многое другое.
В целом, live preview в Brackets — это удобный инструмент для разработчиков веб-сайтов, который позволяет быстро проверять и отладить свой код в реальном времени. Он делает процесс разработки более эффективным и помогает вам создавать качественные веб-страницы.
Работа с live preview в Brackets
Live preview в Brackets – это функция, которая позволяет в реальном времени отображать результаты изменений веб-страницы. Это очень полезно при разработке и настройке веб-сайтов, так как позволяет видеть изменения сразу же, необходимо обновлять страницу в браузере.
Для активации live preview в Brackets, нужно нажать на значок глаза, который находится в правом верхнем углу редактора. После активации, Brackets автоматически открывает веб-страницу во встроенном браузере и отображает любые изменения, которые вы вносите в HTML, CSS или JavaScript код.
Live preview также поддерживает автокомпиляцию. Это означает, что при сохранении изменений в файле, Brackets автоматически обновляет отображение веб-страницы без необходимости ручного обновления.
Кроме того, live preview в Brackets позволяет одновременно работать с различными браузерами и устройствами. Вы можете выбрать нужный вам браузер или устройство, чтобы проверить, как ваш веб-сайт выглядит на разных платформах.
В целом, работа с live preview в Brackets делает процесс разработки веб-сайтов более удобным и эффективным. Вы можете быстро видеть результаты своих изменений и легко настраивать внешний вид и функциональность веб-страницы. Это отличный инструмент для профессиональных разработчиков и начинающих веб-мастеров, которые хотят получить максимальную отдачу от своей работы.
Вопрос-ответ
Могу ли я настроить live preview для нескольких файлов одновременно в Brackets?
Да, в Brackets можно настроить live preview для нескольких файлов одновременно. Чтобы это сделать, откройте все нужные файлы проекта в редакторе, а затем включите live preview для каждого из них. Когда вы будете вносить изменения в любой из этих файлов, все изменения будут отображаться одновременно в браузере.
Поддерживается ли live preview для всех типов файлов в Brackets?
Live preview поддерживается для всех типов файлов в Brackets, которые могут быть открыты в браузере. Это включает в себя HTML, CSS, JavaScript, PHP, Ruby и другие распространенные языки программирования и разметки. Однако, если вы работаете с типами файлов, которые не могут быть отображены в браузере (например, изображения или видео), live preview не будет доступен для них.
Live preview brackets как настроить
Brackets – это бесплатная среда разработки от семейства Adobe, для быстрого написания HTML /CSS/JavaScript кода. Среда доступна для Windows, Mac OS и Linux, кроме того переведена на русский язык.
Благодаря работе локального сервера на Node.js, есть встроенный предпросмотр (Live Preview). Вы пишите код и изменения сразу видны в браузере, без перезагрузки страницы. Live Preview работает только с браузером Chrome.
Установка Brackets
На официальном сайте http://brackets.io, вы сразу увидите зеленую кнопочку Download Brackets. Независимо от того, какая у вас стоит операционная система (например Windows 32/64 бит), вы скачиваете этот файл. Процесс установки обычный, без каких-либо особенностей.
Настройка Brackets
Хочу вас обрадовать, что у редактора Brackets практически нечего настраивать. После установки редактора, я открываю вкладку Вид → Themes и выбираю тему (светлую или темную), размер и семейство шрифта. Затем ставлю галочку у Vertical Split. Это делит экран на две части, слева я пишу HTML код, а справа CSS.
Плагины Brackets
Устанавливаются плагины через вкладку Менеджер расширений – иконка на правой панели. Не стоит сходить с ума и устанавливать на всякий случай, все доступные плагины. В открывшемся окне, вбиваете названия нужных плагинов и устанавливаете их. Вот список полезных плагинов для верстальщика:
Emmet
Плагин Emmet позволяет быстро писать HTML/CSS код, используя сокращенную запись. На сайте https://emmet.io, в разделе документация, есть масса примеров сокращений кода. Потраченное время на изучение документации, окупится очень быстро. Вам останется только сожалеть о том, почему вы не сделали это раньше.
Начало работы
В теле пустого index.html ставим ! восклицательный знак, нажимаем TAB и у нас появляется первоначальная структура документа.
Подключение CSS файла
Пишем название тега link, нажимаем TAB и у нас появляется готовый тег. Нам остается только прописать название CSS файла. Но даже это Emmet делает за нас, указываем первую букву и появляется подсказка.
Написав такую запись в HTML файле.
После нажатия клавиши TAB, развернется такой код.
Одно слово lorem и клавиша TAB, сгенерируют абзац с текстом Lorem ipsum.
Для генерации трех абзацев, нужно написать так:
Вам следует критично оценить свои навыки в верстке и использовать Emmet, если вы легко справляетесь с версткой (не паритесь), но хотели бы верстать ещё быстрее. В противном случае, стоит сначала поучиться верстке, на моём видеокурсе.
Whitespace Normalizer удаляет ненужные пробелы в конце тегов и селекторов.
SASS Hints показывает в подсказках все названия переменных и их значения, когда вы ставите знак доллар.
Indent Guides показывает вертикальные линии, чтобы вы не запутались в открывающих и закрывающих тегах.
Brackets Synapse – это расширение синхронизирующее редактируемые файлы с файлами на хостинге. Отпадает необходимость в загрузке файлов, через FTP программу.
Brackets Snippets позволяет сохранять собственные фрагменты кода в библиотеку, для повторного использования кода.
Как пользоваться Brackets
Горячие клавиши, так же помогут ускорить верстку.
- CTRL++ — увеличивает размер шрифта
- CTRL— — уменьшает размер шрифта
- CTRL+D — дублирует строку
- CTRL+X — удаляет строку
- CTRL+F — вызывает строку поиска, удобно для поиска селектора
- TAB — сдвигает выделенный код вправо
- SHIFT+TAB — сдвигает код влево
В Brackets можно вызвать палитру цветов. Работает это так, ставите курсор в коде цвета и при помощи комбинации клавиш CTRL+E, вызываете палитру и выбираете нужный цвет.
Заключение
Бессмысленно сравнивать Brackets c другими редакторами кода. Каждый работает в той программе, к которой он привык. Но, если вы все ещё верстаете на Notepad++ и не знаете, на какой современный редактор кода перейти. В таком случае Brackets – хороший выбор для верстальщика.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
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.
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
Фулстек-извращенец
Фронтендеры каждые 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 пока нет, и тем более их не было через полгода после смены профессии, не ведитесь на такие обещания ��