Третья часть вёрстки проекта полностью посвящена стилизации секции About
Несмотря на минимальное количество контента в этой секции, визуально она отрисована с долей креатива :)
Поэтому при вёрстке этой секции будем активно использовать CSS calc() при позиционировании элементов
Вариантов сверстать такую секцию несколько.. в процессе вёрстки думал, как будет более оптимально (сейчас наверно сверстал бы немного по-другому - не лучше или хуже, просто по-другому).. но на тот момент выбрал вариант, который на видео
Вёрстка реального проекта #3 - https://youtu.be/BqWNaOuf7gc
Несмотря на минимальное количество контента в этой секции, визуально она отрисована с долей креатива :)
Поэтому при вёрстке этой секции будем активно использовать CSS calc() при позиционировании элементов
Вариантов сверстать такую секцию несколько.. в процессе вёрстки думал, как будет более оптимально (сейчас наверно сверстал бы немного по-другому - не лучше или хуже, просто по-другому).. но на тот момент выбрал вариант, который на видео
Вёрстка реального проекта #3 - https://youtu.be/BqWNaOuf7gc
👍6
Публикую небольшое видео на Youtube, как сделать прикольный эффект при наведении на ссылку - https://youtu.be/WTzGu_H4PE4
Думаю, время от времени, буду делать такой контент по интересным мелочам (почему бы и нет ;)
Код из видео в песочнице - https://codesandbox.io/s/happy-frog-w7h03
Думаю, время от времени, буду делать такой контент по интересным мелочам (почему бы и нет ;)
Код из видео в песочнице - https://codesandbox.io/s/happy-frog-w7h03
❤4👍1
Финальная часть по вёрстке проекта - https://youtu.be/ytlgzQH5tZM
Верстаем секции Video, News, Contacts и Footer
Верстаем секции Video, News, Contacts и Footer
👍1
Визуально очень приятный макет для вёрстки в портфолио - https://www.figma.com/file/fYD5fS1iHRYVLzGlZJHtDv/CryptoKet---NFT-Marketplace-UI-Kit?node-id=0%3A1
Полноценный проект на несколько страниц со Style Guide, компонентами, в двух цветовых схемах (тёмная и светлая), а также мобильные версии
NFT сейчас очень обсуждаемая тема, и такая работа в портфолио, думаю, будет привлекать внимание
Полноценный проект на несколько страниц со Style Guide, компонентами, в двух цветовых схемах (тёмная и светлая), а также мобильные версии
NFT сейчас очень обсуждаемая тема, и такая работа в портфолио, думаю, будет привлекать внимание
👍10
Некоторое время назад уже упоминал сайт https://web.dev/, когда делал заметку про CSS свойство accent-color, но на этом ресурсе еще много всего полезного
Learn CSS - https://web.dev/learn/css/
Learn Responsive Design - https://web.dev/learn/design/
Learn Forms - https://web.dev/learn/forms/
Layout patterns - https://web.dev/patterns/layout/
а также про анимации, оптимизацию, SEO, доступность, и прочее
Learn CSS - https://web.dev/learn/css/
Learn Responsive Design - https://web.dev/learn/design/
Learn Forms - https://web.dev/learn/forms/
Layout patterns - https://web.dev/patterns/layout/
а также про анимации, оптимизацию, SEO, доступность, и прочее
👍3
https://12daysofweb.dev/ - 12 качественных статей на тему современного веба:
- Intersection Observer
- Details / Summary
- CSS Custom Properties
- Audio API
- CSS Houdini Paint API
- Capturing User Media Streams
- Preference Queries
- Image Display Elements
- CSS Animation
- Web Speech API
- Form Autocomplete
- Container Queries
- Intersection Observer
- Details / Summary
- CSS Custom Properties
- Audio API
- CSS Houdini Paint API
- Capturing User Media Streams
- Preference Queries
- Image Display Elements
- CSS Animation
- Web Speech API
- Form Autocomplete
- Container Queries
👍1
Нравятся мне заметки от George Moller :)
На этот раз примеры применения псевдо-элементов
---
Ссылка на твит автора
На этот раз примеры применения псевдо-элементов
::before и ::after ---
Ссылка на твит автора
👍7❤5🔥2