CSS Layout Techniques (2016)

WEBRip | English | MP4 | 1280 x 720 | AVC ~54 kbps | 10 fps

AAC | 192 Kbps | 48.0 KHz | 2 channels | 03:43:10 | 447 MB

Genre: Video Tutorial

Learn CSS Layout Techniques from Scratch! Hands-On CSS Layout Course! Learn to Design and Customise CSS Page Layouts

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.

Content:

01 Introduction to CSS Layout Techniques

001 Structure of the Course

02 How are Elements Displayed

002 Block-Level Elements Vs Inline Elements

003 CSS display Property Decide How an Element is Displayed

001 Quiz 1 Display of Elements

03 CSS Box Model

004 What is CSS Box Model

005 width and height PropertiesSet Width and Height of the Content Area

006 border Property Decide Style Width and Colour of the Border

007 margin and padding Properties Set Space Around Content and Between Elements

008 box-sizing Property Change How the Box Model Works

002 Quiz 2 CSS Box Model

04 Position Elements on a Web Page with position Property

009 Static and Fixed Positioning static is Default fixed is Fixed on the Webpage

010 Relative Positioning Relative to Normal Position of Element

011 Absolute Positioning Position the Element Exactly Where You Want

012 Magic of left top right and bottom Properties

003 Quiz 3 position Property

05 Position Elements on a Web Page with float Property

013 float Property Let the Elements Sit Next to Each Other

014 clear Property Prevent Elements from Wrapping Around Foated Elements

004 Quiz 4 float Property

06 Flexbox Layout

015 Introduction to Flexbox Layout

016 Understand the Terms

017 Horizontally Align the Elements

018 Vertically Align the Elements

019 Change the Direction of Elements and Wrap

020 Align Multiple Lines of Items

021 Change the Order of Items

005 Quiz 5 Flexbox Layout

07 Knowledge Into Action Apply Your Knowledge

022 Horizontally Center a Block-Level Element

023 Horizontally Vertically Center an Element with respect to Parent

024 Basic Two Column Layout from Scratch

08 CSS Positioning with Real-World Projects Hands-On Practices

025 Quote of the Day Position Elements

026 Image Gallery Position Elements Part 1

027 Image Gallery Position Elements Part 2

028 Speech Bubble

09 Bonus Section

029 Bonus Lecture Special Offers on Other Courses