Teaching a friend CSS - Lessons log

HTML & CSS
1

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:


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

2

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

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

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 

<!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>
6

Nice example Ron :slight_smile:

Off Topic:

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

7

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

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?:slight_smile:

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