From 30419b2c90432f360f3b914ab70708367bb68f94 Mon Sep 17 00:00:00 2001 From: Heather Payne Date: Sun, 15 Sep 2013 21:33:00 -0400 Subject: [PATCH 1/8] fixed a formatting issue on title slide --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index e42202e..87a91ba 100755 --- a/index.html +++ b/index.html @@ -66,7 +66,6 @@

Introduction to HTML & CSS


-

( Interactive code slides thanks to CoderDeck. Also, thanks to Pearl Chen and Mark Reale for creating the foundation for today's content. )

From bed4dbcc8c98b6beec87da9c888512124076a091 Mon Sep 17 00:00:00 2001 From: Heather Payne Date: Sat, 21 Sep 2013 08:54:17 -0400 Subject: [PATCH 2/8] removed styles in blank.html because they're not actually supposed to be there --- Project/.DS_Store | Bin 12292 -> 12292 bytes Project/images/.DS_Store | Bin 6148 -> 6148 bytes index.html | 9 +++++++-- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/Project/.DS_Store b/Project/.DS_Store index 34cd67ed6ec5e5b73adc0a64beb695b6fd9dffa0..77b0c93e97e8b12639e82be01aeb8d0aeb9e2148 100644 GIT binary patch delta 42 wcmZokXi3;$Ex^b>*+#&ak#BN=fHos9kQAA`L7fXWy-fHIo@|8Fe3&$yYL<1aq|IF=X; delta 95 zcmZoMXffDe&%!ukvI9#28^at121d2X+gQ@r78+<2Nu``WHK59nf;UBup00%Rsi(|0J)m~|8Fe3&$yYL<1aq|Ka>}l diff --git a/index.html b/index.html index 87a91ba..6aba5c0 100755 --- a/index.html +++ b/index.html @@ -23,6 +23,11 @@ - + - +
- +
@@ -69,7 +69,7 @@

I'm a H2 heading

Welcome to Ladies Learning Code's

Introduction to HTML & CSS

- +

( Interactive code slides thanks to @@ -234,7 +234,7 @@

Speaking of CSS...

What is CSS?

CSS (Cascading Style Sheets) is what makes websites look nice.

-

While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.

+

While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.

For example, p means paragraph in HTML. If we wanted to make all of our paragraphs red and underlined, we'd do something like:


 p {
@@ -250,6 +250,7 @@ 
Let's add this to our HTML document

       
To indicate that we're adding CSS to blank.html, we need to find the opening and closing <style> tags between our opening and closing <head> tags.

 

   <!doctype html>
+  <html>
     <head>
       <title>Ladies Learning Code HTML and CSS</title>
       <style>
@@ -332,7 +333,7 @@ 
HTML tags

   </body>
 </html>
 
-
   
+
@@ -357,7 +358,7 @@

HTML tags

</head> <body> </body> -</html> +</html> 
 <!DOCTYPE html>
 <html>
@@ -366,7 +367,7 @@ 
HTML tags

   </head>
   <body>
   </body>
-</html>
+</html>
@@ -501,8 +502,8 @@

A note about organization

-

CSS basics

-
+

CSS basics

+
@@ -510,7 +511,7 @@

CSS is closely paired with HTML

CSS doesn't do anything on its own, it's the presentation layer on top of a content base

If HTML is the beams of the house, CSS is the layout, paint, and decorations

- +

CSS Syntax

@@ -518,10 +519,10 @@

CSS Syntax

A CSS rule is made up of a selector and one or more declarations

A selector tells the browser what element(s) we are styling.

It looks like this:

- 
h2 {}
-

The above selector will select all <h2> elements and apply our styles to them. Our styles will go between the curly brackets.

+ 
h2 {}
+

The above selector will select all <h2> elements and apply our styles to them. Our styles will go between the curly brackets.

- +

CSS Syntax

@@ -530,11 +531,11 @@

CSS Syntax

A property tells the browser what we are modifying (ex. font, colour, size)

A value tells the browser how to modify the property (ex. Arial, green, small)

A declaration looks like this:

- 
background-color: green;
+ 
background-color: green;
-
+

CSS Syntax

background-color: green;

The value (the part after the colon) is specific to the property type

@@ -557,7 +558,7 @@

Adding CSS to HTML

</style> </head> <body> - + </body> </html> @@ -626,7 +627,7 @@

Using Hex Codes

body { color: #444444; } - +

Check outhttp://colorpicker.com for more awesome colours!

@@ -645,13 +646,13 @@

Styling Type with CSS

-
-

Styling Type with CSS, Part 2

+
+

Styling Type with CSS, Part 2

Let's change the font to a sans-serif like Helvetica: 


   body {
     color: #444444;
-    font-family: Helvetica, Arial, sans-serif;    
+    font-family: Helvetica, Arial, sans-serif;
   }

The font-family property accepts a list of font names: the first font is your first-choice font, the next ones are fallbacks in case that font is not available. Not all fonts are commonly available, so try to stick to 'web-safe' fonts like:

@@ -666,7 +667,7 @@

Styling Type with CSS, Part 2

-

Changing Font Sizes

+

Changing Font Sizes

If we want to make our <h1> and <h2> tags a bit bigger:


 h1 {
@@ -690,7 +691,7 @@ 
Changing Line Height
- +

Styling Images

@@ -703,7 +704,7 @@

Styling Images

img { border: 1px solid grey; } - +
@@ -724,13 +725,13 @@

Targeting an Element with a Class

We can write a selector in our css to target the element we added a class to using a . 


 p.classname {}
-
+

And then apply the styles we want to only the item with the class:


 p.classname {
   color: red;
 }
-
+
@@ -756,16 +757,16 @@

Exercise: Style Profile Image

Solution: Style Profile Image

Your HTML should look something like this:


-<img class="profile" src="images/profile.jpg"> 
+<img class="profile" src="images/profile.jpg">

And your CSS should look something like this:


 img.profile {
   border: 1px solid grey;
   width: 200px;
-  height:200px;  
-}  
-
+ height:200px; +} +
@@ -776,8 +777,8 @@

Adding More Classes

Add a class of "favourite" to each of the four images.


 <img class="favourite" src="images/kitten.jpg" >
-
-

Add some styles to your images, using things like width, height, and border.

+ +

Add some styles to your images, using things like width, height, and border.

@@ -795,13 +796,13 @@

More Stuff You Can Do

height: 200px; border-radius: 50%; } - +
-

Don't worry if it seems like there are a lot of CSS properties to remember. Keep looking them up on the internet and they'll sink in eventually. Even the pros have to look things up every once in a while :)

+

Don't worry if it seems like there are a lot of CSS properties to remember. Keep looking them up on the internet and they'll sink in eventually. Even the pros have to look things up every once in a while :)

@@ -811,11 +812,11 @@

This is the trickiest part of CSS, don't worry if it seems confusing at firs

The CSS "Box Model" describes the way CSS styles the size and spacing of HTML elements.

To understand the box model, we need to understand how the browser "sees" HTML elements.

To the browser, every HTML element is a rectangular box.

-

If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:

+

If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:

-
+
@@ -842,22 +843,22 @@

Margin and Padding

background: pink; } -
  • So far, this looks pretty awfull. All the elements are too close to each other!
    • +
  • So far, this looks pretty awfull. All the elements are too close to each other!
    • -
    +

    Margins

    There are two CSS properties for adding space around our elements: margin, and padding

    The margin property adds space around the element, outside of the border:

    
 h2 {
   margin: 40px;
-}  
-
    -

    This code adds 40px of space on every side of the element.

    +} + +

    This code adds 40px of space on every side of the element.

    @@ -871,9 +872,9 @@

    Padding

    margin: 40px; padding: 40px; } - -

    This code adds 40px of space to every side of the element, but it does so within the border.

    - + +

    This code adds 40px of space to every side of the element, but it does so within the border.

    +
    @@ -897,14 +898,14 @@

    More on Margins and Padding

    margin-top: 40px; margin-bottom: 40px; } - +

    The same goes for padding and border:

    
 h2 {
   padding-bottom: 40px;
   border-left: 1px solid red;
 }
