Категории
- Frontend
  - Angular
  - HTML
  - CSS
  - JavaScript
  - Vue
  - jQuery
  - React
  - AngularJS
  - Backbone
  - TypeScript
  - Ember
  - Next.js
  - Elm
  - Svelte
  - Single SPA
  - Three.js
  - D3.js
  - RxJS
  - WebGL
  - barba.js
- Backend
  - PHP
  - Python
  - Ruby on Rails
  - Yii
  - Laravel
  - SQL
  - Ruby
  - Symfony
  - Java
  - Scala
  - Node.js
  - MongoDB
  - Golang (Google Go)
  - Slim
  - Silex
  - Firebase
  - C Sharp (C#)
  - Deno
  - Redis
  - Django
  - NestJS
  - Spring
  - Spring Boot
  - Spring Data
  - Spring Cloud
  - Spring Security
  - Spring Integration
  - Spring HATEOAS
  - Spring MVC
  - Elixir
  - Phoenix
- System programming
  - Rust
  - WebAssembly
  - C++
- Marketing
  - SEO
- Video and 3D
  - Blender
  - Cinema 4D
  - ZBrush
- Graphic
  - Figma
  - Sketch
  - Photoshop
  - After Effects
  - Illustrator
  - Adobe XD
  - Lightroom
  - CorelDRAW
- DevOps
  - AWS
  - Azure
  - Docker
  - Git
  - GitHub
  - Gitlab
  - Google Cloud
  - Grafana
  - Kubernetes
  - Jenkins
  - Terraform
  - Другое
- Tools
  - GraphQL
  - Flux
  - Webpack
  - Ansible
  - Gulp
  - Grunt
  - Visual Studio Code
  - VIM
  - OpenCV
  - Salt
  - SVN
  - Atom
  - Elasticsearch
  - Сборки, готовые решения
  - Electron
  - Chrome DevTools
  - Yarn
  - Babel
  - Grep
  - npm
  - Vite
  - Gatsby
  - PhpStorm
  - Webflow
  - Hibernate
  - Socket.io
  - Bash
- Разработка мобильных приложений
- Gamedev
  - Unreal Engine
  - Unity
- CMS
  - Wordpress
  - OpenCart
  - Drupal
  - Joomla
  - 1C-Bitrix
  - MODX
  - Magento
  - Shopify
- Blockchain
  - Криптовалюты
  - Decentralized Applications (dApps) (Web 3)
- Тестирование
  - Postman
  - Selenium
  - Appium
  - Protractor
  - WebdriverIO
  - Cypress
  - Playwright
- Другое
- Подготовка к собеседованию
- Обработка и анализ данных
- Информационная безопасность
  - Этический взлом / Тестирование на проникновение
- Английский язык
- Конференции
Источники
Все курсы
- Популярные
- Бесплатные (100+ Курсов)
Разделы
Книги
- Бесплатные
- Популярные
Краудфандинг

Войти

Главная страница Категория css Практические CSS Layouts

Практические CSS Layouts

Name: Практические CSS Layouts
Price: 10 USD
Rating: 4.6 (29 reviews)

Practical CSS Layouts

frontendmasters

Jen Kramer

Продолжительность

8 ч 58 мин

Категория

CSS

Количество уроков

56 Видео

Дата добавления

18.05.2023

Язык

English

Дата выхода

17.05.2023

Дата обновления

15.08.2023

Устали от обычных макетов? Неуверены, как сделать их более интересными? Этот семинар именно для вас! Присоединяйтесь к Джен на два насыщенных дня, в ходе которых вы создадите три различных отзывчивых веб-сайта для вымышленной группы Magenta Lime.

Мы начнем с базового веб-сайта, закрепляя шрифты, размеры, цвета, изображения, и основы дизайна. Затем мы перейдем к средней сложности сайта, повторно использовав множество элементов из базового дизайна, но добавив интерактивность, дополнительный стиль и немного JavaScript. Наконец, мы решим сложную задачу с созданием сайта, добавляя анимацию, интерактивность и еще более сложные макеты.

Создавайте 3 разных веб-сайта с одним и тем же материалом - легкий, средний и сложный.
Преобразуйте базовые макеты в сложные макеты с помощью нескольких CSS-свойств.
Поддерживайте доступность с помощью семантической разметки.
Изучайте некоторые из последних приемов, выходящих за рамки других курсов Джен.

Посмотреть больше

Удален по просьбе правообладателя

Урок 1. 00:08:23

Introduction
Урок 2. 00:13:34

Styleguide Exercise: CSS Basics Setup
Урок 3. 00:06:39

rem vs. em Units
Урок 4. 00:14:14

Style Guide Type Sizes
Урок 5. 00:11:28

Custom Font & Responsive Image
Урок 6. 00:18:42

HTML Markup for a Simple Website
Урок 7. 00:10:35

CSS for a Simple Responsive Layout
Урок 8. 00:07:07

Mobile Tour Styles
Урок 9. 00:09:54

Reviews & Images Styles
Урок 10. 00:05:11

Margin Collapse
Урок 11. 00:02:13

Basic CSS Footer Styles
Урок 12. 00:07:39

CSS for Tablet Layout
Урок 13. 00:08:01

Responsive Images with the Picture Element
Урок 14. 00:16:26

Basic Tablet CSS Layout
Урок 15. 00:10:20

CSS Styles for Desktop Layout
Урок 16. 00:13:10

Tour Page Styles
Урок 17. 00:06:52

Button Styling Practice
Урок 18. 00:08:28

Button Interactive States
Урок 19. 00:04:59

Tour Text Styles
Урок 20. 00:11:17

Tour Layout Practice
Урок 21. 00:04:28

Album & Tracklist Exercise
Урок 22. 00:03:07

Album Solution
Урок 23. 00:07:19

Album Styles
Урок 24. 00:09:39

Tracklist Styles
Урок 25. 00:08:43

Reviews & Images Mobile Styles
Урок 26. 00:12:33

Reviews & Images Tablet Styles
Урок 27. 00:09:04

Reviews & Images Tablet Styles Exercise
Урок 28. 00:10:43

Reviews & Images Desktop Styles
Урок 29. 00:06:06

Audio Player Overview
Урок 30. 00:10:23

Audio Player Markup
Урок 31. 00:14:40

Audio Player Base Styles
Урок 32. 00:08:48

Play & Mute Button Styles
Урок 33. 00:09:37

Range Slider Styles
Урок 34. 00:03:11

Album Cover Styles
Урок 35. 00:08:12

Hamburger Menu Exercise
Урок 36. 00:04:56

Hamburger Menu Logo Exercise
Урок 37. 00:19:23

Hamburger Menu Styles Exercise
Урок 38. 00:15:12

Hamburger Menu Tablet & Mobile Styles
Урок 39. 00:03:24

Medium Design Site Assembly Exercise
Урок 40. 00:19:02

Medium Design Desktop Layout Exercise
Урок 41. 00:04:41

Small Elements Exercise
Урок 42. 00:05:41

Small Elements Solution
Урок 43. 00:06:02

Review Layout Exercise
Урок 44. 00:04:21

Album Boxes Exercise & Solution
Урок 45. 00:18:31

Double Border Corners
Урок 46. 00:06:08

Navigation Exercise & Solution
Урок 47. 00:16:54

Social Icons
Урок 48. 00:11:49

Tracklist CSS
Урок 49. 00:05:20

Tracklist Show & Hide JavaScript
Урок 50. 00:18:08

Tracklist Grid for Tablet & Desktop
Урок 51. 00:13:03

CSS Transitions & Custom Table Scrollbar
Урок 52. 00:09:31

Diamond Images Mobile Layout
Урок 53. 00:13:57

Diamond Images Tablet & Desktop Layout
Урок 54. 00:05:13

Advanced Layout Exercise
Урок 55. 00:10:40

Advanced Desktop Layout
Урок 56. 00:05:15

Wrapping Up

Авторы

frontendmasters

FrontendMasters - Одна из самых лучших площадок для изучения Frontend. Видеокурсы ведут ведущие люди в этой отрасли.

+837

Jen Kramer

Джен Крамер преподает HTML и CSS для всех уровней более 20 лет. Ранее она была лектором в Гарвардском университете, совмещая это с работой фрилансера по веб-дизайну. Джен также является автором более 70 видео-курсов и трех книг. В настоящее время она занимает должность директора по дизайну обучения и технологиям в AnnieCannons - некоммерческой организации, которая обучает, подготавливает и помогает людям, пострадавшим от торговли людьми, начать у

Другие материалы в этой категории

Изображение курса HTML & CSS Bootcamp - 2023 Edition

udemy

16.03.2023

HTML CSS

HTML & CSS Bootcamp - 2023 Edition

The HTML & CSS Bootcamp 2023 Edition

Этот курс научит вас всему, что вам нужно знать о HTML, CSS и веб-дизайне, чтобы создавать свои собственные потрясающие веб-сайты с нуля. Вместо того, чтобы просто наблюдать за мной во время кодирования, вы научитесь структурировать и создавать любые веб-сайты, которые только сможете представить.Моя специализация - преподавание программ буткемп в режиме очной учебы по всему миру, где я работаю непосредственно с учениками, чтобы помочь им научитьс

37 ч 18 мин

English

Посмотреть

+57

Изображение курса Чистая и масштабируемая архитектура CSS

udemy

22.02.2023

CSS

Чистая и масштабируемая архитектура CSS

Clean and Scalable CSS Architecture

Есть много продвинутых курсов по CSS, по flexbox, CSS-анимации, CSS-grid… Однако в этом курсе мы сосредоточимся на архитектуре CSS. Если вы заинтересованы в том, чтобы научиться писать чистый и масштабируемый код CSS, этот курс - то, что вам нужно! CSS прост, его легко выучить, его легко написать. Но на самом деле сложно написать масштабируемый и удобный в сопровождении код, особенно в больших проектах, требующих постоянного масштабировани

1 ч 20 мин

English

Посмотреть

+18

Изображение курса Все, что я сделал, чтобы сделать CSS быстрым

Harry Roberts

10.01.2023

CSS

Все, что я сделал, чтобы сделать CSS быстрым

Everything I Have Done to Make CSS Wizardry Fast

Моя работа как инженера по производительности заключается в том, чтобы помогать клиентам создавать и поддерживать быстрые веб-сайты. Также очень важно, чтобы мой собственный сайт служил примером! В этой серии скринкастов я покажу вам каждую функцию, решение и коммит, влияющие на производительность, которые помогли сделать CSS быстрым.

2 ч 52 мин

English

Посмотреть

+25

Изображение курса Семантика HTML и селекторы CSS

frontendmasters

Jen Kramer

23.06.2022

HTML CSS

Семантика HTML и селекторы CSS

HTML Semantics & CSS Selectors

HTML - это мост между контентом и кодом. Большая буква «С» в CSS означает каскад. К сожалению, мало времени тратится на изучение того, что означает любое из этих понятий, или их влияние на ваш код. В этом курсе вы научитесь использовать семантический HTML, селекторы, наследование и каскадирование для создания веб-страниц с более компактным кодом и более эффективным стилем.

5 ч 38 мин

English

Посмотреть

+21

Удален по просьбе правообладателя

frontendmasters

18.05.2022

CSS

CSS-анимации

CSS Animations

Анимация пользовательского интерфейса играет важную роль для веб-приложений и веб-сайтов в улучшении взаимодействия с пользователем. Но создание анимации может быть трудным или чрезмерным. На этом курсе мы изучим основы CSS-анимации и перейдем к продвинутым концепциям, таким как оркестровка и хореография. Мы также изучим принципы моушн-дизайна, которые сделают все наши анимации последовательными и продуманными.

4 ч 14 мин

English

Посмотреть

+56

Удален по просьбе правообладателя

Практические CSS Layouts

Авторы

frontendmasters

Jen Kramer

Категории

CSS

Другие материалы в этой категории

HTML & CSS Bootcamp - 2023 Edition

Чистая и масштабируемая архитектура CSS

Все, что я сделал, чтобы сделать CSS быстрым

Семантика HTML и селекторы CSS

CSS-анимации