✅ Разница между Frontend и Backend разработчиками

В создании Web сайтов работают очень много программистов, которые разбиты на несколько категорий. И каждая из них служит для определенного дела. ⬇️

☑️ Frontend-разработчик — это специалист, который занимается разработкой пользовательского интерфейса, то есть той части сайта или приложения, которую видят посетители страницы и могут взаимодействовать с ней. Главная задача фронтенд разработчика — перевести готовый дизайн-макет в код так, чтобы все работало правильно. ⬇️

☑️ Backend-разработчик — это специалист, который занимается разработкой серверной части веб-приложений и сайтов. Он отвечает за работу баз данных, серверов и логику, которая происходит на серверной стороне. Его работа заключается в настройке базы данных и разработке API для взаимодействия с фронтенд-решением. ⬇️

☑️ Существует также вид разработчика, который делает сразу Frontend и Backend часть, он называется Fullstack. Такой разработчик может самостоятельно сделать любой сайт.

У каждой специальности есть свой язык программирование, который они используют для работы. Например HTML, CSS или же PHP, о которых мы расскажем в последующих постах.

#теория

✅ Как добавить видео внутрь текста?

Чтобы привлечь внимания к особому тексту, нужно сделать к нему особый эффект, обычно для этого используется CSS свойство text-shadow, но с помощью него нельзя создавать живые эффекты. Также можно делать и анимации для привлечения внимания, тем не менее это нельзя назвать текстовым эффектом. ⬇️

☑️ Это не простая задача, поэтому мы делимся уже готовым HTML & CSS кодом ниже для добавления видео внутрь текста:

HTML ⤵️
<div class="wrapper">
<video autoplay playsinline muted loop preload poster="http://i.imgur.com/xHO6DbC.png">
<source src="https://storage.coverr.co/videos/7RzPQrmB00s01rknm8VJnXahEyCy4024IMG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjI5MTg2NjA0fQ.M8oElp5VNO8bWEWmdF2nGiu3qDOOYRFfP8wkKvl8I20"/></video>
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 285 80" preserveaspectratio="xMidYMid slice">
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%"/>
<text x="72" y="50">Simon</text>
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%"/>
</svg>
</div>

SCSS ⤵️
.wrapper {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1000px;
video {
width: 100%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
text-transform: uppercase;
font-size: 40px;
}
> rect {
-webkit-mask: url(#mask);
mask: url(#mask);
}
rect {
fill: #fff;
}
}
}

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

✅ Как создать движущею тень для текста?

Интересно стилизованные тени, всегда делали красивее и улучшали любые текста. Сегодня мы рассмотрим очень эффективную движущею тень, которая запомнится надолго! Работает данная тень достаточно сложно, поэтому сейчас разберем только как делается сама тень. ⬇️

☑️ Мы должны создать с помощью свойства data-shadow так называемый второй текст, для того чтобы позже поставить его за наш главный текст. Обязательно текста должны быть одинаковы, или же движущая тень не будет совпадать с главным текстом. После этого останется только правильно стилизовать тень.

Чтобы вы не мучались, мы делимся уже готовым кодом для создания крутой движущей тени:

HTML ⤵️
<h1 data-shadow='code_ready'>code_ready</h1>

CSS ⤵️
body {
  text-align: center;
  background-color: hsla(230,40%,50%,1);
}
h1 {
  position: relative;
  display: inline-block;
  color: white;
  font-family: cursive;
  font-size: 100px;
  text-shadow: .03em .03em 0 hsla(230,40%,50%,1);
}
h1:after {
  content: attr(data-shadow);
  position: absolute;
  top: .06em; left: .06em;
  z-index: -1;
  text-shadow: none;
  background-image:
    linear-gradient( 45deg, transparent 45%,hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0);
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: dang 25s linear infinite;
}
@keyframes dang {
0% {background-position: 0 0}
0% {background-position: 100% -100%}
}

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

А

✅ Как разделить цвет на два разных цвета?

Лучший способ заменить плавный градиент это разделить текст на 2 разных цвета. Данный эффект поможет сделать резкое разделение под любым углом, как и под косым, так и под ровным, нужно просто поменять deg в свойстве background: linear-gradient.

В этом эффекте участвуют 3 свойства: -webkit-background-clip: text, -webkit-text-fill-color: transparent и background: linear-gradient. Всё остальное это дополнительная стилизация.

Мы сделали вариант разделения текста под кривым углом, в коде ниже вы можете исправить цвет и угол на любой другой: ⤵️

h1 {
font-size: 200px;
font-family: sans-serif;
text-align: center;
background: linear-gradient(150deg, #2f455a 0%, #2f455a 50%, #436b9d 50.5%, #436b9d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#практика #css

✅ Языки программирования для Frontend разработки

В прошлой теории мы разобрали кто такие Frontend, Backend и Fullstack разработчики, но каждый из них использует разные языки программирования и инструменты для работы. ⬇️

☑️ Frontend разработчики используют 3 главных языка: HTML, CSS и JavaScript, все они нужны для разных задач и целей программиста.

1. HTML - язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Он позволяет размещать на веб-страницах аудио, видео, электронные таблицы и другие приложения. Он также облегчает навигацию внутри веб-страниц или между веб-сайтами с помощью гипертекста. Кроме того, создатели веб-сайтов могут использовать HTML для разработки форм для заказа товаров, бронирования или поиска. Нужен для создания скелета сайта.

2. CSS - язык описания внешнего вида документа, то есть он отвечает за то, как выглядят веб-страницы: цвет фона и декоративных элементов, размер и стиль шрифтов. CSS взаимодействует с другим языком разметки — HTML, который отвечает за размещение элементов на странице. Нужен для стилизации сайта.

3. JavaScript - полноценный язык программирования, который используют разработчики для создания интерактивных веб-страниц. Функции JavaScript могут улучшить удобство взаимодействия пользователя с веб-сайтом: от обновления ленты новостей в социальных сетях и до отображения анимации и интерактивных карт. JavaScript является языком программирования при разработки скриптов для выполнения на стороне клиента, что делает его одной из базовых технологий во всемирной сети Интернет. Нужен для взаимодействий с пользователем.

Существует также часть Backend разработчика. Что он использует и зачем расскажем в следующей теории.

#теория

✅ Ночная информация про плагины для VS Code

Плагины это очень важная часть разработки, многие облегают работу и помогают допускать меньше ошибок при написании кода. Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины. ⬇️

☑️ Мы подобрали топ 3 лучших плагинов для VS Code, которые точно тебе пригодятся.

Live Server - Автоматически перезагружает страницу после изменений в JavaScript-коде, CSS и HTML-разметке. Чтобы запустить, наведите на строчку кода, нажмите на правую кнопку мыши, выберите «Open with Live Server».

Auto rename tag - Автоматически переименовывает парные теги в HTML. Меняете открывающий тег — меняется и закрывающий.

WakaTime - В ваш редактор устанавливается плагин Wakatime, который собирает активность работы в программе. Затем на основе этих данных на сайте Wakatime строятся графики активности по дням, проектам, языкам программирования, редакторам.

#теория

✅ Как создать интересную анимацию при наведении?

Когда пользователь наводит мышкой на определенный объект и он начинает ярко светиться или делать другие крутые эффекты, это всегда вызывает эмоции, тем самым привлекая больше внимания к тексту.

Мы делимся вариантом эффекта при наведении. В этом коде вы можете добавить или поменять все стили под себя:

HTML ⤵️
<h1><span>I</span>M<span>POSSIBLE</span></h1>

CSS ⤵️
body{
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh
}
h1{
color: #484848;
font-size: 50px;
font-family: monospace;
letter-spacing: 7px;
cursor: pointer
}
h1 span{
transition: .5s linear
}
h1:hover span:nth-child(1){
margin-right: 5px
}
h1:hover span:nth-child(1):after{
content: "'";
}
h1:hover span:nth-child(2){
margin-left: 30px
}
h1:hover span{
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
}

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

✅ Ночная информация про расшифровку IT элементов

Для этого вечернего поста мы подобрали топ полезных расшифровок с переводом, которые помогут тебе понять суть следующих элементов.

IT: Information Technology — «информационные технологии»

AI: Artificial intelligence — «Искусственный интеллект»

WEB: сочетания World Wide Web — «всемирная паутина»

HTML: HyperText Markup Language — «язык гипертекстовой разметки»

CSS: Cascading Style Sheets — «каскадные таблицы стилей»

PHP: Hypertext Preprocessor — «препроцессор гипертекста»

SQL: Structured Query Language — «Язык структурированных запросов»

SWIFT: Society for Worldwide Interbank Financial Telecommunications — «Сообщество Международных Межбанковских Переводов»

OOP: object-oriented programming — «Объектно-ориентированное программирование»

JS: Язык программирования JavaScript

TS: Язык программирования TypeScript

C#: Проект C# был начат в декабре 1998 и получил кодовое название COOL — C-style Object Oriented Language.

#теория

✅ Как создать поочередную анимацию свечения?

Эффект анимации светящегося текста — это потрясающий текстовый эффект CSS, если говорить более подробно, «Эффекты анимации светящегося текста», как и его название, предлагают вам поразительный эффект, благодаря которому ваш текст будет непрерывно светиться. ⬇️

☑️ Каждая буква вашего текста загорается одна за другой и светится на темном фоне. Это оставит у посетителей более глубокое впечатление о вашем веб-сайте, и они смогут вернуться на него снова. Давайте получим эффекты анимации светящегося текста и насладимся тем, что он предлагает!

HTML ⤵️
<div class="text-container">
   <span>g</span>
   <span>l</span>
   <span>o</span>
   <span>w</span>
</div>

CSS ⤵️
@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi:wght@400&display=swap');

body {
  background-color: #000;
  color: #111;
  text-align: center;
  font-family: 'Baloo Thambi', cursive;
  font-size: 100px;
}
.text-container > span {
  text-transform: uppercase;
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% {
    color: #FFF;
    text-shadow: 0 0 10px #0652DD, 0 0 50px #0652DD, 0 0 100px #0652DD;
  }
  10%, 90% {
    color: #111;
    text-shadow: none;
  }
}

.text-container > span:nth-child(2) {
  animation-delay: 0.25s;
}
.text-container > span:nth-child(3) {
  animation-delay: 0.5s;
}
.text-container > span:nth-child(4) {
  animation-delay: 0.75s;
}

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

✅ Лучшие шрифты для Halloween

Вы уже готовый к Хэллоуину? Как раз в честь этого мы нашли топ 5 лучших шрифтов на тематику Halloween. Данные шрифты можно добавить на любой сайт и тем самым создать устрашающею атмосферу.

☑️ Внизу вы найдете готовый код для добавления шрифтов на сайт, все они расположены поочередно как на картинке, чтобы каждый смог добавить нужный шрифт: ⤵️

@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Eater&family=Mystery+Quest&family=Nosifer&family=Sancreek&display=swap');



font-family: 'Creepster', sans-serif;
font-family: 'Eater', sans-serif;
font-family: 'Mystery Quest', sans-serif;
font-family: 'Nosifer', sans-serif;
font-family: 'Sancreek', sans-serif;

#практика #halloween

✅ Что такое Domain и Hosting

Для создания своего веб сайта (помимо его разработки) ему нужен Domain и Hosting, без которых невозможно создать ни один сайт в Интернете. В данном посте мы разберем что это и для чего использовать, чтобы каждый из вас не путался и понимал как оно устроено. ⬇️

HOSTING - услуга по предоставлению ресурсов для размещения информации на сервере, постоянно имеющем доступ к сети, простыми словами это и есть место хранения вашего веб сайта, без которого ваш сайт не сможет существовать.

DOMAIN - это адрес/имя, который есть у каждого сайта. По этому адресу легко найти нужный сайт среди множества ресурсов в сети.
Пример домена - google.com.
Существуют много видов доменов: .com домен верхнего уровня в системе доменных имен интернет-сети, .ru национальный домен верхнего уровня для России и так далее.

В следующей теории разберем все типы и виды доменов и разницу между ними.

#теория

✅ Вечерняя информация про лучшие фреймворки

Фреймворк — программная платформа, определяющая структуру программной системы, облегчающее разработку и объединение разных компонентов большого программного проекта.

☑️ В данном вечернем посте мы покажем топ 3 лучших фреймворков для WEB разработки. ⬇️

1. REACT.JS - это JavaScript-фреймворк для создания пользовательских интерфейсов. Он был разработан Facebook и представляет собой библиотеку для создания компонентов пользовательского интерфейса.

☑️ Основное преимущество React.js — виртуальный DOM, который позволяет более эффективно выполнять изменения и обновления веб-страниц.

2. ANGULAR.JS - один из популярных фреймворков для разработки веб-приложений. Он разрабатывается и поддерживается Google. Angular предоставляет множество функций для управления состоянием приложения, маршрутизации, отображения и тестирования.

☑️ Angular имеет богатый набор инструментов, таких как двусторонняя связь данных (two-way data binding), dependency injection и встроенная поддержка AJAX, HTTP и Observables.

3. - VUE.JS - это прогрессивный JavaScript-фреймворк, который был создан, чтобы объединить лучшие аспекты React и Angular. Vue.js предлагает легкий и гибкий инструментарий, который позволяет легко интегрироваться с уже существующими проектами и библиотеками.

☑️ Особенность Vue.js заключается в его простоте и гибкости. Вы можете легко перейти от простого JavaScript к TypeScript и использовать такие особенности, как двусторонняя связь данных и компонентный подход к разработке.

#теория

✅ Как разбить текст на два разных цвета?

Для создания данного эффекта для начала нужно создать 2 текста, чтобы потом наложить из друг на друга. Следующий шаг будет стилизовать текст чтобы он выглядит красиво, дальше останется только правильно настроить свойство clip-path. ⬇️

Сам эффект очень круто выглядит, к нему также добавляется черный фон, чтобы белая половина текста была хорошо видна.

Оставляем для вас ниже HTML & CSS код для создания текста с двумя цветами:

HTML ⤵️
<div class="text-box">
<h1>428 FOLLOWERS</h1>
<h1>428 FOLLOWERS</h1>
</div>

CSS ⤵️
.text-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 700;
background-color: #000;
}
h1:nth-child(2) {
position: absolute;
background-color: #fff;
color: #000;
clip-path: inset(-1% -1% 50% -1%);
}

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

✅ Как создать анаглифический эффект?

Анаглифический эффект стимулирует ощущение трехмерности с наложением на них двухмерных изображений. В этом тексте была предпринята попытка смоделировать эффект, хотя для 3D она не очень оптимальна, но выглядит вполне неплохо.

Делимся готовым кодом ниже для создания анаглифического эффекта: ⤵️

h1 {
margin: auto;
position: relative;
font: 100px Helvetica, Sans-Serif;
letter-spacing: -5px;
color: rgba(0,0,255,0.5);
}
h1:after {
margin: auto;
content: "Anaglyph";
position: absolute; left: 4px; top: 4px;
color: rgba(255,0,0,0.5);
}

#практика #css