alanbsmith/learn-with-canvas-block-1.md

## learn-with-canvas-block-1.md

      
    Raw
  

              learn-with-canvas-block-1.md
            
          
    Learn HTML & CSS with Canvas

Block 2 Outline
Table Of Contents


Learn HTML & CSS with Canvas

Table Of Contents
Block 1 | HTML & CSS Basics

Initial Setup
Exercise 1 | Add Text
Exercise 2 | Style Text
Exercise 3 | Add Card
Exercise 4 | Style Card
Exercise 5 | Add and Style Button
Exercise 6 | Add Button States


Block 1 | HTML & CSS Basics

Initial Setup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Let's learn HTML/CSS</title>
  </head>
  <body></body>
</html>
Exercise 1 | Add Text

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Let's learn HTML/CSS</title>
  </head>
  <body>
    <h1>Our Title</h1>
    <p>This is a body text.</p>
  </body>
</html>
Exercise 2 | Style Text

You use element tag names as selectors:
h1 {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 21px;
  color: #333333; /* black pepper 400 */
}

p {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  color: #333333; /* black pepper 400 */
}
Or use other identifiers such as class names:
.title {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 21px;
  color: #333333; /* black pepper 400 */
}

.text {
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  color: #333333; /* black pepper 400 */
}
And then apply those identifiers to your elements like this:
<!-- head elements omitted -->
<body>
  <h1 class="title">Our Title</h1>
  <p class="text">This is a body text.</p>
</body>
Exercise 3 | Add Card

<!-- head elements omitted -->
<body>
  <div class="card">
    <h1 class="title">Our Title</h1>
    <p class="text">This is a body text.</p>
  </div>
</body>
Exercise 4 | Style Card

/* title and text styles omitted */
.card {
  border: solid 2px #cdcdcd;
  border-radius: 10px;
  padding: 20px;
  width: 200px;
}
Exercise 5 | Add and Style Button

<!-- head elements omitted -->
<body>
  <div class="card">
    <h1 class="title">Our Title</h1>
    <p class="text">This is a body text.</p>
    <button class="button">Click Me</button>
  </div>
</body>
/* title, text, and card styles omitted */
.button {
  background-color: #0875e1; /* blueberry 400 */
  border: none;
  border-radius: 40px;
  color: #ffffff; /* white or french vanilla 100 */
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 32px;
}
Exercise 6 | Add Button States

/* title, text, and card styles omitted */
.button {
  background-color: #0875e1; /* blueberry 400 */
  border: none;
  border-radius: 40px;
  color: #ffffff; /* white or french vanilla 100 */
  font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 32px;
}

.button:hover {
  background-color: #005cb9; /* blueberry 500 */
  cursor: pointer;
}