Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Веселая аркада с Печенькой для новогоднего настроения. Объезжайте препятствия, а подарки, варежки, конфеты и прочие приятности не объезжайте: они помогут набрать очки и установить новый рекорд.

Сноуборд

Спорт, Аркады, На ловкость

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

CSS + Frontend

С этим тегом используют

HTML Программирование Верстка Javascript IT Web IT юмор Веб-разработка Программист Все
100 постов сначала свежее
8
DELETED
5 лет назад

Resource Override⁠⁠

В этой заметке я попытаюсь сделать краткий обзор браузерного расширения Resource Override.


Для чего предназначен?

Подменять стили указанного сайта своими.


Зачем?

Дебаг css и js на боевом сайте.


Установка

Переходим по ссылке и жмем на кнопку установить.


Подробнее

Resource Override CSS, Javascript, Frontend, Web, Web-программирование, IT, Верстка, Видео, Длиннопост

На странице настроек доступы четыре действия:

— Подменить файл другим через URL;

— Подменить файл другим через файл;

— Вставить свой файл;

— Подменить заголовки.


Последним я не пользовался, поэтому расскажу о первых трех.



Через URL

Допустим вы разрабатываете на локалке. У вас настроен сборщик, который поднимает сервер.

В итоге URL выглядит как-то так — localhost:3000


Стили компилируются в один bundle — styles.min.css, который также используется на боевом сайте. Это значит, что мы можем посмотреть, как будут выглядеть новые стили на проде.

Для этого достаточно добавить в группу новое правило: URL → URL


В поле from указываем на каком сайте мы хотим подменить стили, а в to — местоположение наших стилей:

https://site.com/styles.min.css → localhost:3000/styles.min.css

Через файл

Аналогично предыдущему способу, только вместо locahost:3000/styles.min.css необходимо вставить код во встроенный текстовый редактор расширения. Это удобно только для маленьких файлов.


Вставить свой файл

Уже без привязки к URL.

Если лень писать Chrome расширения — можно просто вставить кусок JS кода.


Если это вас заинтересовало и вы хотите узнать о расширении поподробнее, то советую посмотреть видео Kyle Paulsen:

Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim

И в группе вк: https://vk.com/filimonovvadim

Показать полностью 1 1
[моё] CSS Javascript Frontend Web Web-программирование IT Верстка Видео Длиннопост
0
OlegaZed
5 лет назад

Это 3,14здец #накарантине⁠⁠

Ребят, как же это сложно во время карантина поднять себя и заставить себя делать что-то. Если вы читали мой первый пост то знаете мою цель. Насколько я продвинулся к этой цели можно даже не говорить. Так как я почти даже не садился за компьютер заниматься. Я сидел и дрочил этот гребаный ютуб, вк, инстаграм(короче страдал херней). И ничего не сделал. Да может я и посмотрел пару роликов из курса, сверстал header и ещё блок лендинг, но это оооочень мало для двух недель(не помню когда точно был пост). Зато я уже восемь дней подряд хожу в ледяной душ, хочу проходить месяц. Вы спросите зачем? Я вам отвечу, что ледяной душ развивает самодисциплину(что сейчас оч важно) так как ты не можешь придумать отговорки ты можешь помыться или под ледяным душем или пот тёплым. Я даже книжку не открывал, я просто не знаю как заставить себя что либо делать, кроме лежание на кровати... Надеюсь кто нибудь меня поддержит, и возможно что нибудь посоветует.

Это 3,14здец  #накарантине CSS, HTML, Frontend, Карантин, Самоизоляция, Лень, Ааа
CSS HTML Frontend Карантин Самоизоляция Лень Ааа
35
55
MaxLisyanskiy
MaxLisyanskiy
5 лет назад
Web-технологии

С нуля до Frontend-разработчика. Начало⁠⁠

С нуля до Frontend-разработчика. Начало Веб-разработка, Frontend, Web, HTML, CSS, Верстка, Длиннопост

Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.

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

Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.

Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:

1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)

2) Советую скачать бесплатно курс, который писал здесь (п. 2)

!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.

3) После этого сразу советую изучить препроцессор CSS  (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2  - 025  из того курса, либо из любого другого видео на YouTube.

4) Изучаем основы Git/Github. Из курса Модуль 3 - 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)

+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.

Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.

После этого можно уже с головой углубляться в верстку.

Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.

План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их "резиновыми".

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

Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям :)

Показать полностью
[моё] Веб-разработка Frontend Web HTML CSS Верстка Длиннопост
52
Nopurpose
Nopurpose
5 лет назад

Frontend разрабы, помогите⁠⁠

Frontend разрабы, помогите Frontend, HTML, CSS, Заголовок, Адаптивность

На экранах шириной 470 текст уже не переносится, выходит за пределы окна браузера. Что делать-то?)

Ниже ссылка на эту страницу

http://lenoblinvest.ru/mery-podderzhki/sozdanie-territorii-o...

Frontend HTML CSS Заголовок Адаптивность
6
2
froggush
froggush
5 лет назад

Из судовредителя в веб-фронтовики. Начало⁠⁠

Из судовредителя в веб-фронтовики. Начало HTML, CSS, Web, Javascript, Frontend

Цель (сказочная) - Senior Frontend Developer
Цель (актуальная) - найти хоть какую-нибудь работу за деньги

Исходные данные:
Возраст:
20 лет;

Образование: эмбрион судовредителя;
Работа: по утрам мету плац, после обеда топчу его.

Около года назад, посмотрев на старшего брата-яндексера, я пришёл к выводу, что перспектива быть программистом мне нравится гораздо больше, чем перспектива драить палубу (-А борт? -Аборт - это грех). На фоне данного вывода было принято решение развиваться в сторону фронтенда с целью войти в it. Решение хорошее! Жаль, что материальная база была плохая. Своего ноутбука не было, приходилось брать лэптоп у товарища. Получалось не часто, так как гаджет ему и самом нужен. В итоге, за год удалось освоить не много: html, css, flex, сетки на примере skeleton'a, git, GitHub, начал потихоньку учить js, jq, но случился большой перерыв на почве дел семейных. Было и первое обращение за помощью на q&a habr, stackoverflow.

Теперь же у меня есть собственный ноутбук и безлимитная возможность учиться\кодить\делать-что-захочу на нём :)

Жребий брошен, цель определена. Значит - в путь! Буду писать время от времени о своих успехах сюда. В первую очередь для предоставления своих трудов на суд более и не более опытным товарищам, во вторую очередь - для структуризации в общих чертах пройденного материала)
Этот пост будем считать началом отсчёта.

На данном этапе смотрю курс по js essential от ITDVN, читаю книгу Флэнагана "JavaScript. Подробное руководство" и верстаю учебные макетики, которые, кстати, можно посмотреть по ссылке - https://github.com/babkavokne. Там небольшой бардак, но, обещаю, в ближайшее время я наведу порядок.


Жажду советов, обмена опытом и общения с идущими к it сфере или уже достигшими её, и, конечно, критики!


Само собой, я открыт для любой работки по вёрстке за бесплатно\еду\копейку :)

По традиции: первый пост! Не судите строго!)
Всем добра и хорошего настроения.

Показать полностью 1
[моё] HTML CSS Web Javascript Frontend
22
voi1i
5 лет назад
Web-технологии

CSS3 - Проблема с полупрозрачными границами⁠⁠

[моё] Css3 CSS Web Веб-разработка Frontend Верстка Pikaweb Видео
6
aluxe
6 лет назад

Гугл как-бы намекает⁠⁠

Гугл как-бы намекает
Поисковые запросы Google Юмор Frontend CSS Покупки в интернете
1
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
Aleks00231
6 лет назад

5 лучшие расширений для Visual Studia Code⁠⁠

5 лучшие расширений для Visual Studia Code Web, Web-программирование, Javascript, HTML, CSS, Frontend

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

1.  Debugger for Chrome:

Эта расширение по сути практически бесполезно, так как в самом Google Chrome есть удобный отладчик, но всё таки я предпочитаю использовать именно его, что бы не загромождать интерфейс самого Хрома. Также в VS code есть ещё куча других отладчиков виде расширений.

2. TODO Highlight:

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

3. Prettier:

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

4. Open-In-Browser:

Благодаря этому расширению вы можете прямо из VS Code, открывать HTML файл в своём браузере, а не как обычно сначала надо открывать в проводнике папку где находится нужный вам файл.

5. Live Server:

Это моё самое любимое расширение, хоть он практически не чего сложного не делает,  а именно, после сохранения кода автоматически обновляет страницу.

Здесь написаны лишь мои самые любимы расширения, которыми я лично пользуюсь, скорее всего многие кто прочтёт эту статью, уже знаю о них, но надеюсь что новичкам, кто только начал изучать web программирование, будет полезна эта информация.

Показать полностью
[моё] Web Web-программирование Javascript HTML CSS Frontend
13
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии