Coding Tool

The best way to understand how HTML and CSS works is just start playing around with them and see the effect. The Playground is where you can do that. You'll practice playing around with the most commonly used HTML elements and CSS properties and see how they work. On each page of the playground you will see the title of the topic you're learning about, the syntax for that topic, a brief explanation of the topic, a testing screen, and the HTML and CSS code being used. To practice working with the HTML and CSS code you will enter values into the input fields that look like this: .

Topics

Here are the most commonly used HTML elements and CSS stylings that will be covered.

< > Paragraph

Add text to a webpage

< > Image

Add images to a webpage

< > Division

Add divisions or sections to a webpage

{ } Background Image

Another way to add images to a webpage, as the background of a division

< > Classes and ID's

Identify and selector elements with Classes and ID's

{ } Display

Display elements on stacked on top of each other or next to each other

{ } Spacing

Use margins and padding to set element spacing

{ } Position

Position elements exactly where you want them on a webpage. There are 3 sections covering the topic of position

< > Links

Add links to connect the pages of your website and connect to other websites

Playground

< > Syntax { }

This is the testing screen. This will show the results of your code.

HTML

This is where the HTML code will be displayed

CSS

This is where the CSS code will be displayed