Places to test your layout:

Learn more HTML and CSS:

The Basics

Spacehey layouts are created with two coding languages in tandem, they are HTML and CSS. To put it simply, HTML is the foundation of the page and it's content while CSS is the style and formatting dictating the arrangement of elements and how they look.

Understanding the structure of HTML

HTML tags

In HTML everything is defined with a tag. This is what the structure of a tag looks like:

It's important to remember to close your tags! Most tags close with a / right after the < now, there are code editors with features built in or than you can add on that close your tags for you but please be mindful of open tags reguardless. They can really mess up your project if you aren't careful!

Now that we know what a tag looks like, here's the most basic tags:

Style

For Spacehey your CSS just goes in a style tag! Normally you would have to put this tag in something called the "head" but oudon't need to know that for just changing the layout of your profile, blog or bulletin.

Body

The body is where all the content of a page goes.

Paragraph

This is for your regular sized text, you can create multiple paragraphs on any given page or part of a page. There's no limit on how big or small a paragraph has to be code wise.

Header

This is for big title text, Most browsers recognize up to 6 headers.

You'll notice this example is written "h1" you would write other headers as "h2", "h3" and so on. Keep in mind that they get smaller as you go.

Anchor

For the most part you'll be using the anchor tag for linking stuff.

Image

The image tag does exactly what you think it does, it's the easiest way to add images to a page! Trust me when I say: you will ge very familiar with this tag if you are not already. Unlike most tags all the information is inside of the first opening tag and doesn't need to close the way other tags do.

The (src="") is where you put the link to the image you want to use and the (alt="") is where you add a description of the image. I reccomend describing all of your images for not just accessibility reasons but also, if you don't it can get hard to read your own code! You won't know what picture is what!

Understanding the structure of CSS

CSS Selectors, Properties and Values.

WIP!

I'm ready to apply my knowledge! Take me back to the layouts list!😎✨