Анна Блок | FrontendBlok
6.94K subscribers
2.07K photos
197 videos
4 files
3.51K links
YMReferral Авторский канал от Анны Блок, где новички научатся понимать современные технологии через живой взгляд на веб-разработку и нейросети.
Наш чат: @frontendblokchat
Обучение: https://frontendblok.com
Реклама и сотрудничество: info@frontendblok.com
Download Telegram
По мнению сами знаете кого 👍

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

В комментариях пишите своё мнение про будущее IT и ИИ: стоит бояться? 👇
😁8
Способен ли ChatGPT заменить IT курсы по веб-разработке?

Ранее я показала, как с помощью нейросети можно составить программу обучения, а также продемонстрировала внутреннее содержимое урока React. Но это еще не всё. В новом видео даю более полное представление о плюсах и минусах ответов от ChatGPT

Смотреть на Youtube:
https://youtube.com/shorts/Waejk_LiDFY

Смотреть на Дзен:
https://dzen.ru/video/watch/644a6c8615c23358327c94e6

#нейросеть
🔥5
🔥 1 мая 2023 стартуют курсы по верстке и JavaScript

Их можно смело назвать флагманскими на платформе FrontendBlok. Я уже не раз о них рассказывала, вы знаете, что они постоянно обновляются, дорабатываются и тд. Поэтому оставлю ссылки, чтобы посмотреть расписание и оформить покупку:

🌟 Курс по верстке для новичков (на практике сделаем 2 сайта на чистом HTML и CSS)
🌟 Курс для прокаченных в верстке (на практике сделаем 2 сайта на Webpack, HTML, SCSS)
🌟 Курс по JavaScript (практикуем то, что пригодится при выполнении работе с сайтами)

Оплатить можно рос. и зарубежной картой, а также в рассрочку от банка или от нашей школы. Найти удобный вариант для вас - не проблема 💫
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6😁4
Впервые вижу такой уровень поддержки свойства 😅

Готовлю видео, где расскажу разом обо всех новинках CSS, поэтому наткнулась на такой материал.
🔥10😁3
Ладно, нашла еще 0% поддержки. Но, что странно, запустили его еще прошлым летом.

— Скажи что-то на JavaScript’ском?
— (CSS) Будет сделано!

Как-то так будет работать when и else:
https://www.w3.org/TR/css-conditional-5/#when-rule
😁11
ТОП-10 новинок CSS в 2023 (крутых и не очень)

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

Смотреть на Youtube:
https://youtu.be/cz7IkmyKFHU

Смотреть на Дзен:
https://dzen.ru/video/watch/644e6779bfe1d72604db89dd

Лайки на Youtube и Дзен крайне приветствуются! 💙

#css
🔥12
От нового курса по многостраничной верстке, где я применяю новый формат обучения, уже вижу ваши отзывы ❤️

Раньше отзывы можно было оставлять только в конце обучения, а сейчас прямо к каждому уроку. Нравится читать ваши развернутые сообщения.
🔥8😁1
Чаще вижу короткие сообщения, по типу “топ”, “класс”, “супер”, поэтому развернутые сообщения сразу бросаются в глаза 👀
Please open Telegram to view this post
VIEW IN TELEGRAM
😁13
Практика вёрстки: подборка на выходные ⬇️

1️⃣ Верстка сайта с нуля для начинающих
💻 Технологии: HTML, Flexbox CSS, Swiper

👇 Смотреть:
Youtube - https://youtu.be/kmWqcZAz9TQ
Дзен - https://dzen.ru/video/watch/64429270fb60e54ea1855d86

2️⃣ Посадка верстки на Wordpress
💻 Технологии: HTML, CSS, Wordpress

👇 Смотреть:
Youtube - https://youtu.be/KcS4rxGyf28
Дзен - https://dzen.ru/video/watch/6432da6b34531801e9f2388e

3️⃣ Верстка простого сайта с нуля на Webpack
💻 Технологии: HTML, SCSS, Webpack

👇 Смотреть:
Youtube - https://youtu.be/UZ_OMrgbkyE
Дзен - https://dzen.ru/video/watch/6235a57bdec4534b0e91db2f

#практика
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16
Эм, а это точно сайт той самой группы - Red Hot Chili Peppers? 😮

Подумала, сейчас зайду на сайты музыкальный групп, наберусь вдохновения на необычные решения, а тут это…

https://redhotchilipeppers.com/

Как эти цвета сочетаются с ними? Почему стиль из 2000-х? 🥶
И это ведь не старый сайт, там и flex’ы есть vw и всё такое. Значит был человек, который решил, что именно таким должен быть вид, описывающий их деятельность…

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

Пишите свои мысли 👇
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
Так может ли всё-таки ChatGPT заменить разработчика?

Используя чатботы в работе, особенно по части кода, убеждаюсь в мысли, что всё это идеально использовать, как доп.инструмент. Скинуть на него всю работу и ждать, что он даст 100% готовое и верное решение - ошибочно.

Сейчас тестирую его на различных запросах для написания приложений более сложного уровня и каждый его ответ я пропускаю через призму “а понял бы ответ неподготовленный юзер, который от кого-то услышал, что скоро программисты будут не нужны из-за ChatGPT?”

Пример на скрине. Кто работал с различными регистрациями на сторонних сервисах скажут - “легко!”. А что скажет тот, кто впервые попадёт на этот сайт? 😅

А потом же надо будет это ещё как-то связать с кодом и понять, что именно вообще привязывать…

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

А вы используете их как доп.инструмент в работе?
🔥15
Ох уж этот Т9…
😁51🔥5
✏️ Задачка по JavaScript

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

let age = prompt("Сколько вам лет?");

