block 1 (class 1-2): cheat sheet

In Your HTML


You need to create a new file called index.html. It is the default "starting page" of any website.



!DOCTYPE html
html
head
metadata or "data about data:": information about your page like the title, CSS etc
title Page Title title

style
your css
style
head
body
visible contents

script
your javascript
you could also add the Javascript in the head but loading it at the bottom of the page makes sure your html and css are loaded before any Javascript events are triggered, which may prevent bugs
script
body
html

Check the example

Structure your page in the body tag using HTML elements such as headings (h1, h2, h3 etc), paragraphs (p), images (img), section dividers (article or div, unordered lists (ul) etc

      h1 Title h1

      p A paragraph of text p

      <img src="your-image-file.jpg"/> 

      ul
        lilist itemli
        lilist itemli
        lilist itemli
      ul

       div class="mydiv" A div container with a custom class div
Check the full list of HTML elements here so you can try a few you haven't used before.

In your CSS

Add your styles in between <head> and </head>

  head
    style
      /* Your CSS here */
    style
  head

CSS classes have a basic structure

      element {
        attribute: value;
      }

You can style basic HTML elements

      body {
        background-color: #c9c9c9;
        color: #000000;
      }

      h1 {
        font-family: arial, sans-serif;
        color: tomato;
      }

If you use a custom class the structure is the same but you add a dot '.' before its name

      .mydiv {
        font-family: courier-new;
        color: tomato;
        background-color: #ccc;
      }
Some colors in CSS have names, otherwise you can pick a color using #hexc0des or in rgb. Need a color picker? Try this one.
Back