-
    + @@ -928,7 +929,7 @@

    Solution: Box Model

    padding: 5px; margin: 10px; } - + @@ -940,8 +941,8 @@

    Centering the Logo

    img { margin: 0 auto; } - -

    The 0 sets both the top margin and the bottom margin, and the auto sets both the left and right margins.

    + +

    The 0 sets both the top margin and the bottom margin, and the auto sets both the left and right margins.

    @@ -951,13 +952,13 @@

    Centering the Logo

    Add a class called logo to your logo <img> tag:

    
 <img class="logo" src="images/logo.png">
-
    -

    Then write a selector in your CSS and apply the margin property:

    + +

    Then write a selector in your CSS and apply the margin property:

    
 img.logo {
   margin: 0 auto;
 }
-
    + @@ -970,8 +971,8 @@

    Nothing Happened!

    -
    -

    Nothing Happened, Part 2

    +
    +

    Nothing Happened, Part 2

    This is because images are inline elements. Inline elements do not take up the full width of the page, they only take up as much space as the content requires.

    Most elements, like <h2>, <p>, or <ul> take up the whole width of the page, these are called block elements.

    Because our logo element is only as wide as the image, we can't centre it relative to the page. Luckily, this is easy to fix: we just tell the <img> tag to behave like a block element instead, by setting the display property.

    @@ -980,7 +981,7 @@

    Nothing Happened, Part 2

    margin: 0 auto; display: block; } - +
    @@ -995,7 +996,7 @@

    Other Inline Elements

    Layout: Section by Section

    Our site looks much better now, but now it's time to style the individual sections.

    We'll need a way to target each section independently, grouping elements within the same section together, creating a layout.

    -

    Conveniently enough, HTML provides the <section> tag. We'll wrap each section within a <section> tag and add a class to each one, so we can style each section using CSS. +

    Conveniently enough, HTML provides the <section> tag. We'll wrap each section within a <section> tag and add a class to each one, so we can style each section using CSS.

    @@ -1010,8 +1011,8 @@

    Banner Section

    <img> <h1>...</h1> <p>...</p> -</section> - +</section> + @@ -1021,15 +1022,15 @@

    Banner Section CSS

    • Target our new <section> with a selector in your CSS
      • 
