Code Ready | Frontend

✅ Утренняя информация про Microsoft Office 💻 Microsoft Office — офисный пакет приложений, созданных корпорацией Microsoft. В состав этого пакета входит программное обеспечение для работы с различными типами документов. ⬇️ 1. 📘 Microsoft Word — текстовый процессор, предназначенный для создания, просмотра, редактирования и форматирования текстов статей, деловых бумаг, а также иных документов. 2. 🥬 Microsoft Excel — табличный процессор, поддерживает все необходимые функции для создания электронных таблиц любой сложности. Занимает ведущее положение на рынке. 3. 🥩 Microsoft PowerPoint — программа подготовки презентаций и просмотра презентаций. 4. Microsoft Teams — корпоративная платформа, объединяющая в рабочем пространстве чат, встречи, заметки и вложения. 5. OneDrive — облачное хранилище, созданное компанией Microsoft в августе 2007 года. 6. Microsoft Outlook — персональный информационный менеджер. В состав Outlook входят: календарь, планировщик задач, записки, менеджер электронной почты, адресная книга. Поддерживается совместная сетевая работа. 7. Microsoft OneNote — программа для создания быстрых заметок и организации личной информации, блокнот с иерархической организацией записей, может служить аналогом обычного канцелярского блокнота. Также сюда входят многие другие приложения, такие как ACCESS, FRONTPAGE и другие, о которых мы расскажем в следующей теории. #теория

✅ Как создать крутой эффект при наведении? Оставляем CSS код ниже для создания интересного hover эффекта, когда пользователь наводит мышкой на текст, к нему добавляеся тень, glitch эффект и он становится объемным: ⬇️

@font-face {
  src: url("https://www.axis-praxis.org/fonts/webfonts/MetaVariableDemo-Set.woff2")
  format("woff2");
  font-family: "Meta";
}
body {
  background-color: #8357eb;
}
h1 {
  transition: all 0.8s;
  -webkit-text-stroke: 4px #d6f4f4;
  font-variation-settings: "wght" 900, "ital" 1;
  font-size: 15rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 10px 10px 0px #07bccc, 15px 15px 0px #e601c0, 20px 20px 0px #e9019a, 25px 25px 0px #f40468, 45px 45px 10px #482896;
  cursor: pointer;
}
h1:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}

#практика #css

✅ Как создать озвучку текста? SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать (например, язык, высота тона и громкость). ⬇️ ☑️ Делимся уже готовым HTML, CSS и JS кодом ниже для создания озвучки текста, с помощью элементов textarea, button и свойства SpeechSynthesis: HTML ⤵️

<textarea></textarea>
<button>Speak</button>

SCSS ⤵️

button {
  width: 85px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}
textarea, button {
  border: 1.5px solid #000;
  border-radius: 5px;
  outline: none;
  padding: 8px;
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

JavaScript ⤵️

const button = document.querySelector('button');
const text = document.querySelector('textarea');

button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);
});

#обучение #html #css #javascript

✅ Как скопировать текст в буфер обмена нажатием на кнопку? На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация input и самой button. ⬇️ ☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на HTML, CSS и JavaScript для создания красиво стилизованной кнопки копировать в буфер обмена: HTML ⤵️

<input type="text" id="input"> 
  <button onclick="copytext()" type="button">Скопировать</button>

