Up & Running with HTML + CSS

Workshop outline and notes

  • 1

    Download the Visual Studio Code editor.

    Download an editor

    I recommend downloading the Emmet and Beautify extensions, as well as Live Server.

  • 2

    image of directory structures

    Create folders for your website.

    Open your website in the Atom editor.

    Create Folder Structure

    On your Desktop, create a root folder called something like my-website. Inside this folder, make 3 more folders called css, js, and img. Directory names are abitrary, though these are conventional.

    Make sure all folder names are lowercase. Use hyphens in place of spaces for folders and files.

  • 3

    Create a file named index.html in the root directory.

    Open this page in a Web browser.

    Create Your Homepage

    When browsers are directed to a folder, they look for a file named index.html. If they find it, they render it as HTML. This is why your home page should typically be named "index.html."

  • 4

    <!doctype html>

    Add Doctype Declaration

    Let's start adding HTML to our HTML files! The doctype declaration must be the first line in the HTML file.

  • 5

    Add Structure of HTML Page

    Add the basic structure of the HTML page on the next line below the doctype declaration.

    Spacing doesn't affect the text flow in HTML. We space out our code for readability.

  • 6

    <title>My Website</title>

    Add a Title Element

    Add a title element inside the head element. The title will be what is displayed in the browser tab, and not in the page. Only what is placed in the body element will show in the browser/webpage.

  • 7

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <p>This is a paragraph</p>

    Add Headings and Paragraphs

    Now let's add a few headings and a paragraph.

    Headings run from h1 (largest) to h6 (smallest).

  • 8

    <p>This is 
    <a href="https://hp.com"> a link</a>
    in a paragraph</p>
    Anchor Element (Links)

    The href attribute is how the anchor element (or link) knows where to go when you click it.

    To force the link to open in a new browser window, add the attribute target="_blank".

    These two code snippets will render identically. In HTML, spacing is not preserved. In most elements, any number of spaces greater than a single space is reduced to a single space.

  • 9

    <strong>bold Text</strong>

    <em>italic Text</em>

    <big>larger Text</big>

    <small>smaller text</small>


    <kbd>keyboard keys</kbd>

    <tt>typewriter keys</tt>





    Inline Elements

    Let's practice adding some other inline elements within a paragraph element.

  • 10

    <img src="img/my-image.png" alt="image">


    Let's add an image to our page. The src attribute is how the img element knows where to get the image to display in the page.

    The website Unsplash has a wealth of free and high-quality images in a variety of areas available for download.

  • 11

        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>

    Let's add an unordered list (bullet points), and an ordered list to our page.

  • 12

    <table class="table table-striped">

    Let's add table with 2 heading columns and 3 table rows.

  • 13

    <div>Content here</div>

    <main>Content here</main>

    <section>Content here</section>

    <article>Content here</article>

    <header>Content here</header>

    <footer>Content here</footer>

    <aside>Content here</aside>

    Chunking Your Content (Meaningfully)

    Let's chunk our content more effectively with meaningfully-named section elements.

    Note that the <header> and the <head> element are different.

  • Margin

    Example <p>:

    This is a paragraph.

    This is also a paragraph.

    The Box Model

    Almost every HTML element is a box, with margin, padding, border and other properties that establish its relation to other elements.

    Block elements stretch to fit the width of their container. Inline elements are only the width of the content they contain.

  • image of page from css zen garden
    CSS Zen Garden
    A demonstration of what can be accomplished through CSS-based design. The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.
  • 0

    p {
      background-color: red;
      color: white;
    Style Declaration Format

    The heart of CSS is declaring values for properties of HTML elements.

    p { property: value; }

    As in HTML, spacing here is used primarily for readability.

  • 1

    <p style="background: red;">This is a paragraph</p>

    <p style="background: red; color: white; padding: 10px;">This is a paragraph</p>

    Inline Styles

    Let's add an inline style declaration to one of our paragraph element.

    In this case style is an attribute of the paragraph element. Attributes are declared inside of the opening tag of an element and take this form:


  • 2

        p {
          background: red;
          color: white;
    Embedded Styles

    Let's add a <style> element inside our <head> element and place our styles there.

  • 3

    <p id="blue-paragraph">This should now be blue</p>

    #blue-paragraph { color: blue; }


    To differentiate a single paragraph, we can assign it an ID, which we style differently.

    IDs must remain unique. You may not repeat an ID in a single HTML file more than once.

  • 4

    <p class="green-paragraph">This should now be green</p>

    .green-paragraph { color: green; }


    To set the properties for an entire class of paragraphs, we can assign each a class, which we style differently.

  • 5

    #special-list li:nth-child(odd) {
        background: silver;
    Advanced Selectors

    It's often more efficient and more elegant to target elements with advanced selectors.

    Reading from right-to-left, we are targeting every odd numbered list element inside of a container with the id of "special-list"

  • 6

    In the CSS directory, create the file "my-styles.css"

    External Style Sheets

    Let's create an external style sheet so that we may keep our styles in one file.

  • 7

    <link rel="stylesheet" href="my-styles.css"></p>

    The 'Cascade'

    Let's link to this external style sheet in the <head> element of both our HTML pages.

  • 8

    <div class="lefty">Left div here</div>

    .lefty { width: 50%; float: left; }

    <div class="righty">Left div here</div>

    .righty { width: 50%; float: right; }


    Let's create two divs and float them next to each other.

    To float elements, they must have a concrete width declared.