if (age < 18) {
alert("Вы еще не совершеннолетний!");
} else {
alert("Вы совершеннолетний!");
}


Уровень: начинающий

Ответ: Если пользователь вводит возраст 18, код все равно выводит сообщение "Вы еще не совершеннолетний!". Это происходит из-за того, что оператор < в условном операторе if не включает в себя значение 18. Чтобы исправить ошибку, нужно указать оператор <=

#jscode
Please open Telegram to view this post
VIEW IN TELEGRAM
😁23
This media is not supported in your browser
VIEW IN TELEGRAM
Сегодня или завтра выйдет видео-практика с Vue.js

А пока хочу рассказать о самом приложении, с которым будем работать. Даже не так… Как пришла та самая идея, чтобы было не банально, но достаточно просто для новичков.

Я уже давно хотела возобновить запись роликов о Vue, но ролики о том, как делать туду-листы мало чему научат. Да и без меня на всех языках мира уже записаны и переписаны об этом ролики.

Тогда что будет?

Многие же слышали, что вышел сериал “Король и Шут”? Само собой, я тоже его посмотрела. Ведь еще в школе разучивала пару аккордов их песен, когда осваивала гитару, поэтому сериал не мог обойти меня стороной.

И тут, внезапно пришла мысль, а что если сделать так:
- … чтобы любой пользователь мог зайти на сайт и пролайкать понравившиеся песни?
- … чтобы любой пользователь увидел результаты от других пользователей?
- … чтобы список сразу сортировался по количеству лайков от большего к меньшему?

В общем, сначала пришла мысль, а потом уже связываешь это с IT сферой. Как-то так и создаётся уникальный контент в этих ваших ютубах.

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

Технические скиллы, которые вы освоите:
- Vue
- Vite
- Firebase
- перенос готовой верстки в приложение

Напомню, кстати еще о моём Boosty. Получить доступ к свертанному приложению, готовому коду легко через подписку соответствующего уровня. Оформление подписки - это возможность заниматься на моём канале по учебным материалам, макетам и пр.

А еще на Boosty есть цель, связанная с Vue. Если соберется 70 подписчиков, то опубликую видео-практику о Vue, где сделаем простое, но реально интересное приложение. Никаких туду-листов! Только реально крутой проект!

Всё это очень помогает пилить ролики на канал! 🙌

Как вам идея приложения? Будет ждать выхода такого ролика? 🎥
🔥19
Пост-знакомство

Приветствую всех новеньких на канале! 👋 Давайте расскажу немного о том, что это за канал и кто его ведёт.

Канал появился в 2017 и с тех пор его название не менялось. Может показаться, что он ТОЛЬКО о вёрстке, но это уже далеко не так. Тут можно встретить посты о фронтенде, нейросетях (куда без них сейчас) и об IT в целом.

Меня зовут Анна Блок. Занимаюсь веб-разработкой с 2015, как только закончила обучение в МИФИ. Начинала свою деятельность, как верстальщик. Отсюда и название канала. Кстати само название появилось в январе 2016, когда завела паблик в ВК. Возможно, кто-то даже видел мой Youtube канал, если Вы искали учебные материалы по веб-разработке.

Я также продолжаю вести свою деятельность, как веб-разработчик, выпускаю видео для соцсетей и обучаю на собственной учебной платформе фронтенду — FrontendBlok. Поэтому иногда анонсирую запуски вперемешку с годнотой на канале.

Также у меня есть Boosty, где открывается возможность поддержать выпуск учебных роликов для Youtube в обмен на учебные материалы, которые позволят учиться по этому плейлисту.

В комментариях расскажите немного о себе, чтобы узнать побольше о Вас:
- Учитесь или уже работаете в IT?
- На какие темы посты хотели бы видеть на канале?
- Какие технологии учите или какими скилами владеете?
🔥27
Онлайн-генератор нестандартных решений для border

Как-то в чате был вопрос о том, как делать паттерны для обводок, и думаю, это то, что нужно. Здесь можно указать отступы между тире, их ширину и тд.

👉 https://kovart.github.io/dashed-border-generator/

#css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20
Ответьте, только честно на этот опрос. Это поможет мне определиться с датой и временем выпуска YouTube видео 👇
Завтра днём выйдет видео с практикой Vue 🥳

Отметьте себе в планах: Пройти урок по Vue

Учебная практика идеально подойдёт тем, кто чуть-чуть поглядывал на Vue, либо делали простые проекты.

Что будет?
Сделаете приложение, где выводится список треков. Любой пользователь сможет поставить лайк. Строки будут автоматически выстраиваться по рейтингу: от большего количества лайков к меньшему.

Этапы, которые выполните:
- Перенесете верстку
- Установите Vue при помощи Vite
- Установите Firebase
- Напишите скрипты
- Done! Вы - автор нового приложения 🤌

Ждёте?
🔥29
⚡️ Делаем простое приложение для группы “Король и Шут”

Используем на практике: Vue, Vite и Firebase. Учебная практика идеально подойдёт тем, кто чуть-чуть поглядывал на Vue, либо делали простые проекты.

[ Смотреть на Youtube ]

[ Смотреть на Дзен ]

В комментариях под видео приветствуются идеи приложений для будущих видео.

Содержание:
⭕️ Установка Vue
⭕️ Перенос вёрстки
⭕️ Варианты работы с Vue
⭕️ Начало работы с Vue
⭕️ Устанавка Firebase
⭕️ Создание базы данных
⭕️ Подключение базы данных
⭕️ Сортируем данные через скрипты
⭕️ Работа со счетчиком
⭕️ Результат работы
⭕️ Какие файлы загружать на хостинг?

#vue
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥16