WebMentor | Вебментор
Open in Telegram
🥇 Твой наставник в мире веб-разработки! Изучаем JavaScript, фронтенд в целом и немного бэкенд. Администратор: @burnhell
Show more3 561
Subscribers
No data24 hours
-137 days
-6930 days
Posts Archive
Login Form
Оригинальная форма входа с плавающим заполнителем на чистом CSS.
✏️ Открыть CodePen
#codepen
Веб-разработка – это удалёнка, развитие и множество интересных проектов.
Получите полноценную профессию, чтобы найти работу сразу после выпуска или даже во время обучения.
Никакой боли с бесконечными откликами на вакансии и собеседованиями. В HTML Academy за 12 лет работы мы подготовили сотни специалистов, которые успешно трудоустроились в ведущих IT-компаниях.
На курсе для вас будет всё для уверенного старта в веб-разработке:
—Личный наставник, который подскажет, что поправить, если не получается сделать как хочется;
— Минимум 3 проекта для портфолио, которые вы сможете показать будущему работодателю;
— Оплачиваемая стажировка, где вы получите опыт работы в команде.
До 14 апреля дарим скидку 15% на профессию "Фронтенд-разработчик".
Кстати, старт совсем скоро – уже на следующей неделе вы сможете начать обучение.
Оставляйте заявку и мы расскажем о профессии подробнее.
Glow ButtonКнопка с красивым эффектов вокруг нее. Реализовано с помощью SCSS.
Открыть CodePen#codepen
Glowy hover effectПрайс-лист для сайта с красивым эффектом подсветки при наводке. Реализовано с помощью CSS и JavaScript.
Открыть CodePen#codepen
Merging Letter ToggleИнтересная анимация переключателя. Реализовано с помощью CSS.
Открыть CodePen#codepen
⚡️Настройка конфигурации Nginx для вашего сайта
🐧 Шаг 1: Установка Nginx- Откройте терминал и введите следующую команду для установки Nginx:
sudo apt update && sudo apt install nginx
systemctl status nginx
➡️Шаг 2: Размещение вашего сайтаЗагрузите файлы вашего сайта в каталог /var/www/html или создайте новый каталог под ваш сайт и настройте Nginx на работу с ним.
💻 Шаг 3: Настройка конфигурации Nginx➖ Создайте файл конфигурации: Перейдите в директорию
/etc/nginx/sites-available и создайте файл, например your_site.conf, используя текстовый редактор:
sudo nano /etc/nginx/sites-available/your_site.conf
server {
listen 80;
server_name your_domain.com www.your_domain.com;
location / {
root /var/www/your_site;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
your_domain.com - это ваш домен, а /var/www/your_site - директория, где находятся файлы вашего сайта.
➖ Активация конфигурации:
- Создайте символическую ссылку на ваш конфигурационный файл в директории /etc/nginx/sites-enabled:
sudo ln -s /etc/nginx/sites-available/your_site.conf /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
📹 NGINX: быстрый и надежный веб-сервер ЗА 3 МИНУТЫ 📖 Руководство для начинающих 📖 Шпаргалка по основным секциям NginxWebMentor ⚙️ Вебментор
⚡️ Выбор хостинга для вашего сайта: основы и советы
Привет, друзья, это Nick, и сегодня мы поговорим о выборе идеального хостинга для вашего сайта. Выбор правильного хостинг-провайдера – ключевой шаг на пути к успеху вашего веб-проекта. Погрузимся в детали!
🌐 Что такое хостинг сайтов?
Хостинг сайтов – это услуга, предоставляемая компаниями, которые размещают ваш сайт на своих серверах, делая его доступным в интернете 24/7. Правильный выбор хостинга обеспечит быстродействие вашего сайта и его стабильность.🔍 На что обратить внимание при выборе хостинга:
- Надёжность и аптайм: Ваш сайт должен быть доступен в любое время суток. - Скорость загрузки: Скорость загрузки страниц напрямую влияет на удобство пользователей и SEO. - Техподдержка: Квалифицированная и быстрая поддержка при возникновении проблем. - Масштабируемость: Возможность увеличения ресурсов без смены провайдера. - Цена: Ищите лучшее соотношение цены и качества услуг.🔥 Популярные провайдеры: Beget, Selectel, и REG.RU
— Beget идеально подходит для начинающих благодаря своей простоте и удобной панели управления. — Selectel предлагает облачные решения для бизнеса и требовательных проектов. — рег.ру выделяется широким спектром услуг и удобством управления доменами и хостингом.Выбирая хостинг, обращайте внимание не только на цену, но и на отзывы пользователей, а также на то, какие дополнительные услуги предлагает провайдер. Успех вашего сайта начинается с надёжного основания! 💡 Не забудьте подписаться, чтобы не пропустить следующие посты, где мы разберём, как захостить сайт на локальном сервере и что нужно знать о доменах. WebMentor ⚙️ Вебментор
Card hover effectЭффект отображения логотипа на карточке при наведении. Реализовано с помощью SCSS.
Открыть CodePen#codepen
Inview AnimationКрасивая анимация плавного появления текста. Реализовано с помощью GSAP, CSS и JavaScript.
Открыть CodePen#codepen
erid 2VtzquwjhjK
⚡️Обучение графическому дизайну с гарантией трудоустройства 👩💻
Онлайн-курс "Профессия графический дизайнер" предлагает получить все необходимые знания для создания карьеры в сфере графического дизайна. Программа обладает уникальными особенностями, включая гарантию трудоустройства после успешного окончания курса.
🧑💻 Профессионалы своего дела, имеющие многолетний опыт работы в области графического дизайна, обеспечат вас самой современной информацией и техниками, чтобы вы смогли применять их в РЕАЛЬНЫХ проектах.
🎁 Для получения скидки на обучение в размере 52% , ответьте на несколько простых вопросов по ссылке
📲 Присоединяйтесь к онлайн-курсу "Профессия графический дизайнер" и откройте для себя увлекательный мир творчества и возможностей!
Реклама ООО "ЙОЛО" ИНН 7804699864
🙃На заметку
➖ Использование CSS-переменных для унификации дизайна
CSS-переменные (или кастомные свойства) позволяют централизованно управлять повторяющимися значениями, что упрощает обновление и поддержку кода. Вы можете определить переменные в корневом элементе (:root) и использовать их по всему документу.
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.special-section {
background-color: var(--primary-color);
color: var(--secondary-color);
}Медиа-запросы в CSS используются для добавления условных стилей, которые применяются для различных размеров экранов, позволяя создать адаптивный дизайн. Пример ниже демонстрирует изменение стилей для .special-section, когда ширина экрана меньше 768 пикселей.
.special-section {
padding: 20px;
background-color: #f8f9fa;
}
@media (max-width: 768px) {
.special-section {
padding: 10px;
background-color: #e9ecef;
}
}Псевдоклассы в CSS позволяют добавлять специальные стили к элементам при определенных условиях, например, когда на элемент наведен курсор или он активен. Следующий код добавляет эффект при наведении на элементы внутри .special-section.
.special-section a {
transition: color 0.3s;
}
.special-section a:hover {
color: #0056b3;
text-decoration: underline;
}Какой CSS-селектор позволяет переопределить стили для всех тегов внутри элемента с классом .special-section?
Файл index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример сайта</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<h1>Строительная компания MMNF</h1>
</header>
<section class="intro">
<p>Мы рады предложить вам уникальные решения для вашего бизнеса. Исследуйте наши продукты и услуги.</p>
</section>
<section class="features">
<h2>Особенности нашего продукта</h2>
<ul class="features-list">
<li class="feature-item text-large">Высокое качество</li>
<li class="feature-item text-large">Новейшие технологии</li>
<li class="feature-item text-large">Доступные цены</li>
</ul>
</section>
</body>
</html>Файл style.css
/* Основные стили */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.site-header {
background-color: #0056b3;
color: #ffffff;
padding: 40px 0;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.intro p {
margin: 0;
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
.intro, .features {
padding: 20px;
max-width: 800px;
margin: 20px auto;
}
/* Стили списка особенностей */
.features-list {
list-style: none;
padding: 0;
}
.feature-item {
background-color: #ffffff;
margin-bottom: 15px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Комбинированные стили текста */
.text-large {
font-size: 1.25em;
font-weight: bold;
}
/* Комбинирование стилей для изменения фона и текста элементов списка */
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
background-color: #e7f5ff;
}⚡️Комбинирование и переопределение стилей
Привет, я снова здесь и в сегодняшнем уроке мы погрузимся в комбинирование и переопределение стилей в CSS. Эти методы открывают безграничные возможности для творчества и помогают достичь именно того дизайна, который вы задумали.📝Комбинирование стилей
Комбинирование стилей позволяет вам создавать сложные и уникальные визуальные эффекты, используя базовые CSS-правила. Смешивая классы и идентификаторы, можно достичь нужного стиля без повторения кода.
.base-style {
font-size: 16px;
color: #333;
}
.accent-style {
color: #007bff;
}
/* Применение комбинированных стилей */
<p class="base-style accent-style">Этот текст будет синего цвета с базовым размером шрифта.</p>Переопределение стилей - это инструмент для детальной настройки внешнего вида элементов. Понимание каскада CSS позволит вам эффективно управлять стилями, определяя, какие из них будут применяться в случае конфликта.
/* Базовый стиль ссылок */
a {
color: #000;
}
/* Переопределенный стиль для ссылок внутри .special-section */
.special-section a {
color: #007bff;
}Глубокое понимание работы классов в CSS
Привет, я Nick, и сегодня мы поговорим о том, как классы в CSS могут сделать вашу веб-разработку проще. Использование классов позволяет нам создавать модульный, легко поддерживаемый код, что крайне важно в мире веб-разработки.
.selector {
color: #333; /* Цвет текста */
background-color: #f4f4f4; /* Фоновый цвет */
display: flex; /* Тип отображения */
justify-content: center; /* Выравнивание содержимого */
align-items: center; /* Выравнивание элементов */
flex-direction: column; /* Направление элементов */
}➖ Семантические имена классов упрощают понимание и поддержку кода. ➖ Миксование классов создает уникальные стили без излишней специфичности. ➖ Методологии вроде BEM упрощают систематизацию и масштабирование стилей.💻 Пример использования Sass:
// Определение переменной
$primary-color: #333;
// Использование переменной в классе
.selector {
color: $primary-color;
&:hover {
color: lighten($primary-color, 20%);
}
}⚡️ Этот пример показывает, как препроцессоры типа Sass делают ваш CSS более функциональным, позволяя использовать переменные, условия и миксины для создания более чистых и управляемых стилей.➖ Переопределение и комбинирование стилей требует аккуратности, чтобы избежать конфликтов. Используйте более специфические классы или CSS-переменные для управления. ➖ CSS-препроцессоры упрощают миксование классов, предлагая переменные, миксины и вложенность, что значительно облегчает разработку. ✅ Помните, в веб-разработке всегда есть место для роста и изучения новых подходов. Удачи в создании веб-страниц! WebMentor ⚙️ Вебментор
Hover EffectОригинальный эффект при наведении на карточку. Реализовано с помощью CSS.
Открыть CodePen#codepen
