Teaching a friend CSS - Lessons log.

**Michael Morris** · Dec 23, 2012 21:48

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.

**Elena_S** · Dec 24, 2012 05:34

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

**Paul O'B** · Dec 24, 2012 08:11

Originally Posted by Michael Morris

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.)

**Michael Morris** · Dec 24, 2012 08:39

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.

**ronpat** · Dec 25, 2012 21:16

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>

**Paul O'B** · Dec 26, 2012 04:48

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

**benbob** · Dec 30, 2012 16:53

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.

**thovo** · Dec 31, 2012 02:53

Originally Posted by Michael Morris

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;
}

User Tag List

Thread: Teaching a friend CSS - Lessons log.

Thread Tools

Display

Teaching a friend CSS - Lessons log.

When does CSS become just TOO MUCH fun?

Bookmarks

Bookmarks

Posting Permissions