Фронтенд Гайд
7.21K subscribers
623 photos
308 videos
295 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Требуются парни и девушки в возрасте 19–40 лет, желающие работать в сфере IT.

Опыт в программировании не нужен.

Завтра запускаем бесплатный онлайн-интенсив по Frontend-разработке, где будем показывать, как разрабатывать сайты и веб-приложения.

За 7 дней обучения ты:

1. Создашь полноценный веб-сайт на HTML и CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Узнаешь сколько можно зарабатывать и как работать;
7. Получишь в подарок чек-лист «45 мест для поиска работы».

А главное, ты увидишь, что разрабатывать сайты и приложения не так сложно, как кажется. И поймёшь, как тебе развиваться в этой профессии, чтобы уже в следующем году зарабатывать от 1000$ на вёрстке сайтов.

👉 Проскочить на интенсив бесплатно

🔥 С нас обучение, практика и помощь с выходом на фриланс.
🤨5👍2🔥1😁1
👏171
HTML вопрос: Семантически тег <i> предназначен для текста, имеющего особое значение или на который следует сделать акцент, верно?
Anonymous Poll
52%
Да
41%
Нет
7%
Посмотреть ответы
😁18💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Changing background colour with CSS - Ползунок с изменением заднего фона сайта.
6
This media is not supported in your browser
VIEW IN TELEGRAM
SCSS Washing machine

Стиральная машинка на HTML и SCSS.
👍2🤨1
Javascript вопрос: Может ли свойство объекта иметь символьный ключ?
Anonymous Poll
68%
Да
24%
Нет
8%
Посмотреть ответы
😁25💯3👌1
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Animated Star Rating

Каждая звезда - это радио кнопка, при нажатии на которую задействуются свои CSS-стили.
HTML. Какой атрибут позволяет указывать несколько email-ов в одном input (type="email") поле?
Anonymous Poll
4%
several
38%
multiple
5%
multi
11%
multiemail
34%
Такого атрибута не существует
8%
Посмотреть ответы
Какие особенности в js ?
Спросят с вероятностью 3%

Это высокоуровневый, интерпретируемый язык программирования, который обладает рядом уникальных особенностей и возможностей. Рассмотрим основные из них:

1️⃣Динамическая типизация

Является языком с динамической типизацией, что означает, что тип переменной определяется во время выполнения, а не во время компиляции. Тип переменной может изменяться в процессе выполнения программы.
let variable = 42; // Число
variable = 'Hello, world!'; // Строка


2️⃣Функции первого класса

Являются объектами первого класса, что означает, что функции могут быть присвоены переменным, переданы как аргументы другим функциям и возвращены из других функций.
function greet(name) {
return Hello, ${name};
}

const sayHello = greet;
console.log(sayHello('Alice')); // Hello, Alice

function executeFunction(fn, value) {
return fn(value);
}

console.log(executeFunction(greet, 'Bob')); // Hello, Bob


3️⃣Замыкания (Closures)

Это функции, которые имеют доступ к переменным из своей внешней функции даже после того, как внешняя функция завершила выполнение. Это позволяет создавать функции с привязанными к ним переменными из внешнего окружения.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2


4️⃣Прототипное наследование

Использует прототипное наследование вместо классового. Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], которое указывает на другой объект, используемый в качестве прототипа.
const animal = {
speak: function() {
console.log(${this.name} издает звук);
}
};

const dog = Object.create(animal);
dog.name = 'Рекс';
dog.speak(); // Рекс издает звук


5️⃣Асинхронность и события

Поддерживает асинхронное выполнение через коллбеки, промисы и async/await. Это позволяет обрабатывать события и операции ввода-вывода без блокировки основного потока выполнения.

Использование коллбеков:
function fetchData(callback) {
setTimeout(() => {
callback('Данные получены');
}, 1000);
}

fetchData((data) => {
console.log(data); // Данные получены (через 1 секунду)
});


Использование промисов:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Данные получены');
}, 1000);
});
}

fetchData().then(data => {
console.log(data); // Данные получены (через 1 секунду)
});


Использование async/await:
async function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Данные получены');
}, 1000);
});
}

async function getData() {
const data = await fetchData();
console.log(data); // Данные получены (через 1 секунду)
}

getData();


6️⃣Интуитивно понятная работа с объектами

Имеет мощные встроенные функции для работы с объектами, такие как деструктуризация, операторы расширения и методы объектов.

Деструктуризация:
const person = {
name: 'Alice',
age: 30
};

const { name, age } = person;
console.log(name); // Alice
console.log(age); // 30


Операторы расширения:
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }
1
Javascript вопрос: Какой оператор позволяет выйти из цикла?
Anonymous Poll
3%
leave
89%
break
3%
broke
3%
left
2%
Посмотреть ответы
😁2
🔥18😁10
🤔 Какой тип CSS-свойства background-clip определяет, что фон будет ограничен контентом элемента?
Anonymous Poll
36%
border-box
3%
padding-box
59%
content-box
2%
margin-box
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Бесплатный фоновый ремувер заднего фона, работающий в вашем браузере на базе WebGPU (с использованием transformer.js)
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
📲 Weather App Concept – красивая анимация для мобильного приложения, написанная на чистом CSS. Лучше всего работает в Chrome.
😁132🤔1
😁13👀3