Midleton Dojo - Week 8 - HTML & CSS

Discussion in 'CDYS Youth Work Ireland - Midleton' started by gar.morley, Dec 2, 2015.

  1. gar.morley

    gar.morley Administrator Staff Member

    This week we started to build a homepage for all our projects at Midleton CoderDojo. We first of all wrote out our content (our "story") and then added HTML to it so we could tell which bits were headers, lists, images etc. Finally, we added CSS to make change some of colours, fonts and image sizes on the page.

    Mine code ended up like this (it's possible yours was a little different). You can copy and paste this into Atom:

    Code:
    <html>
    <head>
      <title>Welcome to my homepage!</title>
    
      <style>
      h1 {
        color: blue;
        background-color: yellow;
      }
      body {
        font-family: Helvetica;
      }
      img {
        width: 300px;
        border: 2px dotted green;
      }
      </style>
    
    </head>
    <body>
    
      <h1>This is my homepage at the Midleton CoderDojo #801.</h1>
    
      <img src="logo.png" />
    
      <h2>My projects</h2>
    
      <ul>
        <li>This page!</li>
        <li><a href="game.html">The Worm Game!</a></li>
      </ul>
    
      <h2>My hobbies</h2>
      <ol>
        <li>coding!</li>
        <li>running!</li>
        <li>walking my dog!</li>
      </ol>
    </body>
    </html>
    
    Save this code as "index.html".

    I used the CoderDojo logo (attached) as well and called it "logo.png". Make sure that (and your Worm Game code) are in the same directory as your "index.html" and then you should be able to open it up in a browser and see the web page!
     

    Attached Files:

Share This Page