-section.banner {}  
-
      +section.banner {} +
    • Add some padding to the top and bottom of the section to give our logo and text some space
      • 
 section.banner {
   padding-top: 110px;
   padding-bottom: 110px;
 }
-
      +
    @@ -1040,7 +1041,7 @@

    Adding a background image

  • The CSS background-image property lets you specify a path to an image in much the same way as you would in an HTML <img> tag:
    • 
 background-image: url('images/background.jpg');
-
    + @@ -1066,7 +1067,7 @@

    Solution: Add a background image

    color: #ffffff; text-align: center; } - + @@ -1095,8 +1096,8 @@

    CSS Child Selectors

    >You can write a child selector to select only those tags which are children of another tag.

    We add a space between the parent and the child selector to specify:

    
-section img {}  
-
    +section img {} +

    The above selector will select only those <img> tags which are nested within <section> tags.

    @@ -1105,9 +1106,9 @@

    CSS Child Selectors

    CSS Child Selectors

    To target the <p> tag within the banner <section>, we use:

    
-section.banner p {}  
-
    -

    Try increasing the font-size of the selected <p> tag.

    +section.banner p {} + +

    Try increasing the font-size of the selected <p> tag.

    Select the <h1> tag in the banner section in the same way and capitalize the text using text-transform: uppercase. Your CSS should look something like this:

    
 section.banner p {
@@ -1116,7 +1117,7 @@ 
    CSS Child Selectors
    
 section.banner h1 {
   text-transform: uppercase;
 }
-
    + @@ -1142,7 +1143,7 @@

    The "About" Section

    section.about { background: url('images/pattern.png'); } - + @@ -1158,7 +1159,7 @@

    Centre-aligning the header

    section.about h2 { text-align: center; } - + @@ -1166,7 +1167,7 @@

    Centre-aligning the header

    CSS Floats

    We want to align the profile image to the left, and allow the text to wrap around it. We do this using CSS Floats.

    Remember how all HTML elements are rectangular boxes stacked on top of each other?

    - +

    We have to break that stacking flow by floating the image to the side. This will cause the text after the image to move up beside it, because we've disrupted the flow of the rectangular boxes.

    @@ -1178,9 +1179,9 @@

    CSS Floats

    img.profile { float: left; } - -

    This has 'floated' our image to the left, but there's a problem...can you figure out what it is?

    - + +

    This has 'floated' our image to the left, but there's a problem...can you figure out what it is?

    + @@ -1195,7 +1196,7 @@

    CSS Floats

    section.about { overflow: hidden; } - + @@ -1213,7 +1214,7 @@

    Next Section: Favourites

    <img class="favourite" src="images/kitten.jpg"> <img class="favourite" src="images/kitten.jpg"> </section> - + @@ -1221,14 +1222,14 @@

    Next Section: Favourites

    Centre-aligning

    Let's write a selector for the section we just created:

    
-section.favourites {}  
+section.favourites {}
    -

    And centre-align it:

    +

    And centre-align it:

    
 section.favourites {
   text-align: center;
 }
-
    + @@ -1253,7 +1254,7 @@

    Solution: Contact Section

    <a href="https://">...</a> </section> -

    And your CSS:

    +

    And your CSS:

    
 section.contact {
   text-align: center;
@@ -1262,7 +1263,7 @@ 
    Solution: Contact Section
    
 section.contact img {
   margin: 20px;
 }
-
    + @@ -1275,7 +1276,7 @@

    Styling Multiple Sections at Once

    <section class="about box"></section> <section class="favourites box"></section> <section class="contact box"></section> - + @@ -1286,29 +1287,29 @@

    Styling Multiple Sections

    
 section.box {}
    -

    And add a bunch of padding to all our sections:

    +

    And add a bunch of padding to all our sections:

    
 section.box {
   padding: 50px 100px;
 }
-
    + -
    -

    Styling Multiple Sections, Continued

    +
    +

    Styling Multiple Sections, Continued

    We can also use our box class to target the headings in each of these sections.

    Since we're targeting both our <h2> and <h3> tags, we'll write a selector for both, separating them with a comma:

    
 section.box h2, section.box h3 {}
-
    +

    And change the colour of our headings:

    
 section.box h2, section.box h3 {
   color: #A8258D;
 }
-
    +
    @@ -1325,7 +1326,7 @@

    Making our background image fixed

    section.banner { background-attachment: fixed; } - +
    @@ -1337,7 +1338,7 @@

    Adding Custom Fonts

    Find the code in Step 3 of the instructions, and paste it into the <head> of your HTML document (remember how the <head> section sends invisible instructions to our browser?)

    
 <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
-
    + @@ -1350,7 +1351,7 @@

    Adding Custom Fonts, Part 2

    h1, h2, h3 { font-family: 'Oswald', sans-serif; } - + @@ -1360,14 +1361,14 @@

    Adding a Menu

    Let's add a menu to the top of our document so our users can navigate.

    Menus are commonly marked up as lists with links inside each list item.

    There are two types of lists in HTML: ordered and unordered (numbered and bulleted). -

    Since we don't need numbers, we'll use an unordered list, which is marked up with <ul></ul> tags to indicate where the list starts and ends. +

    Since we don't need numbers, we'll use an unordered list, which is marked up with <ul></ul> tags to indicate where the list starts and ends.

    Each bullet or "list item" in an unordered list is marked up as an <li></li> tag nested within the <ul> tag.

    
 <ul>
   <li>One list item</li>
   <li>Another list item</li>
 </ul>
-
    + @@ -1380,7 +1381,7 @@

    Adding a Menu, Continued

    <li><a href="#favourites">Favourites</a></li> <li><a href="#contact">Contact</a></li> </ul> - + @@ -1397,7 +1398,7 @@

    Adding a Menu, Continued

    border-bottom: 1px solid #434A5C; background: #ffffff; } - + @@ -1413,7 +1414,7 @@

    Styling the Menu

    display: inline-block; padding: 20px 35px; } - + @@ -1428,7 +1429,7 @@

    Styling the Menu Links

    text-transform: uppercase; font-family: 'Oswald', sans-serif; } - + @@ -1444,7 +1445,7 @@

    Making the menu "sticky"

    left: 0; width: 100%; } - + @@ -1456,7 +1457,7 @@

    Getting the links to work

    <section id="about" class="about box"></section> <section id="favourites" class="favourites box"></section> <section id="contact" class="contact box"></section> - + @@ -1481,13 +1482,13 @@

    Your site may be beautiful, but it might not be very mobile-friendly. Luckil

    Ladies Learning Code regularly offers "Intro to Mobile Web" workshops - perhaps we'll see you at the next one?

    Check out our upcoming events across Canada here.

    - +

    Thank you!

    - + From 0d762d8efee48a0197c82bb460c773922e9bf21d Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Sun, 27 Apr 2014 20:55:41 -0400 Subject: [PATCH 6/8] remove coderdeck attribution. Closes #5. --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 674839f..2d34be9 100755 --- a/index.html +++ b/index.html @@ -72,8 +72,7 @@

    Introduction to HTML & CSS


    - ( Interactive code slides thanks to - CoderDeck. Also, thanks to Pearl Chen and Mark Reale for creating the foundation for today's content. )

    + Thanks to Pearl Chen and Mark Reale for creating the foundation for today's content.

    From 29b6efda605afce80fec2a3c46d3a07255aab7fe Mon Sep 17 00:00:00 2001 From: Tessa Thornton Date: Sun, 27 Apr 2014 21:02:20 -0400 Subject: [PATCH 7/8] add margin-right on profile image. Closes #12 --- Project/final.html | 5 ++--- index.html | 2 ++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/Project/final.html b/Project/final.html index e806817..8aaf66c 100644 --- a/Project/final.html +++ b/Project/final.html @@ -1,4 +1,4 @@ - + Ladies Learning Code HTML and CSS @@ -6,7 +6,7 @@