Difference between revisions of "Designing Solutions Through Programming block 1 Lesson Notes - August 29"

Revision as of 11:50, 29 August 2017

What are we going to learn today?[edit]

Hello Class!

Today in class we will:

review introductions
confirm if many of you have jetbrains IDE (click here for download link for phpstorm) email
- IF more than 90% of the class has the verification email THEN we will setup phpstorm

we will review our HTML
- we will review how to up sublime and google chrome side by side
- we will review how to view source in Google chrome

we will learn some basics about CSS, styling a webage
we will learn the difference between HTML and CSS
we will look at a cool example of how CSS can be used to make the SAME html look really different

we will learn about selectors, using this helpful tool: https://www.w3schools.com/cssref/trysel.asp
We will learn about properties, using this link: https://www.w3schools.com/cssref/
we will code a simple CSS file^[1]:

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

we will create our first solution (see specification, below)

Students who are little less comfortable coding[edit]

Mr. MacKenty is selling an old TV. Here is the text he wants included on an HTML page:

Samsung TV for sale. About 7 years old. Model LE40A551.  Link to documentation: http://www.samsung.com/pl/support/model/LE40A551P2RXXC

Current street price: 590 PLN (http://allegro.pl/tv-samsung-le40a551p2r-40-led-full-hd-usb-hdmi-i6912239584.html). 

We are selling for 450 PLN. 

We are selling TV, stand, remote control (pilot) and power cable. We are not including HDMI cables or video cables. We have used this TV for years and have been happy with the quality. Please contact Bill if interested at 794 333 673 or bmackenty@aswarsaw.org.

Thank you!

<img src="https://static.promoceny.pl/foto/vyrobky/011250/11132.jpg" />

Please:

make an html document from this text
the links should say "click here to see the link"
the text should be spaced apart
the images should be visible
you should use one DIV box, styled with CSS.

Students who are little more comfortable coding[edit]

You will customize a bootstrap template:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 3 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- Bootstrap core CSS -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, Bootstrappers!</h1>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

What is our homework?[edit]

If you haven't finished your solution, please try your best to have it finished by our next class.

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]

Confidence in dealing with complexity
Persistence in working with difficult problems
Tolerance for ambiguity
The ability to deal with open-ended problems
The ability to communicate and work with others to achieve a common goal or solution

Credits[edit]

Icons used with tremendous gratitude by Freepik from flaticon

↑ https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

[1] ttps://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

[1]