? Интенсив «Первый заработок на создании сайтов»
Участие бесплатное, но необходимо зарегистрироваться:
http://frontendblok.com/intensives/start

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

? Если вам нравится то, что я делаю, вы можете поддержать меня на Boosty: https://boosty.to/annblok/

? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

Всем привет. Пообщаемся с интересными личностями из мира Веб-разработки.

В данном видео у нас в гостях Анна Блок - основатель проекта "Типичный верстальщик", сервиса Frontendhelp и потрясающего ежедневника.

Сайт "Типичного верстальщика" - http://tpverstak.ru
Ежедневник из видео - http://tpverstak.ru/frontendbook/
Скидка 10% по промокоду FRONTCODER.
Как ее получить?
1) В комментариях к оплате пишешь слово FRONTCODER + ссылку на свой акк в соцсети;
2) Исправляешь сумму на 2250 руб (вместо 2500 руб), либо пишешь 2700 (вместо 3000 руб);

FrontendHelp - https://frontendhelp.me/ru

Плейлист "Интервью с интересными гостями из мира веб-разработки. " https://www.youtube.com/playlist?index=1&playnext=1&list=PLDmWuBfh49Z66yNoPDvzCOKuoRx1sTiOt

Не ограничивай себя видеоуроками на YouTube!
Узнавайте еще больше полезной информации!

???Telegram-чат: https://t.me/frontcoder
Telegram-канал: https://t.me/frontcoderchannel
VK: https://vk.com/frontcoder

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

Скидка 10% моим подписчикам ❤ На обучение по верстке и JavaScript- https://forms.gle/Q5uKoU9HCX3Tmg6g6

Дата старта: 23 января 2023
Следующий поток: 13 марта 2023

В этом видео мы разберем работу довольно популярного свойства при верстке сайтов: position. Разберем его значения на практике.

Absolute — https://codepen.io/anna_blok/pen/vPjmJV
Fixed — https://codepen.io/anna_blok/pen/JzvNLL
Static — https://codepen.io/anna_blok/pen/xBjdaW
Sticky — https://codepen.io/anna_blok/pen/zbjzYj

✅ Instagram — https://www.instagram.com/annblok/
✅ TikTok — https://www.tiktok.com/@annblok_webdev
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru

Хостинг HandyHost (промокод на использование 2 месяца бесплатно) — https://clck.ru/NpA6q
После перехода по ссылке нужно заполнить форму на странице и указать номер телефона (без него будет только 3 дня бесплатно). Посмотрите форму, там можно выбрать локацию хостинга и установить CMS, если необходимо.

⚡️ Макет можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@958090 (в комментариях напишите email)

✌️ Материалы видео:

Файлы для формы обратной связи PHP взяты отсюда — https://www.dropbox.com/sh/8o9....hooik7jk1q8n/AAAse2-
(любые ошибки проверяйте через инспектор)
Иконки — https://zavoloklom.github.io/m....aterial-design-iconi
SCSS документация — https://sass-scss.ru/

✅ Instagram — https://www.instagram.com/annblok/
✅ TikTok — https://www.tiktok.com/@annblok_webdev
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

Обучение веб-разработке — http://youcancode.ru/
Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru

✅ Бесплатный практикум по веб-разработке - https://annblok.ru/workshop

⚡️ Макет можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@annblok (в комментариях напишите email)

✌️ Материалы видео:
Демо - https://github.com/annblok/Mamon/
Иконки — https://fontawesome.com/
Видео о Figma — https://youtu.be/aQO_XjHYq8I

На уроке мы сверстаем страничку, макет которой предоставлен в Figma с использованием Flexbox CSS и Grid CSS.

Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос фронтендеру — https://frontendhelp.me/ru
__

Сайт — http://tpverstak.ru
ВК — https://vk.com/tpverstak
Instagram — https://www.instagram.com/annblok/
TikTok - https://www.tiktok.com/@annblok_webdev
Telegram — https://t.me/tpverstak
Чат Telegram — https://t.me/tpverstakchat

? Участвуй в розыгрыше на 20-летие FirstVDS! Победи в онлайн-игре и забери приз: https://firstvds.ru/s/ph0r4

Цель на Boosty - https://boosty.to/annblok/sing....le-payment/donation/

