Что есть в браузере для более удобной frontend-разработки?

Привет!
Сегодня поговорим о том, как использует браузер frontend-разработчик.

Браузер - это один из главных инструментов при создании сайтов. В нём, собственно, всё и "тестируется" по ходу работы.

В одной из моих первых публикаций я говорила о том, что нам необходимо создать структуру проекта в виде папочки с файликами index.html и styles.css.

Они - основа нашего проекта. Соединить их между собой можно с помощью примерно вот такой строки <link rel="stylesheet" href="http://www.myAdress.ru/main.css"> . В атрубуте rel указывается вид подключаемого файла, а в href адресс, по которому расположен файлик с css-стилями. Так же стили можно прописывать прям в html, но лучше так не делать.

Так выглядит html-файлик внутри. Т.е. наш контент состоит из двух слов и запятой. И всё это обернуто в тег параграфа. В 4 строке, кстати продемонстрировано подключение стилей,

Так выглядит файл со стилями. Нашей фразе задан синий цвет.

Вот так выглядит наша фраза в браузере. Для отображения её необходимо скопировать полный путь к файлу index.html и вставить его в поисковую строку браузера.

В браузере есть специальные функции для разработчиков, которые открываются при нажатии в браузере комбинации Fn+F12 или просто F12.

С помощью функций инспектора можно выделить любой элемент на странице и увидеть все характеристики блока в виде подсвеченных областей, подписей и другого.

Так же в этом режиме можно менять стили и сразу видеть их применение. Но они не сохраняются в самом файле .css. Реально применяются лишь те стили, которые прописаны в VS Code.

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

На этом всё,
желаю удачи!