How To WebDev
رفتن به کانال در Telegram
Заявки принимаются моментально! Обучаем фронтентду и бекенду просто и понятно! Сотрудничество: @me_Smith Ссылка на канал: @HowTo_WebDev
نمایش بیشتر
شبکه:3 353
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-157 روز
-6130 روز
آرشیو پست ها
3 353
Заметки СТО - Актуальная информация от действующего CTO разработчика:
- Frontend, Backend и DevOps
- Только то что работает на практике
Стань лучшим - Подпишись на Заметки СТО
3 353
Стили в CSS — №2
Внутренняя таблица стилей
– Внутренняя таблица стилей может использоваться, если одна отдельная страница имеет уникальный стиль.
Внутренние стили определяются в элементе <Style> внутри <head> раздела HTML-страницы:
Пример:
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
📓 #CSS #Код3 353
Вы еще не слышали про телеграм-канал LEFT JOIN? Рассказываем в двух словах!
Это авторский канал аналитика данных Николая Валиотти, в котором рассказывают про:
🎨 применение AI-моделей почти во всех сферах работы и жизни,
🗄 всемогущий язык SQL и работу с базами данных,
📚 интересные библиотеки для Python,
📎 работу с различными API (от Google Docs до соцсети для любителей пива),
📈 обзоры на BI и SQL-инструменты,
🎨 тонкости создания датавиза.
🦸♂️ А еще авторы канала скоро выпустят третий сезон подкаста Data Heroes про данные, аналитику и будни дата героев! Если вы еще не слушали первый два — наверстывайте упещенное и...
Конечно, скорее подписывайтесь на канал!
3 353
Макеты для верстки теперь в Telegram!
Figma Макеты — уникальный канал, куда выкладываются дизайн-макеты в форматах Figma и PSD для верстки сайтов, практикуйтесь и добавляйте проекты к себе в портфолио!
Подписывайся: @FigmaMaket🔥
3 353
Стили в CSS — №1
Существует три способа вставки таблицы стилей:
– Внешняя таблица стилей
– Внутренняя таблица стилей
– Встроенный стиль
Внешняя таблица стилей:
С помощью внейшней таблица стилей, вы можете изменить внешний вид всего веб-сайта, изменив только один файл!
– Каждая страница должна содержать ссылку на внешний файл таблицы стилей внутри элемента <Link>. Элемент <Link> попадает внутрь <head> раздела:
Пример:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Внешняя таблица стилей может быть написана в любом текстовом редакторе.
📓 #CSS #Код3 353
Комментарии в CSS
– Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода на более позднюю дату.
– Комментарии игнорируются браузерами.
CSS комментарий начинается с/* и заканчивается */. Комментарии также могут охватывать несколько строк:
Пример:
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
📓 #CSS #Код #Интересно3 353
Cелекторы CSS — №3
Селектор класса выбирает элементы с определенным атрибутом class.
– Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса.
В приведенном ниже примере все HTML-элементы с class="center" будет красным и center-aligned:
Пример:
.center {
text-align: center;
color: red;
}
Можно также указать, что класс может затронуть только определенные элементы HTML.
📓 #CSS #Код #Интересно3 353
Ищем 100 человек, которые пройдут 4 курса по IT бесплатно и дадут обратную связь!
Старая цена - 23 500 руб
Цена для тестовой группы - 0 руб 💯
👉🏻 Получить курсы тут
3 353
Cелекторы CSS — №2
Селектор идентификаторов использует атрибут ID элемента HTML для выбора конкретного элемента.
Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!
– Чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента.
Правило стиля, приведенное ниже, будет применено к элементу HTML с id="para1":
Пример:
#para1 {
text-align: center;
color: red;
}
📓 #CSS #Код #Интересно3 353
Cелекторы CSS — №1
Селекторы CSS используются для "поиска" (или выбора) элементов HTML на основе их имени элемента, идентификатора, класса, атрибута и т.д.
Селектор элементов:
– Селектор элементов выбирает элементы на основе имени элемента.
Вы можете выбрать все <p> элементы на странице, как это (в этом случае все <p> элементы будут выровнены по центру, с красным цветом текста):
Пример:
p {
text-align: center;
color: red;
}
📓 #CSS #Код #Интересно3 353
10 января в Айтилогии стартует 7-дневный бесплатный интенсив по frontend-разработке, на котором ты с нуля без знаний создашь фронтенд-проект на Angular 🔥
На интенсиве ты:
– Сверстаешь лендинг на HTML + CSS
– Реализуешь функционал на JavaScript
– Используешь фронтенд-фреймворк Angular
– Подключишь Backend и загрузишь сайт на хостинг
🎁 Будет общий чат, проверка домашек от экспертов, различные бонусы!
А в конце автор подарит своё резюме Senior-разработчика, с помощью которого устроился на ЗП 3500$
Первые 100 мест бесплатно, потом 6 990 руб. Не упусти👇🏻
Frontend Start
3 353
Синтаксис CSS
Набор правил CSS состоит из селектора и блока объявлений:
h1 {color:blue; font-size:12px}
– Селектор указывает на элемент HTML, который требуется присвоить стилю.
– Блок объявления содержит одно или несколько объявлений, разделенных точками с запятой.
– Каждое объявление содержит имя свойства CSS и значение, разделенное двоеточием.
– Объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений окружены фигурными скобками.
В следующем примере все элементы <p> будут выровнены по центру, с красным цветом текста:
Пример:
p {
color: red;
text-align: center;
}
📓 #CSS #Код #Интересно3 353
Знакомство с CSS — №2
HTML никогда не предназначался для хранения тегов для форматирования веб-страницы! Он был создан для описания содержимого веб-страницы, например:
<H1> это заголовок </H1>
<p> это абзац. </p>
Когда теги, такие как <font> и атрибуты цвета, были добавлены в спецификацию HTML 3,2, это стало кошмаром для веб-разработчиков.
Разработка крупных сайтов, где шрифты и цветовая информация были добавлены на каждую страницу, стала долгим и дорогостоящим процессом.
Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.
CSS удалил форматирование стиля со страницы HTML, а также экономит много времни!
Определения стилей обычно сохраняются во внешних CSS-файлах.
С помощью внешнего файла стилей можно изменить внешний вид всего веб-сайта, изменив только один файл.
📓 #CSS #Интересно3 353
Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇
▪️ Senior Frontend — JS, HTML и CSS
▪️ Frontend Interview — как проходить собеседования
▪️ Web Craft — только Web-разработка
▪️ Frontender Libs — библиотеки для фронтендера
3 353
Знакомство с CSS — №1
– CSS выступает за Cаскадинг STyle sХитс.
– CSS описывает, как элементы HTML должны отображаться на экране, бумаге или на других носителя х.
– CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
— Внешние таблицы стилей хранятся в файлах CSS.
Зачем использовать CSS?
CSS используется для определения стилей для веб-страниц, включая дизайн, компоновку и вариации отображения для различных устройств и размеров экрана.
📓 #CSS #Интересно
3 353
Станьте востребованным Java-разработчиком уже в 2023 году. Сделайте шаг в новую жизнь прямо сейчас.
Записывайтесь на курс от Хекслета и получайте скидку 10% и подарок на выбор: депозит 20 000 ₽, базовая подписка на 5 месяцев или премиум-подписка на 1 месяц.
Вы также можете порадовать не только себя, но и близкого человека. Воспользуйтесь уникальным предложением для двоих: купите вторую профессию со скидкой 40%.
На профессии «Java-разработчик» вы за 10 месяцев:
✔️Изучите объектно-ориентированное программирование на Java и освоите Spring Boot для создания корпоративных приложений.
✔️Научитесь подбирать правильные структуры данных для хранения и обработки данных и решите сотни задач в браузере.
✔️ Создадите 5 проектов для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров.
✔️ Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах.
✔️ Вступите в программу «Карьерный трек»: получите шанс попасть на оплачиваемую стажировку и найти первую работу в IT.
Успейте оставить заявку до 31 декабря, чтобы получить новогодние подарки🎁
3 353
Атрибут HTML — SRC
Атрибуты — это дополнительные значения, которые настраивают элементы.
— HTML-образы определяются тегом <img>.
Имя файла источника изображения указывается в атрибуте src:
Пример:
<img src="img_girl.jpg">
📓 #Код3 353
Атрибут HTML – TITLE
– Здесь атрибут title добавляется к элементу <p> .
Значение атрибута Title будет отображаться в виде подсказки при наведении указателя мыши на абзац:
Пример:
<p title="I'm a tooltip">
This is a paragraph.
</p>
📓 #HTML #Код3 353
7 дней бесплатного обучения фронтенду, которые не сделают из новичка опытного прогера и не устроят на работу…
Зато покажут, как, даже не имея опыта в программировании:
1. Сверстать качественный веб-сайт на HTML + CSS;
2. Оживить страницу с помощью JavaScript;
3. Понять фронтенд-фреймворк Angular;
4. Подключить Backend и загрузить сайт на хостинг.
А главное, там можно пообщаться с экспертами и получить совет по доработке своего проекта.
👉 Смотри, пробуй
Стартуем 6 декабря.
