CSS Layout Flexbox

In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.

Resize the browser window to see the responsive effect.

Note: Flexbox is not supported in Internet Explorer 10 and earlier versions.

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

HTML Input Types

First name:

Username

Last name

Password

Male
Female

I have a bike
I have a car
I have a boat

Select favorite color
Date of Birth
Enter a date before 1980-01-01:
Enter a date after 2000-01-01:
Birthday (date and time):
Enter your email:
Select a file:
Birthday (month and year):
Quantity (between 1 and 5):
Quantity that is a multiple of 10:
Volume (between 0 and 50):
Search Google:
Enter your phone number:
Select a time:
Add your homepage:
Select a week:
First name:

PIN:

Choose a car:

The output Element

The output element represents the result of a calculation.

What is HTML Canvas?

The HTML canvas tag element is used to draw graphics, on the fly, via JavaScript.

The canvas element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content

Media Queries

Resize the browser window.

Make sure you reach the breakpoint at 800px when resizing this frame.

Left menu

Main menu

Right menu

Responsive Web Page - Full Example

Hello World

Lorum Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.