Пример - https://codepen.io/anna_blok/pen/LYrqXwo
Поддержка свойства - https://caniuse.com/css-container-query-units

Shorts на эту тему - https://youtube.com/shorts/d3G....tZrk70Fw?feature=sha

Таймкоды:
00:00 Вступление
01:05 Розыгрыш от FirstVDS
02:08 Немного теории
03:08 Boosty
03:35 Разбираем пример с cqw и cqh
09:30 Добавляем cqi
11:14 Что еще нового появилось?

? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

OTUS онлайн-образование для IT-профессионалов
Календарь запуска курсов: https://otus.pw/Pitf/
Курс Fullstack разработчик JavaScript, посмотреть программу и пройти тест https://otus.pw/zAp3/
Скидка 4000 рублей по промокоду TpVerstak20 на полную оплату любого курса действует до 30.04.2020.

————

Книги:
1) Изучаем программирование на JavaScript
2) JavaScript для детей
3) JavaScript для чайников
4) Как устроен JavaScript
5) Изучаем JavaScript
6) JavaScript и jQuery
7) Вы не знаете JS (серия книг): https://github.com/azat-io/you-dont-know-js-ru
8) You Don't Know JS (book series) https://github.com/getify/You-Dont-Know-JS
http://largescalejs.ru/
9) JavaScript Ниндзя
10) Выразительный JavaScript
11) Learning JavaScript Design Patterns https://addyosmani.com/resourc....es/essentialjsdesign
12) Паттерны для масштабируемых JS-приложений


Ресурсы:
1) Основной учебник (на русском): http://learn.javascript.ru/
2) The Modern JavaScript Tutorial https://javascript.info/
3) MDN web docs https://developer.mozilla.org/....en-US/docs/Web/JavaS
4) Таблица сравнения данных: https://dorey.github.io/JavaScript-Equality-Table/
5) Шпаргалка JS http://overapi.com/javascript

Игры:
1) Cyber Dojo https://www.cyber-dojo.org/
2) Codewars https://www.codewars.com/
3) Code Combat https://codecombat.com/play

Курсы:
1) CodeCademy https://www.codecademy.com/cat....alog/language/javasc
2) Cousera https://www.coursera.org/coronavirus

?Информация о скидках: http://tpverstak.ru/sale-march/

Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос фронтендеру — https://frontendhelp.me/ru
__

Сайт — http://tpverstak.ru
ВК — https://vk.com/tpverstak
Instagram — https://www.instagram.com/annblok/ и https://www.instagram.com/tpverstak/
Telegram — https://t.me/tpverstak
Чат Telegram — https://t.me/tpverstakchat
__

Курсы и марафоны — http://tpverstak.ru/courses/
Отзывы - https://vk.com/topic-149247708_35960122

? Хостинг MasterHost - https://bit.ly/3KyFN04
Скидка 15% по промокоду ANNBLOK на VPS и виртуальный хостинг

⚡️ Макеты и демо можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@annblok (в комментариях напишите email)

➡️ Адаптив этой страницы - https://boosty.to/annblok/posts/e71a0498-0cd4-47a6-963f-26ae44ee34fe

? Таймкоды:
00:00:00 Вступление
00:41:00 Хостинг MasterHost
00:04:43 Промокод на скидку 15%
00:04:57 Разбор макета
00:07:23 Подготовка проекта
00:10:26 Подключение шрифтов
00:12:50 Верстка первого блока
00:16:13 Создание CSS переменных
00:21:26 Обрезка изображений через SVG
00:30:54 Подключение normilize
00:31:32 Продолжение верстки первого блока
00:35:44 Верстка второго блока
00:43:50 Зацикленная анимация по кругу
00:52:30 Работа с JavaScript калькулятором
01:17:13 Адаптив страницы
01:17:30 Загрузка файлов на хостинг MasterHost


? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

#javascript #созданиесайта #вебразработка #сайты #css #html #верстка #версткасайта

? Интенсив «Первый заработок на создании сайтов»
Участие бесплатное, но необходимо зарегистрироваться:
http://frontendblok.com/intensives/start

В этом видео мы поверстаем сайт из макета Figma с использование HTML и CSS Flexbox & Grid в разных блоках. Макет простой, но это отличная тренировка для этих технологий.

⚡️ Макеты можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@958090 (в комментариях напишите email)

