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

Башня

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

Играть

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

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

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

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

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

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

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

CSS + Web

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

HTML Программирование Верстка Javascript IT Frontend Web-программирование Сайт Веб-разработка Дизайн Все
97 постов сначала свежее
0
DELETED
5 лет назад

Задаем соотношение сторон изображению / HTML&CSS⁠⁠

I. Через фоновое изображение

- Создаем div;

- Задаем ему нулевую высоту;

- Задаем ему фоновое изображение;

- Обнуляем размер фонового изображения;

- Создаем псевдоэлемент before;

- Наследуем фон от родителя;

- Делим высоту на ширину и умножаем результат на сто чтобы получить значение для padding-top;

- В результате получаем следующие стили:

.image {
 background-size: 0 0;
}

.image:before {
 content: '';
 display: block;
 padding-top: 56.25%;
 background-image: inherit;
 background-repeat: no-repeat;
 background-size: cover;
}
Пример на codepen.


II. Через свойство object-fit.

Если поддержка браузеров вас устраивает и вы знаете значение одной из сторон картинки, то вы можете использовать свойство:

object-fit: cover;

Если ширина картинки равна 500px, а соотношение сторон должно быть 4:3, то все что остается сделать это:

(3 / 4) * 500 = 375

В итоге стили будут выглядеть примерно так:

img {
 width: 500px;
 height: 375px;
 object-fit: cover;
}

Если вам интересно то, о чем я пишу - можете заглянуть ко мне в группу вк или телеграм канал.

Показать полностью
[моё] HTML CSS Верстка Frontend Картинки Web-программирование Пропорции Web Текст
0
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
186
EHOTnOTACKYH
EHOTnOTACKYH
5 лет назад
IT-юмор

Когда поправил CSS и всё, наконец-то, отображается так, как должно⁠⁠

Когда поправил CSS и всё, наконец-то, отображается так, как должно CSS, Разработка, Web, Профессиональный юмор, Собака
Показать полностью 1
CSS Разработка Web Профессиональный юмор Собака
10
1687
EHOTnOTACKYH
EHOTnOTACKYH
5 лет назад
IT-юмор

Наглядно про веб-технологии⁠⁠

Наглядно про веб-технологии Web, Web-программирование, HTML, CSS, Javascript, Адаптивность, Профессиональный юмор

Перевод, думаю, не нужен :)

Web Web-программирование HTML CSS Javascript Адаптивность Профессиональный юмор
110
normal64
normal64
5 лет назад
Web-технологии

Подскажите⁠⁠

Изучаю Html/Css

Пробую делать сайты по макетам, наткнулся на слайдер.

Все из рук вон плохо. Сначала пробовал только Html/css даже вставить чужой не выходит

С js тоже чужой вставить не выходит.

Где подсмотреть и вставить?

[моё] Текст HTML CSS Создание сайта Web Слайдер Javascript Помощь
11
23
MaxLisyanskiy
MaxLisyanskiy
5 лет назад
Web-технологии

С нуля до Frontend-разработчика. Первый месяц⁠⁠

С нуля до Frontend-разработчика. Первый месяц HTML, CSS, Верстка, Web, Веб-разработка

Всем привет, вот и прошел первый месяц учебы, а именно заключительный этап учебы верстки. Стоит подвести итоги:

1. В обязательном порядке всем рекомендую пройти первый блок на freeCodeCamp, получите сертификат, изучите много новой информации, закрепите знания на практике в конце.

С нуля до Frontend-разработчика. Первый месяц HTML, CSS, Верстка, Web, Веб-разработка

2. В остальном советую смотреть видео-курсы, как верстают люди и повторять. Главное, не зацикливаться на одном преподавателе из видео, а постоянно их менять, тем самым сможете подчерпать много нового и увидите различные методы написания кода. Мне помог данный канал, узнал некоторые тонкости. Когда придет понимание, можно уже брать различные PSD-макеты и практиковаться самостоятельно.


Считаю, точкой в начальном обучении верстки будет ваш сверстанный статичный сайт-портфолио, в дальнейшем он пригодиться для добавления работ и трудоустройства.



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


Показать полностью 1
[моё] HTML CSS Верстка Web Веб-разработка
13
web.developer
5 лет назад

Нужна идея для создания сайта⁠⁠

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

Да, с фантазией у меня всё совсем плохо ._.

---

Примечания:

1) Сайт должен работать без php. На чистом html, css и базовом(не сложном) js.

2) Мне 13(Почти 14 лет), и эротику и развод прошу оставить при себе :)

Верстка HTML CSS Javascript Web Программирование Идея Креатив Текст
51
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
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии