#1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ макета

✏️ Начинаем с нуля верстать несложный одностраничный сайт по фитнес тематике. Этот мастер-класс предназначен для новичков, однако для комфортной разработки вам необходимо знать теорию по HTML и CSS. Плейлисты с курсами по этим технологиям вы можете найти на канале, советую с ними ознакомиться, если ещё этого не сделали.

🔴 Timeline:
▶ 00:00​ | Вступление
▶ 00:26 | Разбор макета Figma
▶ 01:21 | Анализ шрифтов макета, ч. 1
▶ 01:53 | Dev-режим в Figma
▶ 02:25 | Анализ шрифтов макета, ч. 2
▶ 03:21 | Поиск файлов шрифтов на Google Fonts
▶ 04:19 | Преобразование файлов шрифтов в woff2 через transfonter
▶ 04:49 | Подготовка файловой структуры
▶ 05:53 | Подключение стилей
▶ 06:06 | Подключение шрифтов
▶ 07:28 | Нормализация стилей
▶ 08:08 | Подготовка глобальных CSS-переменных
▶ 11:22 | Глобальные стили
▶ 12:02 | Стили утилитарного класса container
▶ 12:36 | Стили заголовков
▶ 13:07 | Разметка шапки
▶ 13:22 | Разметка логотипа
▶ 14:36 | Разметка меню
▶ 15:36 | Разметка блока с кнопками
▶ 17:49 | Стили шапки
▶ 18:10 | Стили меню
▶ 20:10 | Эффект наведения на ссылки
▶ 21:13 | Стили текущей ссылки меню
▶ 22:29 | Стили основной кнопки
▶ 24:46 | Стили блока с кнопками
▶ 25:05 | Исправление бага со сжатием логотипа по ширине
▶ 25:27 | Исправление баг с переносом строк в кнопках
▶ 26:02 | Стили бургер-кнопки
▶ 30:44 | Адаптив шапки

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #верстка #версткасайтов

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[MauroCesario-od]

А как вы думаете, какие еще инструменты, кроме Figma, могут помочь в анализе макетов? я сам долго выбирал курсы по IT, рассматривал разные компании, но в итоге остановился на Skypro и не пожалел))

[itobold]

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

[denisd]

Спасибо. Очень хорошая подача инфы без воды.

[mouri_san]

круто, спасибо! переменные действительно удобно использовать

[Whynot-lxnl]

Гений.... очень сильно жду 2 част, сильно удивлен почему у такого контента так мало сабов... Удачи!!!

[ydncznf]

Видео не для совсем новичков, но все равно ТОП! Автор отвечает на вопросы в комментариях, что дает дополнительную пользу. Лайк и подписка)

[steiden]

Спасибо за видео. Получил ответы на многие вопросы🔥

[Dreamer_]

Очень понравилось! чувствуется профессионализм, спасибо большое

[qtlgstf]

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

[OnlyProg-dmgc]

Спасибо за видеоурок! 🙂 Не использовал css переменные до вашего ролика... А это настолько потрясающая вещь оказывается))

[unlimitedgames]

все шикарно, спасибо за сжатый и полезный контент. Хотелось бы увидеть на практике адаптив с применением min, max, clamp

[ltyjqkl]

Отличный канал, отлично объясняешь. У меня куплен курс в SkillFactory, но понимания по их "текстовому обучению" никакого. Спасибо тебе большое за работу!

[egorrublev]

Канал подача огонь, Большая тебе благадарность

[womwykh]

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

[sartjhon]

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

[Kmariki]

В Figma есть плагин "Inspect Styles", который является заменой режима разработчика, а также он показывает какие шрифты используются в макете.

В элемент можно провалиться через все слои зажав левый ctrl.

[aLeKseU]

Спасибо за контент! Посмотрел на твоем канале html курс, частично css. Пробую верстать аналогичный макет. В фигме только как я понял режим разработчика сейчас могут включить только платные подписчики

[nnqyyhs]

ну мне зашел видео, все по делу, без воды, подача материала очень доходчива, голос конечно решает много, чуток не удобно что на иностранном языке, но это такое - терпимо. подписан - отслеживаю. Кстати что за тема редактора и шрифт? довольно удобно глазу. Еще вопрос от noob - у тебя тег img раскрылся очень удобно - это твой личный snippet или как ?

[xwsplkk]

Александр, спасибо за шикарные видео👍 На ближайшее время ваш контент-план примерно понятен. Если не секрет, какие планы далее? Js, React, Vue или все сразу?