Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать

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

https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu

#видео #html #css

Учитесь фронтенду с нами — подпишитесь 💻

Макет Figma: Сайт по продаже электросамокатов Segway

Сложность: средняя

Ссылка на макет

#figma #макет

Учитесь фронтенду с нами — подпишитесь 💻

15 советов по оптимизации сайта для быстрой загрузки

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

Если вы уже запустили свой сайт и хотите избежать подобных ошибок, то как максимально оптимизировать сайт рассказали в этой статье:

https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/

Учитесь фронтенду с нами — подпишитесь 💻

Regulex — визуализатор регулярных выражений для JavaScript

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

Ссылка на инструмент: https://jex.im/regulex/

#инструмент #javascript #regex

Учитесь фронтенду с нами — подпишитесь 💻

Как работает атрибут `autocomplete` в HTML и зачем он нужен

autocomplete — это атрибут, который можно применять к элементам форм, таким как <input> или <form>. Он помогает браузеру предлагать пользователю автозаполнение полей формы на основе ранее введённых данных.

Пример:

<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name" autocomplete="name">

<label for="email">Эл. почта:</label>
<input type="email» id="email» name="email" autocomplete="email"> 

<input type="submit» value="Отправить">
</form>

В этом примере браузер сможет предложить варианты для полей "Имя" и "Эл. почта" на основе данных, которые пользователь вводил ранее.

Значение autocomplete может быть как on (включено), так и off (выключено), а также иметь более конкретные значения, как в примере выше — name, email.

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

#урок #html

Учитесь фронтенду с нами — подпишитесь 💻

Полный курс HTML & CSS за 6 часов

Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили.

Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов.

В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS.

Успейте посмотреть, пока YouTube ещё работает:

https://youtu.be/TPas02fsuKU

#видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe

Учитесь фронтенду с нами — подпишитесь 💻

Макеты Figma: Сайт для доступа к нейросетям

Сложность: высокая

Ссылка на макет

#figma #макет

Учитесь фронтенду с нами — подпишитесь 💻

24 CSS-проекта за два с половиной часа

В этом видео собраны 24 задания, на протяжении которых вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и других. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS.

Смотрим тут:

https://youtu.be/TzuWIHGFKCQ

#видео #css #туториал

Учитесь фронтенду с нами — подпишитесь 💻

Что делает директива "use strict" в JavaScript

"use strict" — это способ включить строгий режим в коде JavaScript. Он помогает сделать ваш код более безопасным и чистым, выявляя ошибки, которые в обычном режиме могли бы быть незаметны.

Пример:

"use strict";

var x = 1;
delete x; // Ошибка: нельзя удалить объявленную переменную

function test() {
  y = 2; // Ошибка: "y" не объявлена
}
test();

Без строгого режима такие ошибки могли бы остаться незамеченными и привести к неожиданным проблемам в коде.

Как включить строгий режим:
— в начале файла: "use strict";
— в пределах функции: function myFunction() { "use strict"; /* код */ }

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

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

8 советов, которые сделают JavaScript-код чище

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

Вот 8 советов, которые сделают JavaScript-код более читабельным и чистым, упростив работу с ним в будущем:

https://nuancesprog.ru/p/19910/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Главное, что видит пользователь

#кек

Ищем шрифты для сайта как настоящие ниндзя

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

Fonts Ninja

#инструменты

Учитесь фронтенду с нами — подпишитесь 💻

Сегодня поговорим о спред-операторе (...) в JavaScript

Спред-оператор позволяет «разложить» массив или объект на отдельные элементы. Он используется в разных контекстах: при копировании, объединении массивов и объектов, а также при передаче аргументов в функции.

Примеры:

Копирование массива:

   const originalArray = [1, 2, 3];
   const copyArray = [...originalArray];
   console.log(copyArray); // [1, 2, 3]
   

Объединение массивов:

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const combinedArray = [...array1, ...array2];
   console.log(combinedArray); // [1, 2, 3, 4, 5, 6]
   

Копирование объекта:

   const originalObject = { a: 1, b: 2 };
   const copyObject = { ...originalObject };
   console.log(copyObject); // { a: 1, b: 2 }
   

Объединение объектов:

   const object1 = { a: 1, b: 2 };
   const object2 = { c: 3, d: 4 };
   const combinedObject = { ...object1, ...object2 };
   console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }
   

Преимущества:
— упрощает операции с массивами и объектами;
— делает код более читабельным;
— помогает избежать мутаций и побочных эффектов.

Теперь, когда вы знаете, как использовать спред-оператор, ваш код станет ещё более элегантным и эффективным!

#урок #javascript

Учитесь фронтенду с нами — подпишитесь 💻

<div> вместо тысячи слов

#кек

Учитесь фронтенду с нами — подпишитесь 💻

Выполнение реального заказа на разработку дизайна и вёрстку сайта

Теория и практика — разные вещи. Если вам кажется, что вы уже всё знаете и умеете, то на практике часто оказывается не так. Нашли для вас видео, где фрилансер показывает реальное выполнение заказа в режиме реального времени.

Смотрите, запоминайте и делайте выводы:

https://youtu.be/ofE_sxcIQS4

#видео

Учитесь фронтенду с нами — подпишитесь 💻

Макет Figma: Decipad — интерактивный блокнот

Сложность: средняя

Ссылка на макет

#figma #макет

Учитесь фронтенду с нами — подпишитесь 💻

Ещё немного про use strict в дополнение к этому посту.

#викторина #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Как работает движок JavaScript, а также что такое JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора

Нашёл для вас статью, где понятно и, главное, наглядно показывается, как работает движок JS и его основные составляющие. Не обязательно пытаться всё это запомнить. Но если прочитаете, то станете лучше понимать механизмы языка. Это точно положительно скажется на качестве вашего кода:

https://nuancesprog.ru/p/21194/

#статья #javascript

Учитесь фронтенду с нами — подпишитесь 💻

Что должен учить фронтенд-разработчик в 2024 году

Полезное видео, которое поможет вам сориентироваться в мире фронтенда, наметить для себя основные вехи и темы обучения.

Так как YouTube у многих не работает, мы скачали его для вас. Первоисточник: https://youtu.be/1WRJKgwlX9w

#видео #roadmap