Демо — https://annblok.github.io/Beauty/
Видео о Figma — https://youtu.be/aQO_XjHYq8I

Шпаргалка CSS Flexbox - https://tpverstak.ru/flex-cheatsheet/
Шпаргалка CSS Grid - https://tpverstak.ru/grid

Таймкоды:
00:00 Вступление
00:20 Макет и подготовка к работе
07:54 Стилизация шапки и первого блока
43:28 Стилизация второго блока и футера

? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

✅ Хостинг SpaceWeb - https://sweb.ru/ (размещает сайты с 2001 года)
По промокоду annblok вы можете получить на тарифные планы "Взлет", "Ракета", "Космос" скидку 43% при оплате на месяц или скидку 30% при оплате на год.

В этом видео мы верстаем макет, используя на практике HTML и SCSS в VS Code. В завершении мы публикуем нашу страницу на хостинг SpaceWeb, которая предоставляет удобную панель управления и и дает возможность подключить бесплатный SSL сертификат в пару кликов.

⚡️ Макет можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@annblok (в комментариях напишите email)

? Видео (часть 2) - https://youtu.be/sJgsEjpyZ5g

Используем в работе 2 плагина для VS Code:
Live Sass Compiler - https://marketplace.visualstud....io.com/items?itemNam
Live Server - https://marketplace.visualstud....io.com/items?itemNam

Плагин PerfectPixel - https://chrome.google.com/webs....tore/detail/perfectp
Аналог Pix to Pix - https://chrome.google.com/webs....tore/detail/pix-to-p
Основы Sass/SCSS - https://sass-scss.ru/guide/

Таймкоды:
00:00:00 Вступление
00:00:16 Коротко о том, что будем использовать
00:03:09 Подготовка проекта
00:11:36 Верстка шапки сайта
00:27:37 Верстка баннера
00:38:36 Верстка уведомления
00:42:45 Верстка коллекции
00:49:37 Верстка товаров
00:58:54 Верстка подвала сайта
01:04:43 Плагин PerfectPixel

НОВОГОДНИЕ СКИДКИ на курсы по верстке, JavaScript и марафоны:
https://tpverstak.ru/2020-sale/

? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

Повторяй все действия за мной и если возникнут вопросы, то пиши их ниже под видео. Сайт был сверстан в рамках бесплатного интенсива с использованием HTML и CSS на VS Code.

⚡️ Макет можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@annblok (в комментариях напишите email)

Демо работы — https://annblok.github.io/Pizza/

Таймкоды:
00:00:00 Вступление
00:00:23 Работа с макетом и HTML
00:29:20 Стилизация шапки и первого блока
00:59:32 Стилизация второго блока и футера
01:45:53 Адаптивность

✅ Instagram — https://www.instagram.com/annblok/
✅ TikTok — https://www.tiktok.com/@annblok_webdev
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

✅ Поддержать канал — https://www.youtube.com/channe....l/UCn5wduCq2Mus0v85Q

Обучение Frontend-разработке — https://frontendblok.com/
Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru

В этом видео мы вместе сверстаем простой макет на тему NFT, используя HTML, CSS и немного JavaScript. Также мы адаптируем страницу под разные экраны.

⚡️ Макеты и демо можно получить через донат:

1) по подписке (доступ ко всем макетам) https://boosty.to/annblok
2) по подписке (доступ ко всем макетам) https://vk.com/donut/tpverstak
3) разовая оплата через крипту с получением одного макета https://new.donatepay.ru/@annblok (в комментариях напишите email)

✌️ Материалы видео:

1) Шрифт - https://fonts.google.com/specimen/Poppins?query=pop&subset=latin
2) Normilize - https://cdnjs.cloudflare.com/a....jax/libs/normalize/8
3) Live Server - https://marketplace.visualstud....io.com/items?itemNam
4) Prettier - https://marketplace.visualstud....io.com/items?itemNam
5) PerfectPixel - https://chrome.google.com/webs....tore/detail/perfectp
6) Collapse - https://www.w3schools.com/howt....o/tryit.asp?filename

? Таймкоды:

00:00:00 Вступление
00:01:31 Подготовка проекта
00:05:19 Установка Live Server
00:06:40 Разметка шапки сайта с HTML
00:13:39 Стилизуем шапку с CSS
00:34:28 Разметка и стили для главного блока
00:59:21 Разметка и стили для карточек
01:25:00 Разметка и стили для FAQ
01:35:00 Разметка и стили для баннера
01:40:42 Работа с адаптивом

