Unit 1: Web Fundamentals
Lesson 11: Utilities: Reusing Code
August 24, 2013
Lesson 11: Reusing Code
2
Introduction
to HTML
Learning to
Use HTML
HTML and
Email
History and
Future of the
Web
HTML and
...
Recap from last time
• There are three ways to work with CSS:
– In a separate stylesheet (we want to do this)
– Inline wit...
Learning to read code is important
• Websites take a long time to build, but you DON’T have to start
from scratch
• Readin...
The DRY Principle saves us time
• The DRY Principle: Don’t Repeat Yourself
• You can reuse other people’s code so we are n...
Using open source code
• Using publicly shared code is NOT cheating (yay!)
• Sharing our code helps everyone learn from ea...
Many websites use prewritten templates of code
7
No need to write CSS –
Wordpress has already
done it for you!
A sample we...
Knowing CSS lets you customize the templates
8
You can now
customize the CSS
It’s much faster than
building the website
fr...
Wordpress has many templates to choose from
9
You can also take code and incorporate it into
your own website (I)
10
• Let’s say you want to incorporate this datepicker...
You can also take code and incorporate it into
your own website (II)
11
It’s as easy as copy
and paste!
Twitter Bootstrap is a framework that creates
code for you
• Twitter Bootstrap is a framework (a toolkit of all kinds of b...
Bootstrap can make a site go from this…
13
Notice the very simple links
And the plain text
And the little sign up link
…to this!
14
Links now look great in a navigation bar
Text now has
some pizzazz
And our sign up link has
become a button!
Bootstrap is no more than a bunch of files
15
• Bootstrap is just a set of CSS and other files that contain the styling
fe...
Summary (I)
• Learning to read code well is important – we will spend more time
reading other people’s code than writing c...
Summary (II)
• Websites such as Wordpress provide many prewritten templates of
code to choose from
• Twitter Bootstrap is ...
What to do on your own
1. Go to URL to complete the Codecademy course online
2. Do the practice set on the material learne...
Upcoming SlideShare
Loading in...5
×

Lesson 111 24 aug13-1430-ay

12,787

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,787
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lesson 111 24 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 11: Utilities: Reusing Code August 24, 2013
  2. 2. Lesson 11: Reusing Code 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. 3. Recap from last time • There are three ways to work with CSS: – In a separate stylesheet (we want to do this) – Inline with HTML tags – Embedded in the <head> of the HTML file • When conflicts occur, 3 Inline CSS has highest priority Embedded CSS has second priority Separate stylesheets have lowest priority
  4. 4. Learning to read code is important • Websites take a long time to build, but you DON’T have to start from scratch • Reading code helps us understand other people’s work so we can use it in our own websites • Learning to read code is like learning to read a book. Reading helps us improve our writing, vocabulary, and grammar skills. 4 =
  5. 5. The DRY Principle saves us time • The DRY Principle: Don’t Repeat Yourself • You can reuse other people’s code so we are not rewriting the same things over and over 5 Complicated code you DON’T have to write because you can copy and paste
  6. 6. Using open source code • Using publicly shared code is NOT cheating (yay!) • Sharing our code helps everyone learn from each other so we can build things faster and better • Since we can read other people’s code publicly, it’s an open source of knowledge 6 (kind of like an encyclopedia)
  7. 7. Many websites use prewritten templates of code 7 No need to write CSS – Wordpress has already done it for you! A sample website you can build on the Wordpress platform
  8. 8. Knowing CSS lets you customize the templates 8 You can now customize the CSS It’s much faster than building the website from scratch! “Behind-the-scenes” code for the Wordpress sample page
  9. 9. Wordpress has many templates to choose from 9
  10. 10. You can also take code and incorporate it into your own website (I) 10 • Let’s say you want to incorporate this datepicker into your website…
  11. 11. You can also take code and incorporate it into your own website (II) 11 It’s as easy as copy and paste!
  12. 12. Twitter Bootstrap is a framework that creates code for you • Twitter Bootstrap is a framework (a toolkit of all kinds of buttons, tables, and typography) to help people build their websites faster • It was designed by Twitter employees and released to the public for free! 12 Buttons Dropdown menus Navigation bars
  13. 13. Bootstrap can make a site go from this… 13 Notice the very simple links And the plain text And the little sign up link
  14. 14. …to this! 14 Links now look great in a navigation bar Text now has some pizzazz And our sign up link has become a button!
  15. 15. Bootstrap is no more than a bunch of files 15 • Bootstrap is just a set of CSS and other files that contain the styling features we want • It’s easy to download and use right away
  16. 16. Summary (I) • Learning to read code well is important – we will spend more time reading other people’s code than writing code ourselves • Remember the DRY Principle: Don’t Repeat Yourself. Reuse code whenever possible! • Using open source code that has been shared on the internet can help us save a lot of time 16 =
  17. 17. Summary (II) • Websites such as Wordpress provide many prewritten templates of code to choose from • Twitter Bootstrap is an example of a free framework that gives us a helpful toolkit for styling our website • Frameworks like Bootstrap can transform our website without us writing a single line of code! 17
  18. 18. 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 18
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×