Creating Website Layouts and Designs in CSS3


These days, we don’t build webpages for the sake of putting designs to work. Sites are built to respond to different devices used by different people for different purposes. This reason brought about the concept of responsive website layouts and designs.

This course is a continuation of the course, “CSS3 for Beginners: An Introductory Tutorial.” It teaches how to build website layouts and designs using CSS. Before you take this course, you should have first taken courses in HTML and introductory CSS course.

As discussed in our previous courses, CSS deals with the layout of a webpage. The course, “Introduction to Cascading Stylesheets”, laid the foundation of CSS. CSS selectors and the box model were discussed in detail. You can check it out.

CSS layout deals with the arrangement of HTML elements in a webpage or website. Here we will learn how to position the contents of our HTML outside its normal flow.

Creating website layouts and designs

is an important part of web designing that every web developer must learn.

CSS website layouts and designs will help us to understand how we can deviate from the normal HTML flow and impose the layout we desire. This will help us create a better and more beautiful appearance of our site.

To impose our desired website layouts and designs, we will need to manipulate the CSS code using some CSS properties such as:

Display property: We have discussed three classes of the display properties including block, inline and inline-block.

Floats: Another property that will help us alter the normal flow of our site layout is the float property.

Float and positioning properties can also be used to alter the default block flow of HTML elements. In this section, we shall discuss the float and the clear properties. Then we conclude with z-index and different position values.

The clear property has the following values: left, right, both, none and inherit.

Position property: This property is also important when placing elements on a website.

Multi-column: Finally, we can also use the multi-column property to layout elements in columns depending on what we want to achieve. The multiple column features allow you to divide your webpage contents into more than one column. This feature mimics what is popularly seen in newspapers and magazines.

In this course, we shall be dealing with how to create website layouts and designs. Among others, our focus shall be on CSS layout, including float and positioning, flexbox, and grid.

Course Content

Total learning: 26 lessons Time: 4 weeks
  • CSS Layouts  0/6

    • Lecture1.1
      Introduction to CSS Layouts 01 min Preview
    • Lecture1.2
    • Lecture1.3
    • Lecture1.4
    • Lecture1.5
    • Lecture1.6
  • Working with Floats and Positioning  0/6

    • Lecture2.1
    • Lecture2.2
    • Lecture2.3
      The Clear Property 02 min Preview
    • Lecture2.4
    • Lecture2.5
    • Lecture2.6
  • Flexbox Layouts  0/6

    • Lecture3.1
      Introduction to Flexbox 01 min Preview
    • Lecture3.2
    • Lecture3.3
    • Lecture3.4
    • Lecture3.5
    • Lecture3.6
  • Grid Layouts  0/8

    • Lecture4.1
    • Lecture4.2
      The Grid System 02 min Preview
    • Lecture4.3
    • Lecture4.4
    • Lecture4.5
    • Lecture4.6
    • Lecture4.7
    • Lecture4.8


A graduate of Statistics/Economics, web designer, data analyst, and Business developer. I have a passion for education and training, hence started Kmacims | Education Annex. We are building a community of creative people through creative education and mind development, among others. We offer courses that boost mental attitude and creativity through text and video graphics. Our clients also have access to business, financial, ICT, etc. training. We offer these through our website. Other services include business coaching and ICT consulting services. Education is key to personal and national development. We want our younger generation to understand the power of education in mankind and nation-building. There is a need for them to think like leaders, and develop problem-solving skills. The key is to plant in them, the right education that will expose the creative ability trapped within them.