? Дзен — https://zen.yandex.ru/annblok
? ВК — https://vk.com/tpverstak
? Telegram — https://t.me/tpverstak
? Чат Telegram — https://t.me/tpverstakchat
? Instagram — https://www.instagram.com/annblok/
? TikTok — https://www.tiktok.com/@annblok_webdev

? Задать вопрос — https://frontendhelp.me/ru
? Обучение - https://frontendblok.com/

#itstart2019 #ityoutubersru

Список участоников:
АйТиБорода: https://youtu.be/yd11QD72EvM
Просто: разработка: https://youtu.be/9GfE1QurGHE
CODE BLOG: https://youtu.be/Lucr70WCv48
webDev: https://youtu.be/__TPqWJLJGw
FrontCoder: https://youtu.be/p1SN_PUFnQE
dotnet4u: https://youtu.be/SvXfDTzRi1c
Быть Программистом: https://youtu.be/B3kVGrd3XTQ
Software Engineer - Soer: https://youtu.be/LQt_nzr49RQ
Мир IT c Антоном Павленко: https://youtu.be/lNRwAg9eaqo
Murrengan: https://youtu.be/h6LMuJokd3g
Marlin: https://youtu.be/LwFnt4JTjCk
IT-KAMASUTRA: https://youtu.be/__B3kJ8YhSw
DKA-DEVELOP: https://youtu.be/whw0b-quqG0
Сергей Немчинский: https://youtu.be/uHgOl8uxeDA

______________

HTML и CSS
— Книга «Изучаем HTML, XHTML и CSS« — Фримен Эрик, Фримен Элизабет
— Книга «Большая книга CSS3« - Д. Макфарланд
— Книга «CSS для профи« - Кит Грант

JavaScript
— Сайт learn.javascript.ru/
— Книга «Изучаем программирование на JavaScript» - Эрик Фримен, Элизабет Робсон
— Книга «JavaScript для детей» - Ник Морган
— Серия книг You Don't Know JS — https://github.com/getify/You-Dont-Know-JS

______________

Купить ежедневник Frontend Book — https://tpverstak.ru/frontendbook
Задать вопрос фронтендеру бесплатно — https://frontendhelp.me/ru

Марафон Grid CSS — http://tpverstak.ru/grid-marathon/
Марафон Flexbox CSS — http://tpverstak.ru/flexbox-marathon
______________

Сайт — http://tpverstak.ru
ВК — https://vk.com/tpverstak
Instagram — https://www.instagram.com/tpverstak/
Telegram — https://t.me/tpverstak и https://t.me/annbloknote
Чат Telegram — https://t.me/tpverstakchat

? Марафон «Основы веб-разработки»
Участие бесплатное, но необходимо зарегистрироваться:
https://frontendblok.com/marathons/web-marathon

Из этого видео ты узнаешь о ТОП-20 ошибках, которые делают верстальщики. Обязательно посмотри видео, чтобы не совершать их.

Таймкоды:
00:00 Вступление
00:36 Реклама интенсива
01:54 Правило 1
02:18 Правило 2
02:35 Правило 3
03:18 Правило 4
03:42 Правило 5
04:56 Правило 6
05:30 Правило 7
05:49 Правило 8
06:22 Правило 9
06:47 Правило 10
06:59 Правило 11
07:22 Правило 12
07:46 Правило 13
07:59 Правило 14
08:17 Правило 15
08:56 Правило 16
09:14 Правило 17
09:29 Правило 18
10:14 Правило 19
10:29 Правило 20
10:57 Итоги

? Интенсив Wordpress Мастер стартует 19 августа — http://tpverstak.ru/wordpress-master/
Напиши кодовое слово "мастер" в группу ВК https://vk.com/frontendblok и получи 10% скидки на интенсив и другие огненные бонусы.

Нейминг классов — http://tpverstak.ru/common-css-class-names/

✅ Instagram — https://www.instagram.com/annblok/
✅ TikTok — https://www.tiktok.com/@annblok_webdev
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

✅ Поддержать канал — https://www.youtube.com/channe....l/UCn5wduCq2Mus0v85Q

Обучение Frontend-разработке — https://frontendblok.com/
Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru