Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
3 Hour(s) 53 Minute(s)
Language
English
Taught by
Crypters Infotech
Rating
3 views
Course Overview
Learn CSS Layout Techniques from Scratch! Hands-On CSS Positioning 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.
In this course, you start from the basics of CSS positioning techniques and gradually move to advanced concepts in CSS positioning. You will understand,
- How elements are displayed by default?
- How block-level elements are different from inline elements in CSS?
- How to change the way an element is displayed using CSS display property?
- How CSS box model works?
- How to use CSS box model properties such as width, height, margin, padding and border?
- How to change the way CSS box model works using box-sizing property?
- How to use the CSS position property for static, fixed, absolute and relative positioning?
- How to use left, top, right and bottom properties along with CSS position property?
- How to position elements using float and clear properties?
- 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
- Design layouts
- Customise webpage layouts
- Change the normal flow of the document
- 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 Content
- 9 section(s)
- 30 lecture(s)
- Section 1 Introduction to CSS Layout Techniques
- Section 2 How are Elements Displayed?
- Section 3 CSS Box Model
- Section 4 Position Elements on a Web Page with position Property
- Section 5 Position Elements on a Web Page with float Property
- Section 6 Flexbox Layout
- Section 7 Knowledge Into Action (Apply Your Knowledge)
- Section 8 CSS Positioning with Real-World Projects (Hands-On Practices)
- Section 9 Bonus Section
What You’ll 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
Reviews
-
BBernabéGarcía
The only thing I miss is the images used in the Section 8. Except that, the rest is good. In fact, how to create an Image Gallery and the Speech Bubble are the best examples and very useful for frontweb design.
-
MMike Luongo
This course is exactly what I was looking for. I wanted to know how to layout things on a page. CSS is pretty simple when it comes to styling the colors, fonts, etc. But the layout is pretty confusing at times. There are a lot of weird layout renderings that happen differently than you would expect. That is unless you understand how all of the layout rules work. This course is great for that. There is no fluff in here and it provides simple and clear examples of how different CSS properties affect layout on a page.
-
MMaurice Phillips
The instructor does a very good job with explaining each type of layout and giving examples on how to use each one.
-
MMarcos Cabrini Riani dos Reis
CSS grid is a good layout option that was missing in the course. Applicability of the content in real world projects like creating a website could improve the course.
