Lesson 109 23 aug13-1430-ay

Unit 1: Web FundamentalsLesson 9: Separation of Concerns

August 23, 2013

2

Lesson 9: Separation of Concerns

Introduction to HTML

Learning to Use HTML

HTML and Email

History and Future of the

Web

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4



Build understanding Develop skills

3

Recap from last time (I)

• Creating a CSS file is just as easy as making an HTML file

• CSS always needs to be paired with HTML for the styling to take effect

4

Recap from last time (II)

• The HTML code must tell the browser where to find the matching CSS file

• There are infinite possibilities in styling a website!

5

Why do we do it this way?

• We’ve already learned how to write our own HTML and CSS files and link them together

• But why do we need TWO sets of code? Wouldn’t it be easier to just combine the two files into one?

6

Why do we separate HTML and CSS?

1. Saves time by reusing code

2. Helps us debug our code

3. Keeps us organized

7

Reusing code saves a lot of time! (I)

• We saw in Lesson 8 that we had to include a line of code in our HTML to link it with our CSS file

<html><head>

<link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”></head>

<body>…

This line tells the browser to look for a CSS file called “smelly-cat.css”

8

Reusing code saves a lot of time! (II)

• But what if we had two HTML pages that we wanted to style the same way? Would we need a second CSS file?

• Nope. All we have to do is include the same line of code in both HTML files to tell the browser where to find the one CSS file to use

<html><head>


<body>…

<html><head>


<body>… HTML file #1 HTML file #2

9

Reusing code saves a lot of time! (III)

• Now imagine that instead of two HTML files, we had 100 of them

• Being able to link them all to the same CSS file saves us from having to write 99 more CSS files!

<html><head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”></head>

<body>…


<body>…


<body>…


<body>…


<body>…


<body>…


<body>…

HTML file #1 HTML file #2 HTML file #3 HTML file #4

HTML file #5 HTML file #6 HTML file #7

. . .

10

Reusing code saves a lot of time! (IV)

• Most websites have more than one page but want to keep the same theme across all pages, so they are often reusing CSS code

• They can share font styles, background colors, font sizes, and many other elements

www.codecademy.com www.codecademy.com/about

Both pages share the same navigation bar, and probably the same CSS stylesheet!

11





12

Everyone makes mistakes (I)

• No one is perfect – when we make mistakes while coding, our website won’t look the way we want.

• We then need to debug, or find and fix mistakes in our code

• But sometimes, it’s obvious that something is wrong with your website, but you can’t find the error in your code

13

Everyone makes mistakes (II)

• To find errors more quickly, we need to make sure our code is easy to read and review

• If we combined our HTML and CSS files into one, it would become a lot harder to debug!

• Combining the two results in code bloat, big and messy code that’s difficult to read

14

Everyone makes mistakes (III)

<html><head></head><body> <p>Avoid code bloat!</p></body></html>

body { text-align: center; p {color: red;}}

<html><head> <style type=“text/css”> body {text-align: center;} </style></head><body> <p style=“color: red;”> Avoid code bloat! </p></body></html>

HTML mixed with CSS HTML only

CSS only

This is code bloat!

15

Everyone makes mistakes (IV)

• Remember that code is read many times, but written only once

• Since code is read every time you review, debug, or share files with others, we need to make sure it’s easy to read!

Avoiding code bloat makes code easier to read!

16





17

Separation of concerns (I)

• We’ve seen how avoiding code bloat helps in debugging our code

• It also helps to divide our code into multiple sections that each focus on different areas – this is known as separation of concerns

• This is why it makes sense to split HTML and CSS into two files – HTML focuses on the structure of the page while CSS affects its presentation

18

Separation of concerns (I)

• Dividing our code into two files also makes it easier for us to work on them with others

• One person can focus on changing the HTML structure while another can work on the CSS styling

• If it were combined into a single file, version control would be much harder – it would be more difficult to keep track of the changes everyone was making!

19

Separation of concerns (III)

Header

Footer

Signup form

Login form

• We apply this principle not just to dividing HTML from CSS, but to all the code we write!

• For example, you may want to separate the sections of your code that describe your website’s header, footer, login, and signup

20

Summary (I)

• It’s important to divide our HTML pages from our CSS files

1. It saves us time by reusing code. We can link multiple HTML pages with a single CSS stylesheet.

www.codecademy.com www.codecademy.com/about

Both pages share the same navigation bar, and probably the same CSS stylesheet!

21

Summary (II)

2. It helps us debug our code. By keeping the files separate, it makes our code easier to read, which helps us find our mistakes.

<html><head></head><body> <p>Avoid code bloat!</p></body></html>

body { text-align: center; p {color: red;}}

<html><head> <style type=“text/css”> body {text-align: center;} </style></head><body> <p style=“color: red;”> Avoid code bloat! </p></body></html>

HTML mixed with CSS HTML only

CSS only

This is code bloat!

22

Summary (III)

3. It keeps us organized. Separation of concerns splits our code into sections, which helps us to work together in teams.

Header

Footer

Signup form

Login form

23

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding

Technology

Lesson 109 23 aug13-1430-ay