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

Veras IT – авторский канал опытного фронтендера Ежедневные посты на тему разработки, в которых автор: 🟢Рассказывает о новостях и трендах из мира фронтенда 🟢Делится опытом разработки и решением частых задач фронтендеров 🟢Объясняет сложные темы простыми словами и с юмором Еще мемы (редко, но смешно) и лайфстайл посты о буднях разработчика Подписывайся! https://t.me/veras_it

❔ Как стилизовать кнопку Input File? HTML:

<link rel="stylesheet" href="image.jpg">
 
<div class="example-2">
  <div class="form-group">
    <input type="file" name="file" id="file" class="input-file">
    <label for="file" class="btn btn-tertiary js-labelFile">
      <i class="icon fa fa-check"></i>
      <span class="js-fileName">Загрузить файл</span>
    </label>
  </div>
 </div>

CSS:

.example-2 .btn-tertiary{color:#555;padding:0;line-height:40px;width:300px;margin:auto;display:block;border:2px solid #555}
.example-2 .btn-tertiary:hover,.example-2 .btn-tertiary:focus{color:#888;border-color:#888}
.example-2 .input-file{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}
.example-2 .input-file + .js-labelFile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;cursor:pointer}
.example-2 .input-file + .js-labelFile .icon:before{content:"\f093"}
.example-2 .input-file + .js-labelFile.has-file .icon:before{content:"\f00c";color:#5AAC7B}

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

Наткнулся на классный канал: Эра Технологий Эра Технологий: Телеграмм канал рассказывающий новости мира технологий со всего света. Ребята делают реально интересный и качественный контент, улучшаясь каждый день! Подписывайтесь на них и смотрите уникальный и познавательный контент! PS: У них сейчас проходит конкурс переходи по ссылке и участвуй!

#ЭраТехнологий

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

Присоединяйтесь к нашему бесплатному курсу и начните увлекательное путешествие в мир Java! Изучайте основы, создавайте программы, разбирайтесь с методами и анализируйте ошибки в коде. Практика, упражнения и проверочные тесты помогут вам освоить навыки программирования. 🎓 Чему вы научитесь: — Создавать программы с использованием основных конструкций языка.  — Разделять код на методы для повторного использования.  — Анализировать ошибки в коде с использованием отладочной печати. 💼 Включено в курс: 29 уроков (видео и/или текст), 35 упражнений в тренажере, 95 проверочных тестов + дополнительные материалы. Вы с нами?😉

👨‍💻 Color Compare Range Slider Слайдер со сравнением разных цветов на фото. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

☕️ Хочешь создавать красивые и современные сайты, но нет времени на разработку? Front Helper решит эту проблему! Здесь ты найдешь огромное количество готовых решений, которые можно легко скопировать к себе в проект! ✅ Подпишись и ускорь свою работу в разы!

❔ Как красиво оформить список с датами? HTML:

<dl class="holiday">
  <dt>1.04.15</dt>
    <dd>День смеха</dd>
  <dt>4.04.15</dt>
    <dd>День веб-мастера</dd>
  <dt>5.04.15</dt>
    <dd>День геолога</dd>
  <dt>7.04.15</dt>
    <dd>День рождения РУНЕТА</dd>
</dl>

CSS:

.holiday {
  overflow: hidden;
  font-size: 16px;
}
.holiday dt, .holiday dd {
  height: 2.5em;
  line-height: 2.5em;
  padding: 0 0.625em 0 0.875em;
  color: #4C565C;
  box-sizing: border-box;
}
dt {
  width: 30%;
  float: left;
  clear: right;
  background: #D3E6DD;
  font-weight: bold;
}
dd {
  width: 70%;
  float: right;
  margin-left: 0;
  margin-bottom: .3125em;
  border: 1px solid #BECFC7;
  border-left: none;
}

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

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме 16-22 февраля с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме 16-22 февраля с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

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

Оставьте сомнения и сделайте уверенный шаг к карьере веб-разработчика на мини-курсе Skillbox. Научитесь зарабатывать на фрилансе! Вы с нуля создадите 3 проекта — сайт, приложение и сервис — и изучите основы самых востребованных технологий. Регистрация: https://epic.st/tfB__ На мини-курсе вы научитесь: — создавать веб-страницы, используя язык разметки HTML и технологию CSS; — реализовывать серверную часть (backend) веб-приложений на языке PHP; — работать с базой данных MySQL при помощи языка запросов SQL; — создавать приложения на языке программирования JavaScript; — автоматически получать информацию с других сайтов; — размещать сайты в интернете. 📍Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java и веб-разработки, руководит командами разработки в разных проектах. Каждый участник получит подборку полезных материалов, а также подарки от Skillbox! 🌟Полезные знания — на расстоянии клика. Учитесь где угодно и когда угодно! Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

👨‍💻 No JS Carousel POC Карусель с фото с возможностью переключения при помощи кнопок. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Бесплатный марафон свиданий с JavaScript. Познакомьтесь с JavaScript поближе, а мы поможем продлить конфетно-букетный период. За 6 дней вы узнаете базовый синтаксис JavaScript, попробуете написать свой первый (или нет) код и поймёте, хочется ли вам продолжить эти отношения. Будут тренажеры, полезные материалы, чат с поддержкой и разбор вопросов с авторами курсов. Кроме того, мы подарим грант на обучение любой профессии каждому, кто дойдёт до конца. Узнать подробнее.

❔Как можно красиво оформить первую букву абзаца? CSS даёт возможность форматирование абзаца с использованием псевдоэлементов :first-letter и :first-line. Можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. CSS:

/*первый абзац*/
p:first-letter {
  font-size: 2em;
  margin-right: 2px; 
  color: #EE9966;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
p:first-line {color: #EE9966;}
/*второй абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
/*третий абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  margin-bottom: 2px;
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
}
/*четвертый абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 3px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
  border-radius: 50%;
}
/*пятый абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #EE9966;
  float: left;
  font-weight: bold;
}
/*шестой абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(image.jpg);
  border: 2px solid #EE9966;
  color: #544E3E;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}

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

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

👨‍💻 React Range Sliders Много хороших слайдеров в разном стиле. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как сделать такие ретро-полосы на фон? CSS:

div {
background-image: 
linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px), 
linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px;
}

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