КодВеб | Дизайн База

👉 Турция никого не ждёт, даже айтишников. 👉 Канада даст вам полугодовую визу, чтобы вы искали работу в стране. 👉 Работа на госкомпанию закроет перед тобой многие двери за границей. 👉 А ещё есть цифровая виза без требований к доходам. Не знал? Мы — команда айтишников GeeckoMove, и сейчас наша команда работает из самых разных стран. Мы не понаслышке знаем, где айтишникам хорошо, а куда — не стоит и соваться. Даже если ты ещё учишься или работаешь на позиции джуна, но хочешь работать удалённо или переехать в комфортную страну, подписывайся на наш канал! Ведь нужно заранее знать, куда лучше ехать, как к этому подготовиться и чего ждать от новой страны. У нас: 👾 самая свежая информация о визах и релокейте от специалистов, МИДа и консульств; 👾 сообщество айтишников разных уровней из разных стран; 👾 вакансии удалённой работы или с релокацией; 👾 и многое другое! >> Подписывайся, пока не потерял!

👨‍💻 Neon notification system Всплывающее окно уведомления для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как сделать перспективную рамку для фотографии? HTML:

<div class="transform-border">
<img src="image.jpg">
</div>

CSS:

* {
   box-sizing: border-box;
}
.transform-border {
   position: relative;
   max-width: 400px;
   margin: 50px auto;
   transform: perspective(3000px) rotateY(29deg);
}
.transform-border img {
   display: block;
   width: 100%;
   box-shadow: -12px 11px 1px #f2f2f2;
}
.transform-border:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: -22px;
   top: 22px;
   background: #cccccc;
   z-index: -1;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

👩‍💻 Aveji Лендинг компании, продающей мебель. 🟠 Сложность: Легкая 🟠 Адаптивность: Есть Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

💻 Профессия «Фронтенд-разработчик».  Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. Уже во время обучения вы вступите в программу «Карьерный трек», чтобы найти свою первую работу в IT.  Пройдите 5 бесплатных уроков и поймите, подходит ли вам профессия! COSMO чёрная пятница: успейте получить скидку до 120 000р. Расширяем горизонты Вселенной - добавим +6 месяцев сопровождения наставника и карьерного консультанта после завершения обучения. Переходите по ссылке, выбирайте скидку и забирайте подарки🎁 Реклама. АНПОО "ХЕКСЛЕТ КОЛЛЕДЖ". ИНН 7839056670. erid: LjN8K91hM

👨‍💻 Terrazzo elements. Различные полезные элементы для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

📁🕵 В Windows есть папка, которая собирает на вас компромат! Пакет безопасности опять предупредил своих подписчиков, как разгрузить компьютер от слежки и лагов системы. А ещё он рассказывает о признаках майнеров, как удалить трояны и порно-баннеры за 5 минут Почему греется проц без запущенных приложений и загружен HDD или SSD. 💻 Подпишитесь на Пакет Безопасности — залог цифровой гигиены и компьютерной грамотности

❔ Как красиво оформить цитату на сайте? Цитаты обычно используются на сайтах, где периодически публикуются новости, статьи, пресс-релизы о компании и т.п. Красивое оформление цитат позволит не только донести интересную информацию до своих подписчиков, но и закрепить визуальное восприятие бренда или компании. HTML:

<blockquote>
  <p>Since everything is in our heads, we had better not lose them.</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

CSS:

blockquote {
margin: 0;
color: #231E28;
padding: 30px 30px 30px 60px;
border-left: 8px solid #CBDDE7;
position: relative;
background: #FAF8EB;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before{
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 70px;
position: absolute;
left: 15px;
top: 5px;
}
blockquote p {
font-style: italic;
font-size: 24px;
margin-top: 0;  
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

🥳 ДРУЗЬЯ, МЫ ОТКРЫЛИ НОВЫЙ КАНАЛ! Каждый знает, как важен английский язык, особенно айтишнику. Но не каждому удается его выучить, ведь не все знают про секретный способ:

🇬🇧 Проще всего выучить английский с помощью... подкастов! Тебе не нужно ничего учить, к тому же, это интересно и познавательно!

В нашем новом канале, мы каждый день бесплатно выкладываем подкасты на английском языке на самые интересные темы! Поддержи нас подпиской👇 Подкасты на Английском 🎧

👩‍💻 Gogames Одностраничный сайт об играх и игровых приставках. 🟠 Сложность: Средняя 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

👨‍💻 Search with morphing button Стильная строка поиска для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

С этим каналом ты взломаешь сам подход к изучению фронтенда На фронте — здесь практикующие разработчики собирают знания и секретные техники по JS, CSS и HTML  Тут можно узнать: 🟢 Как войти в блокчейн через JavaSсript или сделать много форм, не сделав ни одной, секреты эффективной работы со строками и многое другое Найти: 🟢 Анимации, эффекты, последние новости фронтенд мира Открой тёмную комнату знаний, изучай и стань лучшим

Как быстро собрать такую форму оплаты? Легко! Фронтенд гайд, это канал для верстальщиков, в котором публикуют: ✓ Готовый код ✓ Макеты для верстки ✓ Тесты на знание кода Ускорь работу над своим проектом!

❔ Как сделать красивую кнопку для сайта? HTML:

<a class="button-7" href=""><span>Читать далее</span></a>

CSS:

.button-7 {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 15px;
    color: #383d48;
}
.button-7 span {
    display: block;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 1px;
    line-height: 1;
    transition: .4s ease;
}
.button-7:after {
    content: '\e886';
    font-family: Linearicons-Free;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
}
.button-7:hover span {
    max-width: 150px;
    opacity: 1;
    margin-right: 6px;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

7 дней бесплатного обучения frontend-разработке! Организовали для тебя бесплатный интенсив по frontend-разработке с практикой и куратором. Что будет: 1️⃣ Создание веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты. 3️⃣ Использование фреймворка Angular Узнаешь, как использовать этот инструмент для создания масштабируемых и эффективных веб-приложений. 4️⃣ Подключение Backend Мы научим тебя основам работы с Backend'ом и покажем, как развернуть проект на хостинге. 5️⃣ Советы по доработке проекта Получишь советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества. 🔥 А главное, ты проведёшь 7 дней в компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Участвуй бесплатно

👩‍💻 FASHION Одностраничный сайт блога о моде. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

WEBIK - Современный Российский справочник для веб программистов! В нашем канале мы каждый день публикуем: - крутые рецепты кода - смешные мемы - интересные лайфхаки - полезные статейки - позновательные опросы - новости о вебе Будь классным Full Stack разработчиком вместе с @gki_webik_ru!