CSS Layout Techniques
Год выпуска: 2016
Производитель: Udemy
Сайт производителя: www.udemy.com
Продолжительность: 03:43:10
Тип раздаваемого материала: Видеоурок
Язык: Английский
Описание: В настоящее время, веб-дизайнеров и фронтального разработчикам приходится создавать сложные макеты страниц. Структурирование веб-страниц путем разработки макетов и содержания позиционирования очень важно, когда речь идет о веб-дизайна и веб-разработки. Когда элементы расположены правильно на веб-странице, веб-страница становится более структурированным и содержание становится легко видимым и усваиваются. Веб-дизайнеры и разработчики воспользоваться преимуществами различных методов компоновки CSS для структурирования веб-страниц, как они нуждаются. Методы компоновки CSS позволяют определить размещение элементов на веб-странице, то есть для управления, где они расположены по отношению к их позиции по умолчанию в соответствии с нормальным потоком, другие элементы вокруг них, их родительский контейнер, или основной видовой экран / окно.
Предположим, что вы хотите создать свой собственный веб-сайт нескольких столбцов. Но если вы не знаете, с чего начать или как поступить, этот курс для вас. Этот курс "макета CSS методы" научит вас, как работать с общими методами компоновки и позиционирования, используемых в веб-дизайне. В этом курсе вы будете изучать различные методы для размещения элементов на веб-странице в почти любых мыслимых образом. На протяжении всего курса вы узнаете, как создавать макеты с использованием методов отображения, поплавки, методы позиционирования и даже Flexbox, которая является последней моделью макета CSS. В конце курса, вы будете применять свои навыки позиционирования, работая на реальных проектах. Вы можете решить, какой метод использовать, основываясь на содержании и целях вашей веб-страницы, так как некоторые методы лучше, чем другие в определенном контексте.
Nowadays, web designers and front-end developers have to build complex page layouts. Structuring webpages by designing layouts and positioning content is very important when it comes to web design and web development. When the elements are positioned correctly in a webpage, the webpage becomes more structured and the content becomes easily visible and digestible. Web designers and developers take advantage of different CSS layout techniques to structure webpages as they need. CSS layout techniques allow us to define the placement of elements on a web page, that is to control where they are positioned with respect to their default position as per normal flow, the other elements around them, their parent container, or the main viewport/window.
Suppose you want to create your own multi-column web site. But if you do not know where to start from or how to proceed, this course is for you. This course "CSS Layout Techniques" teaches you how to work with the common layout and positioning methods used in web design. In this course, you will learn different techniques to position elements on a webpage in nearly any imaginable way. Throughout the course, you will learn how to build layouts using display methods, floats, positioning techniques and even Flexbox which is the latest CSS layout model. At the end of the course, you will apply your positioning skills by working on real-world projects. You can decide which technique to use based on the content and goals of your webpage because some techniques are better than others in some context.
Содержание
├── 01 Introduction to CSS Layout Techniques
│ └── 001 Structure of the Course.mp4
├── 02 How are Elements Displayed
│ ├── 002 Block-Level Elements Vs Inline Elements.mp4
│ ├── 003 CSS display Property Decide How an Element is Displayed.mp4
│ └── quizzes
│ └── 001 Quiz 1 Display of Elements.html
├── 03 CSS Box Model
│ ├── 004 What is CSS Box Model.mp4
│ ├── 005 width and height PropertiesSet Width and Height of the Content Area.mp4
│ ├── 006 border Property Decide Style Width and Colour of the Border.mp4
│ ├── 007 margin and padding Properties Set Space Around Content and Between Elements.mp4
│ ├── 008 box-sizing Property Change How the Box Model Works.mp4
│ └── quizzes
│ └── 002 Quiz 2 CSS Box Model.html
├── 04 Position Elements on a Web Page with position Property
│ ├── 009 Static and Fixed Positioning static is Default fixed is Fixed on the Webpage.mp4
│ ├── 010 Relative Positioning Relative to Normal Position of Element.mp4
│ ├── 011 Absolute Positioning Position the Element Exactly Where You Want.mp4
│ ├── 012 Magic of left top right and bottom Properties.mp4
│ └── quizzes
│ └── 003 Quiz 3 position Property.html
├── 05 Position Elements on a Web Page with float Property
│ ├── 013 float Property Let the Elements Sit Next to Each Other.mp4
│ ├── 014 clear Property Prevent Elements from Wrapping Around Foated Elements.mp4
│ └── quizzes
│ └── 004 Quiz 4 float Property.html
├── 06 Flexbox Layout
│ ├── 015 Introduction to Flexbox Layout.mp4
│ ├── 016 Understand the Terms.mp4
│ ├── 017 Horizontally Align the Elements.mp4
│ ├── 018 Vertically Align the Elements.mp4
│ ├── 019 Change the Direction of Elements and Wrap.mp4
│ ├── 020 Align Multiple Lines of Items.mp4
│ ├── 021 Change the Order of Items.mp4
│ └── quizzes
│ └── 005 Quiz 5 Flexbox Layout.html
├── 07 Knowledge Into Action Apply Your Knowledge
│ ├── 022 Horizontally Center a Block-Level Element.mp4
│ ├── 023 Horizontally Vertically Center an Element with respect to Parent.mp4
│ └── 024 Basic Two Column Layout from Scratch.mp4
├── 08 CSS Positioning with Real-World Projects Hands-On Practices
│ ├── 025 Quote of the Day Position Elements.mp4
│ ├── 026 Image Gallery Position Elements Part 1.mp4
│ ├── 027 Image Gallery Position Elements Part 2.mp4
│ └── 028 Speech Bubble.mp4
└── 09 Bonus Section
└── 029 Bonus Lecture Special Offers on Other Courses.html
Файлы примеров: отсутствуют
Формат видео: MP4
Видео : AVC, 1280x720 (16:9), 10.000 fps, ~51.0 Kbps avg, 0.006 bit/pixel
Аудио: 48.0 KHz, AAC LC, 2 ch, ~192 Kbps
