CSS Layout Techniques
4.4 (23 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
158 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS Layout Techniques to your Wishlist.

Add to Wishlist

CSS Layout Techniques

Learn CSS Layout Techniques from Scratch! Hands-On CSS Layout Course! Learn to Design and Customise CSS Page Layouts
4.4 (23 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
158 students enrolled
Created by Crypters Infotech
Last updated 7/2017
English
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn different CSS Positioning Techniques
  • Position elements on a webpage as you want
  • Understand how elements are displayed on a webpage
  • Understand CSS box model clearly
  • Define dimensions of elements
  • Use CSS position and float properties correctly
  • Customise layout of webpages
  • Create CSS layouts from scratch
  • Design real-world projects using CSS positioning techniques
  • Define placement of elements on a webpage
  • Position elements in the correct place with respect to webpage, parent element, normal position and other elements
  • Design Flexbox layout
View Curriculum
Requirements
  • Basic knowledge of HTML and CSS
Description

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,

  1. How elements are displayed by default?
  2. How block-level elements are different from inline elements in CSS?
  3. How to change the way an element is displayed using CSS display property?
  4. How CSS box model works?
  5. How to use CSS box model properties such as width, height, margin, padding and border?
  6. How to change the way CSS box model works using box-sizing property?
  7. How to use the CSS position property for static, fixed, absolute and relative positioning?
  8. How to use left, top, right and bottom properties along with CSS position property?
  9. How to position elements using float and clear properties?
  10. How to design CSS flexbox layout?

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

  1. Design layouts 
  2. Customise webpage layouts 
  3. Change the normal flow of the document 
  4. Use different CSS layout properties to change the size, position and layout of a page.

So, what are you waiting for? Join this course and learn CSS positioning techniques in an easy and efficient way!!

Who is the target audience?
  • Web designers
  • Web developers
  • Students who wish to learn CSS Positioning Techniques
Students Who Viewed This Course Also Viewed
Curriculum For This Course
29 Lectures
03:43:06
+
Introduction to CSS Layout Techniques
1 Lecture 03:28

Understand the importance of CSS layout techniques and how the course is structured.

Preview 03:28
+
How are Elements Displayed?
2 Lectures 14:28

Understand the difference between block level elements and inline elements in their display.

Preview 05:30

Understand how to use the display property to decide how elements are displayed

CSS display Property: Decide How an Element is Displayed
08:58

Quiz 1: Display of Elements
3 questions
+
CSS Box Model
5 Lectures 38:02

Understand the CSS box model

Preview 03:09

Understand how to use the width and height properties to set the width and height of the content area

width and height Properties:Set Width and Height of the Content Area
06:52

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.

border Property: Decide Style, Width and Colour of the Border
09:33

Learn to set space around content and between elements using padding and margin properties.

margin and padding Properties: Set Space Around Content and Between Elements
10:13

Learn how to use the box-sizing property to change how the CSS box model works

box-sizing Property: Change How the Box Model Works
08:15

Quiz 2: CSS Box Model
7 questions
+
Position Elements on a Web Page with position Property
4 Lectures 33:34

Understand what static and fixed positioning are.

Static and Fixed Positioning: static is Default & fixed is Fixed on the Webpage
07:19

Understand how to position elements with respect to their original position using relative positioning 

Relative Positioning: Relative to Normal Position of Element
05:04

Understand how to position elements wherever you want using absolute positioning

Absolute Positioning: Position the Element Exactly Where You Want
10:46

Learn to use left, top, right and bottom properties with fixed, relative and absolute positioning

Magic of left, top, right and bottom Properties
10:25

Quiz 3: position Property
5 questions
+
Position Elements on a Web Page with float Property
2 Lectures 13:52

Lear to use float property to create floating boxed

float Property: Let the Elements Sit Next to Each Other
08:32

Learn to use clear property to clear the effects happened because of using float property

clear Property: Prevent Elements from Wrapping Around Foated Elements
05:20

Quiz 4: float Property
2 questions
+
Flexbox Layout
7 Lectures 42:39

Understand what flexbox layout is.

Introduction to Flexbox Layout
01:46

Understand different terms in flexbox layout such as flex-container, flex-item, main axis, cross axis etc.

Understand the Terms
03:36

Learn to horizontally align the flex-items using justify-content property.

Horizontally Align the Elements
11:06

Learn to vertically align flex-items using align-items property.

Vertically Align the Elements
06:46

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.

Change the Direction of Elements and Wrap
09:58

Learn how to align multiple lines of items across the cross axis using align-content property.

Align Multiple Lines of Items
04:28

Learn how to change the order of flex-items using order property

Change the Order of Items
04:59

Quiz 5: Flexbox Layout
4 questions
+
Knowledge Into Action (Apply Your Knowledge)
3 Lectures 31:40

Apply your CSS positioning skills to horizontally center a block level element

Horizontally Center a Block-Level Element
08:10

Apply your CSS positioning skills to horizontally and vertically center an element with respect to its parent.

Horizontally & Vertically Center an Element with respect to Parent
08:34

Apply your CSS layout skills to design basic two column layout from scratch

Basic Two Column Layout from Scratch
14:56
+
CSS Positioning with Real-World Projects (Hands-On Practices)
4 Lectures 45:07

Practise CSS positioning techniques to style a quote of the day application

Quote of the Day: Position Elements
10:08

Practise CSS positioning techniques to style an image gallery - Part 1

Image Gallery: Position Elements (Part 1)
10:17

Practise CSS positioning techniques to style an image gallery - Part 12

Image Gallery: Position Elements (Part 2)
11:58

Design a speech bubble using CSS positioning techniques

Speech Bubble
12:44
+
Bonus Section
1 Lecture 00:20
Bonus Lecture: Special Offers on Other Courses!!!
00:20
About the Instructor
Crypters Infotech
4.5 Average rating
452 Reviews
4,554 Students
8 Courses
Career Enhancement Training Solutions

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.