SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)

    Teaching a friend CSS - Lessons log.

    I'm teaching a friend CSS. I've went over the basics of HTML and CSS for here and bought a text book for her to use, but I figured it might be fun, useful to share the lessons and tests I'm preparing for her here in a thread - both to log them. I'm not that experienced at teaching, so feedback on that aspect of it is welcome, as is ideas for exercises. For reference, she's an art student with a background in photography.

    The first test is draw a centered bull's eye. The target render is attached, the HTML she is working from is as follows:

    Code html:
    <!DOCTYPE html>
    <html>
      <body>
        <div><div><div></div></div></div>
      </body>
    </html>

    EXPERT CHALLENGE: Vertically center the bull's eye. This isn't part of her lesson so isn't shown in the target render.
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Dec 2012
    Location
    Europe
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Michael, thank you so much for sharing this, i am new to webdesign, am only taking my first steps and such lessons are exactly what i need.
    Newbies are going to love this thread

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,528
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    I'm teaching a friend CSS. I've went over the basics of HTML and CSS for here and bought a text book for her to use, but I figured it might be fun, useful to share the lessons and tests I'm preparing for her here in a thread - both to log them. I'm not that experienced at teaching, so feedback on that aspect of it is welcome, as is ideas for exercises. For reference, she's an art student with a background in photography.

    The first test is draw a centered bull's eye. The target render is attached, the HTML she is working from is as follows:

    Code html:
    <!DOCTYPE html>
    <html>
      <body>
        <div><div><div></div></div></div>
      </body>
    </html>
    I'm sure that will be useful to others and interesting to see how you get on with teaching it.

    EXPERT CHALLENGE: Vertically center the bull's eye. This isn't part of her lesson so isn't shown in the target render.
    Here's my example using a single div


    div {
    width:222px;
    height:222px;
    position:fixed;
    left:50%;
    top:50%;
    margin:-147px 0 0 -147px;
    border:36px solid red;
    background:green;
    border-radius:222px;
    }
    div:after {
    content:" ";
    display:block;
    width:150px;
    height:150px;
    border-radius:150px;
    background:blue;
    margin:36px 0 0 36px;
    position:relative;
    z-index:2;
    }



    <div></div>



    I used spoiler tags to hide the code in case anyone else is trying. (Just highlight the gray section to see the text.)

  4. #4
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that definitely works. BTW, She's to do it using padding, margin, height, width, background and color properties. I haven't gotten into positioning rules but those are coming.

    Currently I'm working with a headache of my own - a dropdown animation for menus.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,610
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)

    When does CSS become just TOO MUCH fun?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?942215-Teaching-a-friend-CSS-Lessons-log
    -->
    <head>
        <title>The Black Hole</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    html,
    body {
        padding:0px;
        margin:0px;
    }
    body {
        background-color:#888;
    }
    .blackhole {
        width:40px;
        height:40px;
        background-color:#000;
        border-radius:50%;
        position:fixed;
        left:50%;
        top:50%;
        margin-left:-20px;
        margin-top:-20px;
        box-shadow: 
            0px 0px 30px 30px #fff,
            0px 0px 30px 60px #f0f,
            0px 0px 40px 90px #00f,
            0px 0px 30px 130px #0ff,
            0px 0px 30px 140px #0f0,
            0px 0px 30px 180px #ff0,
            0px 0px 30px 210px #f00,
            0px 0px 0px 240px #000,
            0px 0px 6px 244px #fff;
    }
    
        </style>
    </head>
    <body>
    
    <div class="blackhole"></div>
    
    </body>
    </html>
    Last edited by ronpat; Dec 25, 2012 at 21:20. Reason: Edit code

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,528
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Nice example Ron

    Off Topic:


    Keep an eye out as I have some CSS quizzes lined up for the new year to keep you busy

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Great stuff folks. I recently decided to move into the 21st century with my (diy) webdesign, and still got a lot to learn about CSS. This is one thread I'll keep an eye on.

  8. #8
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    I'm teaching a friend CSS. I've went over the basics of HTML and CSS for here and bought a text book for her to use, but I figured it might be fun, useful to share the lessons and tests I'm preparing for her here in a thread - both to log them. I'm not that experienced at teaching, so feedback on that aspect of it is welcome, as is ideas for exercises. For reference, she's an art student with a background in photography.

    The first test is draw a centered bull's eye. The target render is attached, the HTML she is working from is as follows:

    Code html:
    <!DOCTYPE html>
    <html>
      <body>
        <div><div><div></div></div></div>
      </body>
    </html>

    EXPERT CHALLENGE: Vertically center the bull's eye. This isn't part of her lesson so isn't shown in the target render.
    Hi Michael,

    When I saw your image from first sight, I thought about using border-radius and background-image, next with position or margin and padding to have these div vertically center, do we have any way to do this?

    Here is my answer, I tried a bit
    div div div {
    width: 100px;
    height: 100px;
    background-color: green;
    }
    div div {
    width: 150px;
    height: 150px;
    background-color: red;
    top: 25px;
    }
    div {
    width: 200px;
    height: 200px;
    background-color: yellow;
    margin: auto;
    border-radius: 200px;
    position: relative;
    }
    Last edited by thovo; Dec 31, 2012 at 03:06. Reason: Update anwser


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •