Веб-технологии меняются так быстро... Мы видим много новых технологий и функций почти каждый день и они делают нашу жизнь проще, чем когда-либо прежде, точно так же, как и CSS Grid.
Итак, в этом курсе вы изучите CSS Grid от начала до конца, создав 4 крупных веб-сайта.
В этом курсе мы построим:
Сайт робототехники
Арабский сайт
Веб-сайт резюме
Китайский веб-сайт
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Setting up project and enabling CSS gRid container
Урок 2.
00:06:30
Working with column in css grid
Урок 3.
00:03:56
Creating rows in css grid
Урок 4.
00:06:36
Grid gap: creating gutters in grid layout
Урок 5.
00:09:39
The fr unit
Урок 6.
00:06:49
Important note about %, auto and fr unit
Урок 7.
00:09:51
Super auto-fill and auto-fit
Урок 8.
00:06:23
Nesting grid
Урок 9.
00:02:43
Grid-template property
Урок 10.
00:12:24
One-dimensional vs. two-dimensional layout
Урок 11.
00:08:12
Box alignment in Flexbox and CSS Grid
Урок 12.
00:02:18
Flexbox can css grid can't
Урок 13.
00:09:04
Flexbox and css grid together
Урок 14.
00:10:36
Grid auto rows and grid auto columns
Урок 15.
00:03:50
Grid auto flow
Урок 16.
00:05:39
The dense value
Урок 17.
00:07:03
Grid item alignment: justify-items and align-items
Урок 18.
00:06:40
Grid alignment: justify-content and align-content
Урок 19.
00:03:40
Single grid item alignment: justify-self and align self
Урок 20.
00:01:28
Preview: responsive coming soon template
Урок 21.
00:10:47
Project: building responsive coming soon template
Урок 22.
00:01:29
Preview: building simple responsive image gallery
Урок 23.
00:08:49
Project- building simple responsive image gallery
Урок 24.
00:07:01
Positioning items by line number
Урок 25.
00:04:13
The grid-column and grid-row shorthands
Урок 26.
00:03:50
Understanding default spans
Урок 27.
00:08:11
Grid area property
Урок 28.
00:07:12
Stretching an item across the grid & counting backward
Урок 29.
00:05:02
Using the span keyword
Урок 30.
00:15:12
Understanding grid template areas
Урок 31.
00:02:51
Spanning into multiple cells
Урок 32.
00:03:23
Leaving cell empty
Урок 33.
00:04:07
Grid template property v2
Урок 34.
00:05:04
creating cards using css grid template area
Урок 35.
00:01:19
Project Demo: Real world project with grid template area and media query
Урок 36.
00:17:44
Responsive website project with grid template area and media query
Урок 37.
00:08:00
naming grid lines
Урок 38.
00:06:43
Giving multiple names to your lines
Урок 39.
00:06:30
Implicit grid areas from named lines
Урок 40.
00:07:19
Implicit grid lines from grid areas
Урок 41.
00:11:22
Creating multiple lines using repeat function
Урок 42.
00:06:28
The repeat() function
Урок 43.
00:03:55
The minmax() function
Урок 44.
00:04:22
The fit-content() function
Урок 45.
00:09:54
Writing modes in css
Урок 46.
00:06:37
Writing mode in grid layout
Урок 47.
00:06:30
Writing mode and line based placement
Урок 48.
00:03:25
Introduction
Урок 49.
00:03:45
Project file setup
Урок 50.
00:05:20
Building transparent nav header
Урок 51.
00:07:18
Magic drawer and auto close.mp4
Урок 52.
00:08:16
Creating our main hero area
Урок 53.
00:11:23
Working with product section
Урок 54.
00:04:39
Creating vision-1 section
Урок 55.
00:03:46
Creating vision-2 section
Урок 56.
00:06:39
Creating service section and tags
Урок 57.
00:10:29
Adding feature section
Урок 58.
00:05:12
Adding brand section
Урок 59.
00:05:26
Adding blog section
Урок 60.
00:07:39
Robotics contact section
Урок 61.
00:08:45
Creating robotics footer
Урок 62.
00:12:42
Making it responsive in large and medium devices
Урок 63.
00:15:22
Making our robotics looks good in mobile devices
Урок 64.
00:04:44
Making sticky header
Урок 65.
00:04:29
Adding smoothy scroll
Урок 66.
00:05:40
Adding scroll-up button
Урок 67.
00:05:35
Adding some improvement
Урок 68.
00:02:39
Introduction
Урок 69.
00:07:25
Setting up project file
Урок 70.
00:08:54
Building main navbar
Урок 71.
00:04:32
Adding drawer
Урок 72.
00:09:15
Building our sidebar [featured news]
Урок 73.
00:07:23
Adding social widget
Урок 74.
00:10:08
Hero area and media
Урок 75.
00:03:52
Creating first row and first column
Урок 76.
00:06:31
Creating row-2 and column-2
Урок 77.
00:04:27
Creating footer
Урок 78.
00:15:40
Making our website responsive
Урок 79.
00:04:16
Making header sticky
Урок 80.
00:01:11
Introduction
Урок 81.
00:16:20
building fixed sidenav
Урок 82.
00:05:22
Creating main area
Урок 83.
00:12:49
About page
Урок 84.
00:04:02
Experience page
Урок 85.
00:03:15
Education page
Урок 86.
00:06:45
Skills page
Урок 87.
00:07:54
Intrest page
Урок 88.
00:02:54
Contact page
Урок 89.
00:02:43
Resolving few fixes
Урок 90.
00:10:15
Making our project responsive
Урок 91.
00:05:38
Adding smooth scroll
Урок 92.
00:01:49
Introduction
Урок 93.
00:04:27
Setting up project file & building HTML Structure
Урок 94.
00:07:14
Styling our chinese website
Урок 95.
00:00:21
Final Thouht
Автор - udemy
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
CSSCasts: CSS-библиотеки, плагины, советы и хитрости (в 2020 г.)
CSSCasts: CSS libraries Plugins Tips & Tricks (in 2020)
Этот курс довольно уникален для udemy. Это css скринкасты. Этот курс будет обновляться каждую неделю на 2 новых видео, основанных на базисах, но с современными и новейшимы идеями плагинов и библиотек CSS, а также с полезными советами и приемами.
Вы когда-нибудь видели веб-анимацию в коде или на любом веб-сайте, а потом думаете: «О, это круто! Я хочу это сделать! » но потом думаете, что это сложно и выходит за рамки ваших навыков?
Анимации, которые вы будете создавать, будут реальными примерами, которые вы сможете использовать для улучшения любого веб-сайта. Этот обширный курс по CSS-анимации могут пройти все разработчики любого уровня подготовки, в том числе и новички. Рекомендуется иметь базовые знания HTML и CSS, но нет необходимости знать что-либо о веб-анимации, так как все это будет тщательно изучено. Я не включил какую-либо сложную терминологию, так что, если у вас
Технология CSS Grid. Руководство по адаптивной верстке
Верстка — это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов. Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript. Соответственно, верстальщик — это человек, который занимается кодированием HTM