Frontend.school() | изучаем HTML, CSS, JavaScript вместе!

Полный курс HTML & CSS за 6 часов Это бесплатный курс на YouTube, где вы узнаете о структуре HTML и разнице между различными тегами, а также способы подключения CSS и базовые стили. Вы также изучите блочную модель CSS, позиционирование элементов на странице, псевдоклассы и псевдоэлементы. Кроме того, вы научитесь работать с flexbox и использовать его для создания гибких и адаптивных макетов. В курсе также будет практика на реальных макетах, адаптивная верстка, гриды, Bootstrap, анимации и transitions в CSS. Успейте посмотреть, пока YouTube ещё работает: https://youtu.be/TPas02fsuKU #видео #курс #html #css https://youtu.be/TPas02fsuKU?si=8wn65R5ltccC6wQe Учитесь фронтенду с нами — подпишитесь 💻

Как работает атрибут `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 Учитесь фронтенду с нами — подпишитесь 💻

Regulex — визуализатор регулярных выражений для JavaScript Если ещё не привыкли работать с регулярными выражениями и не до конца понимаете какой именно результат той или иной регулярки получится, то вам пригодится этот инструмент. Он позволяет наглядно посмотреть и понять даже сложные регулярные выражения, представляя их в легко читаемом графическом формате. Ссылка на инструмент: https://jex.im/regulex/ #инструмент #javascript #regex Учитесь фронтенду с нами — подпишитесь 💻

15 советов по оптимизации сайта для быстрой загрузки Недавний анализ двадцати ведущих веб-сайтов выявил удивительное количество оптимизаций скорости страницы, которыми сайты не пользуются — в ущерб своим показателям производительности и, что более важно, в ущерб своим пользователям и, в конечном итоге, своему бизнесу. Если вы уже запустили свой сайт и хотите избежать подобных ошибок, то как максимально оптимизировать сайт рассказали в этой статье: https://www.speedcurve.com/blog/15-neglected-page-speed-optimizations/

Макет Figma: Сайт по продаже электросамокатов Segway Сложность: средняя Ссылка на макет #figma #макет

Топ-7 фишек HTML/CSS верстки сайта, которые вы должны знать Вёрстка сайта на самом деле не такая сложная, как кажется на первый взгляд. В этом видео вы увидите легкие способы сделать паралакс-эфеект на вашей странице, добавить анимации CSS и многое другое, что поможет вам в дальнейшем быстрее верстать и применять в своей работе. https://youtu.be/wRZx6ylDfoI?si=r0dIignjsimlmiXu #видео #html #css

Поздравим коллегу 😄 #кек

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

CSS-классы вредны? Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас вы узнаете о том, почему настало время отказаться от него: https://habr.com/ru/companies/ruvds/articles/829926/ #css #статья

Что такое `JSON.stringify()` `JSON.stringify()` — это метод в JavaScript, который позволяет превратить объект или массив в строку формата JSON (JavaScript Object Notation). Это бывает полезно, например, когда нужно передать данные по сети или сохранить их в локальное хранилище. Пример: ```javascript const user = { name: «Alice», age: 25, isStudent: true }; const jsonString = JSON.stringify(user); console.log(jsonString); // {"name»:"Alice»,"age»:25,"isStudent»:true} ``` Как видите, объект `user` превратился в строку, которую легко передавать и сохранять. Затем её можно обратно превратить в объект с помощью `JSON.parse`. Понимание работы `JSON.stringify()` поможет вам эффективно работать с данными на стороне клиента и сервера. #урок #javascript #json

Разбираемся в CORS за 6 минут CORS, также известный как совместное использование ресурсов из разных источников, — это то, с чем в какой-то момент приходится сталкиваться каждому веб-разработчику. Скорее всего, вы уже имело дело с ошибкой CORS или вскоре столкнётесь с ней. В этом видео вы узнаете, что такое CORS и как вы можете исправить ошибки корсов без особых проблем: https://youtu.be/PNtFSVU-YTI #видео #cors Учитесь фронтенду с нами — подпишитесь 💻

Как реализовать редактор форматированного текста в вашем React-приложении В этой статье вы научитесь делать простой Wysiwyg-редактор, то есть редактор, текста, который позволит вам и вашим пользователям писать статьи и рассказы так же, как если бы вы это делали в Medium, Google Docs или где-то ещё. https://nuancesprog.ru/p/14695/ #react #wysiwyg

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

Макет Figma: Сервис поиска помощников для самозанятых Уже более сложный макет, чем предыдущий. Ссылка #figma #макет

Асинхронность в JavaScript: Async/Await, Promises, Callbacks, Fetch API Большой бесплатный курс по асинхрономму программированию на JavaScript. Вы изучите javascript promises, async / await и Fetch API. Также вы сможете сразу воспользоваться новыми знаниями для создания 3 проектов. Смотрим курс тут: https://youtu.be/OFpqvaJ3QYg #en #javascript #видео #курс

Половина из которых Deprecated #кек

10 полезных однострочников для CSS, которые пригодятся в большинстве проектов Эти несколько однострочников помогут вам облегчить вёрстку сайта, избавив от стандартных сложностей и неожиданного поведения страницы: https://alvaromontoro.com/blog/68055/ten-css-one-liners-for-almost-every-project #css