Your SlideShare is downloading. ×
Lesson 109 23 aug13-1430-ay
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 109 23 aug13-1430-ay

12,895
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
12,895
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Unit 1: Web Fundamentals Lesson 9: Separation of Concerns August 23, 2013
  • 2. Lesson 9: Separation of Concerns 2 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 Lesson 8 Lesson 7 Lesson 6 Lesson 5 Lesson 9 Lesson 10 Lesson 11 Lesson 12 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 3
  • 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! 4
  • 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? 5
  • 6. Why do we separate HTML and CSS? 1. Saves time by reusing code 2. Helps us debug our code 1. Keeps us organized 6
  • 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 7 <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 8 <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly- cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly- cat.css”> </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! 9 <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <body> … <html> <head> <link rel=“stylesheet” type=“text/css” href=“smelly-cat.css”> </head> <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 10 www.codecademy.com www.codecademy.com/about Both pages share the same navigation bar, and probably the same CSS stylesheet!
  • 11. Why do we separate HTML and CSS? 1. Saves time by reusing code 2. Helps us debug our code 1. Keeps us organized 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 12
  • 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 13
  • 14. Everyone makes mistakes (III) 14 <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! 15 Avoiding code bloat makes code easier to read!
  • 16. Why do we separate HTML and CSS? 1. Saves time by reusing code 2. Helps us debug our code 1. Keeps us organized 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 17
  • 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! 18
  • 19. Separation of concerns (III) 19 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. 20 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. 21 <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. 22 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 1. Take the follow-up quiz to test your understanding 23