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.
In this course, you start from the basics of CSS positioning techniques and gradually move to advanced concepts in CSS positioning. You will understand,
In the "Knowledge into Action (Apply Your Knowledge)" section, you will apply what you have learnt in this course to build layout and position elements from scratch. In the "CSS Positioning with Real-World Projects (Hands-On Practices)" section, you will do hands-on practices where you will practically implement CSS positioning techniques in some real-world projects.
By the end of this course, you will be able to
So, what are you waiting for? Join this course and learn CSS positioning techniques in an easy and efficient way!!
Understand the difference between block level elements and inline elements in their display.
Understand how to use the display property to decide how elements are displayed
Understand how to use the width and height properties to set the width and height of the content area
Understand how to use border property in short hand and long hand forms to set the style, width and colour of the border of the element.
Learn to set space around content and between elements using padding and margin properties.
Learn how to use the box-sizing property to change how the CSS box model works
Understand what static and fixed positioning are.
Understand how to position elements with respect to their original position using relative positioning
Understand how to position elements wherever you want using absolute positioning
Learn to use left, top, right and bottom properties with fixed, relative and absolute positioning
Lear to use float property to create floating boxed
Learn to use clear property to clear the effects happened because of using float property
Understand what flexbox layout is.
Understand different terms in flexbox layout such as flex-container, flex-item, main axis, cross axis etc.
Learn to horizontally align the flex-items using justify-content property.
Learn to vertically align flex-items using align-items property.
Learn how to change the direction of elements using flex-direction property and how to display flex-items in multiple lines using flex-wrap property.
Learn how to align multiple lines of items across the cross axis using align-content property.
Learn how to change the order of flex-items using order property
Apply your CSS positioning skills to horizontally center a block level element
Apply your CSS positioning skills to horizontally and vertically center an element with respect to its parent.
Apply your CSS layout skills to design basic two column layout from scratch
Practise CSS positioning techniques to style a quote of the day application
Practise CSS positioning techniques to style an image gallery - Part 1
Practise CSS positioning techniques to style an image gallery - Part 12
Design a speech bubble using CSS positioning techniques
Crypters Infotech is a division of Crypters Infosystems and Solutions Pvt. Ltd IT Company. We offer industry-oriented training that helps even fresh heads to become IT giants. Our professional team of trainers provide high quality training with an outlook towards future. We provide training mainly in web development and mobile app development.