Адаптивна верстка сайту з нуля FIGMA - VITE - JS - SCSS - BEM - HTML

🚀 Мій курс JS https://js-space.dev/ - знижка 10% з промокодом YT20240708
⭐ Посилання на макет та збірку https://cutt.ly/5egqLaVY
💳Отримати готовий код проєкту https://cutt.ly/9egxVOKM
🧭 Фронтенд-путівник - https://guide.js-space.dev
🏠 Найкращий український хостинг https://cutt.ly/sejptmy6 - знижка 40% за промокодом PEREMOGA (за певними умовами)
🪙 Подякувати на монобанку https://send.monobank.ua/jar/8zDZRT46yz
📩 Подякувати в конверт приват https://next.privat24.ua/send/by1w2

🔵 Телеграм-канал https://t.me/codymoChannel
🟡 Чат https://t.me/codymoChat
🔵 ТікТок   / codymo_solo  
🟡 Інста   / codymosolo  

0:00 огляд збірки
5:25 огляд макету
8:11 скетел сторінки
17:20 header
49:40 footer
1:23:45 hero секція
1:48:10 about секція
1:56:50 rental секція
2:13:00 choose секція
2:30:53 why секція
2:45:00 feedback секція
3:10:30 request секція
3:33:16 хлібні крихти
3:51:16 movement секція
4:04:16 stats секція
4:21:47 advantages секція
4:37:07 discount секція
4:46:50 bicycle сторінка
4:59:50 services сторінка
5:33:30 contacts сторінка
5:51:50 адаптив header
6:11:45 адаптив hero
6:35:30 адаптив about
6:49:30 адаптив rental
6:56:30 адаптив choose
7:05:50 адаптив why
7:13:40 адаптив feedback
7:19:45 адаптив contacts
7:23:40 адаптив footer
7:27:00 адаптив about сторінки
7:30:30 адаптив stats
7:32:20 адаптив advantages
7:39:30 адаптив bicycle сторінки
7:43:30 адаптив services сторінки
7:49:30 адаптив contacts сторінки
7:53:30 iframe для мапи
7:56:30 favicon
8:03:30 header правки
8:08:30 guide.js-space.dev
8:33:30 build проєкта
8:39:30 github pages
8:51:30 хостинг

-----------********************-----------
У відео розглянемо такі моменти:
- розбір макета FIGMA
- робота зі шрифтами - font-weight, font-size, font-family, letter-spacing, line-height, color
- робота з відступами та полями margin, padding
- робота з display: grid, gap, grid-template-columns, repeat, fr
- робота з display: flex, gap, align-items, justify-content
- position: absolute, top, left, right, bottom, z-index
- rgba в SCSS/SASS
- робота з background, background-image, background-repeat, background-position, background-size, встановлення декількох фонів
- робота з псевдоелементами ::before, ::after
- центрування елементів css
- центрування тексту text-align
- рамка css, border-radius
- градієнтний border, css gradient border
- робота з calc
- адаптивна верстка
- міксини scss
- вставка мапи google maps
- збірка для верстки
- vite js
- js для сайту
- липка шапка
- мобільне меню
- робота з медіазапитами (media)
- підключення шрифтів на сайт
- верстка по БЕМ(BEM)-методології