Learn Layouts

Lessons, exercises, and projects about Layouts

Browse our list of curated database of projects, exercises, and lessons to learn Layouts

bootstrap
html-css
layouts

Instagram Photo Feed with Bootstrap

easy

This is an improved version of the first instagram exercise, now using bootstrap.

Start project

html-css
layouts
flex-box

Simple Instagram Photo Feed with HTML/CSS

beginner

Very simple instagram simulation to understand the basics of CSS and HTML5 and how to use them together to create a website.

Start project

html-css
resume-building
layouts

Build your resume in HTML/CSS

beginner

Practice HTML and CSS by building your Resume.

Start project

html-css
layouts
box-model

CSS Layouts: Create and Build Layouts with CSS

Building layouts is the most painful process when coding HTML & CSS. Learn the CSS layout rules: Display, Position, Float and Flex; and place any element anywhere you want.

Read lesson

html-css
layouts

Instagram Post Layout

beginner

Replicate a single instagram post using HTML and CSS

Start project

html-css
layouts
flex-box

Product Page in plain HTML/CSS

easy

Create an eCommerce Product Landing Page using standard HTML/CSS, no bootstrap or any other css framework.

Start project

html-css
layouts

Build a Digital Postcard with HTML/CSS

beginner

Replicate this postcard with CSS and HTML

Start project

html-css
layouts

Build Website Layouts with CSS

easy

Learn how to build layouts with an interactive and auto-graded tutorial.

Start exercise