Designing Solutions Through Programming block 1 Lesson Notes - August 30: Difference between revisions
Mr. MacKenty (talk | contribs) |
Mr. MacKenty (talk | contribs) |
||
(One intermediate revision by the same user not shown) | |||
Line 46: | Line 46: | ||
* We will then review the box model in CSS using this code as a template. | * We will then review the box model in CSS using this code as a template. | ||
* We will learn linking to other documents | * We will learn linking to other documents | ||
* We will learn to use google chrome inspector to see what element we are working on | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
Line 126: | Line 127: | ||
==[[file:homework.png]] What is our homework? == | ==[[file:homework.png]] What is our homework? == | ||
* Please visit this page: https://developers.google.com/web/tools/chrome-devtools/css/ and: | |||
** read and complete: View an element's CSS | |||
</td> | </td> |
Latest revision as of 09:13, 29 August 2017
What are we going to learn today?[edit]Hello Class! Today in class we will:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is the actual content of the box. We have added a 25px padding, 25px margin and a 25px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
<footer>Copyright © W3Schools.com</footer>
</div>
</body>
</html>
|
What is our homework?[edit]
|
|
How am I being assessed today?[edit]I will assess you formatively today, and make a professional judgement to what extent you understand our learning material. I will use observation, your written work, answers to questions, and contribution to class discussions as data to make my decisions. I normally record my observations in a "evidence of learning" spreadsheet, which I will happily share with you privately if you so wish. I usually need a day or two notice. |
||
Standards we are covering today[edit] |
As a computer scientist, you have:[edit]
|
|
Credits[edit] |