WDD Learning Modules

CSS Introduction - Ponder activities.

Preparation

Make sure you read through the Prepare section for this topic. You will also need your editor open.

Activity 1

Copy the HTML code below into your own HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All About Me</title>
    
</head>
<body>
    <h1>About Me</h1>
    <img src="https://cdn.pixabay.com/photo/2016/03/26/17/44/college-1280964_1280.jpg">
    <h2>Sue Smith</h2>
    <h2>Suzy</h2>
    <p>Howdy ya'll. Let me introduce myself. I'm married to my eternal companion, Fred, and have 6 wonderful children. I am from Houston, TX. It is always hot (or cold) here, but it can be a wonderful and exciting place.</p>
    <p>I have been a member of the church of Jesus Christ of Latter-day Saints for 20 years. The things I love about the church are, Jesus Christ, prophets, etc.</p>
    <p>Currently, I am a teacher and love to work with young children. I am pursuing a masters of education and plan to become a principal. I love technology, especially building websites. Watching weird code turn into beautiful and amazing web pages can be very exciting.</p>
    <p>I enjoy doing a lot of things. I welcome getting to know all of my classmates. Thank you for looking at my web page.</p>
</body>
</html>

Add a link element to the head section under the title and link it to an external CSS file. Add CSS to that new linked file. I used the darkred web color in the image below. Try some CSS declarations to style the page. Referring back to the previous activity in this learning module, see if you can get it to look something like this:

Suzy's About Me Page