CSS Layout Techniques

CSS Layout Techniques, available at $44.99, has an average rating of 3.95, with 30 lectures, 5 quizzes, based on 93 reviews, and has 438 subscribers.

You will learn about 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 This course is ideal for individuals who are Web designers or Web developers or Students who wish to learn CSS Positioning Techniques It is particularly useful for Web designers or Web developers or Students who wish to learn CSS Positioning Techniques.

Enroll now: CSS Layout Techniques

Summary

Title: CSS Layout Techniques

Price: $44.99

Average Rating: 3.95

Number of Lectures: 30

Number of Quizzes: 5

Number of Published Lectures: 30

Number of Published Quizzes: 5

Number of Curriculum Items: 35

Number of Published Curriculum Objects: 35

Original Price: $59.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

Web designers

Web developers

Students who wish to learn CSS Positioning Techniques

Target Audiences

Web designers

Web developers

Students who wish to learn CSS Positioning Techniques

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!!

Course Curriculum

Chapter 1: Introduction to CSS Layout Techniques

Lecture 1: Structure of the Course

Chapter 2: How are Elements Displayed?

Lecture 1: Block-Level Elements Vs Inline Elements

Lecture 2: CSS display Property: Decide How an Element is Displayed

Chapter 3: CSS Box Model

Lecture 1: What is CSS Box Model?

Lecture 2: width and height Properties:Set Width and Height of the Content Area

Lecture 3: border Property: Decide Style, Width and Colour of the Border

Lecture 4: margin and padding Properties: Set Space Around Content and Between Elements

Lecture 5: box-sizing Property: Change How the Box Model Works

Chapter 4: Position Elements on a Web Page with position Property

Lecture 1: Static and Fixed Positioning: static is Default & fixed is Fixed on the Webpage

Lecture 2: Relative Positioning: Relative to Normal Position of Element

Lecture 3: Absolute Positioning: Position the Element Exactly Where You Want

Lecture 4: Magic of left, top, right and bottom Properties

Chapter 5: Position Elements on a Web Page with float Property

Lecture 1: float Property: Let the Elements Sit Next to Each Other

Lecture 2: clear Property: Prevent Elements from Wrapping Around Floated Elements

Chapter 6: Flexbox Layout

Lecture 1: Introduction to Flexbox Layout

Lecture 2: Understand the Terms

Lecture 3: Horizontally Align the Elements

Lecture 4: Vertically Align the Elements

Lecture 5: Change the Direction of Elements and Wrap

Lecture 6: Align Multiple Lines of Items

Lecture 7: Change the Order of Items

Chapter 7: Knowledge Into Action (Apply Your Knowledge)

Lecture 1: Horizontally Center a Block-Level Element

Lecture 2: Horizontally & Vertically Center an Element with respect to Parent

Lecture 3: Basic Two Column Layout from Scratch

Lecture 4: Keep Elements in Place Even Elements in Between are Removed

Chapter 8: CSS Positioning with Real-World Projects (Hands-On Practices)

Lecture 1: Quote of the Day: Position Elements

Lecture 2: Image Gallery: Position Elements (Part 1)

Lecture 3: Image Gallery: Position Elements (Part 2)

Lecture 4: Speech Bubble

Chapter 9: Bonus Section

Lecture 1: Bonus Lecture: Special Offers on Other Courses!!!

Instructors

Crypters Infotech
Career Enhancement Training Solutions

Rating Distribution

1 stars: 3 votes

2 stars: 2 votes

3 stars: 10 votes

4 stars: 23 votes

5 stars: 55 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!