SCSS ⤵️

 body {
  text-align: center;
  margin-top: 10%;
  background-color: #000;
}
 input, button {
  padding: .4em;
  width: 200px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

JavaScript ⤵️

 function copytext() {
  const copyText = 
  document.getElementById('input'); 
  const copy = copyText.value;
  navigator.clipboard.writeText(copy).then(
  function () { 
  console.log('Успешно'); 
  }).catch(function (err) { 
  console.log('Something went wrong', err);
  });
  
  alert("Copied the text: " + copyText.value);
} 

#практика #html #css #javascript

✅ Как создать стилизованную кнопку копирования в буфер обмен? Я всегда думал, что создание кнопки копирования занимает очень много строк кода и времени. На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация input и самой button. ⬇️ ☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на HTML, CSS и JavaScript для создания красиво стилизованной кнопки копирования в буфер обмен: HTML ⤵️

<input type="text" id="input"> 
  <button onclick="copytext()" type="button">Скопировать</button>

SCSS ⤵️

body {
  text-align: center;
  margin-top: 10%;
  background-color: #000;
}
input, button {
  width: 240px;
  height: 45px;
  font-size: 20px;
  border: none;
  outline: none;
  border-bottom: .2em solid #E91E63;
  background: rgba(#E91E63, .2);
  color: #E91E63;
}

JavaScript ⤵️

function copytext() {
  var copyText = 
  document.getElementById('input'); 
  var copy = copyText.value;
  navigator.clipboard.writeText(copy).then(
  function () { 
  console.log('Успешно'); 
  }).catch(function (err) { 
  console.log('Something went wrong', err);
  });
  
  alert("Copied the text: " + copyText.value);
} 

#практика #html #css #javascript

✅ Создание интересного шрифта Rocher Rocher - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-face и указать src на этот шрифт. ⬇️ ☑️ Также можно поменять его стандартный цвет на любой другой, с помощью свойства base-palette - дескриптор указывается с использованием нулевого индекса палитр, созданных создателем шрифта. Ниже вы найдете готовый CSS код для добавления шрифта Rocher фиолетового цвета: ⤵️

@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

body {
  font-family: 'Rocher';
  text-align: center;
  font-size: 50px;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
h1 {
  font-palette: --Purples;
}

#обучение #css

✅ Создание интересного шрифта Rocher Rocher - очень красивый шрифт, который точно украсит и сделает уникальным любой текст. Для его добавления нужно прописать свойство font-face и указать src на этот шрифт. ⬇️ ☑️ Также можно поменять его стандартный цвет на любой другой, с помощью свойства base-palette - дескриптор указывается с использованием нулевого индекса палитр, созданных создателем шрифта. Ниже вы найдете готовый CSS код для добавления шрифта Rocher фиолетового цвета: ⤵️

@font-face {
  font-family: 'Rocher';
  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
}

body {
  font-family: 'Rocher';
  text-align: center;
  font-size: 50px;
}

@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
h1 {
  font-palette: --Purples;
}

#обучение #css

✅ Как создать анимированные буквы при наведении? Создание анимированных букв при наведении может добавить захватывающий и привлекательный вид вашему тексту. Данная анимация, создана только с помощью HTML и CSS, что делает её легко переносимым на разные веб-сайты. ☑️ Делимся ниже HTML и CSS кодом, для создания крутых анимированных букв при наведении: HTML ⤵️

<div class="animated">
  <div class="let">A</div>
  <div class="let">n</div>
  <div class="let">i</div>
  <div class="let">m</div>
  <div class="let">a</div>
  <div class="let">t</div>
  <div class="let">e</div>
  <div class="let">d</div>
</div>

CSS ⤵️

body{ background-color: #000; }

.animated{
  display: flex;
  margin-top: 20%;
  align-items: center;
  justify-content: center;
}
.let{
  color: #fff;
  font-size: 70px;
  font-family: cursive;
  letter-spacing: 3px;
  font-weight: 600;
  transition: 0.5s;
  cursor: pointer;
}
.let:hover{
  transform: translateY(-1rem);
  background: -webkit-linear-gradient(120deg, hsl(190, 100%, 50%), hsl(319, 100%, 50%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#практика #html #css

✅ Как сделать пылающий эффект? С помощью свойства text-shadow можно создавать невероятные текстовые эффекты, которые украсят ваш сайт и сделают его уникальным в зависимости от дизайна. Таким образом можно создать пылающий эффект. ⬇️ ☑️ Он сделает любой текст намного красивее и поможет привлечь к нему внимания. Его создание очень простое, достаточно правильно настроить тени, выбрать соответствующий цвет и добавить шрифт Akronim чтобы текст был более красивый. Мы оставляем CSS код ниже для создания отличного пылающего эффекта: ⤵️

@import url(https://fonts.googleapis.com/css?family=Akronim);

h1 {
  color: rgb(255, 115, 0);
  font-size: 100px;
  text-transform: uppercase;
  font-family: 'Akronim';
  text-align: center;
  text-shadow: 0 3px 20px red, 0 0 20px red, 0 0 10px orange, 4px -5px 6px yellow, -4px -10px 10px yellow, 0 -10px 30px yellow;
}

#обучение #css

✅ Как создать плавный hover эффект? Hover эффекты - технология веб-анимации, благодаря которой элементы сайта изменяют свой вид при наведении на них курсора или клике по ним. ☑️ Делимся уже готовым CSS кодом ниже для создания крутого hover эффекта. При наведении курсора на текст, он плавно меняет цвет и плавно подчеркивается линией слева: ⤵️

body {
  display: grid;
  place-content: center;
}
h1 {
  font-family: system-ui, sans-serif;
  font-size: 5rem;
  cursor: pointer;
}

h1 {
  --s: 0.1em;   
  --c: #2c4bff; 
  color: #0000;
  background: 
    linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,
    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
  -webkit-background-clip: text,padding-box;
  background-clip: text,padding-box;
  transition: 0.5s;
}
h1:hover {
  --_p: 100%;
}

#практика #css

✅ Языки программирования для Backend разработки В прошлой теории мы разобрали что используют в работе Frontend разработчики, но существует также часть Backend, у них совершенно разные цели, соответственно Backend разработчик использует другие языки программирования и инструменты для работы. ⬇️ ☑️ Backend разработчики используют 4 главных языка: PHP, Java, Python и Ruby, все они нужны для разных задач и целей программиста. 1. PHP - скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений, распространённый язык программирования с открытым исходным кодом. PHP специально сконструирован для веб-разработок и его код может внедряться непосредственно в HTML. 2. PYTHON - высокоуровневый язык программирования общего назначения с динамической строгой типизацией и автоматическим управлением памятью, ориентированный на повышение производительности разработчика, читаемости кода и его качества, а также на обеспечение переносимости написанных на нём программ. 3. JAVA - строго типизированный объектно-ориентированный язык программирования общего назначения. Это быстрый, безопасный и надежный язык программирования для всего: от мобильных приложений и корпоративного ПО до приложений для работы с большими данными и серверных технологий. 4. RUBY - это язык программирования, который можно использовать для разных целей. Чаще всего он применяется в веб-разработке. Ruby высокоуровневый, близкий к человеку: код на нем интуитивно понятный, а писать программы удобно. Язык часто используют со фреймворком Ruby on Rails для веб-программирования. #теория