About the course

Welcome to Layout basics! In this course you will learn to create layouts and stylize content with HTML and CSS. Provided techniques will allow you to rapidly create prototypes that can be altered easily. You will start with the very basic concepts of markup and styling, and finish the course by creating a high-fidelity, responsive page layout for a web app. You will be prepared then to proceed with Interaction basics to create dynamic designs.

The goal of this course is to teach you to prototype so efficiently that coding becomes your favorite design tool.

What you’ll learn

  • Core HTML and CSS concepts to set the foundation for deeper knowledge.
  • How to position and stylize elements on a page.
  • How to rapidly create flexible layouts that are friendly to change.
  • A handful of CSS frameworks and tools that streamline the routines and empower your workflow.


This course doesn’t require any prior knowledge of HTML and CSS. If you have some experience with these languages, it is still recommended for you to read through the articles and complete the tasks. This will give you an understanding of the Mockupless approach to creating layouts, which at times is significantly different from the way HTML and CSS are usually taught.


Together with creating a knowledge base, the aim of Mockupless is to build an open community of designers who share ideas, struggles, and the desire to create better digital products. Visit the General Spectrum channel to discuss core prototyping concepts. Go to the Layout basics channel to ask questions about this particular course, help others, and share your progress.

Please be kind and patient.